{ "id": "v1-sk-3bb2", "long_id": "v1.skeuomorphism.landing.s03.p11.t11.u02", "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-3bb2", "preview_url": "https://chrono.skin/s/v1-sk-3bb2/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- One plain sans for everything: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, then Arial, Lucida Grande and Verdana; `--font-mono` Monaco.\n- Text is small and dense, pale on the dark ground: `--text-base` 11px at `--line-body` 1.42; `--text-small` 10px; `--text-ui` 11px at `--weight-ui` 700; `--text-large` 14px for the lead and the large key.\n- Headings are bold: `--weight-heading` and `--weight-display` 700. `--text-h3` 14px, `--text-h2` 18px, `--text-h1` 22px, `--text-display` 30px at `--line-display` 1.1.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`). No uppercase and no tracking from this part.\n\n- Green baize, mahogany and brass; the set is dark. `--color-page` #1f5c3d is the felt table; `--color-canvas` #184a31 a sheet of darker felt; `--color-surface` #1b5137 rows and cells; `--color-surface-alt` #17472f alternate rows and wells; `--color-surface-strong` #123a26 title strips.\n- `--color-bar` #5b2f18 (mahogany, ivory text #f8e9c6) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #8b6a3b (oak, ivory text #fff4d8) is title strips and the segmented control; `--color-inverse` #24160f (ebony, ivory text) the closing band or hero block.\n- Text is `--color-text` #d8e5d6, meta `--color-text-muted` #9cbba5, headings ivory `--color-heading` #fdf6e0, sidebar and panel titles `--color-heading-alt` #f3e4b8.\n- Links are gilt: `--color-link` #f2cf6b, paler on hover (#ffe7a0), tan when visited (#d8bb8c), white when active.\n- `--color-button` #a87722 (brass, ivory text) is the one primary action colour; the secondary key is a lighter felt, `--color-button-secondary` #2c7850 with #f6f8ee text. Fields are wells darker than the felt (`--color-input` #0f3524, pale text).\n- `--color-accent` #c0302b (the red chip) for badges, `--color-accent-alt` #2d5aa3 (the blue chip, ivory text) for \"new\" markers; `--color-success` #3f9d2f, `--color-warning` #b3741a (ivory text), `--color-danger` #f0695b on `--color-danger-surface` #4a2420. Notices are ivory cards lying on the felt: `--color-notice` #f3e6c0 with dark text #3a2a12.\n- `--color-fill-1` to `--color-fill-4` (#b02a26 red, #2c58a0 blue, #5c3a7e violet, #7b4a22 walnut) are chip and wood colours for the grid blocks only; ivory text on all four.\n\n## 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 >= 10px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: Helvetica and a monospace.\n- `line-height <= 1.45`: body text is set at 1.42.\n- `underlined-links <= 10%`: links are gilt, not underlined, until hovered.\n- `letter-spacing <= 1px`: nothing is tracked wider than small capital titles.\n- `border-radius <= 13px`: the pill is the largest radius; keys and panels are 2px.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 3px`: edges are drawn as hard hairlines; only a pressed key has a 3px inner shade.\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. 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.p11.t11.u02\",\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-3bb2\",\n \"short\": \"v1-sk-3bb2\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #1f5c3d;\n --color-canvas: #184a31;\n --color-surface: #1b5137;\n --color-surface-alt: #17472f;\n --color-surface-strong: #123a26;\n --color-bar: #5b2f18;\n --color-bar-text: #f8e9c6;\n --color-bar-alt: #8b6a3b;\n --color-bar-alt-text: #fff4d8;\n --color-inverse: #24160f;\n --color-inverse-text: #fbefd2;\n --color-text: #d8e5d6;\n --color-text-muted: #9cbba5;\n --color-heading: #fdf6e0;\n --color-heading-alt: #f3e4b8;\n --color-link: #f2cf6b;\n --color-link-quiet: #a9c6b2;\n --color-link-visited: #d8bb8c;\n --color-link-hover: #ffe7a0;\n --color-link-active: #ffffff;\n --color-border: #2c6b4a;\n --color-border-strong: #0c2a1b;\n --color-border-muted: #225a3d;\n --color-accent: #c0302b;\n --color-accent-text: #ffffff;\n --color-accent-alt: #2d5aa3;\n --color-fill-1: #b02a26;\n --color-fill-2: #2c58a0;\n --color-fill-3: #5c3a7e;\n --color-fill-4: #7b4a22;\n --color-button: #a87722;\n --color-button-text: #fffaf0;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #2c7850;\n --color-button-secondary-text: #f6f8ee;\n --color-input: #0f3524;\n --color-input-text: #f6f8ee;\n --color-input-border: #0a2618;\n --color-disabled: #235c40;\n --color-disabled-text: #6f9a82;\n --color-danger: #f0695b;\n --color-danger-surface: #4a2420;\n --color-success: #3f9d2f;\n --color-warning: #b3741a;\n --color-notice: #f3e6c0;\n --color-notice-text: #3a2a12;\n --color-focus: #f2cf6b;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-heading: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-ui: Helvetica, Arial, \"Lucida Grande\", Verdana, sans-serif;\n --font-mono: Monaco, \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 14px;\n --text-display: 30px;\n --text-h1: 22px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.42;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 2px;\n --radius-panel: 2px;\n --radius-pill: 13px;\n --radius-page: 3px;\n --shadow-panel: 0 0 0 3px color-mix(in srgb, white 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-shadow) 18%, transparent);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 55%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--color-shadow) 8%, transparent), 0 1px 0 color-mix(in srgb, white 70%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 80%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--color-shadow) 8%, transparent), 0 1px 0 color-mix(in srgb, white 70%, transparent);\n --shadow-control-pressed: inset 0 2px 3px color-mix(in srgb, var(--color-shadow) 45%, transparent), 0 1px 0 color-mix(in srgb, white 70%, transparent);\n --shadow-dialog: 0 0 0 3px color-mix(in srgb, white 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-shadow) 35%, transparent), 0 6px 0 color-mix(in srgb, var(--color-shadow) 18%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7'%3E%3Cpath d='M1 0h1v3H1zM3 4h1v3H3z' fill='black' fill-opacity='.025'/%3E%3Cpath d='M4 1h1v2H4zM0 5h1v2H0z' fill='white' fill-opacity='.5'/%3E%3C/svg%3E\"), radial-gradient(ellipse 70% 100% at 50% 0, color-mix(in srgb, white 80%, transparent) 0, transparent 100%) 0 0 / 100% 420px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 9%, transparent) 0, color-mix(in srgb, white 9%, transparent) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, color-mix(in srgb, black 10%, transparent) 0, color-mix(in srgb, black 10%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 12%) 0, var(--color-bar) 40%, color-mix(in srgb, var(--color-bar), black 18%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 80%) 0, color-mix(in srgb, var(--color-bar-alt), white 35%) 100%);\n --fill-inverse: repeating-linear-gradient(0deg, color-mix(in srgb, white 7%, transparent) 0, color-mix(in srgb, white 7%, transparent) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, color-mix(in srgb, black 12%, transparent) 0, color-mix(in srgb, black 12%, transparent) 1px, transparent 1px, transparent 2px), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%) 0, color-mix(in srgb, var(--color-inverse), black 20%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 6%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface) 85%, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 5%) 0, color-mix(in srgb, var(--color-button), black 6%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 14%) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, color-mix(in srgb, var(--color-button-secondary), white 55%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 16%) 0, color-mix(in srgb, var(--color-input), black 8%) 2px, var(--color-input) 7px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }