{ "id": "v1-yk-61ba-dr", "long_id": "v1.y2k-futurism.shop.s06.p01.t11.u10.dr", "name": "Y2K futurism store, 1999 to 2003", "era": { "slug": "y2k-futurism", "code": "yk", "name": "Y2K futurism", "years": [ 1999, 2003 ], "description": "The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "roomy", "summary": "The online electronics shop of the turn of the millennium, as hardware makers and mail-order houses built it: a white 760px sheet on a pinstriped ground, headed by folder tabs and a basket read-out, with the promotion of the month across the top and shelves of small product cells beside an aisle of departments. Boxes have gently rounded corners and a pale frame, bars and buttons a lit top edge, and everything is priced, ruled and set in 9px to 13px Verdana with tracked bold headings. The look gave way to wider pages with large photographs from about 2004.", "url": "https://chrono.skin/s/v1-yk-61ba-dr", "preview_url": "https://chrono.skin/s/v1-yk-61ba-dr/specimen.html", "files": { "STYLE.md": "# Y2K futurism store, 1999 to 2003\n\n## Summary\n\nThe online electronics shop of the turn of the millennium, as hardware makers and mail-order houses built it: a white 760px sheet on a pinstriped ground, headed by folder tabs and a basket read-out, with the promotion of the month across the top and shelves of small product cells beside an aisle of departments. Boxes have gently rounded corners and a pale frame, bars and buttons a lit top edge, and everything is priced, ruled and set in 9px to 13px Verdana with tracked bold headings. The look gave way to wider pages with large photographs from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 760px; `.ds-page__frame` is one sheet of that width centred horizontally in the viewport (`margin: 0 auto`) with a 1px outline and `--radius-page` corners, and `--fill-page` shows on both sides and below. Do not pin it to the left edge and do not stretch it. All text sits on the sheet; nothing is written directly on the page background.\n- `.ds-page` pads the viewport by `--space-5` (10px) above and `--space-3` (4px) at the sides. Order from the top: `.ds-nav` (the brand with its tagline at the left and the utility links over the basket read-out at the right; a row of folder tabs; the bar the current tab opens onto, with quick links and the search), the page, `.ds-footer` (four short columns of links, then the closing band).\n- The home page is an L: `.ds-page__promo` holds the `.ds-hero` across the full sheet, and under it `.ds-page__shop` has two columns `--space-5` (10px) apart and padded `--space-5` from the sheet edge: `.ds-page__aisle` at `--size-aisle` 150px on the left (the `.ds-sidebar` of departments, the basket panel, one inverse panel) and `.ds-page__main` (578px) on the right with the shelves: a `.ds-section` band over the `.ds-grid` of products, three across, then a second band over the `.ds-list` of arrivals. Columns start at the top and do not stretch; fill the aisle so both end close together.\n- Inner pages (every page below the home page) keep the sheet, the tabs with their bar and the footer, and have no promotion. `.ds-breadcrumb` sits directly under the bar as the first thing of the page. Below it `.ds-page__shop` is cut to suit the page. A department page keeps the 150px aisle on the left, now holding the links that narrow the list, and opens the main column with `.ds-page-header` in place of the hero, then `.ds-tabs` joined to the `.ds-table` they sort, with `.ds-pagination` under it. A product page uses `.ds-page__shop--product`: a picture column of `--size-shot` 232px on the left (a panel with the drawing, price and button, then small panels) and the description as `.ds-prose` on the right, followed by the specification table under a `.ds-section` band. Basket and checkout use `.ds-page__shop--order`: the main column on the left (page header, `.ds-stat` strip, notices, tabs and table, the button row, a form under its band) and a summary column of `--size-summary` 204px on the right that opens with the order summary panel.\n- Spacing scale: `--space-1` 1px is the vertical padding of small buttons and small inputs; `--space-2` 2px is the vertical padding of buttons, inputs, tabs, the bar and compact rows; `--space-3` 4px is the padding of table cells, list rows, title strips, section bands and notices; `--space-4` 6px is the side padding of cells, panels and strips and the gap between buttons; `--space-5` 10px is the margin of the sheet, the column gutter, the gap between blocks and between product cells; `--space-6` 14px is the padding of the promotion, list indent and the gap between quick links. There is no step above 14px.\n- Fixed sizes: `--size-figure` 200px by `--size-figure-height` 124px is the product drawing of the promotion and of a product page; `--size-thumb` 62px the height of a cell's picture and `--size-icon` 40px the drawing in it; `--size-mark` 28px the tile of the brand mark; `--size-search` 104px a search input; `--size-qty` 34px a quantity input; `--size-field` 210px a form text input; `--size-label` 116px the label column of a form; `--size-area` 56px the height of a textarea; `--size-dialog` 320px a dialog; `--size-led` 6px a status lamp.\n- Blocks are 10px apart. A block is either an outlined box (a product cell, a panel, the link block, the form, the table) or open content under a pale `.ds-section` band. Rows inside a box touch and are divided by hairlines.\n- Views. The specimen is one example site, an electronics shop, in five views. `home` is the shop front: the promotion, the aisle with departments and basket, six best sellers and the list of arrivals. `players` is a department: the narrowing links, page header, a sorted table of models with pagination. `product` is one product: picture, price and small panels at the left, the description, the specification table and a row of further links at the right. `basket` is the basket: page header, the order at a glance, notices, the tabbed table with stock badges and the button row, the remove dialog it opens, and at the right the order summary, account links and the empty state of saved items. `checkout` is the address form beside the order.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Verdana for text, a monospace for headings and for the interface, like a terminal read-out. `--font-heading` is Courier New bold, uppercased by `--heading-transform`; `--font-ui` is Courier New too, so navigation, tabs, buttons, inputs and table heads are monospaced; `--font-body` is Verdana.\n- `--text-base` 10px, `--text-ui` 11px (the monospace runs small, so it is set one step up), `--text-small` 9px, `--text-large` 12px. `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px.\n- Interface text is regular weight and not uppercased; nothing is tracked.\n- Links are not underlined (`--link-decoration` and `--link-decoration-quiet` are `none`); they are told from text by colour and underline on hover only.\n\n- Pinstriped metal and square boxes. `--fill-page`, `--fill-bar` and `--fill-bar-alt` are 1px horizontal pinstripes of the colour and a slightly lighter or darker mix of it; every other fill is flat.\n- Every radius is 0. `--border-width` and `--border-width-strong` are both 1px, solid.\n- `--shadow-control` is a 1px inset highlight on the top and left of buttons; `--shadow-control-pressed` darkens it. `--shadow-dialog` is a hard 2px offset without blur. `--shadow-panel` and `--shadow-text` are `none`. `--focus-ring` is 1px dotted; `--transition` none.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Wrap everything in `.ds-page__frame`. `.ds-page__promo` holds the hero across the sheet. `.ds-page__shop` is the two-column floor: `.ds-page__aisle` and `.ds-page__main`; `.ds-page__shop--product` widens the left column for the picture, `.ds-page__shop--order` puts the narrow column on the right. `.ds-block` groups a section band or tab row with the block it heads. `.ds-view` wraps one screen of the specimen; `.ds-view--home` marks the first.\n- `.ds-nav`: site header. `.ds-nav__top` holds `.ds-nav__brand` (the `.ds-brand` over a 9px `.ds-nav__tagline`) and `.ds-nav__aside`: the `.ds-nav__utility` links over `.ds-nav__basket`, a framed 9px read-out of the basket with a small button. `.ds-nav__links` is the row of folder tabs, each a `.ds-nav__link`; `is-current` makes the tab taller and gives it the bar fill. `.ds-nav__bar` is the bar under the tabs with `.ds-nav__quick` (`.ds-nav__quick-link` entries) and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a small button). The three `.ds-view` rules show one view at a time, and one rule per view lights the tab whose `href` names the view that is showing (the first tab when none is named); in a real multi-page site set `is-current` on the tab instead.\n- `.ds-brand`: the site's mark and name, at the top left, linking home. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, 1px `--color-border-strong` rim, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark in `--color-heading`, with the heading font, weight, tracking and transform tokens. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-breadcrumb`: inner pages only. 9px trail under the bar on a hairline, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: the outlined link block of the aisle. Repeats `.ds-sidebar__title` (pale strip, bold 11px) over a `.ds-sidebar__list` of `.ds-sidebar__item` rows, each a `.ds-link--quiet` link with a `.ds-sidebar__count` or a `.ds-badge` at the right end.\n- `.ds-section`: the heading of a block in the main column: a pale band with `.ds-section__title` (bold 11px, tracked) at the left and an optional 9px `.ds-section__more` link at the right.\n- `.ds-hero`: the promotion of the month, one per home page, across the sheet: an outlined box in `--color-fill-1` with three parts. `.ds-hero__figure` is an inline SVG drawing of the product at the left; the middle holds `.ds-hero__kicker` (accent chip), `.ds-hero__title` (18px), `.ds-hero__text` (13px) and `.ds-hero__points` (one 9px line of key figures with a link); `.ds-hero__offer` at the right, behind a hairline, stacks `.ds-hero__price` (18px), `.ds-hero__was` and one `.ds-button`. No photograph, no full-width banner.\n- `.ds-page-header`: head of an inner page, first thing in the main column, once per page. `.ds-page-header__title` (18px, the page's only h1) over one line of `.ds-page-header__text`, with `.ds-page-header__action` at the right holding one `.ds-button`; a 2px rule in the bar colour closes it.\n- `.ds-stat`: the order at a glance, under the page header. `.ds-stat` is the row, one outlined strip on the alternate surface; each figure is a `.ds-stat__item` divided from the next by a hairline, with a 14px bold `.ds-stat__value` over a 9px muted `.ds-stat__label`. No icons, no trend arrows.\n- `.ds-prose`: description or guide text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the 13px first paragraph and `.ds-prose__byline` for the 9px line under the title.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the dark link for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: 11px bold Arial on a lit, gently rounded key, for the main action. `.ds-button--secondary` is the grey key. `.ds-button--danger` is the secondary key with a rim and a lamp in `--color-danger`, for remove and empty; the label keeps the secondary text colour. `.ds-button--small` is the 9px key of a product cell, a table row or a bar. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` brightens it. Group with `.ds-buttons`.\n- `.ds-form`: outlined block on the alternate surface. `.ds-form__row` pairs: bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 104px, `--qty` 34px for a quantity, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row aligned under the controls.\n- `.ds-table`: outlined, fully ruled data table: a head in the bar fill with bold 11px labels, rows alternating the two surfaces, hairlines between rows and columns, `.ds-table__num` right-aligned in the monospace for quantities, prices and figures. `.ds-table__caption` is the 9px line under it.\n- `.ds-tabs`: folder tabs standing on the table they sort: `.ds-tabs__tab` in the secondary bar fill, `is-current` taller and in the bar fill.\n- `.ds-list`: list of arrivals. Each `.ds-list__item` has the entry at the left (a bold `.ds-list__title` link, a `.ds-list__text` line and a 9px `.ds-list__meta` line) and a bold `.ds-list__price` at the right; rows are divided by hairlines. `.ds-list--compact` is the one-line variant inside panels, name left and figure right; `.ds-list__item--total` is the closing line of a sum, bold on the alternate surface.\n- `.ds-panel`: small box of the aisle or the summary column: outlined with a pale frame, `.ds-panel__title` bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__small`, `.ds-panel__field` (input with button), `.ds-panel__actions`; `.ds-panel__shot` is the product drawing on its tinted ground at the top of a product page's first panel. `.ds-panel--alt` has the dark title; `.ds-panel--inverse` is the dark block, at most one per page.\n- `.ds-grid`: the shelves: `.ds-grid__cell` product cells three across, 10px apart. Each cell stacks `.ds-grid__thumb` (the picture, an inline SVG `.ds-grid__icon` on a ground tinted with `--1`, `--2`, `--3` or the base fill), `.ds-grid__body` (a bold `.ds-grid__title` link and one 9px `.ds-grid__text` line of specification) and `.ds-grid__foot` (the bold `.ds-grid__price` and a small button).\n- `.ds-badge`: 9px bold accent chip (\"New\", \"Offer\"). Status labels are a plain outlined chip with a lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral marker; the lamp and rim take the status colour, the words stay in `--color-text`. Use them in a table's stock column. The lamp has a 1px ring in `--color-text`, so it shows on a chip of any colour.\n- `.ds-notice`: one-line message in an outlined box, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rim on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small outlined keys: `.ds-pagination__link` on quiet links (`Previous`, numbers, `Next`), the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 320px, 2px outline with a pale frame, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat grey area it sits on. No blur, no floating.\n- `.ds-empty`: dashed-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: `.ds-footer__cols`, four short columns on the alternate surface, each a bold 9px `.ds-footer__title` over a `.ds-footer__list` of quiet links or plain lines, then `.ds-footer__band`, the inverse band with the copyright line and `.ds-footer__band-link` links.\n- `.ds-menu` (`.ds-menu__list`, `.ds-menu__link`): a nav item with a drop-down list on hover or focus.\n- `.ds-meter` (`.ds-meter__label`) with `.ds-progress` (`--30`, `--50`, `--70`, `--90`, `.ds-progress__bar`): a segmented loading or signal bar with its label.\n- `.ds-accordion` (`__summary`, `__body`): a `
` panel for specifications.\n- `.ds-tooltip` (`__tip`): a small label shown on hover or focus of a word.\n- `.ds-carousel` (`__track`, `__slide`, `__title`, `__text`, `__bar`, `__arrow`): a scroll-snap featured viewer with a counter such as 01/03.\n- `.ds-avatar`: initials in a round badge beside a name.\n\n## Never\n\n- `row-gap <= 3px`: rows of lists and tables touch.\n- `block-gap <= 18px`: neighbouring blocks sit 10px apart.\n- `content-width <= 760px`: text stays inside the fixed sheet.\n- `palette-colours <= 18`: navy, four blues, black, silver, white, one yellow, plus lime and orange lamps.\n- `font-size <= 18px`: the wordmark and hero title are the largest text.\n- `font-size >= 9px`: nothing is set below 9px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Verdana and one monospace, which also sets the headings and the interface.\n- `letter-spacing <= 0px`: no text is tracked.\n- `underlined-links <= 10%`: links are not underlined until hovered.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 1px`: every line is a hairline.\n- `box-shadow-blur <= 0px`: the bevel and the dialog offset are hard.\n- `text-shadow = none`: text is flat.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new box in the aisle or the summary column copies `.ds-panel` (1px outline, pale frame, title bar in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4`); a new stretch of the main column starts with a `.ds-section` band and puts flat content or a ruled table under it; a new product view copies `.ds-grid__cell` (picture on a tinted ground, name, one line of specification, price and small button); a new inner page copies one of the specimen's inner views and picks the `.ds-page__shop` cut that suits it; a new control copies `.ds-button` or `.ds-form__input` with its 4px radius; a new status mark copies the lamp chip of `.ds-badge--success`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Pair every text token with its own fill and with no other, and never use a status colour as a text colour. Keep text between 9px and 13px apart from 14px figures and 18px titles, give every product its price and its button, and separate things with an outline, a band or a hairline, never with whitespace, soft shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). Taken from the references' column widths,\n cell paddings and gutters. */\n:root {\n --size-page: 760px;\n --size-aisle: 150px;\n --size-shot: 232px;\n --size-summary: 204px;\n --size-figure: 200px;\n --size-figure-height: 124px;\n --size-thumb: 62px;\n --size-icon: 40px;\n --size-mark: 28px;\n --size-search: 104px;\n --size-qty: 34px;\n --size-label: 116px;\n --size-field: 210px;\n --size-area: 56px;\n --size-dialog: 320px;\n --size-led: 6px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 13px;\n --space-6: 18px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) var(--space-3) var(--space-6);\n background: var(--fill-page);\n background-color: var(--color-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/* The fixed sheet, centred in the window. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* The shop floor: the aisle of departments at the left, the shelves at the\n right. The promotion runs across both, above them. */\n.ds-page__promo {\n padding: var(--space-5) var(--space-5) 0;\n}\n.ds-page__shop {\n display: grid;\n grid-template-columns: var(--size-aisle) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n}\n/* A product page: the picture column at the left. */\n.ds-page__shop--product {\n grid-template-columns: var(--size-shot) minmax(0, 1fr);\n}\n/* Basket and checkout: the order summary at the right. */\n.ds-page__shop--order {\n grid-template-columns: minmax(0, 1fr) var(--size-summary);\n}\n.ds-page__main,\n.ds-page__aisle {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- views ---------- */\n/* The specimen is one example site; one view 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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\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 {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: var(--space-4) var(--space-4);\n}\n\n/* ---------- brand ---------- */\n/* The site's mark and name. The mark sits on a small tile dressed like\n the primary button, so every palette and surface reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\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-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\n/* ---------- nav ---------- */\n/* The shop's head: the brand and the basket read-out, a row of folder tabs,\n and the bar the current tab opens onto, with quick links and the search. */\n.ds-nav {\n display: block;\n}\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n}\n.ds-nav__tagline {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__aside {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-3);\n}\n.ds-nav__utility {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n/* The basket read-out: what is in it, what it comes to, the way out. */\n.ds-nav__basket {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n}\n.ds-nav__basket strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-nav__links {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\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}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n/* The current tab is taller and takes the fill of the bar under it. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#players:target) .ds-nav__link[href=\"#players\"],\n.ds-page:has(#product:target) .ds-nav__link[href=\"#product\"],\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"],\n.ds-page:has(#checkout:target) .ds-nav__link[href=\"#checkout\"] {\n padding-top: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__quick {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__quick-link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__search {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\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}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar ---------- */\n/* The aisle: departments and services as an outlined block of links, each\n group under a pale title strip. */\n.ds-sidebar {\n overflow: hidden;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- section head ---------- */\n/* A pale band with the heading at the left and one link at the right. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__more {\n font-size: var(--text-small);\n}\n\n/* ---------- hero ---------- */\n/* The promotion of the month: the product drawn at the left, the offer and\n its price at the right, in one outlined box. */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-figure) minmax(0, 1fr) auto;\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-5) var(--space-6);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n height: var(--size-figure-height);\n color: var(--color-heading);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-3);\n padding: 0 var(--space-4);\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-bold);\n text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__text {\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__points {\n margin: var(--space-3) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text);\n font-size: var(--text-small);\n}\n/* The offer: the price over the button, behind a hairline. */\n.ds-hero__offer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: 0 0 0 var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-hero__price {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n}\n.ds-hero__was {\n font-size: var(--text-small);\n color: var(--color-text);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* One outlined strip of figures, divided by hairlines: the order at a\n glance. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-4);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: 0;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\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); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\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: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.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,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n/* Destructive action: the secondary button with a danger-coloured rim and\n lamp. The label keeps the secondary text colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-danger);\n}\n.ds-button--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n background: var(--color-danger);\n border-radius: var(--radius-pill);\n vertical-align: baseline;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n cursor: default;\n}\n/* The small button of a shelf cell or a table row. */\n.ds-button--small {\n padding: var(--space-1) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-3) 0;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-2) var(--space-3);\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 font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n padding: var(--space-1) var(--space-3);\n font-size: var(--text-small);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\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/* Error text always sits on its own chip of the error surface. */\n.ds-form__error {\n display: inline-block;\n margin: var(--space-2) 0 0;\n padding: 0 var(--space-4);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n border-radius: var(--radius-pill);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- table ---------- */\n/* A ruled sheet: every cell on hairlines, the head in the bar fill. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table td + td {\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.ds-table__num {\n font-family: var(--font-mono);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) var(--space-2) 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* Folder tabs on a hairline, joined to the table they switch. */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\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}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: underline;\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- list ---------- */\n/* Arrivals: the entry at the left, its price at the right. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-5);\n align-items: center;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__price {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n/* One line per item, name left and figure right, for panels. */\n.ds-list--compact .ds-list__item {\n align-items: baseline;\n padding: var(--space-2) var(--space-4);\n}\n.ds-list--compact .ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list--compact .ds-list__title {\n font-weight: var(--weight-body);\n}\n/* The closing line of a sum. */\n.ds-list__item--total {\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-panel) var(--radius-panel) 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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Inverted panel: the one block in the opposite tone. Everything in it,\n links included, takes the inverse text colour. */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-panel__title {\n padding-bottom: 0;\n background: transparent;\n color: var(--color-inverse-text);\n text-shadow: none;\n}\n.ds-panel--inverse .ds-panel__small {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited,\n.ds-panel--inverse .ds-link:hover,\n.ds-panel--inverse .ds-link.is-hover {\n color: var(--color-inverse-text);\n}\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding-top: var(--space-4);\n}\n.ds-panel__field {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n/* The picture of a product page: a drawing on a tinted ground. */\n.ds-panel__shot {\n display: block;\n box-sizing: border-box;\n width: 100%;\n height: var(--size-figure-height);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-heading);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n}\n\n/* ---------- grid ---------- */\n/* The shelves: three products across, each a cell with its picture, name,\n one line of specification, price and button. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__thumb {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--size-thumb);\n background: var(--color-fill-4);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell--1 .ds-grid__thumb { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__thumb { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__thumb { background: var(--color-fill-3); }\n.ds-grid__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__body {\n flex: 1 1 auto;\n padding: var(--space-3) var(--space-4);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__foot {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-grid__price {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\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-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* Status labels: a lamp in the status colour on a plain chip. The lamp has\n a ring in the text colour so that it shows on any chip, and the status\n colour never carries text. */\n.ds-badge--alt,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n white-space: nowrap;\n}\n.ds-badge--alt::before,\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: var(--radius-pill);\n vertical-align: baseline;\n}\n.ds-badge--alt { border-color: var(--color-accent-alt); }\n.ds-badge--success { border-color: var(--color-success); }\n.ds-badge--warning { border-color: var(--color-warning); }\n.ds-badge--danger { border-color: var(--color-danger); }\n.ds-badge--alt::before { background: var(--color-accent-alt); }\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/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow: title bar, message, buttons. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n/* Four short columns of links on the alternate surface, then the closing\n band in the inverse tone. */\n.ds-footer {\n display: block;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__band {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__band-link,\n.ds-footer__band-link:visited {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\n\n/* current item also carries a marker that no token set can remove */\n.ds-nav__link.is-current::before,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#players:target) .ds-nav__link[href=\"#players\"]::before,\n.ds-page:has(#product:target) .ds-nav__link[href=\"#product\"]::before,\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"]::before,\n.ds-page:has(#checkout:target) .ds-nav__link[href=\"#checkout\"]::before {\n content: \">\";\n margin-right: var(--space-1);\n}\n\n/* ---------- period components: menu, progress, accordion, tooltip, carousel, avatar ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus-visible {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-meter {\n margin: 0 0 var(--space-3);\n}\n.ds-meter__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-progress {\n display: block;\n height: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-progress__bar {\n display: block;\n height: 100%;\n background-color: var(--color-accent);\n background-image: repeating-linear-gradient(90deg, transparent 0, transparent var(--size-seg), var(--color-surface-strong) var(--size-seg), var(--color-surface-strong) var(--size-seg-gap));\n}\n.ds-accordion {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-accordion__summary {\n padding: var(--space-1) var(--space-3);\n cursor: pointer;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-accordion__body {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n.ds-tooltip {\n position: relative;\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n text-transform: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n display: block;\n}\n.ds-carousel {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-carousel__track {\n display: flex;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n box-sizing: border-box;\n padding: var(--space-2) var(--space-3);\n scroll-snap-align: start;\n font-size: var(--text-small);\n}\n.ds-carousel__title {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-carousel__text {\n margin: 0;\n}\n.ds-carousel__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-carousel__arrow {\n padding: 0 var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin-right: var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n vertical-align: middle;\n}\n\n:root {\n --size-tip: 220px;\n --size-menu: 150px;\n --size-avatar: 24px;\n --size-seg: 6px;\n --size-seg-gap: 8px;\n}\n", "specimen.html": "\n\n\n\n\nY2K futurism store, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n players, cameras and organisers, sent the same day\n
\n
\n \n

Basket: 2 items, $318.00 View basket

\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 Player of the month\n

Arc 64: ten albums in a shirt pocket.

\n

A memory player with no moving parts, twelve hours on one battery and a cable for any computer.

\n \n
\n
\n $189.00\n was $219.00\n Add to basket\n
\n
\n
\n
\n\n
\n \n
\n

Your basket

\n \n
\n
Technical details

Plays MP3, WMA and WAV. Ten hours of battery.

\n\n Checkout\n
\n
\n
\n

Free delivery

\n
\n

Stock levelFour left in the warehouse

\n

Pulse visualiser

Twelve new scopes and tunnels.

Night drive skin

Dark glass, one small window.

Tracker studio

Pattern editor for the player.

<<Pick 01/03>>
\n\n

On every order over $150, to the door in two working days.

\n

How delivery works

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

Best sellers

\n all 24 players\n
\n
\n
\n
\n
\n

Arc 64 memory player

\n

64 MB, 12 hours, 84 g

\n
\n
$189.00 Add
\n
\n
\n
\n
\n

Halo disc portable

\n

45 second anti-skip, remote

\n
\n
$99.00 Add
\n
\n
\n
\n
\n

Echo headphone set

\n

Closed back, folding, 3 m lead

\n
\n
$129.00 Add
\n
\n
\n
\n
\n

Lumen 2 camera

\n

2 megapixels, 3x zoom

\n
\n
$349.00 Add
\n
\n
\n
\n
\n

Folio organiser

\n

8 MB, backlit, sync cradle

\n
\n
$249.00 Add
\n
\n
\n
\n
\n

Dock speaker pair

\n

2 x 5 W, mains or batteries

\n
\n
$59.00 Add
\n
\n
\n
\n
\n
\n

Just arrived

\n everything new\n
\n
    \n
  • \n
    \n Drift pocket radio New\n Twenty presets and a clock in a case the size of a matchbox.\n Players | in stock | arrived 31 May\n
    \n $39.00\n
    • \n
  • \n
    \n 32 MB memory card\n Fits the Arc 64 and the Lumen 2. Holds five more albums.\n Memory cards | in stock | arrived 29 May\n
    \n $69.00\n
    • \n
  • \n
    \n Travel charger kit\n Four cells, a two-hour charger and plugs for three continents.\n Batteries | due 8 June | order now\n
    \n $24.00\n
    • \n
\n
\n
\n\n
\n
\n\n \n
\n
    \n
  1. Store
    2. \n
  2. >
    3. \n
  3. Departments
    4. \n
  4. >
    5. \n
  5. Portable players
    6. \n
\n
\n
\n \n
\n

Not sure?

\n
\n

The buying guide sets memory against disc in plain words.

\n Read the guide\n
\n
\n
\n
\n
\n
\n

Portable players

\n

Twenty-four players in stock, from pocket radios to memory players.

\n
\n
\n Compare ticked\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ModelKindPlay timePrice 
Arc 64 memory player OfferMemory12 h189.00Add
Halo disc portableDisc20 h99.00Add
Arc 32 memory playerMemory12 h139.00Add
Drift pocket radioRadio40 h39.00Add
Halo sport portableDisc16 h119.00Add
Memo voice recorderRecorder9 h79.00Add
Drift clock radioRadio60 h49.00Add
Arc 128 memory playerMemory10 h279.00Add
\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Store
    2. \n
  2. >
    3. \n
  3. Portable players
    4. \n
  4. >
    5. \n
  5. Arc 64 memory player
    6. \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n

$189.00 with free delivery. In stock: sent today if ordered before 16:00.

\n Add to basket\n

Item 20641 | 12 months warranty

\n
\n
\n
\n

In the box

\n
\n
    \n
  • Arc 64 player
    • \n
  • Ear buds and neck strap
    • \n
  • Computer cable
    • \n
  • One AA battery
    • \n
\n
\n
\n
\n

Goes with it

\n \n
\n
\n

Free delivery

\n
\n

This player costs over $150, so it travels free, to the door in two working days.

\n

How delivery works

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

Arc 64 memory player

\n

Portable players | item 20641 | rated 4.6 of 5 by 212 buyers

\n

Ten albums on a player with no moving parts: nothing skips, nothing wears out, and one battery lasts the working week.

\n

What it does

\n

Music is copied from a computer over the cable in the box and kept in 64 MB of built-in memory. A card slot takes it further.

\n
    \n
  • Plays for twelve hours on one AA battery
    • \n
  • Backlit screen with track name and time
    • \n
  • Five sound settings and a hold switch
    • \n
\n

Before you order

\n

The transfer program needs a computer with a spare port and 16 MB of memory. It installs a folder named arc64 and nothing else.

\n
\n
\n
\n

Specification

\n compare with other players\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
FeatureDetailFigure
MemoryBuilt in, with one card slot64 MB
Play timeOne AA alkaline battery12 h
WeightWithout battery84 g
SizeHeight by width by depth88 x 62 x 17 mm
TransferTen albums over the cable9 min
OutputPer channel, into ear buds5 mW
\n
\n
\n
\n

Read before you buy

\n
\n

\n Memory or disc\n Delivery and returns\n What buyers said\n Add to basket\n Back to players\n

\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Store
    2. \n
  2. >
    3. \n
  3. Your account
    4. \n
  4. >
    5. \n
  5. Basket
    6. \n
\n
\n
\n
\n
\n

Your basket

\n

Three things are waiting. Prices include tax; delivery is added at the end.

\n
\n
\n Keep shopping\n
\n
\n
    \n
  • 3Items in the basket
    • \n
  • $357.00Goods
    • \n
  • $0.00Delivery
    • \n
  • 2 daysTo your door
    • \n
\n
\n

Note: Orders placed before 16:00 leave the warehouse the same day.

\n

Error: The Drift pocket radio sold out while it was in your basket. Remove it or wait for 8 June.

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
ItemStockQtyPrice 
Arc 64 memory playerIn stock1189.00Remove
Echo headphone setIn stock1129.00Remove
Drift pocket radioSold out139.00Remove
Travel charger kitDue 8 June024.00Remove
Delivery, two working daysFree10.00 
\n
\n Go to checkout\n \n \n \n
\n
\n
\n
\n

Remove from basket

\n
\n

Take the Drift pocket radio out of your basket? You can save it for later instead.

\n
\n Remove\n Save for later\n
\n
\n
\n
\n
\n
\n
\n

Order summary

\n
    \n
  • Goods 357.00
    • \n
  • Sold out -39.00
    • \n
  • Delivery 0.00
    • \n
  • To pay $318.00
    • \n
\n
\n Go to checkout\n

Nothing is charged until the parcel leaves.

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

Saved for later

\n
\n
\n

Nothing saved yet.

\n Browse players\n
\n
\n
\n

Free delivery

\n
\n

This order is over $150, so it travels free.

\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Store
    2. \n
  2. >
    3. \n
  3. Basket
    4. \n
  4. >
    5. \n
  5. Checkout
    6. \n
\n
\n
\n
\n
\n

Checkout

\n

Step 1 of 3: where the parcel goes. Payment and a last look follow.

\n
\n
\n Back to basket\n
\n
\n

Error: One field needs another look before we can go on.

\n
\n
\n

Delivery address

\n where we deliver\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Enter a complete address.\n
\n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n
\n
\n

Your order

\n
    \n
  • Arc 64 189.00
    • \n
  • Echo set 129.00
    • \n
  • Delivery 0.00
    • \n
  • To pay $318.00
    • \n
\n
\n

Change the basket

\n
\n
\n
\n

Three steps

\n
\n
    \n
  • Address
    • \n
  • Payment
    • \n
  • A last look
    • \n
\n

Nothing is charged until the parcel leaves.

\n
\n
\n \n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.shop.s06.p01.t11.u10.dr\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-61ba-dr\",\n \"short\": \"v1-yk-61ba-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000030;\n --color-canvas: #003399;\n --color-surface: #003399;\n --color-surface-alt: #1048b8;\n --color-surface-strong: #000030;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #1850c8;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #c0c0d0;\n --color-inverse-text: #000030;\n --color-text: #e0e0e8;\n --color-text-muted: #a8a8b8;\n --color-heading: #ffffff;\n --color-heading-alt: #ffcc00;\n --color-link: #ffffff;\n --color-link-quiet: #d0d0d0;\n --color-link-visited: #a8a8b8;\n --color-link-hover: #ffcc00;\n --color-link-active: #98ff00;\n --color-border: #1850c8;\n --color-border-strong: #808098;\n --color-border-muted: #0840a8;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #98ff00;\n --color-fill-1: #0840a8;\n --color-fill-2: #1048b8;\n --color-fill-3: #1850c8;\n --color-fill-4: #0038a0;\n --color-button: #d0d0d0;\n --color-button-text: #000000;\n --color-button-hover-text: #000030;\n --color-button-secondary: #1048b8;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808098;\n --color-disabled: #404068;\n --color-disabled-text: #a8a8b8;\n --color-danger: #cc6633;\n --color-danger-surface: #000000;\n --color-success: #98ff00;\n --color-warning: #ffcc00;\n --color-notice: #000030;\n --color-notice-text: #e0e0e8;\n --color-focus: #ffcc00;\n --color-shadow: #000000;\n --color-overlay: #000030;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Courier New\", Courier, monospace;\n --font-ui: \"Courier New\", Courier, monospace;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 10px;\n --text-small: 9px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, white 55%, transparent);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, white 80%, transparent);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, black 35%, transparent);\n --shadow-dialog: 2px 2px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to bottom, var(--color-page) 0, var(--color-page) 1px, color-mix(in srgb, var(--color-page) 88%, black) 1px, color-mix(in srgb, var(--color-page) 88%, black) 2px);\n --fill-bar: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 88%, white) 0, color-mix(in srgb, var(--color-bar) 88%, white) 1px, var(--color-bar) 1px, var(--color-bar) 2px);\n --fill-bar-alt: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt) 60%, white) 0, color-mix(in srgb, var(--color-bar-alt) 60%, white) 1px, var(--color-bar-alt) 1px, var(--color-bar-alt) 2px);\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) 80%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }