{ "id": "v1-sk-3424", "long_id": "v1.skeuomorphism.landing.s03.p04.t02.u04", "name": "Skeuomorphism landing (single product, device and ribbon)", "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 single-product page from the years when web pages imitated physical materials: no navigation bar, only small glossy pills beside the site's mark and name, then a centred headline over the product shown on a large drawn screen, one big key, and a ribbon folded round a three-column feature row. It was a common shape for the sites of desktop and phone apps between about 2009 and 2013, built on one centred axis on a softly textured page. Text is small, and the richness is in the surfaces: bevelled keys, a device bezel, a ribbon with folded ends, coloured boards with a dark spine, engraved type.", "url": "https://chrono.skin/s/v1-sk-3424", "preview_url": "https://chrono.skin/s/v1-sk-3424/specimen.html", "files": { "STYLE.md": "# Skeuomorphism landing (single product, device and ribbon)\n\n## Summary\n\nA single-product page from the years when web pages imitated physical materials: no navigation bar, only small glossy pills beside the site's mark and name, then a centred headline over the product shown on a large drawn screen, one big key, and a ribbon folded round a three-column feature row. It was a common shape for the sites of desktop and phone apps between about 2009 and 2013, built on one centred axis on a softly textured page. Text is small, and the richness is in the surfaces: bevelled keys, a device bezel, a ribbon with folded ends, coloured boards with a dark spine, engraved type.\n\n## Layout\n\n- One centred axis. `--size-page` is 900px (`.ds-page__wrap`); nothing is placed beside the column, and there is no sidebar column on any page. Only the page texture and the dark footer band run the full window width.\n- Navigation is not a bar: `.ds-nav` is a row on the page texture with the `.ds-brand` at the left and six or fewer pills (`--size-pill`, 24px) at the right, one for each view. It is written once, above the views, and so is the footer band below them.\n- Order of the home page, all centred: navigation row, hero (headline, one line, the `--size-device` 640px screen on its stand, the large key and a note), the `.ds-ribbon` (it overhangs the column by `--space-3` each side and its ends fold behind) lying on the top edge of the three-column `.ds-features` sheet, a centred `.ds-page__title`, the `.ds-grid` of four boards in two rows of two, another centred title, then a `.ds-page__sheet` of `.ds-showcase` rows (one on the home page, more on the tour). Each showcase row sets words on one side and an object (`--size-object`, 330px: a list widget, a price card) on the other, the sides alternating from row to row; rows are separated by a hairline.\n- Section headings (`.ds-page__title`) stand on the page texture between blocks, centred, `--space-7` above and `--space-5` below. Sheets have no headings of their own.\n- Inner pages keep the navigation row and the axis. The hero, ribbon, features and boards are left out. The breadcrumb stands centred on the page texture (`.ds-page__trail`), `--space-3` under the navigation row and `--space-4` above the sheet. The sheet opens with `.ds-page-header` (an app tile, title and one line, keys at the right). A reading page (the tour) keeps the full 900px sheet (`.ds-page__sheet--inner`) and continues with `.ds-showcase` rows. A working page narrows the sheet to `--size-narrow` (700px, `.ds-page__sheet--narrow`): under the page header comes the `.ds-tabs` strip of centred pills when the page has siblings, then `.ds-page__section` parts: the `.ds-stats` box, a table inside a `.ds-window` frame with its pagination centred in the window's foot, a row of price cards (`.ds-plans`), the notices, the form in a `--size-form` (440px) column centred in the sheet, an open dialog on its backdrop (`.ds-page__section--last` closes the sheet). What a sidebar would hold stands under the sheet as three `.ds-sidebar` link blocks side by side (`.ds-page__blocks`), on the page texture.\n- Views. The specimen is a five-screen site, one `.ds-view` showing at a time. `home` is the product page: hero, ribbon and features, the four boards, and a closing showcase row with a price card. `tour` is the reading page: the long copy beside a list widget of passages, then the labels a passage carries, further links and the free-season card. `prices` compares the three seasons: three price cards, a table of what each includes, a notice. `log` is the signed-in log of one boat: figures, the passage table with pagination, an empty repairs window, link blocks beneath. `boat` is the boat's settings form with its notices, the row of keys and the dialog that the destructive key opens. The pill of the showing view takes the key fill, through one `:has()` selector per view in `components.css`; add one when adding a view.\n- Spacing scale: `--space-1` 3px (badge padding, sidebar rows, the blur of an inset well), `--space-2` 6px (row padding, between pills and keys), `--space-3` 12px (cell padding, form rows, the ribbon's overhang and the spine of a board), `--space-4` 18px (control side padding, board padding, between boards), `--space-5` 24px (section padding, feature padding), `--space-6` 36px (showcase padding, above the ribbon, between link blocks), `--space-7` 54px (above section titles, the gap between the two sides of a showcase row, above the footer).\n- Control heights: `--size-pill` 24px (navigation and tab pills, pagination keys), `--size-control` 30px (keys, fields), `--size-control-large` 44px (the hero key and the footer key). `--size-ribbon` is 38px; `--size-well` 56px the app tile and the empty-state well; `--size-hair` 1px the offset of every highlight and engraving.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Leaf green and neutral grey, with slate blue for actions. `--color-page` #f4f4f4 is the light grey page; `--color-canvas` and `--color-surface` #ffffff the sheet; `--color-surface-alt` #f8f8f8 the tone a section fades to; `--color-surface-strong` #e7e8e8 toolbar strips.\n- `--color-bar` #6bb130 (green, white text) is the navigation bar, table head and pressed \"current\" states; `--color-bar-alt` #c8c8c8 with #484848 text is title strips and the segmented control; `--color-inverse` #426377 (dark slate, white text) only the closing band.\n- Text is `--color-text` #5a5a5a, meta `--color-text-muted` #8e8e8e, headings `--color-heading` #484848; sidebar and panel titles and form labels are the deep green `--color-heading-alt` #438519.\n- Links are `--color-link` #5f9e2b, darkening to `--color-link-hover` #438519; visited links turn slate #568099.\n- `--color-button` #5d7f98 slate is the one primary action colour; the secondary key is the pale grey `--color-button-secondary` #dddddd with #5a5a5a text.\n- `--color-accent` #5b9aa9 (teal slate) for badges, `--color-accent-alt` #c5cb00 (lime) for \"new\" markers; `--color-success` #5f9e2b, `--color-warning` #deed00 (highlighter yellow, dark text), `--color-danger` #591205 (maroon). Notices are the sticky-note yellow `--color-notice` #e4dd90 with #4c4f47 text.\n- `--color-fill-1` to `--color-fill-4` (#6bb130, #5d7f98, #438519, #7e7d7e) colour the grid blocks only; white text on all four.\n- One family for everything: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial; `--font-mono` Monaco for code.\n- `--text-base` 12px at `--line-body` 1.4; `--text-small` 11px for meta; `--text-ui` 12px at `--weight-ui` 700 for keys, navigation and table heads; `--text-large` 16px for the lead and the large key.\n- Headings are bold, not light: `--weight-heading` and `--weight-display` 700. `--text-h3` 14px, `--text-h2` 17px, `--text-h1` 27px, `--text-display` 30px at `--line-display` 1.1 for the hero headline.\n- Links in running text are underlined (`--link-decoration: underline`) and lose the underline on hover (`--link-decoration-hover: none`); quiet links, titles and navigation are never underlined.\n- No uppercase and no tracking from this part: `--ui-transform` and `--heading-transform` are none.\n- Paper and linen. `--fill-page` is paper: short fibre flecks and a soft pool of light at the top over `--color-page`. `--fill-bar` and `--fill-inverse` are linen: a 2px crosshatch weave over a top-lit gradient of the bar colour.\n- Corners are nearly square, as cut plates: `--radius-control` and `--radius-panel` 2px, `--radius-page` 3px; only `--radius-pill` 13px (navigation pills, badges, the large key) is round.\n- Keys are flat engraved plates: `--fill-button` is almost one colour (5% lighter at the top, 6% darker at the foot), and `--shadow-control` draws a second hairline just inside the border and a light line under the key, so every key has a double edge and no drop shadow; pressed keys take `--shadow-control-pressed`, an inset 3px shade. `--fill-input` is a well shaded over its top 7px.\n- Panels and the sheet are mounted, not floating: `--shadow-panel` is a 3px light mat and a hairline around it, with no blur, so each has a double frame; `--shadow-dialog` is the same frame with a hard 6px ledge below. Borders are 1px solid hairlines.\n- `--shadow-text` engraves light text with a dark line one pixel above (0 -1px 0 at 40%). `--fill-bar-alt` and `--fill-button-secondary` are near-white, top-lit gradients. `--transition` is none.\n- Pairings this structure uses: `--color-bar-text` on `--fill-bar` (navigation, table head, the current sidebar row, the month of a calendar leaf); `--color-button-text` on `--fill-button` (keys and the current navigation tab); `--color-inverse-text` on `--fill-inverse` (the hero banner) and on the four `--color-fill-*` banners; `--color-accent-text` on `--fill-accent` (badges, the strip) and on the danger key; `--color-bar-alt-text` on `--fill-bar-alt` (sub bar, breadcrumb, folder tabs, counter plates); `--color-heading-alt` on `--fill-bar-alt` and `--color-surface-strong` title strips. On the page texture only `--color-heading`, `--color-text` and `--color-text-muted` are used.\n- One-off values built in `components.css` from tokens: the sheen of a banner (a radial and a linear gradient of `--color-canvas` and `--color-shadow` at 12 to 28% over the fill colour), the two-tone gloss of an icon tile, the one-pixel top highlight of bars, banners and strips, the white engraving shadow `0 var(--size-hair) 0 var(--color-canvas)` under dark text on light glossy fills, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 9 and 7 degree tilt of the two hero cards, and `dashed` for the empty state.\n\n## Components\n\n- `.ds-page`: on ``. Paints the textured page. `.ds-page__wrap` is the 900px column; `.ds-page__title` a centred section heading on the page (`.ds-page__strong` for its bold part); `.ds-page__sheet` a sheet, `.ds-page__sheet--inner` the full-width sheet of a reading inner page, `.ds-page__sheet--narrow` the 700px sheet of a working inner page with `.ds-page__section` parts (`.ds-page__section--last` on the last); `.ds-view` one screen of the site (`.ds-view--home` the first); `.ds-page__trail` the centred place of the breadcrumb; `.ds-page__blocks` the row of link blocks under an inner sheet.\n- `.ds-showcase`: one row of a wide sheet (`is-first` when nothing stands above it in the sheet): `.ds-showcase__copy` and a `.ds-showcase__object`; `.ds-showcase--flip` puts the object on the left; `.ds-showcase--even` holds two equal halves; `.ds-showcase__label` is a small bold label over a group (`is-first` on the first), `.ds-showcase__text` a paragraph under a group.\n- `.ds-nav`: the row on the page: the `.ds-brand` at the left and `.ds-nav__items` of `.ds-nav__item` pills. The pill of the showing view takes the key fill (also `is-current`, for a page without views); `is-hover` darkens the edge.\n- `.ds-brand`: the site's mark and name at the left of the navigation row, on the page texture. `.ds-brand__mark` is a 27px tile dressed as the primary key (`--fill-button`, a border darkened toward `--color-shadow`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG in `--color-button-text`; `.ds-brand__name` is the name in the heading font at `--text-h2` in `--color-heading`, with the light engraving line under it. 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`: centred: `.ds-hero__title` (`.ds-hero__strong` for the bold product name), `.ds-hero__lead`, the drawn `.ds-hero__device` (bezel) holding `.ds-hero__screen` with `.ds-hero__bar`, `.ds-hero__body`, `.ds-hero__sources` of `.ds-hero__source` rows (`is-current` lit) and `.ds-hero__rows` of `.ds-hero__row` items with a `.ds-hero__box` (`is-done` greyed), the `.ds-hero__stand` under it, then `.ds-hero__actions` with one `.ds-button--large` and a `.ds-hero__note`. Once per page.\n- `.ds-ribbon`: the accent band folded round the top of `.ds-features`; one short line of text. Once per page, only directly above the features sheet.\n- `.ds-features`: three `.ds-feature` columns on one sheet (`is-first` on the first), each a `.ds-feature__glyph`, `.ds-feature__title`, `.ds-feature__sub` and `.ds-feature__text`, centred.\n- `.ds-page-header`: the head of the narrow inner sheet: `.ds-page-header__tile` (a bevelled app tile with `.ds-page-header__glyph`), `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text` line, and `.ds-page-header__actions` with one primary and at most one secondary key at the normal height.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for the breadcrumb and other secondary links. `.ds-links` is a wrapping row.\n- `.ds-button`: bevelled key. `.ds-button--secondary` the secondary key; `.ds-button--danger` the destructive key in `--color-danger`, kept apart from the others; `.ds-button--large` the 44px key of the hero and the footer, rounded by `--radius-pill`; `.ds-button--small` a 24px key. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph; `.ds-buttons` a row.\n- `.ds-form`: `.ds-form__column` is the narrow centred column; each `.ds-form__row` has a `.ds-form__label` over its control. `.ds-form__input` and `.ds-form__textarea` are inset wells, `.ds-form__select` looks like a secondary key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, a wrapping row of keys where `.ds-form__actions-end` pushes the destructive key to the right.\n- `.ds-table`: compact ruled table that always sits in a `.ds-window` frame (`.ds-window__bar` with `.ds-window__title` and a count above, `.ds-window__foot` with the pagination below; `.ds-window__body` is the padded inside of a window that holds something other than a table, such as the empty state). `.ds-table__head` cells take the bar fill; `.ds-table__row` with `is-first` (and `is-alt` if stripes are wanted); `.ds-table__cell` with faint column rules, `is-edge` on the first column, `.ds-table__cell--name` for the leading column, `is-numeric` for numbers.\n- `.ds-list`: a small framed widget, the object of a showcase row: a dark spine down the left edge and glossy `.ds-list__item` rows (`is-first` on the first), each a `.ds-list__body` with `.ds-list__title` and `.ds-list__meta` and a count badge at the right.\n- `.ds-panel`: a centred price card: `.ds-panel__title` over a dashed rule, `.ds-panel__body` with `.ds-panel__price`, `.ds-panel__text` and one key. The object of a showcase row, or three side by side in a `.ds-plans` row, where the cards are equally tall and the keys line up along the bottom.\n- `.ds-stat`: one figure, centred: `.ds-stat__value` over `.ds-stat__label`. Three sit in one `.ds-stats` box divided by hairlines (`is-first` on the first), at the top of an inner sheet.\n- `.ds-grid`: two rows of two `.ds-grid__cell` boards with a dark spine at the left. The base board uses `--color-fill-1`; `.ds-grid__cell--2`, `--3`, `--4` the other fills. Inside: `.ds-grid__glyph` and `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__more`.\n- `.ds-tabs`: a tinted strip across the sheet with centred `.ds-tabs__tab` pills; `is-current` is pressed and dark, `is-hover` lightens.\n- `.ds-badge`: small tag or lozenge for a count or a word. `.ds-badge--count` is pressed into the surface, `.ds-badge--new` the \"new\" marker; `.ds-badge--success`, `.ds-badge--warning` (dark text) and `.ds-badge--danger` are the status labels. `.ds-badges` is a row.\n- `.ds-sidebar`: an unboxed link block on the page texture: `.ds-sidebar__title` over an etched rule and a `.ds-sidebar__list` of `.ds-sidebar__item` entries, each a link and a `.ds-sidebar__meta` line. Three stand side by side in `.ds-page__blocks` under an inner sheet; never as a column beside it.\n- `.ds-notice`: a rounded, centred message; `.ds-notice__title` for the bold lead-in; `.ds-notice--error` for errors. `.ds-notices` stacks them.\n- `.ds-pagination`: separate small keys, centred in the window foot. `.ds-pagination__link`; `is-current` is pressed and dark, `is-disabled` flat.\n- `.ds-breadcrumb`: at the top of every inner page, a centred trail with `.ds-breadcrumb__sep` slashes and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small window: a dark `.ds-dialog__title` bar with a round `.ds-dialog__close` at the right, a centred `.ds-dialog__body` with `.ds-dialog__heading` and `.ds-dialog__text`, and `.ds-dialog__actions` centred in a tinted strip, the confirming key last. `.ds-dialog__backdrop` is the dimmed area behind it. A destructive confirmation uses `.ds-button--danger` for the confirming key.\n- `.ds-empty`: no box: a round `.ds-empty__well` with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key, centred. In a list or table that has nothing to show it sits in the `.ds-window__body` of that window.\n- `.ds-footer`: the dark full-width band that closes the page: `.ds-footer__call` with `.ds-footer__title` and one large secondary key, then `.ds-footer__links` of `.ds-footer__link` and a `.ds-footer__note`.\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 Safekeeping row of the boat form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the \"In this log\" box.\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 band of the tour sheet.\n- `.ds-menu`: popover list with an arrow, hanging from a toolbar button (`
`, `.ds-menu__button`, `.ds-menu__list`, `.ds-menu__item`). Here: the header toolbar of the log view.\n\n## Never\n\n- `content-width <= 920px`: everything stays inside the 900px column.\n- `block-gap <= 54px`: the largest gap between blocks is the 54px above a section title.\n- `row-gap <= 18px`: list and table rows touch; the two rows of boards are 18px apart.\n- `font-size <= 30px`: the hero headline is the largest text.\n- `font-size >= 11px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights; headlines are bold.\n- `font-families <= 2`: one sans-serif and a monospace.\n- `line-height <= 1.45`: body text is set at 1.4.\n- `underlined-links >= 25%`: links in running text and the sidebar are underlined.\n- `uppercase-text <= 5%`: capitals are not part of this type set; at most a few small titles.\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. Keep the axis: a new block is centred in the column, and a new part of the home page is another `.ds-showcase` row with its object on the side opposite the row above, or a centred `.ds-page__title` followed by a block. A new part of a working inner page is another `.ds-page__section` in the narrow sheet, and a new part of a reading page another `.ds-showcase` row; a new screen is another `.ds-view` with its pill in the navigation row and its selector in the current-pill rule; tabular content gets a `.ds-window` frame. A raised thing (a key, a tile, a bar) takes a `--fill-*` gradient, a hairline border darkened toward `--color-shadow`, a one-pixel top highlight and `--shadow-control`; a sunk thing (a field, a well, a current item) takes a flat or darker fill and `--shadow-control-pressed` or the inset well shadow. Keep each text token on the fills listed under the pairings above. Do not add a navigation bar, a side column, flat coloured rectangles, wide soft shadows, borders thicker than 1px, new font families or new colours.\n", "components.css": ":root {\n --size-page: 900px;\n --size-narrow: 700px;\n --size-form: 440px;\n --size-device: 640px;\n --size-source: 170px;\n --size-object: 330px;\n --size-ribbon: 38px;\n --size-pill: 24px;\n --size-control: 30px;\n --size-control-large: 44px;\n --size-icon: 16px;\n --size-glyph: 36px;\n --size-well: 56px;\n --size-dialog: 340px;\n --size-hair: 1px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 12px;\n --space-4: 18px;\n --space-5: 24px;\n --space-6: 36px;\n --space-7: 54px;\n}\n\n/* shell: textured page, one centred column, everything on the axis */\n.ds-page {\n min-width: var(--size-page);\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page__title {\n margin: var(--space-7) 0 var(--space-5);\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-align: center;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--heading-transform);\n}\n.ds-page__strong { font-weight: var(--weight-bold); }\n.ds-page__sheet {\n overflow: hidden;\n border-radius: var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-page__sheet--narrow {\n width: var(--size-narrow);\n margin: var(--space-4) auto 0;\n}\n.ds-page__sheet--inner { margin: var(--space-4) 0 0; }\n.ds-page__section { padding: var(--space-5) var(--space-5) 0; }\n.ds-page__section--last { padding-bottom: var(--space-6); }\n.ds-page__trail {\n display: flex;\n justify-content: center;\n margin: var(--space-3) 0 0;\n}\n.ds-page__blocks {\n display: flex;\n align-items: flex-start;\n gap: var(--space-6);\n width: var(--size-narrow);\n margin: var(--space-6) auto 0;\n}\n\n/* showcase: one row of the long sheet, words on one side and an object on the other, sides alternating */\n.ds-showcase {\n display: flex;\n align-items: center;\n gap: var(--space-7);\n padding: var(--space-6) var(--space-7);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-panel);\n}\n.ds-showcase.is-first { border-top: 0; }\n.ds-showcase--flip { flex-direction: row-reverse; }\n.ds-showcase--even {\n align-items: stretch;\n gap: var(--space-6);\n}\n.ds-showcase__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-showcase__object {\n flex: 0 0 var(--size-object);\n width: var(--size-object);\n}\n.ds-showcase__label {\n margin: var(--space-4) 0 var(--space-2);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-showcase__label.is-first { margin-top: 0; }\n.ds-showcase__text { margin: var(--space-3) 0 0; }\n.ds-showcase__copy .ds-buttons { margin: var(--space-4) 0 0; }\n\n/* nav: no bar; brand left, a row of small glossy pills right, straight on the page */\n.ds-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-5) 0 var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-pill) + var(--space-1));\n height: calc(var(--size-pill) + var(--space-1));\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n text-transform: var(--heading-transform);\n}\n.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__item {\n display: block;\n height: var(--size-pill);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-pill) - var(--border-width) - var(--border-width));\n text-decoration: var(--link-decoration-quiet);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 75%, var(--color-shadow));\n color: var(--color-heading);\n}\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__item[href=\"#home\"],\n.ds-page:has(#tour:target) .ds-nav__item[href=\"#tour\"],\n.ds-page:has(#prices:target) .ds-nav__item[href=\"#prices\"],\n.ds-page:has(#log:target) .ds-nav__item[href=\"#log\"],\n.ds-page:has(#boat:target) .ds-nav__item[href=\"#boat\"] {\n border-color: color-mix(in srgb, var(--color-button) 65%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n\n/* hero: centred headline and line, the product on a large screen, the one key under it */\n.ds-hero {\n padding: var(--space-5) 0 0;\n text-align: center;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\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__device {\n width: var(--size-device);\n margin: 0 auto;\n padding: var(--space-4) var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas), var(--shadow-dialog);\n}\n.ds-hero__screen {\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 55%, transparent);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-align: left;\n}\n.ds-hero__bar {\n height: var(--size-pill);\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 color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--size-pill);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-hero__body { display: flex; }\n.ds-hero__sources {\n flex: 0 0 var(--size-source);\n margin: 0;\n padding: var(--space-2) 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__source {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-1) var(--space-3);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n}\n.ds-hero__source.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__rows {\n flex: 1 1 0;\n margin: 0;\n padding: var(--space-1) var(--space-3) var(--space-6);\n background: var(--fill-panel);\n list-style: none;\n}\n.ds-hero__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__row.is-done { color: var(--color-disabled-text); }\n.ds-hero__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: 50%;\n background: var(--fill-button-secondary);\n}\n.ds-hero__stand {\n width: 24%;\n height: var(--space-3);\n margin: 0 auto;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__actions {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n}\n.ds-hero__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\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\n/* ribbon: an accent band wrapped round the top of the feature sheet, its ends folded behind */\n.ds-ribbon {\n position: relative;\n z-index: 1;\n height: var(--size-ribbon);\n margin: var(--space-6) calc(var(--space-3) * -1) 0;\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(--space-1) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n color: var(--color-accent-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--size-ribbon);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-ribbon::before,\n.ds-ribbon::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 0;\n width: var(--space-3);\n height: var(--space-3);\n background: linear-gradient(to bottom left, color-mix(in srgb, var(--color-accent) 55%, var(--color-shadow)) 50%, transparent 50%);\n}\n.ds-ribbon::after {\n right: 0;\n left: auto;\n background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-accent) 55%, var(--color-shadow)) 50%, transparent 50%);\n}\n\n/* features: three centred columns on one sheet, divided by hairlines */\n.ds-features {\n display: flex;\n margin: 0;\n padding: var(--space-4) 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-panel);\n list-style: none;\n}\n.ds-feature {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-feature.is-first { border-left: 0; }\n.ds-feature__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n color: var(--color-heading-alt);\n}\n.ds-feature__title {\n margin: var(--space-1) 0 0;\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-feature__sub {\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-feature__text { margin: 0; }\n\n/* grid: two rows of two long coloured boards, a dark spine down the left edge */\n.ds-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-3));\n border-radius: var(--radius-page);\n background-color: var(--color-fill-1);\n background-image:\n linear-gradient(to right, color-mix(in srgb, var(--color-shadow) 26%, transparent) 0, color-mix(in srgb, var(--color-shadow) 26%, transparent) var(--space-3), color-mix(in srgb, var(--color-canvas) 22%, transparent) var(--space-3), color-mix(in srgb, var(--color-canvas) 22%, transparent) calc(var(--space-3) + var(--size-hair)), transparent calc(var(--space-3) + var(--size-hair))),\n linear-gradient(to bottom, color-mix(in srgb, var(--color-canvas) 18%, transparent) 0, transparent 70%, color-mix(in srgb, var(--color-shadow) 14%, transparent) 100%);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent), var(--shadow-panel);\n color: var(--color-inverse-text);\n text-shadow: var(--shadow-text);\n}\n.ds-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__glyph {\n flex: 0 0 auto;\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-grid__title {\n margin: 0 0 var(--space-1);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text { margin: 0 0 var(--space-2); }\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/* page header: the head of the narrow sheet, an app tile, title and line, keys right */\n.ds-page-header {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-page-header__tile {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-well);\n height: var(--size-well);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 65%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-page-header__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* tabs: a centred row of pills on a tinted strip, the current one pressed dark */\n.ds-tabs {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n height: var(--size-pill);\n padding: 0 var(--space-4);\n border-radius: var(--radius-pill);\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(--size-pill);\n text-decoration: none;\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { background: color-mix(in srgb, var(--color-canvas) 70%, transparent); }\n.ds-tabs__tab.is-current {\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 text-shadow: var(--shadow-text);\n}\n\n/* stats: one raised box, centred figures, hairline dividers */\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-radius: var(--radius-panel);\n background: var(--fill-panel);\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-2);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-stat.is-first { border-left: 0; }\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}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* window: the frame a table lives in, title bar above, key bar below */\n.ds-window {\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-window__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-1) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-window__title { font-weight: var(--weight-bold); }\n.ds-window__body {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface);\n}\n.ds-window__foot {\n display: flex;\n justify-content: center;\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface-strong);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* table: compact rows, hairline rules, no stripes */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n}\n.ds-table__head {\n padding: var(--space-1) 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 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 border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__cell.is-edge { border-left: 0; }\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: a small framed widget with a dark spine, glossy rows, a count at the right */\n.ds-list {\n margin: 0;\n padding: 0 0 0 var(--space-3);\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(--fill-bar);\n box-shadow: var(--shadow-dialog);\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__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-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a centred price card, title over a dashed rule */\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 text-align: center;\n}\n.ds-panel__title {\n margin: 0 var(--space-4);\n padding: var(--space-3) 0 var(--space-2);\n border-bottom: var(--border-width) dashed var(--color-border-strong);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-panel__body { padding: var(--space-3) var(--space-4) var(--space-4); }\n.ds-panel__price {\n margin: 0;\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}\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-plans {\n display: flex;\n align-items: stretch;\n gap: var(--space-4);\n}\n.ds-plans .ds-panel {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n}\n.ds-plans .ds-panel__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: center;\n}\n.ds-plans .ds-button { margin-top: auto; }\n\n/* sidebar: there is no side column; link blocks stand three abreast under the sheet, on the page */\n.ds-sidebar {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 12%, transparent);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item { padding: var(--space-1) 0; }\n.ds-sidebar__meta {\n display: block;\n color: var(--color-text);\n font-size: var(--text-small);\n}\n\n/* notice: a rounded centred message */\n.ds-notices { margin: 0; }\n.ds-notice {\n margin: 0 0 var(--space-2);\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-panel);\n background: var(--color-notice);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n color: var(--color-notice-text);\n text-align: center;\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/* form layout: one narrow centred column, labels over the fields */\n.ds-form__column {\n width: var(--size-form);\n max-width: 100%;\n margin: var(--space-4) auto 0;\n}\n.ds-form__row { margin: 0 0 var(--space-3); }\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n}\n.ds-form__actions .ds-form__actions-end { margin-left: auto; }\n\n/* pagination: separate round keys, centred */\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-pill);\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: a centred trail on the page, slashes between */\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 window with a dark title bar, its close key at the right */\n.ds-dialog__backdrop {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-page);\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 display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);\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 line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n position: relative;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-shadow) 30%, transparent);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-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 {\n padding: var(--space-4);\n text-align: center;\n}\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: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) 0 var(--color-canvas);\n}\n\n/* empty state: no box; a round well with a glyph, words and a key, centred */\n.ds-empty {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n.ds-empty__well {\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-2);\n border-radius: 50%;\n background: var(--color-surface-alt);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-border-strong);\n}\n.ds-empty__icon {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: 0;\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}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* footer: a dark band across the whole window with the closing key, then quiet links */\n.ds-footer {\n margin: var(--space-7) 0 0;\n padding: var(--space-6) 0 var(--space-5);\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: var(--color-inverse-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-footer__call {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n}\n.ds-footer__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-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-1);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__note {\n margin: 0;\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\n font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); font-weight: var(--weight-display); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) - var(--size-hair) - var(--size-hair));\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-heading);\n font-size: var(--text-h3);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0 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: bevelled keys, text engraved */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 65%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), var(--color-button));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--secondary {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: 0 var(--size-hair) 0 var(--color-canvas);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-border-strong) 75%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-heading);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-bar-alt), var(--color-bar-alt)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 65%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-canvas)) 0, var(--color-danger) 55%, color-mix(in srgb, var(--color-danger) 84%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 66%, var(--color-canvas)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-canvas)) 55%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 70%, transparent);\n cursor: default;\n}\n.ds-button__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form controls: inset wells */\n.ds-form { margin: 0; }\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-top-color: color-mix(in srgb, var(--color-input-border) 75%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 3);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox { margin: 0; }\n\n/* badge: lozenge or tag, by the pill radius */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-badge {\n display: inline-block;\n min-width: calc(var(--size-icon) + var(--space-2));\n height: var(--size-icon);\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-accent-text) 35%, transparent), 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--size-icon);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-badge--count {\n background: color-mix(in srgb, var(--color-bar) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed), 0 var(--size-hair) 0 var(--color-canvas);\n color: var(--color-bar-text);\n}\n.ds-badge--new {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-alt) 75%, var(--color-canvas)) 0, var(--color-accent-alt) 100%);\n color: var(--color-heading);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 78%, var(--color-canvas)) 0, var(--color-success) 60%, color-mix(in srgb, var(--color-success) 90%, var(--color-shadow)) 100%);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 75%, var(--color-canvas)) 0, var(--color-warning) 60%, color-mix(in srgb, var(--color-warning) 90%, var(--color-shadow)) 100%);\n color: var(--color-heading);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 50%, transparent);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-canvas)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 90%, var(--color-shadow)) 100%);\n}\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-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-menu { position: relative; display: inline-block; flex: none; }\n.ds-menu__button { display: inline-flex; align-items: center; height: var(--size-control); padding: 0 var(--space-3); 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-control); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-ui); cursor: pointer; list-style: none; }\n.ds-menu__button::-webkit-details-marker { display: none; }\n.ds-menu__button::after { content: \"\"; flex: none; width: 0; height: 0; border: calc(var(--text-ui) * 0.3) solid transparent; border-top: calc(var(--text-ui) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: var(--space-2); }\n.ds-menu__button:hover { box-shadow: var(--shadow-control-hover); }\n.ds-menu[open] > .ds-menu__button { box-shadow: var(--shadow-control-pressed); }\n.ds-menu__list { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 6; min-width: calc(var(--size-control) * 6); margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); text-align: left; }\n.ds-menu__list::before { content: \"\"; position: absolute; right: var(--space-4); bottom: 100%; width: var(--space-3); height: var(--space-3); margin-bottom: calc(var(--space-3) / -2 + var(--size-hair)); transform: rotate(45deg); background: var(--color-surface); border-top: var(--border-width) var(--border-style) var(--color-border-strong); border-left: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-menu__item { position: relative; display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-ui); text-decoration: none; white-space: nowrap; }\n.ds-menu__item:hover, .ds-menu__item:focus { background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism landing specimen, single product\n\n\n\n\n\n\n
\n\n\n
\n \n \n chronoskin\n \n \n
\n\n
\n\n
\n

Keep a proper log with chronoskin

\n

Every passage, every repair and every tin of varnish, written down once and found again in a moment.

\n
\n
\n
chronoskin, Season log
\n
\n
    \n
  • Passages 14
    • \n
  • This week 5
    • \n
  • Repairs 3
    • \n
  • Stores 22
    • \n
  • Crew 6
    • \n
  • Winter list 9
    • \n
\n
    \n
  • Round the point before the ebb
    • \n
  • Whip the frayed jib sheet
    • \n
  • Top up the water, both tanks
    • \n
  • Log engine hours at the mooring
    • \n
  • Ring the yard about the cradle
    • \n
\n
\n
\n
\n
\n
\n Download chronoskin\n \n \n

Version 1.6 for desktop and pocket. Free for your first season.

\n
\n
\n\n
One log, on every device you take aboard
\n
    \n
  • \n \n

    Write it once

    \n

    A page a day, or a line

    \n

    Wind, tide and miles are filled in from the passage. The rest is yours to tell.

    \n
    • \n
  • \n \n

    Take it along

    \n

    Works far from any signal

    \n

    The log lives on the device in your pocket and catches up when you are ashore.

    \n
    • \n
  • \n \n

    Share the watch

    \n

    Crew write in the same book

    \n

    Hand the log to whoever has the helm. Each entry is signed with a name.

    \n
    • \n
\n\n

Four books in one cover

\n\n
    \n
  • \n \n
    \n

    Passages

    \n

    Departure, arrival and everything the sea did in between.

    \n See a passage page\n
    \n
    • \n
  • \n \n
    \n

    Repairs

    \n

    What broke, who mended it, and what it cost to put right.

    \n How repairs are kept\n
    \n
    • \n
  • \n \n
    \n

    Stores

    \n

    Tins, flares and spare shackles, counted before you cast off.

    \n About the stores list\n
    \n
    • \n
  • \n \n
    \n

    Winter list

    \n

    The jobs that wait for the cradle, in the order the yard wants them.

    \n Plan a lay-up\n
    \n
    • \n
\n\n

Free for your first season

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

Try it for a whole summer

\n

Download chronoskin and keep one boat's log at no cost until the lay-up. Nothing is held back: passages, repairs, stores and the winter list are all there from the first page.

\n

When the season ends, a skipper's season keeps the book open and binds the year into a volume you can print.

\n
\n

\n Take the tour\n Compare seasons\n

\n
\n
\n
\n

Skipper's season

\n
\n

24.00

\n

One boat, any number of crew, every update until the spring.

\n See all prices\n
\n
\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Tour
    4. \n
\n
\n\n
\n\n
\n
\n
\n

The tour

\n

One day's page, from slipping the mooring to the last line of remarks.

\n
\n
\n Prices\n Open a log\n
\n
\n\n
\n
\n
\n

A log that reads like one

\n

chronoskin keeps the shape of the paper book it replaces.

\n

Each day opens on a ruled page with the date at the head. Nothing is hidden in menus; the column you need is the column you see. The first passage guide walks through a weekend afloat.

\n

What the page records

\n
    \n
  • Time, course and distance run
    • \n
  • Wind, sea state and the glass
    • \n
  • Remarks, as long as you like
    • \n
\n

For the careful

\n

A copy goes wherever you say. Set backup = ~/Logs once and forget about it.

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

The log, page by page

\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
\n
\n

Labels on a passage

\n
\n 8\n New\n 40\n Moored\n Under way\n Overdue\n
\n

A count of unread remarks, a marker for anything new since you last looked, the pages in the book, and where the boat is now. An overdue boat turns red an hour after her expected arrival.

\n

Read next

\n

\n A sample log\n The four books\n What a season costs\n Setting up a boat\n Back to the top\n

\n
\n
\n
\n

First season

\n
\n

0.00

\n

The whole log for one boat, free until the lay-up.

\n Download chronoskin\n
\n
\n
\n
\n\n
\n\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Prices
    4. \n
\n
\n\n
\n\n
\n
\n
\n

Prices

\n

One price per boat, per season. Crew never pay.

\n
\n
\n Tour\n
\n
\n\n
\n
\n
\n

First season

\n
\n

0.00

\n

The whole log for one boat, free until the lay-up.

\n Download\n
\n
\n
\n

Skipper's season

\n
\n

24.00

\n

One boat, any number of crew, every update until the spring.

\n Buy a season\n
\n
\n
\n

Club fleet

\n
\n

96.00

\n

Twelve boats under one burgee, with a shared stores list.

\n Buy for a club\n
\n
\n
\n
\n\n
\n
\n
What a season includesPer boat
\n \n \n \n \n \n \n \n \n \n \n \n
IncludedFirst seasonSkipper'sClub fleet
Boats1112
Crew who can write pages2840
Bound volumes kept11010
Backup copies a day144
Price for the season0.0024.0096.00
\n
\n
\n\n
\n

No card needed to start. A season is paid for once, when the first one ends.

\n
\n\n
\n\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Your boats
    4. \n
  4. /
    5. \n
  5. Kittiwake
    6. \n
\n
\n\n
\n\n
\n
\n
\n

Kittiwake

\n

A 26 foot sloop, kept on a swinging mooring.

\n
\n
\n
More
\n Boat details\n New page\n
\n
\n\n \n\n
\n
    \n
  • 14Passages this season
    • \n
  • 312Miles logged
    • \n
  • 61.5Engine hours
    • \n
\n
\n\n
\n
\n
Passages, this season1 to 5 of 14
\n \n \n \n \n \n \n \n \n \n \n \n
PassageSailedStateHoursMiles
Out past the breakwater7 JuneMoored4.518
Night run to the estuary5 JuneUnder way7.031
Round the lightship and home30 MayMoored6.024
Delivery from the yard11 MayOverdue9.542
Shakedown after the refit2 MayMoored2.09
\n
\n \n
\n
\n
\n\n
\n
\n
Repairs, this seasonNone
\n
\n
\n
\n

No repairs yet

\n

Nothing has broken since the refit. When something does, write it down here.

\n Log a repair\n
\n
\n
\n
\n\n
\n\n
\n
\n

In this log

\n \n 62%

This season's book: 46 of 74 pages

\n
\n
\n

Crew

\n \n
\n
\n

Read next

\n \n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Kittiwake
    4. \n
  4. /
    5. \n
  5. Boat details
    6. \n
\n
\n\n
\n\n
\n
\n
\n

Boat details

\n

What is printed inside the front cover of Kittiwake's log.

\n
\n
\n Back to the log\n
\n
\n\n \n\n
\n
\n

The log is backed up. The last copy was made this morning.

\n

Not saved. The sail number below is already in use.

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

Another boat in your club has this number.

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

Optional. Shown inside the front cover.

\n
\n
\n \n
\n
\n Safekeeping\n
  • Back up after every passage
  • Sync when in harbourThe log is sent when the boat is back in range.
\n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n\n
\n
\n
\n

Erase log

\n
\n

Erase 46 pages of this season?

\n

Bound volumes are kept. Loose pages cannot be brought back.

\n
\n
\n Keep the log\n Erase\n
\n
\n
\n
\n\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.landing.s03.p04.t02.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-3424\",\n \"short\": \"v1-sk-3424\"\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: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Monaco, Menlo, Consolas, monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 30px;\n --text-h1: 27px;\n --text-h2: 17px;\n --text-h3: 14px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\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" } }