{ "id": "v1-sk-731b", "long_id": "v1.skeuomorphism.app.s07.p03.t01.u11", "name": "Skeuomorphism app (recorder console, side rail)", "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": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "summary": "A small application drawn as a piece of audio equipment, from the years when screens imitated physical materials: one cabinet on a perforated page, a leatherette rail down its left side, and beside it a brushed faceplate with a display window, two knobs and a record key. It was a common dress for voice memo, radio, music and dictation tools on desktops, tablets and phones between about 2009 and 2013. The working parts are ordinary (a list, a table, a form) but each is built like hardware: counters sit in little windows, tabs are preset keys with a lamp, checkboxes are slide switches.", "url": "https://chrono.skin/s/v1-sk-731b", "preview_url": "https://chrono.skin/s/v1-sk-731b/specimen.html", "files": { "STYLE.md": "# Skeuomorphism app (recorder console, side rail)\n\n## Summary\n\nA small application drawn as a piece of audio equipment, from the years when screens imitated physical materials: one cabinet on a perforated page, a leatherette rail down its left side, and beside it a brushed faceplate with a display window, two knobs and a record key. It was a common dress for voice memo, radio, music and dictation tools on desktops, tablets and phones between about 2009 and 2013. The working parts are ordinary (a list, a table, a form) but each is built like hardware: counters sit in little windows, tabs are preset keys with a lamp, checkboxes are slide switches.\n\n## Layout\n\n- Fixed width: `--size-page` is 1040px, the width of the cabinet (`.ds-page__case`), centred on the page texture with `--space-6` above it. Nothing runs the full window width except the page texture.\n- No bar across the top. The navigation is the rail, `.ds-nav`, `--size-rail` (210px) wide and as tall as the cabinet: the brand at its head, the navigation rows, one `.ds-sidebar` block (the reels) and, pushed to its foot, the tape gauge. To its right `.ds-page__main` (830px) holds the views and, at its foot, the status strip `.ds-footer`. The rail and the footer are written once and stay on every view.\n- Order of the home view (`deck`): the `.ds-hero` faceplate across the main column, directly under it the `.ds-stats` counter strip, then one `.ds-section` split by `.ds-page__split` into a flexible column (title row and the `.ds-list` of latest takes) and a `--size-side` (300px) column (title row and the `.ds-grid` of four cassettes, two to a line). Both columns are one height: the list and the grid stretch.\n- Inner pages keep the rail and drop the faceplate and counters. In their place: `.ds-page__bar`, a brushed strip with the breadcrumb at its left and a small `.ds-page__count` at its right; `.ds-page-header` (title and one line left, one or two keys right); where the screen has tabs, `.ds-page__tools`, a darker strip with the `.ds-tabs` preset keys at its left and a `.ds-page__note` at its right; then `.ds-section` parts, the second and later ones with `.ds-section--ruled`. A detail screen splits a section with `.ds-page__split`, running text on the left and stacked panels (`.ds-stack`) in the 300px column.\n- Views. The specimen is a five-screen application, one `.ds-view` showing at a time. `deck` is the home view: faceplate, counters, latest takes, reels. `recordings` is the All tab: the table of takes with its state labels, pagination and the key to the labels. `recording` is one take: its trace in a display window, the notes as running text with links, and two panels of details and markers. `shared` is the Shared tab: an empty well, and the list of invitations sent. `settings` is the settings form with its notices and keys, and under it the alert that the destructive key opens. The rail leads to `deck`, `recordings`, `shared` and `settings`; `recording` is reached from any row and keeps Recordings lit.\n- Spacing scale: `--space-1` 4px (inside badges, between rail rows), `--space-2` 8px (cell padding, icon gaps, between keys), `--space-3` 12px (row padding, panel padding, between cassettes), `--space-4` 16px (key side padding, display padding), `--space-5` 24px (section padding, column gap), `--space-6` 32px (above the cabinet, empty well), `--space-7` 48px (below the cabinet).\n- Control sizes: `--size-pill` 20px (pagination keys, the switch), `--size-control` 28px (keys, fields, rail rows, tabs), `--size-control-large` 44px (the record key), `--size-knob` 52px, `--size-switch` 44px, `--size-meter` 8px (level meters and the tape gauge), `--size-wave` 96px. `--size-hair` (1px) is the offset of every highlight and groove.\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- Three families. `--font-body` (Lucida Grande, falling back to Verdana) for running text, lists, tables, form fields and sidebar titles. `--font-heading` and `--font-ui` (Helvetica Neue, falling back to Helvetica and Arial) for headlines, buttons, navigation, tabs and title strips. `--font-mono` for code. The references also used commercial faces (a rounded geometric sans and a geometric display sans); Helvetica Neue at weight 300 and 700 is the closest free stack.\n- Sizes: `--text-base` 12px at `--line-body` 1.5; `--text-small` 11px for meta, hints, badges, footer; `--text-ui` 13px bold for controls; `--text-large` 16px for the hero lead and the large button; `--text-h3` 14px, `--text-h2` 20px, `--text-h1` 28px; `--text-display` 40px at weight 300 for the hero headline only. A bold phrase inside the light headline (`.ds-hero__strong`) is the only emphasis.\n- `--color-page` is the pale blue page; `--color-canvas` and `--color-surface` the white sheet; `--color-surface-alt` the grey each section fades to; `--color-surface-strong` the blue tint of the sheet head and source lists.\n- `--color-bar` (slate blue, glossy through `--fill-bar`) is used for the navigation bar, the table head and pressed \"current\" states; `--color-bar-alt` (light grey, `--fill-bar-alt`) for window title bars, panel title strips and the segmented control. `--color-inverse` (dark slate linen, `--fill-inverse`) only for the closing band.\n- Text is `--color-text` grey, never black; headings `--color-heading`; sidebar and panel titles `--color-heading-alt`. Links are `--color-link` with no underline and underline only on hover.\n- `--color-button` blue is the one primary action colour. `--color-accent` orange is for badges; `--color-accent-alt` yellow for \"new\" markers. `--color-success` (leaf green, from the same reference as the green cloth block), `--color-warning` (the pack's own amber; no reference showed a separate one) and `--color-danger` (brick red) are for status badges and the destructive key only. `--color-fill-1` to `--color-fill-4` (blue, green, plum, orange) colour the cloth blocks of the grid and appear nowhere else.\n- Surface: deep glossy convex keys. `--fill-button`, `--fill-bar`, `--fill-bar-alt` and `--fill-accent` are two-tone glosses with a hard split at half height (46% lighter at the top of a key, 26% darker at its foot); `--shadow-control` adds a bright one-pixel inner top edge, a dark inner foot and a tight 3px drop shadow. Corners are round: `--radius-control` and `--radius-panel` 8px, `--radius-page` 14px, `--radius-pill` 20px. The sheet lies on the page with `--shadow-panel`, 0 2px 5px at 45%.\n- Engraving: light text on a dark or coloured fill takes `--shadow-text` (a dark shadow one pixel above). Dark text on a light glossy fill takes a white shadow one pixel below, written in `components.css` as `0 var(--size-hair) 0 var(--color-canvas)` because the vocabulary has one text-shadow token.\n- One-off values built in `components.css` from tokens: the inset well shadow of inputs and the empty state (`inset 0 var(--size-hair) var(--space-1)` of `--color-shadow` at 14%), the one-pixel top highlight of bars and rows, the weave and sheen of grid cells, the gloss gradients of the danger key and the status badges (their colour lightened toward `--color-canvas` and darkened toward `--color-shadow`, as `--fill-button` and `--fill-accent` do), border colours darkened with `color-mix()` toward `--color-shadow`, the 1px letter-spacing and `uppercase` of sidebar titles, and `dashed` for stitching.\n\n- Felt and wood. `--fill-page` is felt: a 6px fleck of dark and light fibres and a pool of light from the top centre. `--fill-inverse` is the same fleck and light over ebony. `--fill-bar` and `--fill-bar-alt` are planks: uneven horizontal grain lines over a top-lit gradient of the bar colour.\n- Keys are polished brass: `--fill-button` runs from 45% lighter at the top through the plain colour to 22% darker, with a bright inner top edge and a soft 0 3px 7px shadow (`--shadow-control`), so they sit padded above the felt. Pressed keys take a 5px inset shade.\n- Sheets are padded cushions lying on the table: `--shadow-panel` is a dark 1px ring and a soft 0 6px 14px at 50%; `--shadow-dialog` a ring and 0 10px 20px. `--fill-panel` is flat felt.\n- Corners are large and soft: `--radius-control` 10px, `--radius-panel` 16px, `--radius-page` 20px, `--radius-pill` 16px. `--fill-accent` is a chip with a highlight across its top.\n- `--shadow-text` is a soft dark shadow one pixel below light text (0 1px 1px at 60%). `--fill-input` shades the top 6px of a well. `--transition` is none.\n\n## Components\n\n- `.ds-page`: on ``; paints the page texture. `.ds-page__case` is the cabinet (`--radius-page`, `--shadow-dialog`), `.ds-page__main` its right column. `.ds-page__bar` is the brushed strip at the top of an inner screen with `.ds-page__count`; `.ds-page__tools` the strip that carries tabs, with `.ds-page__note`. `.ds-page__split` makes two columns of `.ds-page__col`; `.ds-page__col--narrow` is the 300px one. `.ds-section` is one padded part of the main column (`.ds-section--ruled` for a part that follows another), with `.ds-section__head` (a `.ds-section__title` and one link), and `.ds-section__foot` (pagination left, labels right). `.ds-stack` spaces stacked panels.\n- `.ds-view`: one screen of the application, a `
` with an id; only the one named in the address shows, and `.ds-view--home` when none is named. Always a plain block.\n- `.ds-nav`: the rail. `.ds-nav__items` holds `.ds-nav__item` rows, each a `.ds-nav__icon`, a word and at most one `.ds-nav__count`. The current row is a raised brushed key: `is-current`, or in the specimen one selector per view. `is-hover` lightens a row. `.ds-nav__foot` at the bottom holds the `.ds-nav__gauge` with its `.ds-nav__gauge-fill`.\n- `.ds-brand`: the mark and name at the head of the rail. `.ds-brand__mark` is a 28px tile dressed as the primary key; `.ds-brand__name` the name in the heading font, always bold. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the faceplate, once, at the top of the home view. `.ds-hero__display` is the display window with `.ds-hero__status` (a `.ds-hero__lamp` and one mono line), `.ds-hero__title`, `.ds-hero__lead` and two `.ds-hero__meter` rows (`.ds-hero__track`, `.ds-hero__level`, `.ds-hero__level--low`). `.ds-hero__controls` holds `.ds-hero__knobs` (each a `.ds-hero__dial` label with a `.ds-hero__knob`, turned by `--turned` or `--back`), `.ds-hero__actions` with the one `.ds-button--large`, and `.ds-hero__note`.\n- `.ds-page-header`: the head of an inner screen in place of the faceplate: `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text`; `.ds-page-header__actions` with at most two keys, the primary last.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: a moulded key. `.ds-button--secondary`; `.ds-button--danger` for a destructive action, set apart with `.ds-buttons__end`; `.ds-button--large` for the record key only; `.ds-button--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph. `.ds-buttons` is a row.\n- `.ds-form`: `.ds-form__row` with a `.ds-form__label` column and a `.ds-form__field`. `.ds-form__input` and `.ds-form__textarea` are sunk fields, `.ds-form__select` a secondary key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`, drawn as a slide switch that shows `--color-success` when on; `.ds-form__actions`.\n- `.ds-table`: framed table. `.ds-table__head` cells are brushed; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name`, and `is-numeric` for right-aligned mono figures.\n- `.ds-list`: framed rows. `.ds-list__item` (`is-first`) holds a round `.ds-list__icon` key, `.ds-list__body` with `.ds-list__title` and `.ds-list__meta`, optionally a badge, and `.ds-list__time`.\n- `.ds-panel`: framed plate with a `.ds-panel__title` strip and `.ds-panel__body`; `.ds-panel__text`, or `.ds-panel__rows` of `.ds-panel__row` (`is-first`) with `.ds-panel__key` and `.ds-panel__value`.\n- `.ds-stat`: one counter: `.ds-stat__value`, a mono figure in a display window, beside a `.ds-stat__label`. Three to five sit in the `.ds-stats` strip directly under the faceplate; `is-first` on the first.\n- `.ds-grid`: four `.ds-grid__cell` cassettes, two to a line (`--2`, `--3`, `--4` for the other fills). Each holds a `.ds-grid__label` (the paper label, a link), a `.ds-grid__window` with two `.ds-grid__reel` and one `.ds-grid__text` line.\n- `.ds-tabs`: a joined row of preset keys. `.ds-tabs__tab` (`is-first`); the `is-current` key is held down and its lamp is lit in `--color-accent`.\n- `.ds-badge`: a small lit plate for a word. `.ds-badge--count` is a number in a sunk window; `.ds-badge--success` (saved), `.ds-badge--warning` (copying, waiting) and `.ds-badge--danger` (clipped, bounced) are the state labels. `.ds-badges` is a row.\n- `.ds-sidebar`: a block of the rail: `.ds-sidebar__title` over a `.ds-sidebar__list` of `.ds-sidebar__item`, each a `.ds-sidebar__dot` (`--2`, `--3`, `--4`), a `.ds-sidebar__link` and a `.ds-sidebar__meta` count.\n- `.ds-notice`: a plate with a strong left edge; `.ds-notice__title` for the bold lead-in; `.ds-notice--error`. `.ds-notices` wraps several.\n- `.ds-pagination`: small keys, `.ds-pagination__link`; `is-current` is held down, `is-disabled` is flat.\n- `.ds-breadcrumb`: on the `.ds-page__bar` strip: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep`, `.ds-breadcrumb__current`.\n- `.ds-dialog`: an alert window: `.ds-dialog__title` bar with `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__heading` and `.ds-dialog__text`, `.ds-dialog__actions` with the confirming key last. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: a well sunk into the cabinet with `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-wave`: the trace of one take in a display window: `.ds-wave__trace` (an inline SVG painted with `currentColor`) over a `.ds-wave__scale` of times.\n- `.ds-footer`: the status strip at the foot of the main column: `.ds-footer__note` left, `.ds-footer__links` of `.ds-footer__link` right.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the Switches row of the settings form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the Details panel of a recording.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on the Switches label.\n- `.ds-accordion`: `
` help list with glossy bar headings (`.ds-accordion__item`, `__head`, `__body`). Here: under the invitations of the shared view.\n\n## Never\n\n- `content-width <= 1040px`: everything stays inside the cabinet.\n- `row-gap <= 10px`: rows of a list or a table touch.\n- `font-size <= 40px`: the hero headline is the largest text on the page.\n- `font-size >= 9px`: nothing in the references is smaller.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 3`: a humanist sans, Helvetica Neue and a monospace.\n- `line-height <= 1.6`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered; the specimen's few underlines are its hover samples.\n- `uppercase-text <= 15%`: capitals are for small sidebar titles only.\n- `letter-spacing <= 1px`: only the small capital titles are tracked.\n- `border-radius <= 20px`: the largest containers are 20px; nothing is rounder than the first structure's large key.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 20px`: the dialog's 20px shadow is the widest.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Something raised (a key, a knob, a strip) takes a `--fill-*` gradient, a 1px border darkened toward `--color-shadow` and `--shadow-control`; something that shows a reading (a counter, a clock, a meter) is a display window in `--fill-input` and `--color-input-text` with `--shadow-control-pressed`, set in `--font-mono`. A new screen starts with `.ds-page__bar` and `.ds-page-header`; a new group of things in the rail is another `.ds-sidebar`. Do not add a bar across the top of the window, soft floating cards, borders thicker than a hairline on boxes, new font families or new colours.\n", "components.css": ":root {\n --size-page: 1040px;\n --size-rail: 210px;\n --size-side: 300px;\n --size-controls: 230px;\n --size-pill: 20px;\n --size-control: 28px;\n --size-control-large: 44px;\n --size-icon: 16px;\n --size-knob: 52px;\n --size-switch: 44px;\n --size-meter: 8px;\n --size-wave: 96px;\n --size-label: 130px;\n --size-dialog: 400px;\n --size-hair: 1px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n}\n\n/* shell: one cabinet on the page texture, a rail down its left side */\n.ds-page {\n min-width: var(--size-page);\n margin: 0;\n padding: var(--space-6) 0 var(--space-7);\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__case {\n display: flex;\n align-items: stretch;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 60%, transparent);\n border-radius: var(--radius-page);\n background: var(--color-canvas);\n box-shadow: var(--shadow-dialog);\n}\n.ds-page__main {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n background: var(--color-canvas);\n}\n.ds-page__main > .ds-view { flex: 1 1 auto; }\n.ds-page__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: calc(var(--size-control) + var(--space-3));\n padding: var(--space-1) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: var(--color-bar-alt-text);\n}\n.ds-page__count {\n color: color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent);\n font-size: var(--text-small);\n}\n.ds-page__tools {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n}\n.ds-page__note {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-page__split {\n display: flex;\n align-items: stretch;\n gap: var(--space-5);\n}\n.ds-page__col {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n}\n.ds-page__col--narrow {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-page__col > .ds-list,\n.ds-page__col > .ds-grid,\n.ds-page__col > .ds-panel:last-child { flex: 1 1 auto; }\n.ds-section { padding: var(--space-5); }\n.ds-section--ruled { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-4) 0 0;\n}\n.ds-stack { gap: var(--space-4); }\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/* nav: the rail, leatherette with the mark at its head and rows that light up */\n.ds-nav {\n display: flex;\n flex: 0 0 var(--size-rail);\n flex-direction: column;\n width: var(--size-rail);\n padding: var(--space-4) var(--space-3) var(--space-4);\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 60%, transparent);\n background: var(--fill-inverse);\n box-shadow: inset calc(var(--size-hair) * -1) 0 0 color-mix(in srgb, var(--color-inverse-text) 8%, transparent);\n color: var(--color-inverse-text);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0 var(--space-1);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 55%, 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 min-width: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-nav__items {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n height: var(--size-control);\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-inverse-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: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__count {\n margin-left: auto;\n color: color-mix(in srgb, currentColor 70%, transparent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-inverse-text) 12%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#deck\"],\n.ds-page:has(#deck:target) .ds-nav__item[href=\"#deck\"],\n.ds-page:has(#recordings:target) .ds-nav__item[href=\"#recordings\"],\n.ds-page:has(#recording:target) .ds-nav__item[href=\"#recordings\"],\n.ds-page:has(#shared:target) .ds-nav__item[href=\"#shared\"],\n.ds-page:has(#settings:target) .ds-nav__item[href=\"#settings\"] {\n border-color: color-mix(in srgb, var(--color-bar) 50%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-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.ds-nav__foot {\n margin: auto 0 0;\n padding: var(--space-5) var(--space-1) 0;\n color: color-mix(in srgb, var(--color-inverse-text) 65%, transparent);\n font-size: var(--text-small);\n}\n.ds-nav__gauge {\n height: var(--size-meter);\n margin: var(--space-1) 0 var(--space-1);\n overflow: hidden;\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-shadow) 50%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__gauge-fill {\n display: block;\n width: 62%;\n height: 100%;\n background: var(--fill-accent);\n}\n\n/* sidebar: a block of the rail, small capitals over quiet rows */\n.ds-sidebar { margin: var(--space-5) 0 0; }\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-2) var(--space-1);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 60%, transparent);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 10%, transparent);\n color: color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: var(--size-hair);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n}\n.ds-sidebar__dot {\n flex: 0 0 auto;\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: var(--color-fill-1);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 40%, transparent), 0 0 0 var(--size-hair) color-mix(in srgb, var(--color-shadow) 60%, transparent);\n}\n.ds-sidebar__dot--2 { background: var(--color-fill-2); }\n.ds-sidebar__dot--3 { background: var(--color-fill-3); }\n.ds-sidebar__dot--4 { background: var(--color-fill-4); }\n.ds-sidebar__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-sidebar__meta {\n margin-left: auto;\n color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* hero: the faceplate, a display window on the left, knobs and the record key on the right */\n.ds-hero {\n display: flex;\n align-items: stretch;\n gap: var(--space-5);\n padding: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 50%, var(--color-shadow));\n background:\n radial-gradient(circle at var(--space-3) var(--space-3), color-mix(in srgb, var(--color-shadow) 55%, transparent) 0, color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--space-1) - var(--size-hair)), color-mix(in srgb, var(--color-bar-text) 35%, transparent) var(--space-1), transparent calc(var(--space-1) + var(--size-hair))),\n radial-gradient(circle at calc(100% - var(--space-3)) var(--space-3), color-mix(in srgb, var(--color-shadow) 55%, transparent) 0, color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--space-1) - var(--size-hair)), color-mix(in srgb, var(--color-bar-text) 35%, transparent) var(--space-1), transparent calc(var(--space-1) + var(--size-hair))),\n radial-gradient(circle at var(--space-3) calc(100% - var(--space-3)), color-mix(in srgb, var(--color-shadow) 55%, transparent) 0, color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--space-1) - var(--size-hair)), color-mix(in srgb, var(--color-bar-text) 35%, transparent) var(--space-1), transparent calc(var(--space-1) + var(--size-hair))),\n radial-gradient(circle at calc(100% - var(--space-3)) calc(100% - var(--space-3)), color-mix(in srgb, var(--color-shadow) 55%, transparent) 0, color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--space-1) - var(--size-hair)), color-mix(in srgb, var(--color-bar-text) 35%, transparent) var(--space-1), transparent calc(var(--space-1) + var(--size-hair))),\n var(--fill-bar);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 28%, transparent);\n color: var(--color-bar-text);\n}\n.ds-hero__display {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-4) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-input-border) 40%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n color: var(--color-input-text);\n}\n.ds-hero__status {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n color: color-mix(in srgb, var(--color-input-text) 70%, transparent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-hero__lamp {\n flex: 0 0 auto;\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: var(--color-success);\n box-shadow: 0 0 var(--space-1) var(--color-success);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n color: var(--color-input-text);\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-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n color: color-mix(in srgb, var(--color-input-text) 82%, transparent);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__meter {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-1) 0 0;\n color: color-mix(in srgb, var(--color-input-text) 70%, transparent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: 1;\n}\n.ds-hero__track {\n flex: 1 1 0;\n height: var(--size-meter);\n background: color-mix(in srgb, var(--color-input-text) 14%, transparent);\n}\n.ds-hero__level {\n display: block;\n width: 64%;\n height: 100%;\n background:\n repeating-linear-gradient(90deg, transparent 0, transparent var(--space-1), var(--color-input) var(--space-1), var(--color-input) calc(var(--space-1) + var(--size-hair) + var(--size-hair))),\n linear-gradient(90deg, var(--color-success) 0, var(--color-success) 78%, var(--color-warning) 78%, var(--color-warning) 100%);\n}\n.ds-hero__level--low { width: 47%; }\n.ds-hero__controls {\n display: flex;\n flex: 0 0 var(--size-controls);\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-3);\n width: var(--size-controls);\n}\n.ds-hero__knobs {\n display: flex;\n justify-content: space-around;\n}\n.ds-hero__dial {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\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: 1;\n letter-spacing: var(--size-hair);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-hero__knob {\n position: relative;\n display: block;\n width: var(--size-knob);\n height: var(--size-knob);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 45%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control), 0 0 0 var(--space-1) color-mix(in srgb, var(--color-shadow) 22%, transparent);\n}\n.ds-hero__knob::after {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: calc(50% - var(--size-hair));\n width: calc(var(--size-hair) + var(--size-hair));\n height: var(--space-3);\n border-radius: var(--size-hair);\n background: var(--color-button-secondary-text);\n}\n.ds-hero__knob--turned { transform: rotate(48deg); }\n.ds-hero__knob--back { transform: rotate(-64deg); }\n.ds-hero__actions { display: flex; }\n.ds-hero__actions .ds-button { flex: 1 1 auto; }\n.ds-hero__note {\n margin: 0;\n color: color-mix(in srgb, var(--color-bar-text) 80%, transparent);\n font-size: var(--text-small);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n\n/* page header: the head of an inner screen, title left, keys right */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-5) var(--space-4);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-canvas) 100%);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\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: var(--space-1) 0 0;\n color: var(--color-text-muted);\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/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-4) 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); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { color: var(--color-heading-alt); font-size: var(--text-h3); }\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: var(--radius-control);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: moulded keys with a hard foot */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-buttons__end { margin-left: auto; }\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) 55%, 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: color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-button-secondary) 45%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 72%, var(--color-accent-text)) 0, var(--color-danger) 40%, color-mix(in srgb, var(--color-danger) 78%, 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) 62%, var(--color-accent-text)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-accent-text)) 40%, color-mix(in srgb, var(--color-danger) 86%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-2);\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: none;\n cursor: default;\n}\n.ds-button__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form: label column, sunk fields, slide switches */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-1);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-top-color: color-mix(in srgb, var(--color-input-border) 60%, 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) 22%, transparent);\n color: var(--color-input-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n width: auto;\n border-color: color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\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 color: var(--color-text);\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 min-height: var(--size-control);\n}\n.ds-form__checkbox {\n flex: 0 0 auto;\n width: var(--size-switch);\n height: var(--size-pill);\n margin: 0;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-input-border) 60%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background:\n radial-gradient(circle at calc(var(--size-pill) / 2 - var(--size-hair)) 50%, var(--color-button-secondary) 0, var(--color-button-secondary) calc(var(--size-pill) / 2 - var(--space-1)), color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--size-pill) / 2 - var(--space-1) + var(--size-hair)), transparent calc(var(--size-pill) / 2 - var(--space-1) + var(--size-hair) + var(--size-hair))),\n var(--color-disabled);\n box-shadow: var(--shadow-control-pressed);\n appearance: none;\n cursor: pointer;\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background:\n radial-gradient(circle at calc(100% - var(--size-pill) / 2 + var(--size-hair)) 50%, var(--color-button-secondary) 0, var(--color-button-secondary) calc(var(--size-pill) / 2 - var(--space-1)), color-mix(in srgb, var(--color-shadow) 55%, transparent) calc(var(--size-pill) / 2 - var(--space-1) + var(--size-hair)), transparent calc(var(--size-pill) / 2 - var(--space-1) + var(--size-hair) + var(--size-hair))),\n var(--color-success);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus { outline: var(--focus-ring); }\n.ds-form__actions {\n margin: var(--space-4) 0 0;\n padding-left: calc(var(--size-label) + var(--space-3));\n}\n\n/* table: framed, brushed head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 50%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-text) 25%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell--name { color: var(--color-heading); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric {\n text-align: right;\n}\n.ds-table__cell.is-numeric { font-family: var(--font-mono); }\n\n/* list: framed rows, a small round key, title and meta, the length at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\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}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__icon {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-list__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__time {\n flex: 0 0 auto;\n color: var(--color-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* badge: a lit label plate */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badge {\n display: inline-block;\n flex: 0 0 auto;\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) 30%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-shadow) 50%, 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 text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-badge--count {\n background: color-mix(in srgb, var(--color-bar) 80%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n}\n.ds-badge--success { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 78%, var(--color-accent-text)) 0, var(--color-success) 55%, color-mix(in srgb, var(--color-success) 86%, var(--color-shadow)) 100%); }\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 72%, var(--color-accent-text)) 0, var(--color-warning) 55%, color-mix(in srgb, var(--color-warning) 86%, var(--color-shadow)) 100%);\n color: color-mix(in srgb, var(--color-shadow) 78%, var(--color-warning));\n text-shadow: none;\n}\n.ds-badge--danger { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-accent-text)) 0, var(--color-danger) 55%, color-mix(in srgb, var(--color-danger) 86%, var(--color-shadow)) 100%); }\n\n/* panel: a framed plate with a brushed title strip */\n.ds-panel {\n margin: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-panel__body { padding: var(--space-3); }\n.ds-panel__text { margin: 0 0 var(--space-2); }\n.ds-panel__rows { margin: 0; }\n.ds-panel__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row.is-first { border-top: 0; }\n.ds-panel__key {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel__value {\n margin: 0;\n color: var(--color-heading);\n text-align: right;\n}\n\n/* stats: the counter strip under the faceplate, each figure in its own window */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n list-style: none;\n}\n.ds-stat {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-bar-alt-text) 12%, transparent);\n}\n.ds-stat.is-first {\n border-left: 0;\n box-shadow: none;\n}\n.ds-stat__value {\n flex: 0 0 auto;\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-input-border) 40%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n font-family: var(--font-mono);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--size-control);\n}\n.ds-stat__label {\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* grid: four cassettes, a paper label over a window with two reels */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-fill-1) 50%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background-color: var(--color-fill-1);\n background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse-text) 22%, transparent) 0, transparent 45%, color-mix(in srgb, var(--color-shadow) 22%, transparent) 100%);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-grid__cell--2 { border-color: color-mix(in srgb, var(--color-fill-2) 50%, var(--color-shadow)); background-color: var(--color-fill-2); }\n.ds-grid__cell--3 { border-color: color-mix(in srgb, var(--color-fill-3) 50%, var(--color-shadow)); background-color: var(--color-fill-3); }\n.ds-grid__cell--4 { border-color: color-mix(in srgb, var(--color-fill-4) 50%, var(--color-shadow)); background-color: var(--color-fill-4); }\n.ds-grid__label {\n display: block;\n padding: var(--space-1) var(--space-2);\n overflow: hidden;\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-grid__label:hover,\n.ds-grid__label.is-hover { color: var(--color-link-hover); }\n.ds-grid__window {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n justify-content: center;\n gap: var(--space-5);\n margin: var(--space-2) var(--space-3);\n padding: var(--space-2) 0;\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-shadow) 45%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-grid__reel {\n width: var(--space-5);\n height: var(--space-5);\n border: var(--space-1) dotted color-mix(in srgb, var(--color-inverse-text) 85%, transparent);\n border-radius: 50%;\n background: color-mix(in srgb, var(--color-shadow) 50%, transparent);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n\n/* tabs: a row of preset keys, the chosen one held down with its lamp lit */\n.ds-tabs {\n display: inline-flex;\n margin: 0;\n padding: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 55%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-control);\n list-style: none;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 55%, var(--color-shadow));\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-1);\n border-radius: var(--size-hair);\n background: color-mix(in srgb, var(--color-shadow) 45%, transparent);\n}\n.ds-tabs__tab.is-first { border-left: 0; }\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { background: color-mix(in srgb, var(--color-bar-alt-text) 10%, transparent); }\n.ds-tabs__tab.is-current {\n background: color-mix(in srgb, var(--color-bar-alt) 62%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__tab.is-current::before {\n background: var(--color-accent);\n box-shadow: 0 0 var(--space-1) var(--color-accent);\n}\n\n/* notice: a plate with a lamp at its left edge */\n.ds-notices { margin: 0 0 var(--space-4); }\n.ds-notice {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 70%, var(--color-notice-text));\n border-left-width: var(--border-width-strong);\n border-left-color: var(--color-notice-text);\n border-radius: var(--radius-control);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger-surface) 60%, var(--color-danger));\n border-left-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: small keys */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--size-pill);\n height: var(--size-pill);\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\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-transform: var(--ui-transform);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 50%, var(--color-shadow));\n background: color-mix(in srgb, var(--color-bar) 80%, 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 border-color: var(--color-border-strong);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: on the brushed strip at the top of an inner screen */\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: color-mix(in srgb, var(--color-bar-alt-text) 75%, transparent);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-breadcrumb__sep { color: color-mix(in srgb, var(--color-bar-alt-text) 50%, transparent); }\n.ds-breadcrumb__current {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n}\n\n/* wave: the trace of one recording in a display window */\n.ds-wave {\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-input-border) 40%, var(--color-shadow));\n border-radius: var(--radius-panel);\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-wave__trace {\n display: block;\n width: 100%;\n height: var(--size-wave);\n}\n.ds-wave__scale {\n display: flex;\n justify-content: space-between;\n margin: var(--space-1) 0 0;\n color: color-mix(in srgb, var(--color-input-text) 70%, transparent);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* dialog: an alert window on a dimmed part of the screen */\n.ds-dialog__backdrop {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 55%, var(--color-shadow));\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-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__close {\n position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-ui) * 0.75);\n height: calc(var(--text-ui) * 0.75);\n color: var(--color-bar-alt-text);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-ui) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body { padding: var(--space-4) var(--space-3); }\n.ds-dialog__heading {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n}\n\n/* empty state: a well sunk into the cabinet */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top-color: var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-strong);\n box-shadow: inset 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 22%, transparent);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* footer: the status strip along the foot of the cabinet */\n.ds-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-5);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt) 60%, var(--color-shadow));\n background: var(--fill-bar-alt);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: color-mix(in srgb, var(--color-bar-alt-text) 80%, transparent);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-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 { margin: 0; }\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-accordion { margin: var(--space-3) 0 0; border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-control); overflow: hidden; }\n.ds-accordion__item + .ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__head { display: block; padding: var(--space-2) var(--space-3); background: var(--fill-bar-alt); color: var(--color-bar-alt-text); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); cursor: pointer; list-style: none; text-shadow: var(--shadow-text); }\n.ds-accordion__head::-webkit-details-marker { display: none; }\n.ds-accordion__head::before { content: \"\"; display: inline-block; width: 0; height: 0; margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.4)); border: calc(var(--text-ui) * 0.3) solid transparent; border-left: calc(var(--text-ui) * 0.4) solid currentColor; border-right-width: 0; vertical-align: calc(var(--text-ui) * 0.05); }\n.ds-accordion__item[open] > .ds-accordion__head::before { transform: rotate(90deg); }\n.ds-accordion__item[open] > .ds-accordion__head { border-bottom: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-accordion__body { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-control-pressed); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-body); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism recorder specimen\n\n\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n \n\n
\n

Reels

\n \n
\n\n
\n Tape used\n
\n 46 h 12 min of 74 h\n
\n
\n\n
\n\n
\n\n
\n
\n

Standing by, input 1, 44.1 kHz

\n

Ready when you are

\n

chronoskin keeps every take on one deck: press the key, talk or play, and find it again by reel, date or marker.

\n
L
\n
R
\n
\n
\n
\n Gain\n Monitor\n
\n
\n \n \n Start recording\n \n
\n

Saves to the reel Field notes

\n
\n
\n\n
    \n
  • 0128recordings on the deck
    • \n
  • 46:12hours and minutes of tape
    • \n
  • 0412markers set
    • \n
  • 0007takes this week
    • \n
\n\n
\n
\n
\n
\n

Latest takes

\n All 128 recordings\n
\n \n
\n
\n
\n

Reels

\n New reel\n
\n \n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Deck
    2. \n
  2. /
    3. \n
  3. Recordings
    4. \n
  4. /
    5. \n
  5. All reels
    6. \n
\n 128 recordings, 46 h 12 min\n
\n\n
\n
\n

Recordings

\n

Every take on the deck, newest first. Open one to hear it and read its notes.

\n
\n
\n Import\n New recording\n
\n
\n\n
\n \n Showing 1 to 7 of 128\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameReelRecordedLengthSize, MBState
Harbour at six, gulls and a ferry hornField notesToday, 06:0412:48129.4Saved
Talk with the lock keeper, part twoInterviewsYesterday, 15:3041:07415.0Copying
Quartet, second movement, slowerRehearsalsTuesday, 19:1208:3186.0Saved
Rain on the tin roof of the boat shedField notesMonday, 22:4027:15275.1Saved
Reminder: order new windshieldsMemosMonday, 09:0200:223.7Saved
Talk with the lock keeper, part oneInterviewsLast Friday, 14:1036:52372.2Clipped
Quartet, tuning and first runRehearsalsLast Thursday, 19:0522:09223.6Saved
\n
\n \n
\n New\n 128\n Saved\n Copying\n Clipped\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Deck
    2. \n
  2. /
    3. \n
  3. Recordings
    4. \n
  4. /
    5. \n
  5. Harbour at six
    6. \n
\n Take 128, Field notes\n
\n\n
\n
\n

Harbour at six

\n

Gulls and a ferry horn, recorded today at 06:04 from the east pier.

\n
\n
\n Share\n \n \n Play\n \n
\n
\n\n
\n
\n \n
00:0003:1206:2409:3612:48
\n
\n
\n\n
\n
\n
\n
\n

Notes on this take

\n

A still morning with the tide going out. The microphones stood on the east pier, about a metre above the water, pointing at the harbour mouth. Nothing was cut and nothing was levelled afterwards.

\n

What you can hear

\n
    \n
  • Gulls over the fish quay from the start to about 04:10.
    • \n
  • The first ferry sounds its horn twice at 07:32.
    • \n
  • Ropes and fenders working against the pier at the end.
    • \n
\n

File

\n

Stored as harbour-at-six.wav, two channels, 24 bit. See how recordings are stored to change this for new takes.

\n
\n

\n Other takes on this reel\n The same pier in March\n Who can listen\n Storage settings\n

\n
\n
\n
\n

Details

\n
\n
\n
Reel
Field notes
\n
Length
12 min 48 s
\n
Size
129.4 MB
\n
Peak level
minus 3 dB
\n
State
Saved
\n
\n 62%

Copying to the shared folder: 62%

\n
\n
\n
\n

Markers

\n
\n
\n
00:40
Gulls, close
\n
07:32
Ferry horn
\n
11:05
Ropes on the pier
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Deck
    2. \n
  2. /
    3. \n
  3. Recordings
    4. \n
  4. /
    5. \n
  5. Shared
    6. \n
\n 0 shared, 3 invitations waiting\n
\n\n
\n
\n

Recordings

\n

Takes that other people have opened to you, and the invitations you have sent.

\n
\n
\n Share a recording\n
\n
\n\n
\n \n Nothing to show yet\n
\n\n
\n
\n \n

No shared recordings

\n

When someone opens a take to you it appears here, ready to play.

\n Choose a recording to share\n
\n
\n\n
\n
\n

Invitations you have sent

\n Sharing settings\n
\n \n
Does it work offline?

Yes. Everything is kept on your own machine.

Can I move to another computer?

Copy the library folder across and open it there.

How do I get help?

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

\n
\n\n
\n\n
\n\n
\n
    \n
  1. Deck
    2. \n
  2. /
    3. \n
  3. Settings
    4. \n
  4. /
    5. \n
  5. Recording
    6. \n
\n Version 2.1\n
\n\n
\n
\n

Settings

\n

How new takes are recorded, named and stored on this deck.

\n
\n
\n Restore defaults\n
\n
\n\n
\n
\n

Input found. The stereo microphone on input 1 is connected and will be used for new takes.

\n

Not saved. The folder for copies could not be reached. Check the path below.

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

Shown to people you share a recording with.

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

This folder does not answer. Connect the drive or choose another folder.

\n
\n
\n
\n SwitchesThese act on new takes only.\n
\n \n
  • Limiter
  • Monitor through headphones
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n Cancel\n \n Erase all recordings\n
\n
\n
\n
\n\n
\n
\n
\n

Erase the deck

\n
\n

Erase all 128 recordings?

\n

The takes, their notes and their markers are removed from this deck. Copies in other folders are not touched.

\n
\n
\n Keep them\n Erase everything\n
\n
\n
\n
\n\n
\n\n \n\n
\n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.app.s07.p03.t01.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-731b\",\n \"short\": \"v1-sk-731b\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #c8cbd0;\n --color-canvas: #f0f0f0;\n --color-surface: #f0f0f0;\n --color-surface-alt: #e8e8e8;\n --color-surface-strong: #d8d8e0;\n --color-bar: #31333a;\n --color-bar-text: #ffffff;\n --color-bar-alt: #c8c8d0;\n --color-bar-alt-text: #333333;\n --color-inverse: #3a6683;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #5e5e5e;\n --color-heading: #303038;\n --color-heading-alt: #554230;\n --color-link: #1178b5;\n --color-link-quiet: #575758;\n --color-link-visited: #607890;\n --color-link-hover: #0a4e9d;\n --color-link-active: #951c83;\n --color-border: #d8d8e0;\n --color-border-strong: #aaaaaa;\n --color-border-muted: #e8e8e8;\n --color-accent: #c73dab;\n --color-accent-text: #ffffff;\n --color-accent-alt: #fca904;\n --color-fill-1: #3a6683;\n --color-fill-2: #88502b;\n --color-fill-3: #5b9a00;\n --color-fill-4: #31333a;\n --color-button: #88502b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #e8e8e8;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #aaaaaa;\n --color-disabled: #d8d8e0;\n --color-disabled-text: #999999;\n --color-danger: #8e2126;\n --color-danger-surface: #f1f1f1;\n --color-success: #5b9a00;\n --color-warning: #fca904;\n --color-notice: #d8d8e0;\n --color-notice-text: #303038;\n --color-focus: #40a8e0;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, 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: Menlo, Monaco, \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 40px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 300;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 10px;\n --radius-panel: 16px;\n --radius-pill: 16px;\n --radius-page: 20px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 6px 14px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 3px 7px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 4px 9px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 45%, transparent), 0 10px 20px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.14'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 65% 100% at 50% 0, color-mix(in srgb, white 20%, transparent) 0, transparent 100%) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, black 10%, transparent) 0, transparent 2px, color-mix(in srgb, white 5%, transparent) 3px, transparent 5px, color-mix(in srgb, black 7%, transparent) 7px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 26%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, black 8%, transparent) 0, transparent 2px, color-mix(in srgb, white 7%, transparent) 4px, transparent 6px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 20%) 0, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), black 18%) 100%);\n --fill-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 1h1v1H3zM5 3h1v1H5zM1 4h1v1H1zM4 5h1v1H4z' fill='black' fill-opacity='.16'/%3E%3Cpath d='M2 0h1v1H2zM5 1h1v1H5zM1 2h1v1H1zM3 3h1v1H3zM0 5h1v1H0z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), radial-gradient(ellipse 60% 130% at 50% 0, color-mix(in srgb, white 18%, transparent) 0, transparent 100%), var(--color-inverse);\n --fill-accent: radial-gradient(ellipse 80% 60% at 50% 0, color-mix(in srgb, white 35%, transparent) 0, transparent 100%), var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 10%) 35%, var(--color-button) 70%, color-mix(in srgb, var(--color-button), black 22%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 58%) 0, color-mix(in srgb, var(--color-button), white 22%) 35%, color-mix(in srgb, var(--color-button), white 8%) 70%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 22%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 20%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 30%) 0, var(--color-input) 6px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }