{ "id": "v1-sk-7777", "long_id": "v1.skeuomorphism.app.s07.p07.t07.u07", "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": "pure", "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-7777", "preview_url": "https://chrono.skin/s/v1-sk-7777/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\n- `--font-body` for running text, lists, tables and fields; `--font-heading` for the display title, page titles and section titles; `--font-ui` for keys, rail rows, tabs, table heads and form labels; `--font-mono` for everything a machine would print: counters, lengths, the status line of the display, numeric table cells and time scales.\n- Sizes: `--text-base` for body, `--text-small` for meta, counts, badges and the status strip, `--text-ui` for controls, `--text-large` for the display's lead and the record key, `--text-display` for the title in the display window only, `--text-h1` for page titles, `--text-h2` for section titles and counter figures, `--text-h3` for the third heading level.\n- `--fill-page` is the page; `--color-canvas` the cabinet's main column; `--color-surface` panels, rows and cassette labels; `--color-surface-alt` alternate rows and the foot of the alert; `--color-surface-strong` the tabs strip, the empty well and inline code.\n- `--fill-inverse` with `--color-inverse-text` is the rail, and only the rail. `--fill-bar` with `--color-bar-text` is the faceplate, the table head and whatever is lit or current (the current rail row; pressed states use `--color-bar` darkened toward `--color-shadow`). `--fill-bar-alt` with `--color-bar-alt-text` is every quiet strip: the breadcrumb strip, the counter strip, panel titles (in `--color-heading-alt`), the tabs, the alert's title bar and the footer.\n- A display window (the hero display, a counter figure, the trace of a take) is `--fill-input` with `--color-input-text`, a border darkened toward `--color-shadow` and `--shadow-control-pressed`: the same dress as a form field, so a palette's field colours are also its display colours.\n- Cassettes use `--color-fill-1` to `--color-fill-4` with `--color-inverse-text`; their paper label is `--color-surface` with `--color-heading`. The dots beside the reels in the rail repeat the four fills.\n- `--color-button` is the record key and every primary key; `--fill-button-secondary` the other keys, the knobs, the round play keys of a list row, the select and pagination. `--color-accent` is the badge and the lamp of the current tab; `--color-success`, `--color-warning` and `--color-danger` are state labels, the level meter and the destructive key. Text on the warning label is `--color-warning` darkened most of the way to `--color-shadow`, so that it reads in a light or a dark palette.\n- One-off values built in `components.css` from tokens: the four screws of the faceplate (radial gradients of `--color-shadow` and `--color-bar-text`), the segmented level meter, the sheen of a cassette, the knob of the slide switch (a radial gradient of `--color-button-secondary`), `dotted` for the reels, `uppercase` and 1px tracking for the small titles of the rail and the knob labels, border colours darkened with `color-mix()` toward `--color-shadow`, and translucent mixes of a text token for its quieter form.\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 <= 34px`: the title in the display window is the largest text.\n- `font-size >= 11px`: meta text is the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: a body sans, a narrow sans for titles and keys, a monospace for figures.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `letter-spacing <= 1px`: titles and labels are tracked by one pixel at most.\n- `border-radius <= 10px`: only the cabinet is 10px; keys are 3px and plates 4px.\n- `border-width <= 4px`: edges are hairlines; only the dotted rim of a reel is 4px.\n- `box-shadow-blur <= 16px`: only the cabinet and the alert cast a wide shadow.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves; meters and reels are drawn still.\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.p07.t07.u07\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-7777\",\n \"short\": \"v1-sk-7777\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #19191b;\n --color-canvas: #2b2b2e;\n --color-surface: #343437;\n --color-surface-alt: #2f2f32;\n --color-surface-strong: #232325;\n --color-bar: #6b6e75;\n --color-bar-text: #ffffff;\n --color-bar-alt: #45464b;\n --color-bar-alt-text: #ececee;\n --color-inverse: #0e0e10;\n --color-inverse-text: #f1f1f2;\n --color-text: #c9c9cd;\n --color-text-muted: #8e8e94;\n --color-heading: #f4f4f5;\n --color-heading-alt: #dcdce0;\n --color-link: #f2a93b;\n --color-link-quiet: #a9a9af;\n --color-link-visited: #c99445;\n --color-link-hover: #ffc65c;\n --color-link-active: #d98c0c;\n --color-border: #47474c;\n --color-border-strong: #5c5c62;\n --color-border-muted: #3a3a3e;\n --color-accent: #2a9db5;\n --color-accent-text: #ffffff;\n --color-accent-alt: #e8c33a;\n --color-fill-1: #d9730d;\n --color-fill-2: #70737b;\n --color-fill-3: #b3261e;\n --color-fill-4: #4a4b52;\n --color-button: #d9730d;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #55565c;\n --color-button-secondary-text: #f1f1f2;\n --color-input: #111113;\n --color-input-text: #f6c56e;\n --color-input-border: #5c5c62;\n --color-disabled: #3a3a3e;\n --color-disabled-text: #77777d;\n --color-danger: #e5533f;\n --color-danger-surface: #3a1d1a;\n --color-success: #4f9e33;\n --color-warning: #f2c230;\n --color-notice: #3d3420;\n --color-notice-text: #f3dfae;\n --color-focus: #ffc65c;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", \"Droid Sans\", \"Segoe UI\", sans-serif;\n --font-heading: \"Arial Narrow\", \"PT Sans Narrow\", \"Roboto Condensed\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: \"Arial Narrow\", \"PT Sans Narrow\", \"Roboto Condensed\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Andale Mono\", \"Lucida Console\", Monaco, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 15px;\n --text-display: 34px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 13px;\n --line-body: 1.5;\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: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 1px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 4px;\n --radius-pill: 2px;\n --radius-page: 10px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-shadow) 55%, transparent), 0 2px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 2px 2px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 48%, transparent), 0 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 2px 3px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control-pressed: inset 0 2px 3px color-mix(in srgb, var(--color-shadow) 60%, transparent), 0 1px 0 color-mix(in srgb, white 12%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 70%, transparent), 0 8px 16px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --fill-page: radial-gradient(circle at 2px 2px, color-mix(in srgb, black 22%, transparent) 0, color-mix(in srgb, black 22%, transparent) 1px, transparent 1.5px) 0 0 / 5px 5px, radial-gradient(circle at 2px 3px, color-mix(in srgb, white 8%, transparent) 0, color-mix(in srgb, white 8%, transparent) 1px, transparent 1.5px) 0 0 / 5px 5px, var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, color-mix(in srgb, white 6%, transparent) 0, transparent 1px, color-mix(in srgb, black 6%, transparent) 2px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 24%) 0, var(--color-bar) 45%, color-mix(in srgb, var(--color-bar), black 16%) 100%);\n --fill-bar-alt: repeating-linear-gradient(0deg, color-mix(in srgb, white 4%, transparent) 0, transparent 1px, color-mix(in srgb, black 5%, transparent) 2px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 14%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(circle at 1px 1px, color-mix(in srgb, white 7%, transparent) 0, color-mix(in srgb, white 7%, transparent) 1px, transparent 1.5px) 0 0 / 4px 4px, radial-gradient(circle at 3px 3px, color-mix(in srgb, black 30%, transparent) 0, color-mix(in srgb, black 30%, transparent) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--color-inverse);\n --fill-accent: radial-gradient(ellipse 70% 90% at 50% 0, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 5%) 0, var(--color-surface) 12px);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 32%) 0, var(--color-button) 40%, color-mix(in srgb, var(--color-button), black 24%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 44%) 0, color-mix(in srgb, var(--color-button), white 10%) 40%, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 26%) 0, var(--color-button-secondary) 40%, 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 40%) 0, var(--color-input) 6px);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }