{ "id": "v1-sk-154a", "long_id": "v1.skeuomorphism.landing.s01.p05.t04.u10", "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-154a", "preview_url": "https://chrono.skin/s/v1-sk-154a/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- Slate metal and black glass, with one blue; the set is dark. `--color-page` #383a44 is the slate page; `--color-canvas` #454853 the sheet; `--color-surface` #4a4d59 rows and cells, `--color-surface-alt` #424550 alternate rows and wells, `--color-surface-strong` #33353e title strips.\n- `--color-bar` #1a1b1f (black glass, near-white text) is the current menu row, the tab bar, the counters and pressed \"current\" states; `--color-bar-alt` #5a5e6b (brushed steel, pale text) the menu rows, the breadcrumb strip, the table head and the shelf plank; `--color-inverse` #16171b (the black stage, white text) the hero, the alert sheet and the footer band.\n- Text is `--color-text` #cdd0d8, meta `--color-text-muted` #9da2af, headings `--color-heading` #f2f3f5, section, sidebar and panel titles and form labels `--color-heading-alt` #dcdfe3.\n- Links are `--color-link` #74b9f2, lighter on hover (#a8d8ff), lilac when visited (#9aa6d8).\n- `--color-button` #2b84dc (blue, white text) is the one primary action colour; the secondary key is steel `--color-button-secondary` #626675 with near-white text. Fields are wells darker than the sheet (`--color-input` #2c2e36).\n- `--color-accent` #ee8a22 (orange) for badges, `--color-accent-alt` #7a56c2 (violet) for \"new\" markers and the tape of a panel; `--color-success` #18a546, `--color-warning` #b87a10, `--color-danger` #f0553f on `--color-danger-surface` #3d2526. Notices are a dark blue tint, `--color-notice` #33475c with #cfe2f7 text.\n- `--color-fill-1` to `--color-fill-4` (#2b84dc blue, #ee8a22 orange, #18a546 green, #747a88 steel) colour the boxes on the shelf only; white glyphs on all four.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Lato where installed, then Helvetica Neue, Helvetica and Arial; Lato stands in for the era's commercial humanist sans. `--font-mono` Menlo.\n- Larger than the era's other sets: `--text-base` 14px at `--line-body` 1.5; `--text-small` 12px for meta, badges, table heads and the footer; `--text-ui` 13px at `--weight-ui` 700 for keys, menu rows and tabs; `--text-large` 17px for the lead and the large key.\n- Headings are light, white on dark: `--weight-heading` and `--weight-display` 300; `--text-h3` 15px (bold), `--text-h2` 20px, `--text-h1` 28px, `--text-display` 36px at `--line-display` 1.2. A bold phrase inside the light headline is the only emphasis. No uppercase from this part.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Woven metal and glass. `--fill-page` is a fine diagonal weave at a 4px pitch with a faint glare over the top 260px. `--fill-bar` is black glass with a hard split at half height. `--fill-bar-alt` is brushed steel and `--fill-inverse` a top-lit black stage, both under 2px horizontal hairlines.\n- Corners: `--radius-control` 6px, `--radius-panel` 6px, `--radius-page` 8px, `--radius-pill` 11px (badges, pagination keys).\n- Keys are chunky: glossy with the same hard split (`--fill-button`), a light inner top edge, and a hard 3px ledge under them with a tight shadow below it (`--shadow-control`); a pressed key sinks onto a 1px ledge (`--shadow-control-pressed`). Sheets and boxes stand on the metal the same way: `--shadow-panel` is a 3px ledge and 0 4px 6px at 45%; `--shadow-dialog` is a dark ring, a 4px ledge and 0 5px 6px. `--shadow-text` is a dark line one pixel above light text. `--fill-input` shades the top 5px of a well. `--transition` is none.\n- Pairings this structure uses: `--color-bar-alt-text` on `--fill-bar-alt` (menu rows, breadcrumb strip, table head); `--color-bar-text` on `--fill-bar` (current menu row, tab bar, counters, the phone's title bar) and on the darkened bar colour of pressed \"current\" states (page, count badge); `--color-inverse-text` on `--fill-inverse` (hero, alert sheet, footer) and on the four `--color-fill-*` boxes; `--color-button-text` on `--fill-button` and `--color-button-secondary-text` on `--fill-button-secondary` (keys, list thumbs, pagination keys, select); `--color-accent-text` on `--fill-accent`, on the success and danger badges and on the danger key; `--color-heading` on the `--color-accent-alt` and `--color-warning` badges; `--color-heading-alt` on `--color-surface-strong` (sidebar title) and on the sheet. On the page texture: `--color-heading`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the spotlight of the hero and the glass highlight of the alert sheet (radial gradients of `--color-inverse-text` at 12 to 34%), the phone body (`--color-shadow` mixed with 12 to 30% `--color-inverse-text`) and its corner (`--radius-page` plus `--space-4`), the spine and sheen of a shelf box, the split line of a counter, the notch under the current tab (a `--space-3` square of `--color-canvas` turned 45 degrees, half of it hidden in the part below), the 3 degree tilt and 55% opacity of the tape, the engraving shadow `0 var(--size-hair) 0` of `--color-canvas` at 50 to 70% under text on the page and on light fills, the inset well shadow of fields and the empty state, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 1px tracking and `uppercase` of sidebar, footer and kicker titles, and `dashed` for the panel's perforation, the empty state and the footer stitching.\n\n- Leather with stitching. `--fill-bar` is grained leather, lit from the top, with a row of cream stitches 3px inside its top and bottom edges; `--fill-inverse` is the same grain with one row of stitches along the top and a pool of light. The stitches are drawn in the bar's own text colour at 50 to 55%.\n- `--fill-page` is card: an 8px fleck pattern and a soft pool of light at the top over `--color-page`.\n- Paper lies on the desk: `--shadow-panel` is 0 1px 3px at 32% of the brown shadow; `--shadow-dialog` a ring and 0 2px 5px.\n- Keys are stitched leather tabs, matte, not glossy: `--fill-button` is a soft top-lit gradient under a faint grain; `--shadow-control` a light inner top edge and a 1px shadow. Pressed keys take a 2px inset shade.\n- `--fill-input` is ruled paper: a faint teal line every 20px on the field colour. `--fill-panel` stays the sheet colour and warms only in its last third.\n- Every edge is a seam: `--border-style` is `dashed`, so the borders of keys, fields, panels, tables and rules are drawn as 1px stitches.\n- Corners: `--radius-control` 4px, `--radius-panel` 4px, `--radius-pill` 12px, `--radius-page` 10px. `--shadow-text` is a dark line one pixel above light text. `--transition` is none.\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 >= 12px`: meta text is the smallest.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 2`: one sans-serif and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `letter-spacing <= 1px`: only small capital titles are tracked.\n- `border-radius <= 20px`: the pill is 12px; nothing is rounder than the first structure's large key.\n- `border-width <= 1px`: every edge is a hairline of stitches, dashed and never thicker.\n- `box-shadow-blur <= 5px`: paper casts a short shadow.\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 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.p05.t04.u10\",\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-154a\",\n \"short\": \"v1-sk-154a\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f6f4f7;\n --color-surface-strong: #e9e3ee;\n --color-bar: #9a55b8;\n --color-bar-text: #ffffff;\n --color-bar-alt: #d6d2dc;\n --color-bar-alt-text: #40364a;\n --color-inverse: #303038;\n --color-inverse-text: #ffffff;\n --color-text: #4a4a4f;\n --color-text-muted: #8a8791;\n --color-heading: #2b2530;\n --color-heading-alt: #5a2d82;\n --color-link: #7a3aa8;\n --color-link-quiet: #8a8791;\n --color-link-visited: #96709f;\n --color-link-hover: #e03f7f;\n --color-link-active: #b3246a;\n --color-border: #e2dfe6;\n --color-border-strong: #bdb7c6;\n --color-border-muted: #f0eef2;\n --color-accent: #e03f7f;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f0a020;\n --color-fill-1: #8a3aa0;\n --color-fill-2: #2898d8;\n --color-fill-3: #68b030;\n --color-fill-4: #f08a1c;\n --color-button: #e03f7f;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ececf0;\n --color-button-secondary-text: #40364a;\n --color-input: #ffffff;\n --color-input-text: #2b2530;\n --color-input-border: #bdb7c6;\n --color-disabled: #e6e4ea;\n --color-disabled-text: #a9a5b0;\n --color-danger: #c03828;\n --color-danger-surface: #fdf0ee;\n --color-success: #68b030;\n --color-warning: #f0a020;\n --color-notice: #f1eaf6;\n --color-notice-text: #40364a;\n --color-focus: #b78ad8;\n --color-shadow: #1c1024;\n --color-overlay: rgba(28, 16, 36, 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 36px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --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: dashed;\n --radius-control: 4px;\n --radius-panel: 4px;\n --radius-pill: 12px;\n --radius-page: 10px;\n --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 32%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), 0 1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 35%, transparent), 0 2px 5px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 0h1v1H1zM5 2h2v1H5zM2 4h1v1H2zM6 6h1v1H6zM0 6h1v1H0z' fill='black' fill-opacity='.07'/%3E%3Cpath d='M3 1h2v1H3zM0 3h1v1H0zM4 5h1v1H4zM2 7h2v1H2z' fill='white' fill-opacity='.16'/%3E%3C/svg%3E\"), radial-gradient(ellipse 70% 100% at 50% 0, color-mix(in srgb, white 30%, transparent) 0, transparent 100%) 0 0 / 100% 500px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-bar-text) 55%, transparent) 0, color-mix(in srgb, var(--color-bar-text) 55%, transparent) 5px, transparent 5px, transparent 9px) 0 3px / 100% 1px no-repeat, repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-bar-text) 55%, transparent) 0, color-mix(in srgb, var(--color-bar-text) 55%, transparent) 5px, transparent 5px, transparent 9px) 0 calc(100% - 3px) / 100% 1px no-repeat, url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 0h2v1H0zM4 2h1v2H4zM1 4h2v1H1zM5 6h2v1H5z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M3 0h1v1H3zM6 3h1v1H6zM0 5h1v1H0zM3 6h1v1H3z' fill='white' fill-opacity='.07'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 14%) 0, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 45%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-inverse-text) 50%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 50%, transparent) 5px, transparent 5px, transparent 9px) 0 5px / 100% 1px no-repeat, url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 0h2v1H0zM4 2h1v2H4zM1 4h2v1H1zM5 6h2v1H5z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M3 0h1v1H3zM6 3h1v1H6zM0 5h1v1H0zM3 6h1v1H3z' fill='white' fill-opacity='.07'/%3E%3C/svg%3E\"), radial-gradient(ellipse 60% 120% at 50% 0, color-mix(in srgb, white 16%, transparent) 0, transparent 100%), var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 18%) 0, var(--color-accent) 60%, color-mix(in srgb, var(--color-accent), black 12%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 70%, var(--color-surface-alt) 100%);\n --fill-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 0h2v1H0zM4 2h1v2H4zM1 4h2v1H1zM5 6h2v1H5z' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 20%) 0, var(--color-button) 60%, color-mix(in srgb, var(--color-button), black 16%) 100%);\n --fill-button-hover: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 0h2v1H0zM4 2h1v2H4zM1 4h2v1H1zM5 6h2v1H5z' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\"), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 32%) 0, color-mix(in srgb, var(--color-button), white 10%) 60%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, var(--color-button-secondary) 60%, color-mix(in srgb, var(--color-button-secondary), black 8%) 100%);\n --fill-input: repeating-linear-gradient(to bottom, transparent 0, transparent 19px, color-mix(in srgb, var(--color-link) 16%, transparent) 19px, color-mix(in srgb, var(--color-link) 16%, transparent) 20px) 0 5px, var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }