{ "id": "v1-sk-1434", "long_id": "v1.skeuomorphism.landing.s01.p04.t03.u04", "name": "Skeuomorphism landing (stitched cloth, glossy keys)", "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 product landing page from the years when web pages imitated physical materials: glossy bevelled buttons, bars with a highlight along the top edge, wells pressed into the surface, woven cloth with dashed stitching, and text that looks engraved or embossed by a one-pixel shadow. It was the common look of desktop and phone app sites between about 2009 and 2013, built for a fixed centred column on a softly textured page. Type is small and quiet (12px humanist sans body, light Helvetica headlines) and all the richness is in the surfaces.", "url": "https://chrono.skin/s/v1-sk-1434", "preview_url": "https://chrono.skin/s/v1-sk-1434/specimen.html", "files": { "STYLE.md": "# Skeuomorphism landing (stitched cloth, glossy keys)\n\n## Summary\n\nA product landing page from the years when web pages imitated physical materials: glossy bevelled buttons, bars with a highlight along the top edge, wells pressed into the surface, woven cloth with dashed stitching, and text that looks engraved or embossed by a one-pixel shadow. It was the common look of desktop and phone app sites between about 2009 and 2013, built for a fixed centred column on a softly textured page. Type is small and quiet (12px humanist sans body, light Helvetica headlines) and all the richness is in the surfaces.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 960px (`.ds-page__wrap`). The page does not stretch; only the page texture and the navigation bar's fill run the full window width.\n- Order of the home page: full-width navigation bar (`--size-nav`, 44px high), hero, a row of four cloth blocks, then a sheet in `--color-canvas` with a sidebar beside it, a stitched closing band in the inverse fill, a centred footer. The navigation bar and the footer are written once and stay in place on every view.\n- Two columns below the grid: `.ds-page__sheet` (flexible, 740px) and `.ds-page__aside` (`--size-sidebar`, 200px) on the right, separated by `--size-gutter` (20px). The sidebar has no box; it sits straight on the page texture.\n- The sheet is cut into `.ds-section` bands. Each band fades from white to `--color-surface-alt` at its bottom edge, so sections are separated by that fade and not by rules or gaps. Short parts share a band as `.ds-section__half` columns in a `.ds-section__split` (the three edition cards of the pricing view, kept at one height by `.ds-section__split--even`), and the sidebar carries two to five blocks, so that the sheet and the sidebar end near each other; the columns are one height, and the last band of the sheet grows when the sidebar is the longer.\n- Inner pages keep the navigation bar, the 960px column, the sheet and the 200px sidebar on the right; the hero, the cloth grid and the closing band are left out. In their place the breadcrumb sits straight on the page texture (`.ds-page__trail`), 10px above the sheet (`.ds-page__columns--inner`). The sheet opens with `.ds-page-header` (title and one line on the left, keys on the right), which fades from white into the tinted `.ds-page__head` strip directly under it; that strip holds the `.ds-tabs` segmented control on the left and a small count on the right. Below come ordinary `.ds-section` bands, two or three per page: the `.ds-stats` well and the table with its pagination in a `.ds-section__foot`, or a list and an empty well, or the form and a window. A page without tabs keeps the strip and puts two small counts in it. The sidebar lists the parts of the current page's subject.\n- Views: the specimen is one small site of five screens, one showing at a time (`.ds-view`). `overview` is the home page: hero, cloth grid, the sheet with the introduction and the recently filed list, the closing band. `pricing` shows the three editions as cards, a table comparing them and two questions. `binder` is the example household binder on its Pages tab: the counter well, the table of bills with its status labels, pagination. `folders` is the same binder's Folders tab: the list of folders and the empty well of a new one. `settings` is its Settings tab: notices, the form with its keys, and the window that confirms moving the library. The three binder views share one page header and are joined by the segmented control; the navigation bar marks Binders as current for all three.\n- Spacing scale: `--space-1` 3px (inside badges, between list lines), `--space-2` 6px (cell and row padding, icon gaps), `--space-3` 10px (between buttons, form rows), `--space-4` 14px (control side padding, panel padding), `--space-5` 20px (between blocks, grid cell padding), `--space-6` 30px (section padding), `--space-7` 50px (hero top padding, hero column gap).\n- Control heights: `--size-pill` 22px (navigation pills, small buttons, pagination keys), `--size-control` 28px (buttons, inputs), `--size-control-large` 40px (the hero action).\n- `--size-hair` (1px) is the offset of every highlight and engraving shadow; `--size-weave` (3px) is the pitch of the cloth weave.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Cool metal grey, charcoal and saddle brown. `--color-page` #c8cbd0 is the grey page; `--color-canvas` and `--color-surface` #f0f0f0 the sheet, which is pale grey and not white; `--color-surface-alt` #e8e8e8 wells and alternate rows; `--color-surface-strong` #d8d8e0 toolbar strips. Only form fields are white (`--color-input` #ffffff).\n- `--color-bar` #31333a (charcoal, white text) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #c8c8d0 with #333333 text is title strips and the segmented control; `--color-inverse` #3a6683 (navy, white text) only the closing band.\n- Text is `--color-text` #333333, meta `--color-text-muted` #5e5e5e, headings `--color-heading` #303038; sidebar and panel titles and form labels are the dark brown `--color-heading-alt` #554230.\n- Links are `--color-link` #1178b5, hover `--color-link-hover` #0a4e9d, visited the grey blue #607890, active magenta #951c83.\n- `--color-button` #88502b (saddle brown, white text) is the one primary action colour; the secondary key is `--color-button-secondary` #e8e8e8 with #333333 text.\n- `--color-accent` #c73dab (magenta) for badges, `--color-accent-alt` #fca904 (amber) for \"new\" markers; `--color-success` #5b9a00, `--color-warning` #fca904, `--color-danger` #8e2126. Notices are quiet: `--color-notice` #d8d8e0 with #303038 text.\n- `--color-fill-1` to `--color-fill-4` (#3a6683 navy, #88502b brown, #5b9a00 green, #31333a charcoal) colour the grid blocks only; white text on all four.\n- Borders are firmer than on a white style: `--color-border` #d8d8e0, `--color-border-strong` #aaaaaa.\n- `--font-body` and `--font-ui` are Verdana (Geneva, DejaVu Sans); `--font-heading` is Georgia, standing in for the era's commercial slab serif; `--font-mono` Courier New.\n- `--text-base` 12px at `--line-body` 1.5; `--text-small` 10px for meta, badges and footer; `--text-large` 14px for the lead.\n- Controls, navigation, tabs and table heads are small bold capitals: `--text-ui` 11px, `--weight-ui` 700, `--ui-transform: uppercase`.\n- Headings are regular-weight serif: `--weight-heading` and `--weight-display` 400; `--text-h3` 14px (bold), `--text-h2` 20px, `--text-h1` 26px, `--text-display` 36px at `--line-display` 1.15. Emphasis inside the headline is the bold cut.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Brushed metal and matte bars. `--fill-page` is brushed metal: horizontal hairlines at a 3px pitch and a 140px glare at the top over `--color-page`. `--fill-bar` is matte: a 2px dark lip at the top, then an almost flat fill.\n- `--fill-bar-alt` (title strips, tabs) and `--fill-inverse` (closing band) carry diagonal 135deg stripes.\n- Corners are nearly square: `--radius-control`, `--radius-panel` and `--radius-pill` 3px, so navigation items and badges are tags, not lozenges; `--radius-page` 6px for blocks and wells.\n- Keys are bevelled, not glossy: `--fill-button` runs only from 12% lighter to 10% darker, and `--shadow-control` adds a light inner top edge, a dark inner bottom edge and a light line below, as if set into the metal. No drop shadow under keys.\n- Panels and the sheet are edged, not floated: `--shadow-panel` is a 1px ring at 14%, a faint 0 1px 2px at 7% and a light line beneath. `--shadow-dialog` is a ring and 0 1px 4px at 40%.\n- `--shadow-text` is a dark line one pixel below light text (0 1px 0 at 30%). `--fill-input` is flat. `--focus-ring` is 1px solid. `--transition` is none.\n- Pairings this structure uses: `--color-button-secondary-text` on `--fill-button-secondary` (navigation pills, pagination keys) and `--color-button-text` on `--fill-button` (keys, the current navigation pill, the app tile of the page header); `--color-bar-text` on `--fill-bar` (the screen's title bar and current source, table head, dialog title bar) and on the darkened bar colour of pressed \"current\" states (tab, page, count badge); `--color-bar-alt-text` on `--fill-bar-alt` (the window bar); `--color-heading-alt` on `--color-surface-strong` (tab strip, source list); `--color-accent-text` on `--fill-accent` (badges, the ribbon) and on the danger key; `--color-inverse-text` on the four `--color-fill-*` boards and on `--fill-inverse`, which here is the footer band. On the page texture: `--color-heading`, `--color-heading-alt`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the folded ends of the ribbon (a diagonal gradient of `--color-accent` darkened 45% toward `--color-shadow`), the spine of a board (a `--space-3` stripe of `--color-shadow` at 26% with a hairline highlight) and its sheen, the bezel of the device (`--fill-bar-alt` with a hairline and `--shadow-dialog`), the white engraving shadow `0 var(--size-hair) 0 var(--color-canvas)` under dark text on the page and on light glossy fills, the inset well shadow of fields and the empty-state well, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, and `dashed` for the rule of the price card.\n\n## Components\n\n- `.ds-page`: on ``. Paints the textured page. Children: `.ds-page__wrap` (the 960px column), `.ds-page__columns`, `.ds-page__sheet` (the sheet, `--color-canvas` with `--shadow-panel`), `.ds-page__aside`, `.ds-page__head` (tinted toolbar strip at the top of a sheet, under the page header on inner pages; `.ds-page__count` is the small engraved count at its right), `.ds-page__trail` (the breadcrumb's place on the page texture above an inner sheet, under an etched rule) and `.ds-page__columns--inner` (columns that follow the trail closely). `.ds-section` is one band of the sheet, with `.ds-section__title`, and `.ds-section__split` / `.ds-section__half` for two columns inside a band, `.ds-section__split--even` to stretch cards in a split to one height, `.ds-section__head` for a band title with a row of badges at its right, and `.ds-section__foot` for a row under the band's main block (pagination or links left, a count right).\n- `.ds-view`: one screen of the example site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` shows when none is named. It is always a plain block: the columns inside it do the layout.\n- `.ds-nav`: full-width glossy bar. `.ds-nav__inner` centres the content, with the `.ds-brand` at its left; `.ds-nav__items` holds `.ds-nav__item` pills. The current pill is pressed into the bar with an inset shadow: `is-current` on a page of its own, or, in the specimen, one selector per view that matches the pill whose `href` names the showing view. `is-hover` lightens it. `.ds-nav__items--tools` pushes a group to the right; `.ds-nav__item--quiet` is a regular-weight item.\n- `.ds-brand`: the site's mark and name at the left of the navigation bar. `.ds-brand__mark` is a 28px 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 20px 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`: two columns: `.ds-hero__copy` with `.ds-hero__title` (40px, weight 300, embossed), `.ds-hero__lead`, `.ds-hero__actions` (one `.ds-button--large` and at most one text link) and `.ds-hero__note`; and `.ds-hero__shot`, a product window drawn in CSS (`__shot-bar`, `__shot-body`, `__shot-side`, `__shot-source`, `__shot-rows`, `__shot-row`, `__shot-box`). Use it once, directly under the navigation.\n- `.ds-page-header`: the head of an inner page, used once at the top of the sheet in place of the hero. `.ds-page-header__copy` holds `.ds-page-header__title` (28px, weight 300, embossed like the hero headline) and one `.ds-page-header__text` line; `.ds-page-header__actions` on the right holds one primary key and at most one secondary key at the normal 28px height (never the large pill). Its fill runs from white to `--color-surface-strong` so it joins the `.ds-page__head` strip below.\n- `.ds-prose`: running text: h1 (28px light), h2 (20px), h3 (14px bold), paragraphs, lists, `code`, links. `.ds-prose__lead` is a 14px opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for breadcrumbs, footer and meta links. `.ds-links` is a wrapping row of links.\n- `.ds-button`: glossy bevelled key, 28px high, 8px corners. `.ds-button--secondary` is the secondary key; `.ds-button--danger` the same two-tone glossy key in `--color-danger` for a destructive action (delete, remove), kept apart from the other keys; `.ds-button--large` the 40px pill used for the main action of the page; `.ds-button--small` a 22px key. States `is-hover`, `is-active` (pressed, inset shadow), `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px inline glyph. `.ds-buttons` is a row of buttons.\n- `.ds-form`: rows (`.ds-form__row`) with a right-aligned `.ds-form__label` column and a `.ds-form__field`. `.ds-form__input` and `.ds-form__textarea` are inset wells; `.ds-form__select` looks like a secondary key. `is-error` on an input with `.ds-form__error` under it; `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`, where `.ds-form__actions-end` pushes a destructive key to the right edge.\n- `.ds-table`: framed data table with rounded corners. `.ds-table__head` cells take the glossy bar fill; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name` for the leading column, `is-numeric` for right-aligned numbers.\n- `.ds-list`: framed list of ruled rows. `.ds-list__item` (`is-first` on the first) holds `.ds-list__icon` (in `--color-heading-alt`, so it shows on a light or a dark row), `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, and usually a badge at the right.\n- `.ds-panel`: small framed card with a glossy `.ds-panel__title` strip and a `.ds-panel__body`; `.ds-panel__text`, `.ds-panel__price`. For a price box, a download box or a sidebar promotion.\n- `.ds-stat`: one summary figure: `.ds-stat__value` (28px, weight 300, engraved) over a small muted `.ds-stat__label`. Three to five of them sit in a `.ds-stats` row, a single counter well sunk into the sheet (the fill, border and inset shadow of `.ds-empty`, 8px corners), divided by etched grooves; `is-first` on the first. Use it at the top of an inner page, never as separate floating cards.\n- `.ds-grid`: four equal `.ds-grid__cell` blocks of woven cloth with a dashed stitched inset and 14px corners. The base cell uses `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4` use the other fills. Inside: `.ds-grid__icon` (a round pressed well) with `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__more`.\n- `.ds-tabs`: a segmented control. `.ds-tabs__tab` segments (`is-first` on the first); the `is-current` segment is pressed in and dark.\n- `.ds-badge`: glossy orange lozenge for a count or a short word. `.ds-badge--count` is a number pressed into the surface, `.ds-badge--new` the yellow marker. Status labels are the same glossy lozenge in a status colour: `.ds-badge--success` (`--color-success` green, white engraved text: paid, done), `.ds-badge--warning` (`--color-warning` amber, dark text: due soon, pending) and `.ds-badge--danger` (`--color-danger` red, white text: overdue, failed); use them in table cells and list rows. `.ds-badges` is a row.\n- `.ds-sidebar`: unboxed block on the page texture: `.ds-sidebar__title` (12px uppercase, 1px tracking), `.ds-sidebar__list` of `.ds-sidebar__item` (`is-first` on the first) separated by etched rules, each a link and a `.ds-sidebar__meta` line.\n- `.ds-notice`: rounded message with a top highlight; `.ds-notice__title` for the bold lead-in. `.ds-notice--error` for errors. `.ds-notices` wraps several.\n- `.ds-pagination`: row of small glossy keys, `.ds-pagination__link`; `is-current` is pressed and dark, `is-disabled` is flat.\n- `.ds-breadcrumb`: small muted trail with `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small desktop window: `.ds-dialog__title` bar (light glossy, centred title, round `.ds-dialog__close` at the left), `.ds-dialog__body` with `.ds-dialog__heading` and `.ds-dialog__text`, and `.ds-dialog__actions` with the confirming button last. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: a well sunk into the sheet with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-band`: the closing call to action: dark linen with stitched top and bottom edges, `.ds-band__title`, one large secondary button, `.ds-band__note`. At most one per page.\n- `.ds-footer`: centred `.ds-footer__links` and `.ds-footer__note` under an etched rule, on the page texture.\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 Backup row of the binder settings form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: under the Backup switches.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: beside the sync switch.\n- `.ds-carousel`: scroll-snap strip of `.ds-carousel__slide` screenshots, each with a glossy window bar, and static `.ds-carousel__dots`; `.ds-shots` with `.ds-shots__title` (`.ds-shots--inset` inside a sheet) frames it as a band. Here: a \"look inside\" section of the overview main column.\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 overview side column.\n\n## Never\n\n- `content-width <= 980px`: the column is fixed and centred.\n- `block-gap <= 60px`: blocks sit 20 to 50px apart.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: Verdana, a serif for headings and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `uppercase-text <= 15%`: capitals are for controls, navigation and table heads only.\n- `letter-spacing <= 1px`: nothing is tracked beyond the small capital titles.\n- `border-radius <= 24px`: the phone's shoulders are the largest radius; keys and sheets are 6px.\n- `border-width <= 1px`: every edge is a hairline; weight comes from shadows and gradients.\n- `box-shadow-blur <= 6px`: depth comes from hard 3px ledges; the soft shadow under them stays tight.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves; the carousel is drawn at rest.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A raised thing (a key, a toolbar, a title strip) takes a `--fill-*` gradient, a 1px border darkened toward `--color-shadow`, a one-pixel top highlight and `--shadow-control`; a sunk thing (a field, a counter, a current item) takes a flat or darker fill and `--shadow-control-pressed` or the inset well shadow. Text on any glossy fill is engraved with a one-pixel shadow: dark above on dark fills, white below on light fills. A coloured feature block reuses the `.ds-grid__cell` cloth and stitching with one of the `--color-fill-*` colours. 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: 960px;\n --size-sidebar: 200px;\n --size-gutter: 20px;\n --size-nav: 44px;\n --size-pill: 22px;\n --size-control: 28px;\n --size-control-large: 40px;\n --size-icon: 16px;\n --size-well: 44px;\n --size-label: 120px;\n --size-dialog: 400px;\n --size-shot: 440px;\n --size-hair: 1px;\n --size-weave: 3px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 10px;\n --space-4: 14px;\n --space-5: 20px;\n --space-6: 30px;\n --space-7: 50px;\n}\n\n/* shell: textured page, centred fixed column */\n.ds-page {\n min-width: var(--size-page);\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-page__columns {\n display: flex;\n align-items: stretch;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__sheet {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n border-radius: var(--radius-panel);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__aside {\n flex: 0 0 var(--size-sidebar);\n width: var(--size-sidebar);\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 padding: var(--space-4) var(--space-6);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-surface-strong) 85%, var(--color-shadow));\n background: linear-gradient(to bottom, var(--color-surface-strong) 0, color-mix(in srgb, var(--color-surface-strong) 60%, var(--color-page)) 100%);\n}\n.ds-section {\n padding: var(--space-6) var(--space-6) var(--space-6);\n background: var(--fill-panel);\n}\n.ds-page__sheet > .ds-section:last-child { flex: 1 1 auto; }\n.ds-section__title {\n margin: 0 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-transform: var(--heading-transform);\n}\n.ds-section__split {\n display: flex;\n align-items: flex-start;\n gap: var(--space-6);\n}\n.ds-section__half {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-section__split--even { align-items: stretch; }\n.ds-section__split--even .ds-panel { height: 100%; }\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.ds-section__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-5);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* inner page: the trail sits on the page texture under an etched rule, the sheet follows close below */\n.ds-page__trail {\n margin: var(--space-6) 0 0;\n padding: var(--space-4) var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 10%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-page__columns--inner { margin-top: var(--space-3); }\n.ds-page__count {\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) 70%, transparent);\n}\n\n/* page header: the head of an inner sheet, light embossed title left, keys right, fading into the tinted strip below */\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-6) var(--space-4);\n background: linear-gradient(to bottom, var(--color-canvas) 0, var(--color-surface-strong) 100%);\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/* nav: glossy bar across the window, pill items, the current one pressed in */\n.ds-nav {\n position: relative;\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), var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\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-2);\n margin-right: var(--space-6);\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);\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: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__items {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__items--tools { margin-left: auto; }\n.ds-nav__item {\n display: block;\n height: var(--size-pill);\n padding: 0 var(--space-4);\n border-radius: var(--radius-pill);\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-pill);\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:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-bar-text) 18%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__item[href=\"#overview\"],\n.ds-page:has(#pricing:target) .ds-nav__items:not(.ds-nav__items--tools) .ds-nav__item[href=\"#pricing\"],\n.ds-page:has(#binder:target) .ds-nav__item[href=\"#binder\"],\n.ds-page:has(#folders:target) .ds-nav__item[href=\"#binder\"],\n.ds-page:has(#settings:target) .ds-nav__item[href=\"#binder\"] {\n background: color-mix(in srgb, var(--color-shadow) 22%, transparent);\n box-shadow: var(--shadow-control-pressed), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 25%, transparent);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n.ds-nav__item--quiet { font-weight: var(--weight-body); }\n\n/* hero: light headline and glossy pill on the left, a product window on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-7);\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-4);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-hero__strong { font-weight: var(--weight-bold); }\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n color: var(--color-text);\n font-size: var(--text-large);\n line-height: var(--line-body);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-hero__shot {\n flex: 0 0 var(--size-shot);\n width: var(--size-shot);\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 45%, transparent);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__shot-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-pill);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-hero__shot-body { display: flex; }\n.ds-hero__shot-side {\n flex: 0 0 var(--size-label);\n margin: 0;\n padding: var(--space-3) 0;\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface-strong);\n list-style: none;\n}\n.ds-hero__shot-source {\n padding: var(--space-1) var(--space-3);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n}\n.ds-hero__shot-source.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__shot-rows {\n flex: 1 1 0;\n margin: 0;\n padding: var(--space-2) var(--space-3) var(--space-5);\n background: var(--fill-panel);\n list-style: none;\n}\n.ds-hero__shot-row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-size: var(--text-small);\n}\n.ds-hero__shot-box {\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: calc(var(--radius-control) - var(--space-1));\n background: var(--fill-button-secondary);\n}\n.ds-hero__shot-row.is-done { color: var(--color-disabled-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 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(--space-1));\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-5);\n margin: 0 0 var(--space-4);\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: glossy, bevelled, 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) 76%, var(--color-canvas)) 0, color-mix(in srgb, var(--color-danger) 94%, var(--color-canvas)) 50%, color-mix(in srgb, var(--color-danger) 90%, var(--color-shadow)) 50%, color-mix(in srgb, var(--color-danger) 80%, 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) 64%, var(--color-canvas)) 0, color-mix(in srgb, var(--color-danger) 84%, var(--color-canvas)) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger) 90%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-6);\n border-radius: var(--radius-pill);\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: 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\n/* form: label column, inset wells */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-2);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-top-color: color-mix(in srgb, var(--color-input-border) 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 width: auto;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 3);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding-top: var(--space-1);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding-left: calc(var(--size-label) + var(--space-3));\n}\n.ds-form__actions-end { margin-left: auto; }\n\n/* table: framed, glossy 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 box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\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-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell--name { color: var(--color-heading); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* list: ruled rows in a frame, icon, title, meta, count */\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-panel);\n background: var(--color-surface);\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(--fill-panel);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n color: var(--color-heading-alt);\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 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/* badge: glossy lozenge, or a count pressed into the surface */\n.ds-badges {\n display: flex;\n align-items: center;\n gap: var(--space-3);\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}\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/* panel: framed card with a glossy title strip */\n.ds-panel {\n margin: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-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 { padding: var(--space-4); }\n.ds-panel__text { margin: 0 0 var(--space-3); }\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\n/* stats: one counter well sunk into the sheet, figures divided by etched grooves */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top-color: var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 10%, transparent);\n box-shadow: inset var(--size-hair) 0 0 var(--color-canvas);\n}\n.ds-stat.is-first {\n border-left: 0;\n box-shadow: none;\n}\n.ds-stat__value {\n display: block;\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 text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* grid: coloured cloth blocks with a stitched edge */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--size-gutter);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n position: relative;\n padding: var(--space-5) var(--space-5) var(--space-5);\n border-radius: var(--radius-page);\n background-color: var(--color-fill-1);\n background-image:\n repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-canvas) 7%, transparent) 0, color-mix(in srgb, var(--color-canvas) 7%, transparent) var(--size-hair), transparent var(--size-hair), transparent var(--size-weave)),\n repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-shadow) 7%, transparent) 0, color-mix(in srgb, var(--color-shadow) 7%, transparent) var(--size-hair), transparent var(--size-hair), transparent var(--size-weave)),\n linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 24%, transparent) 0, transparent 60%, color-mix(in srgb, var(--color-shadow) 14%, transparent) 100%);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell::before {\n content: \"\";\n position: absolute;\n top: var(--space-2);\n right: var(--space-2);\n bottom: var(--space-2);\n left: var(--space-2);\n border: var(--border-width) dashed color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n border-radius: calc(var(--radius-page) - var(--space-2));\n pointer-events: none;\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__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-well);\n height: var(--size-well);\n margin: 0 0 var(--space-3);\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-shadow) 22%, transparent);\n box-shadow: var(--shadow-control-pressed), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-grid__glyph {\n width: var(--size-pill);\n height: var(--size-pill);\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__text { margin: 0 0 var(--space-3); }\n.ds-grid__more {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover { text-decoration: var(--link-decoration-hover); }\n\n/* tabs: a segmented control, the current segment pressed in */\n.ds-tabs {\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-bar-alt);\n box-shadow: var(--shadow-control);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n height: calc(var(--size-pill) + var(--space-1));\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\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-pill) + var(--space-1));\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.is-first { border-left: 0; }\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-heading); }\n.ds-tabs__tab.is-current {\n background: color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* sidebar: sits straight on the page texture, small capitals title, etched rules */\n.ds-sidebar { margin: 0 0 var(--space-6); }\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\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 letter-spacing: var(--size-hair);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\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) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 10%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-sidebar__item.is-first { padding-top: 0; border-top: 0; box-shadow: none; }\n.ds-sidebar__meta {\n display: block;\n color: var(--color-text);\n font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notices { margin: 0; }\n.ds-notice {\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 80%, var(--color-notice-text));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\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) 65%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: small glossy keys */\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: var(--size-pill);\n height: var(--size-pill);\n padding: 0 var(--space-2);\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: 0 var(--size-hair) 0 var(--color-canvas);\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(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { color: var(--color-link-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 65%, 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 color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-heading-alt); font-weight: var(--weight-bold); }\n\n/* dialog: a small desktop window with a title bar */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-5);\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) 55%, transparent);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n position: relative;\n margin: 0;\n padding: var(--space-1) var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-align: center;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-dialog__close {\n position: absolute;\n top: calc(var(--space-1) + var(--space-1));\n left: var(--space-2);\n width: var(--space-4);\n height: var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-danger) 80%, var(--color-shadow));\n border-radius: 50%;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 55%, var(--color-canvas)) 0, var(--color-danger) 100%);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 50%;\n height: max(var(--border-width), calc(var(--text-ui) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body { padding: var(--space-5); }\n.ds-dialog__heading {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\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: var(--space-3) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* empty state: a well sunk into the sheet */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top-color: var(--color-border-strong);\n border-radius: var(--radius-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) 14%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-well);\n height: var(--size-well);\n margin: 0 0 var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* closing band: dark linen, stitched, with the pale glossy pill */\n.ds-band {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n margin: var(--space-5) 0 0;\n padding: var(--space-6) var(--space-6);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n text-shadow: var(--shadow-text);\n}\n.ds-band::before {\n content: \"\";\n position: absolute;\n top: var(--space-2);\n right: 0;\n left: 0;\n bottom: var(--space-2);\n border-top: var(--border-width) dashed color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n border-bottom: var(--border-width) dashed color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n pointer-events: none;\n}\n.ds-band__title {\n margin: 0;\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-band__note {\n color: color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n font-size: var(--text-small);\n}\n\n/* footer: quiet centred links under an etched rule */\n.ds-footer {\n margin: var(--space-6) 0 0;\n padding: var(--space-5) 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 10%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: center;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-2);\n padding: 0;\n list-style: none;\n}\n.ds-footer__note { margin: 0; }\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-carousel { margin: 0; }\n.ds-carousel__slides { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-1) var(--space-1) var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }\n.ds-carousel__slide { flex: none; width: calc(var(--size-control) * 7); min-height: calc(var(--size-control) * 4); padding: 0 var(--space-3) var(--space-3); overflow: hidden; scroll-snap-align: start; background: var(--fill-panel); color: var(--color-text); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--line-body); text-align: left; }\n.ds-carousel__slide::before { content: \"\"; display: block; height: var(--space-4); margin: 0 calc(var(--space-3) * -1) var(--space-3); background: var(--fill-bar); border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); box-shadow: var(--shadow-control); }\n.ds-carousel__slide strong { display: block; margin-bottom: var(--space-1); font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-heading); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot { width: var(--space-3); height: var(--space-3); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-carousel__dot.is-current { background: var(--fill-button); border-color: var(--color-button); box-shadow: var(--shadow-control); }\n.ds-shots { margin: var(--space-4) 0; }\n.ds-shots--inset { margin: 0; padding: var(--space-4) var(--space-5); border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-shots__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-heading); line-height: var(--line-heading); color: var(--color-heading); }\n\n.ds-avatar { display: block; flex: none; width: calc(var(--size-control) + var(--space-4)); height: calc(var(--size-control) + var(--space-4)); padding: var(--space-1); background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }\n.ds-avatar__photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fill-bar); color: var(--color-bar-text); }\n.ds-avatar__photo::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--shadow-control-pressed); }\n.ds-avatar__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }\n.ds-testimonial { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: 0; border: 0; background: none; }\n.ds-testimonial__text { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--text-small); font-style: italic; line-height: var(--line-body); color: var(--color-text); }\n.ds-testimonial__who { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-muted); }\n\n/* the row of slides fades at the right, where the next slide waits */\n.ds-carousel__slides { -webkit-mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-6)), transparent); mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-6)), transparent); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism landing specimen\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

Keep every receipt in one tidy book.

\n

chronoskin files your household paperwork the way a good clerk would, and finds any page again in a second.

\n
\n Download the free trial\n \n \n Look inside a binder\n
\n

Version 2.4 for desktop. Works for 30 days, no card needed.

\n
\n
\n
chronoskin
\n
\n
    \n
  • Inbox
    • \n
  • This month
    • \n
  • Household
    • \n
  • Travel
    • \n
  • Archive
    • \n
\n
    \n
  • Electricity, spring quarter
    • \n
  • Bicycle repair
    • \n
  • Library card renewal
    • \n
  • Train tickets to the coast
    • \n
  • Garden hose and fittings
    • \n
\n
\n
\n
\n\n
    \n
  • \n
    \n

    Capture

    \n

    Drag a scan onto the book and it is filed by date and shop.

    \n See a filed binder\n
    • \n
  • \n
    \n

    Find

    \n

    Search by amount, month or a word printed on the page.

    \n Browse the pages\n
    • \n
  • \n
    \n

    Sort

    \n

    Folders, labels and yearly binders keep the shelf in order.

    \n About folders\n
    • \n
  • \n
    \n

    Export

    \n

    Hand a clean yearly summary to whoever does your accounts.

    \n Editions and prices\n
    • \n
\n\n
\n
\n\n
\n
\n

Simple, yet thorough.

\n

Paperwork has never been this calm.

\n

chronoskin reads each page you give it and files it under the right month. Nothing is thrown away and nothing needs a name. Open the example household binder to see a first season with the book.

\n

What is in the box

\n
    \n
  • A shelf of binders, one per year
    • \n
  • Labels you can stick on any page
    • \n
  • A summary sheet that adds itself up
    • \n
\n

For the curious

\n

The library lives in one folder. Move it with chronoskin --move ~/Papers and the shelf follows.

\n
\n
\n

\n Example binder\n Folders\n Editions\n Reminders\n Release notes for 2.4\n

\n
\n
\n\n
\n

A look inside

\n
  • The shelfEvery item on one page.
  • The searchFind it by a word.
  • The summaryTotals at a glance.
  • The exportHand a copy on.
\n
\n
\n
\n

Recently filed

\n \n
\n Open the Household binder\n 4 of 214 pages\n
\n
\n\n
\n\n \n
\n\n
\n

chronoskin for desktop

\n Download now\n Free for 30 days.\n
\n\n
\n\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Pricing
    4. \n
\n
\n\n
\n
\n\n
\n
\n

Editions and prices

\n

Pay once a year. Every edition starts with the same 30 day trial.

\n
\n
\n Download the free trial\n
\n
\n\n
\n Version 2.4 for desktop\n Prices per year, tax included\n
\n\n
\n
\n
\n
\n

Home edition

\n
\n

19.00

\n

Ten binders, one reader, every update for a year.

\n Buy now\n
\n
\n
\n
\n
\n

Workshop edition

\n
\n

49.00

\n

Any number of binders, three readers, yearly summaries.

\n Buy now\n
\n
\n
\n
\n
\n

Boxed copy

\n
\n

29.00

\n

The home edition on a disc, with a printed handbook.

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

What each edition holds

\n \n \n \n \n \n \n \n \n \n \n
EditionMade forBindersReadersPer year
TrialTrying it for a month210.00
HomeA household10119.00
WorkshopA small workshop or a clubAny349.00
Boxed copyA gift, or a desk without a line10129.00
\n
\n\n
\n

Before you buy

\n
\n

What happens after the trial?

\n

The book stays readable for good. Filing new pages waits until you choose an edition, and nothing you scanned is lost.

\n

Can I change edition later?

\n

Yes. You pay the difference for the rest of the year and your binders stay where they are. See binder settings for moving a library.

\n
\n
\n\n
\n\n \n
\n\n
\n\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Binders
    4. \n
  4. ›
    5. \n
  5. Household
    6. \n
\n
\n\n
\n
\n\n
\n
\n

Household binder

\n

Bills, repairs and receipts for the house, filed by month.

\n
\n
\n Export\n Add a page\n
\n
\n\n
\n \n 214 pages in 4 folders\n
\n\n
\n
    \n
  • 214Pages filed
    • \n
  • 1,482.50Spent this year
    • \n
  • 3Bills due this month
    • \n
  • 1Overdue
    • \n
\n
\n\n
\n
\n

Bills this quarter

\n
\n 18\n New\n Paid\n Due soon\n Overdue\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
PaperFiledStatusPagesAmount
Electricity, spring quarter12 MayPaid2186.40
Water and drains9 MayDue soon174.00
Chimney sweep3 MayOverdue155.00
Roof insurance28 AprilPaid6312.00
Garden hose and fittings28 AprilPaid123.90
Council rates21 AprilNew2128.00
\n
\n \n 1 to 6 of 18\n
\n
\n\n
\n\n \n
\n\n
\n\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Binders
    4. \n
  4. ›
    5. \n
  5. Household
    6. \n
\n
\n\n
\n
\n\n
\n
\n

Household binder

\n

Bills, repairs and receipts for the house, filed by month.

\n
\n
\n Export\n Add a page\n
\n
\n\n
\n \n 4 folders, 1 empty\n
\n\n
\n

Folders in this binder

\n
    \n
  • \n \n
    UtilitiesElectricity, water and council rates · last filed 12 May
    \n 96\n
    • \n
  • \n \n
    RepairsChimney, roof and bicycle · last filed 3 May
    \n 71\n
    • \n
  • \n \n
    InsuranceHouse and contents · last filed 28 April
    \n 47\n
    • \n
  • \n \n
    WarrantiesMade today · nothing filed yet
    \n New\n
    • \n
\n
\n\n
\n

Warranties

\n
\n \n

This folder is empty

\n

Drag a scan here, or bring in a folder you already keep.

\n Import a folder\n
\n
\n\n
\n\n \n
\n\n
\n\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. ›
    3. \n
  3. Binders
    4. \n
  4. ›
    5. \n
  5. Household
    6. \n
\n
\n\n
\n
\n\n
\n
\n

Household binder

\n

Bills, repairs and receipts for the house, filed by month.

\n
\n
\n Export\n Add a page\n
\n
\n\n
\n \n Changed 12 May\n
\n\n
\n

Binder settings

\n
\n

Reminders are on. One letter a week before each bill is due, and not otherwise.

\n

Not saved. Check the address below and try again.

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

This address is missing its ending.

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

Optional. Shown on the first page of the binder.

\n
\n
\n
\n \n \n
\n
\n Backup\n
\n
  • Keep a backup copy
  • Sync automaticallySync runs when the computer is idle.
\n 62%

Backing up: 133 of 214 pages copied

\n
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n\n
\n

Library folder

\n
\n

All 214 pages of this binder live in ~/Papers/Household. You asked to move them to ~/Documents/Books.

\n
\n
\n
\n

Move the library

\n
\n

Move 214 pages to a new folder?

\n

The shelf keeps its order. The old folder is left empty and can be removed by hand.

\n
\n
\n Cancel\n Move\n
\n
\n
\n
\n\n
\n\n \n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.landing.s01.p04.t03.u04\",\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-1434\",\n \"short\": \"v1-sk-1434\"\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: Verdana, Geneva, \"DejaVu Sans\", Arial, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Geneva, \"DejaVu Sans\", Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 36px;\n --text-h1: 26px;\n --text-h2: 20px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 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" } }