{ "id": "v1-my-4444", "long_id": "v1.material-you.app.s04.p04.t04.u04", "name": "Tonal podcast app, 2025", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "app", "mode": "pure", "viewport": { "width": 1440, "fluid": false }, "summary": "A listening app in the tonal language of 2021 to 2026: a search row, one segmented navigation bar and two rounded panes, the main one opening with a large now-playing card whose progress is a wavy line. Every colour is a tint of one sky-blue key colour, with a bright yellow tertiary for markers and notices; controls and cards have 28px corners, buttons and indicators are full pills, and depth is a stronger tint, with a small shadow only under the cover, the search bar and dialogs. Type is a rounded geometric sans (Figtree over Nunito Sans) with semibold headings and a bold 60px display size.", "url": "https://chrono.skin/s/v1-my-4444", "preview_url": "https://chrono.skin/s/v1-my-4444/specimen.html", "files": { "STYLE.md": "# Tonal podcast app, 2025\n\n## Summary\n\nA listening app in the tonal language of 2021 to 2026: a search row, one segmented navigation bar and two rounded panes, the main one opening with a large now-playing card whose progress is a wavy line. Every colour is a tint of one sky-blue key colour, with a bright yellow tertiary for markers and notices; controls and cards have 28px corners, buttons and indicators are full pills, and depth is a stronger tint, with a small shadow only under the cover, the search bar and dialogs. Type is a rounded geometric sans (Figtree over Nunito Sans) with semibold headings and a bold 60px display size.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px and the page does not stretch beyond it. The window is `--fill-page` with `--space-3` at its sides. From the top: `.ds-nav`, then the open view, then `.ds-footer`.\n- `.ds-nav` has two rows. `.ds-nav__inner` holds `.ds-brand` at the left, the search pill (at most `--size-search` 560px) in the middle and `.ds-nav__tools` (an icon button and the avatar) at the right. Under it `.ds-nav__links` is one pill-shaped bar on `--fill-bar` in which the four destinations share the width equally, each `--size-row-dense` 52px tall with its icon beside the label.\n- Every view is `.ds-main`: two `.ds-pane` sheets (`--color-canvas`, `--radius-page`) `--space-3` apart, the main pane fluid with `--space-6` of padding, the supporting `.ds-pane--side` fixed at `--size-side` 420px with `--space-5` of padding and its blocks `--space-4` apart. The panes end at the same height.\n- Home view, main pane: `.ds-hero` (cover at `--size-art` 232px, then kicker, display title, lead, `.ds-wave`, `.ds-player__times` and `.ds-player__controls`), `.ds-stats` `--space-3` under it, `.ds-filter` (section title, chips, a link) and the `.ds-grid` of four show tiles. Supporting pane: the queue as a `.ds-list--cards`, a tonal `.ds-panel` with a `.ds-meter`, and a `.ds-snackbar` at the foot.\n- Spacing: `--space-1` 4px (inside the navigation bar, icon to label), `--space-2` 8px (between list cards, buttons and chips), `--space-3` 12px (between panes, stat tiles and grid tiles), `--space-4` 16px (blocks of the supporting pane, row padding, field gap), `--space-5` 24px (card padding, supporting pane padding), `--space-6` 32px (main pane padding), `--space-7` 44px (hero padding, above a section), `--space-8` 60px (reserved for wider heroes).\n- Heights: buttons and avatars `--size-control` 40px; fields and the search bar `--size-field` 56px; the round player buttons `--size-fab` 56px; the play button `--size-play` 72px; chips `--size-chip` 32px; list rows `--size-row` 68px; table rows, tabs and navigation items `--size-row-dense` 52px; grid tiles at least `--size-tile` 184px. `--size-measure` 640px caps running text, `--size-dialog` is 360px.\n- Inner pages keep both panes and have no hero. The main pane opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then the working components: `.ds-tabs`, badges and the table with pagination; or a large `.ds-search`, chips and results; or notices and the form. The supporting pane holds what belongs beside them: the text about a show, the `.ds-sidebar`, a dialog, small cards.\n- Views: `listen` (home) is the player, the shows and the queue. `show` is one show: episodes table under tabs, with the text about it at the side. `search` shows a search without results beside the subject list. `settings` has the notices, the playback form and, at the side, storage and the remove-downloads dialog.\n- Below 1100px the panes stack and the grid has two columns. Below 640px the search pill leaves the top row, `.ds-nav__links` becomes a navigation bar fixed to the bottom edge (icon in a `--size-indicator` by `--size-chip` pill above a small label), the hero stacks with a smaller cover, stats and form rows become one column and `.ds-table__extra` cells are hidden.\n\n## Typography and colour roles\n\n- Two sans-serif families: `--font-heading` and `--font-ui` are Figtree, `--font-body` is Nunito Sans; `--font-mono` (Fira Code) is for code only.\n- Sizes: `--text-base` 16px at `--line-body` 1.5; `--text-small` 13px (meta, labels, badges, times); `--text-ui` 15px (buttons, chips, tabs, navigation, table cells); `--text-large` 20px (hero lead, prose lead); `--text-display` 60px at `--line-display` 1.08 with `--display-tracking` -1.5px (hero title only); `--text-h1` 38px, `--text-h2` 26px, `--text-h3` 19px at `--line-heading` 1.2 with `--heading-tracking` -0.3px.\n- Weights: headings and labels 600, display and `--weight-bold` 700, body 400. `--ui-transform` is `none`: labels are sentence case.\n- Links are not underlined at rest (`--link-decoration` `none`), underlined on hover.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons (`none`); `--shadow-control-hover` is on hovered buttons and on the search bar, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and under the cover of the now-playing card. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- The wave is drawn in the current text colour of the hero; its unplayed part is the same colour at 30% opacity.\n\n## Components\n\n- `.ds-page` on ``: the window on `--fill-page`, with the navigation, one view and the footer stacked.\n- `.ds-nav`: the header. `.ds-nav__inner` is the row with brand, search and `.ds-nav__tools`; `.ds-nav__links` is the segmented navigation bar on `--fill-bar`, holding `.ds-nav__link` items with the icon in a `.ds-nav__pill`. The current item (`is-current`, or the rule for the open view) is filled with `--fill-button-secondary`; on a phone only its pill is.\n- `.ds-main`: the two panes of a view. `.ds-pane` is a sheet; `.ds-pane--side` is the supporting pane, a column of blocks.\n- `.ds-hero`: the now-playing card in `--fill-accent`. `.ds-cover` is the drawn cover with `.ds-cover__shape--1` to `--3`; `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, the `.ds-wave` (an inline SVG: the played part wavy, `.ds-wave__rest` straight and faint, `.ds-wave__thumb` a short upright bar), `.ds-player__times` and `.ds-player__controls` with `.ds-player__extra` chips at the right.\n- `.ds-filter`: a section title, chips and a link in one row above the grid.\n- `.ds-grid`: four tiles. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a `.ds-grid__art` shape on the canvas tone holding an icon, `.ds-grid__title` and `.ds-grid__text`; hovering tightens the corners.\n- `.ds-tabs`: a hairline-ruled row of `.ds-tabs__tab`; `is-current` is link-coloured with a short rounded `--border-width-strong` indicator under the label.\n- `.ds-sidebar`: the subject list of the search view, a filled card with `.ds-sidebar__title` and a `.ds-sidebar__list` of pill-shaped `.ds-sidebar__link` rows, each with a `.ds-sidebar__count`; `is-current` is on the secondary container.\n- `.ds-footer`: a rounded strip on `--fill-bar-alt` with `.ds-footer__legal` and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-meter`: a thin pill track with a `.ds-meter__bar` in `--fill-button`, for a goal or storage.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: the head of an inner view, unboxed on the sheet. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text` (one muted line); `.ds-page-header__actions` sits at the right with one filled button at most.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out in a row.\n- `.ds-button`: the filled pill button. `--secondary` is the tonal button, `--outlined` has a `--color-border-strong` outline and a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` it is a danger-coloured text button for dialogs), `--large` is the tall form for a hero or an order form, `--icon` is a round icon button, `--fab` is the floating action button, a rounded square in `--fill-accent`, and `--on-inverse` is the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. Never more than one filled button in a group.\n- `.ds-icon`: stroked inline SVG in the current text colour; `--small` inside buttons, chips and tabs.\n- `.ds-chip`: an outlined 32px chip; `is-current` fills it with the secondary container. Group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (56px, outlined, `--fill-input`; `--area` for a textarea; wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields side by side. `is-focus` shows the focus ring, `is-invalid` on the field plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger and in `--color-button-text` on a `--fill-button` track when on.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; rows are divided by `--color-border-muted`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-list`: rows of `.ds-list__item`, each with an optional `.ds-list__icon` disc (`--1`, `--3`, `--4` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` or a button on the right. `--cards` turns every row into its own filled card, `--space-2` apart, and `is-current` puts the selected one on the secondary container.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined` is the outlined card on the canvas, `--tonal` the stronger tint, `--accent` the primary container. A card is filled or outlined, never both.\n- `.ds-stat`: one summary figure, a tile with `.ds-stat__value` and `.ds-stat__label`. Three or more sit in a `.ds-stats` row.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, and `--success`, `--warning`, `--danger` are the tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface` with a danger-coloured title. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, an optional `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned text buttons in `.ds-dialog__actions`. It sits on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark` (a rounded square in `--fill-accent` holding an icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-search`: the search bar, one pill on `--fill-input` with an icon and `.ds-search__text`. `.ds-avatar`: a disc with initials. `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`.\n- `.ds-button--play` is the wide filled play or pause button of the hero (with `--large`); `.ds-button--round` is a player button on the canvas tone, a rounded square that becomes a circle when hovered. `.ds-search--large` is the search field of the search view. `.ds-list__icon--play` fills a row's disc like the primary button.\n- `.ds-section` with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side and `.ds-stack` piles cards in one of them. `.ds-shapes` with `.ds-shape--1` to `--4` is spare artwork: a circle, a rounded square and a pill.\n\n## Never\n\n- `row-gap <= 12px`: list cards are 8px apart and table rows touch.\n- `block-gap <= 44px`: blocks in a pane are 12 to 44px apart.\n- `uppercase-text = 0%`: buttons, tabs and navigation labels are sentence case.\n- `font-weight <= 700`: bold is kept for the display title and strong text.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 13px`: the smallest labels are 13px.\n- `font-size <= 60px`: the hero title is the largest text.\n- `font-families <= 3`: a heading face, a body face and the mono for code.\n- `line-height <= 1.6`: body text is 16px on a 24px line.\n- `underlined-links <= 10%`: links are marked by colour; only the snackbar action is underlined.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 2px`: outlines are 1px; the tab indicator, checkbox and switch track are 2px.\n- `box-shadow-blur <= 8px`: the only shadows are small ones under floating things.\n- `border-radius <= 32px`: containers stop at 32px; anything rounder is a full pill.\n- `transition != none`: controls ease between states.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything that holds content is a `.ds-panel`: filled with a container tone, or outlined on the canvas, with `--radius-panel`. Anything pressed is a `.ds-button` variant and stays a full pill. A selected state is the secondary container (`--fill-button-secondary` with `--color-button-secondary-text`) on a pill or on the item itself. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-page: 1440px;\n --size-side: 420px;\n --size-bar: 64px;\n --size-measure: 640px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 44px;\n --size-control: 40px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-play: 72px;\n --size-chip: 32px;\n --size-badge: 22px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 68px;\n --size-row-dense: 52px;\n --size-indicator: 64px;\n --size-area: 112px;\n --size-dialog: 360px;\n --size-empty: 96px;\n --size-art: 232px;\n --size-search: 560px;\n --size-tile: 184px;\n --size-wave: 24px;\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: 44px;\n --space-8: 60px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-stack {\n display: grid;\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 color: var(--color-heading);\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-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-3);\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 color: var(--color-heading);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: var(--size-field);\n padding: 0 var(--space-6);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab {\n min-width: var(--size-fab);\n min-height: var(--size-fab);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--count {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* avatar: a tonal disc with initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n\n/* search: one pill */\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n flex: 1;\n min-width: 0;\n min-height: var(--size-field);\n padding: 0 var(--space-5);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-hover);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-decoration: none;\n}\n.ds-search__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* switch: the thumb grows when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 69%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* list: rows with a leading tonal disc */\n.ds-list {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__icon--4 { background: var(--color-fill-4); }\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n.ds-list--cards {\n gap: var(--space-2);\n}\n.ds-list--cards .ds-list__item,\n.ds-list--cards .ds-list__item:last-child {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list--cards .ds-list__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: none;\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__title,\n.ds-list--cards .ds-list__item.is-current .ds-list__text,\n.ds-list--cards .ds-list__item.is-current .ds-list__meta {\n color: var(--color-button-secondary-text);\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__icon {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\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 color: var(--color-heading);\n}\n.ds-panel--accent .ds-panel__title {\n color: var(--color-accent-text);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel--accent .ds-panel__body {\n color: var(--color-accent-text);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* stats: tonal tiles, one figure each */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--border-width-strong);\n background: var(--color-link);\n border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* snackbar: the inverted block */\n.ds-snackbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-size: var(--text-ui);\n}\n.ds-snackbar__action {\n padding: var(--space-2) var(--space-3);\n color: var(--color-inverse-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n position: relative;\n flex: none;\n width: var(--size-art);\n height: var(--size-art);\n}\n.ds-shape {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-text);\n}\n.ds-shape--1 {\n inset: 0 40% 40% 0;\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: 50%;\n}\n.ds-shape--2 {\n inset: 12% 0 46% 52%;\n background: var(--color-fill-3);\n border-radius: var(--radius-page);\n}\n.ds-shape--3 {\n inset: 58% 30% 0 8%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n}\n.ds-shape--4 {\n inset: 62% 0 6% 74%;\n background: var(--color-canvas);\n border-radius: var(--radius-panel);\n}\n.ds-hero__copy {\n min-width: 0;\n}\n.ds-section--tight {\n margin-top: var(--space-4);\n}\n\n\n/* shell: a search row, a segmented navigation bar, then two rounded panes */\n.ds-page {\n max-width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n padding: 0 var(--space-3) var(--space-3);\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-nav {\n display: grid;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n color: var(--color-text);\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-search)) minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n padding: 0 var(--space-3);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n.ds-nav__links {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar);\n border-radius: var(--radius-pill);\n}\n.ds-nav__links li {\n flex: 1;\n min-width: 0;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-pill);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"],\n.ds-page:has(#show:target) .ds-nav__link[href=\"#show\"],\n.ds-page:has(#search:target) .ds-nav__link[href=\"#search\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-main {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-3);\n align-items: stretch;\n}\n.ds-pane {\n min-width: 0;\n padding: var(--space-6);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-pane--side {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-5);\n}\n.ds-pane--side .ds-section__head {\n margin-bottom: 0;\n}\n\n/* hero: the now-playing card, cover on the left */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-art) minmax(0, 1fr);\n align-items: center;\n gap: var(--space-7);\n padding: var(--space-7);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-cover {\n position: relative;\n display: block;\n width: var(--size-art);\n height: var(--size-art);\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-cover__shape {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ds-cover__shape--1 {\n inset: 14% 34% 34% 14%;\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n}\n.ds-cover__shape--2 {\n inset: 52% 10% 12% 44%;\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n}\n.ds-cover__shape--3 {\n inset: 12% 12% 60% 72%;\n background: var(--color-canvas);\n border-radius: var(--radius-control);\n}\n.ds-hero__kicker {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-wave {\n display: block;\n width: 100%;\n height: var(--size-wave);\n}\n.ds-wave__rest {\n opacity: 0.3;\n}\n.ds-wave__thumb {\n stroke-width: 6;\n}\n.ds-player__times {\n display: flex;\n justify-content: space-between;\n margin: var(--space-1) 0 var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n.ds-player__controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button--play {\n width: calc(var(--size-play) * 1.6);\n min-height: var(--size-play);\n padding: 0;\n}\n.ds-button--round {\n width: var(--size-fab);\n min-height: var(--size-fab);\n padding: 0;\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-button--round:hover, .ds-button--round.is-hover {\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n}\n.ds-player__extra {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-hero .ds-chip {\n color: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-stats {\n margin-top: var(--space-3);\n}\n.ds-filter {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-4);\n margin: var(--space-7) 0 var(--space-4);\n}\n.ds-filter .ds-section__title {\n margin-right: auto;\n}\n\n/* grid: shows as tonal tiles with a drawn cover */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-tile);\n padding: var(--space-4);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-radius: var(--radius-control);\n}\n.ds-grid__art {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-fab);\n height: var(--size-fab);\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-grid__cell--2 .ds-grid__art { border-radius: 50%; }\n.ds-grid__cell--3 .ds-grid__art { border-radius: var(--radius-pill); width: calc(var(--size-fab) * 1.5); }\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-snackbar {\n margin-top: auto;\n}\n.ds-list__icon--play {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-meter {\n display: block;\n height: var(--space-2);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n overflow: hidden;\n}\n.ds-meter__bar {\n display: block;\n width: 62%;\n height: 100%;\n background: var(--fill-button);\n border-radius: var(--radius-pill);\n}\n\n/* inner views */\n.ds-pane .ds-tabs {\n margin-top: var(--space-2);\n}\n.ds-pane .ds-badges {\n margin-bottom: var(--space-4);\n}\n.ds-search--large {\n flex: none;\n margin-bottom: var(--space-4);\n}\n.ds-pane .ds-empty {\n margin-top: var(--space-5);\n}\n\n/* sidebar: the browse list of the search view */\n.ds-sidebar {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-sidebar__count {\n margin-left: auto;\n font-size: var(--text-small);\n}\n\n/* footer: one tonal pill under the panes */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin-top: var(--space-3);\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page);\n font-size: var(--text-ui);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__legal {\n margin: 0;\n}\n\n@media (max-width: 1100px) {\n .ds-main {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-columns,\n .ds-columns--even {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n@media (max-width: 640px) {\n .ds-page {\n padding: 0 var(--space-2) calc(var(--size-row) + var(--space-5));\n }\n .ds-nav__inner {\n grid-template-columns: minmax(0, 1fr) auto;\n padding: 0 var(--space-2);\n }\n .ds-nav .ds-search {\n display: none;\n }\n .ds-nav__links {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 5;\n justify-content: space-around;\n padding: var(--space-3) var(--space-2);\n border-radius: 0;\n }\n .ds-nav__link,\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"],\n .ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"],\n .ds-page:has(#show:target) .ds-nav__link[href=\"#show\"],\n .ds-page:has(#search:target) .ds-nav__link[href=\"#search\"],\n .ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n flex-direction: column;\n gap: var(--space-1);\n min-height: 0;\n padding: 0;\n background: transparent;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n }\n .ds-nav__pill {\n width: var(--size-indicator);\n height: var(--size-chip);\n }\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#listen\"] .ds-nav__pill,\n .ds-page:has(#listen:target) .ds-nav__link[href=\"#listen\"] .ds-nav__pill,\n .ds-page:has(#show:target) .ds-nav__link[href=\"#show\"] .ds-nav__pill,\n .ds-page:has(#search:target) .ds-nav__link[href=\"#search\"] .ds-nav__pill,\n .ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] .ds-nav__pill {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n }\n .ds-pane,\n .ds-pane--side {\n padding: var(--space-4);\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-5);\n padding: var(--space-5);\n }\n .ds-cover {\n width: calc(var(--size-art) * 0.6);\n height: calc(var(--size-art) * 0.6);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-player__extra {\n margin-left: 0;\n }\n .ds-button--play {\n width: var(--size-play);\n }\n .ds-stats,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-table__extra {\n display: none;\n }\n .ds-footer {\n padding: var(--space-4);\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal podcast app specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n Search shows and episodes\n
\n \n MV\n
\n
\n \n
\n\n
\n
\n
\n
\n \n \n \n \n \n
\n

Now playing Episode 48

\n

The slow train north

\n

Platform Stories, with Mirela Voss. Eleven hours, four changes and one very good sandwich.

\n \n

18:4241:07

\n
\n \n \n \n \n 1.2 x\n Sleep in 20 min\n \n
\n
\n
\n\n
\n

6:20

Hours listened this week

\n

12

Shows you follow

\n

38

Episodes downloaded

\n
\n\n
\n

Your shows

\n \n Find more \n
\n
\n

Platform Stories

48 episodes, new today

\n

The Night Desk

112 episodes, 2 unplayed

\n

Field Recordings

19 episodes, all played

\n

Follow a show

Search or paste a feed

\n
\n
\n\n \n
\n
\n\n
\n
\n
\n
    \n
  1. Listen
    2. \n
  2. Your shows
    3. \n
  3. Platform Stories
    4. \n
\n
\n
\n

Platform Stories

\n

Travel by rail, told slowly. A new episode every other Wednesday.

\n
\n
\n Share\n Following\n
\n
\n \n
\n 48 episodes\n New\n Downloaded\n Downloading\n Failed\n
\n
\n \n \n \n \n \n \n \n \n \n
No.EpisodePublishedStatusMinutes
48The slow train north7 OctoberDownloaded41
47The last ferry timetable23 SeptemberDownloaded52
46A seat facing backwards9 SeptemberDownloading38
45Two hours at the border26 AugustFailed44
44The station cat of Varna12 AugustPlayed29
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n

Search

\n

Titles, show notes and transcripts of everything you follow.

\n
\n
\n Back to listening\n
\n
\n lighthouse keeping\n \n
\n \n

No episodes about lighthouse keeping

\n

Nothing in the shows you follow matches. Try fewer words, or search every show in the directory.

\n Search the directory\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n

Settings

\n

Playback, downloads and the weekly summary.

\n
\n
\n
\n

Downloads wait for Wi-FiThree episodes are queued for the next connection.

\n

One field needs attentionThe summary address is not a complete address.

\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", "style.json": "{\n \"id\": \"v1.material-you.app.s04.p04.t04.u04\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-my-4444\",\n \"short\": \"v1-my-4444\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e3edf7;\n --color-canvas: #f6faff;\n --color-surface: #edf4fb;\n --color-surface-alt: #dbe7f3;\n --color-surface-strong: #d2e0ee;\n --color-bar: #e3edf7;\n --color-bar-text: #171c22;\n --color-bar-alt: #c5ebf0;\n --color-bar-alt-text: #0b1f2a;\n --color-inverse: #2a3138;\n --color-inverse-text: #ecf1f7;\n --color-text: #171c22;\n --color-text-muted: #414850;\n --color-heading: #0f1d2a;\n --color-heading-alt: #004b74;\n --color-link: #00629d;\n --color-link-quiet: #171c22;\n --color-link-visited: #6b5c00;\n --color-link-hover: #004b74;\n --color-link-active: #001e33;\n --color-border: #c0c8d1;\n --color-border-strong: #717881;\n --color-border-muted: #dde5ed;\n --color-accent: #cbe6ff;\n --color-accent-text: #001e33;\n --color-accent-alt: #6b5c00;\n --color-fill-1: #cbe6ff;\n --color-fill-2: #c5ebf0;\n --color-fill-3: #ffe27a;\n --color-fill-4: #d2e0ee;\n --color-button: #00629d;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #c5ebf0;\n --color-button-secondary-text: #0b1f2a;\n --color-input: #f6faff;\n --color-input-text: #171c22;\n --color-input-border: #717881;\n --color-disabled: #dfe4ea;\n --color-disabled-text: #969ca4;\n --color-danger: #c0182a;\n --color-danger-surface: #ffdad8;\n --color-success: #2e6b3a;\n --color-warning: #8a5a00;\n --color-notice: #ffe27a;\n --color-notice-text: #221b00;\n --color-focus: #00629d;\n --color-shadow: #0a2a44;\n --color-overlay: rgb(15 29 42 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Nunito Sans\", Figtree, \"Segoe UI\", system-ui, sans-serif;\n --font-heading: Figtree, \"Plus Jakarta Sans\", \"Nunito Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-ui: Figtree, \"Plus Jakarta Sans\", \"Nunito Sans\", \"Segoe UI\", system-ui, sans-serif;\n --font-mono: \"Fira Code\", \"Cascadia Code\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 60px;\n --text-h1: 38px;\n --text-h2: 26px;\n --text-h3: 19px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.5px;\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: 2px;\n --border-style: solid;\n --radius-control: 28px;\n --radius-panel: 28px;\n --radius-pill: 9999px;\n --radius-page: 32px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 2px 4px 0 color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-control-pressed: inset 0 0 0 2px color-mix(in srgb, var(--color-shadow) 14%, transparent);\n --shadow-dialog: 0 4px 8px 0 color-mix(in srgb, var(--color-shadow) 20%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-accent) 45%, var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 92%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: background-color 0.25s ease-out, color 0.25s ease-out, box-shadow 0.25s ease-out, border-radius 0.25s ease-out;\n --backdrop-blur: 0px;\n}\n" } }