{
  "id": "v1-me-6545",
  "long_id": "v1.memphis.portal.s06.p05.t04.u05",
  "name": "Memphis science centre (2016 to 2022)",
  "era": {
    "slug": "memphis",
    "code": "me",
    "name": "Memphis",
    "years": [
      2016,
      2022
    ],
    "description": "The Memphis revival of 2016 to 2022: flat bright colours that clash on purpose, squiggles, dots, triangles and zigzags scattered as decoration, patterns laid as whole fields, flat blocks that overlap and tilt, and bold geometric type."
  },
  "archetype": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A fluid visitor site in the Memphis revival look of 2016 to 2022, in its sun-faded register: salmon, turquoise and mustard on a grey-beige ground, whole fields of confetti, scallops and rings, and arches, half discs and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. It was common on the sites of children's museums, science centres, ice-cream brands and schools; this pack is a science centre for children, with a centred brand, a hero block that climbs into a field of pattern under a tilted ticket of opening hours, an arcade of figures, exhibits that zigzag, a day's timetable as ticket stubs and a booking form.",
  "url": "https://chrono.skin/s/v1-me-6545",
  "preview_url": "https://chrono.skin/s/v1-me-6545/specimen.html",
  "files": {
    "STYLE.md": "# Memphis science centre (2016 to 2022)\n\n## Summary\n\nA fluid visitor site in the Memphis revival look of 2016 to 2022, in its sun-faded register: salmon, turquoise and mustard on a grey-beige ground, whole fields of confetti, scallops and rings, and arches, half discs and zigzags laid across the edges of the blocks. Nothing is outlined and nothing casts a shadow: depth comes from one flat block or shape overlapping another. It was common on the sites of children's museums, science centres, ice-cream brands and schools; this pack is a science centre for children, with a centred brand, a hero block that climbs into a field of pattern under a tilted ticket of opening hours, an arcade of figures, exhibits that zigzag, a day's timetable as ticket stubs and a booking form.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100% and every section (`.ds-nav`, `.ds-hero`, `.ds-page-header`, `.ds-band`, `.ds-footer`) is full-bleed. Content sits in a centred `--size-content` (1120px) column with `--space-gutter` (48px) at the sides. Designed at a 1440px viewport.\n- Order of the home page: a strip of `--fill-bar-alt` pattern with today's hours on a flat chip; the navigation bar (`--size-nav` 92px) with the brand stacked in the middle and a list of links on either side; the hero; the arcade of four stat arches standing on the edge of the next band; three exhibits on a surface band; a tinted band with the day's timetable beside a panel and a carousel; a slim band in `--color-fill-4` with the call to action; the footer.\n- Sections touch and have no rule between them. Shapes lie over the corners of bands and across their edges.\n- The hero starts with `.ds-hero__field`, a full-width field of pattern 1.7 times `--size-art` tall, holding a rising half disc and five loose shapes. `.ds-hero__inner` is pulled up into it by three quarters of `--size-art`: the words stand on `.ds-hero__body`, a flat block with `--radius-page` corners in the first column, and `.ds-ticket`, a tilted arch-topped block of `--color-fill-3` with the opening hours, takes the `--size-ticket` (320px) column, shifted left and up so that it lies over the corner of the body and the edge of the field.\n- `.ds-stat` is an arcade: four arches of unequal width (4:3:5:3) and height that touch and stand on the lower edge of `.ds-band--stand`, a band with no padding below.\n- `.ds-grid` is three columns that zigzag: odd tiles carry an arch of pattern over a tinted label, even tiles start `--space-6` lower and carry the label over a bowl of pattern; every third picture is taller. `.ds-split` is a main column and a `--size-sidebar` (300px) column, `.ds-split--even` two halves.\n- Inner pages keep the strip, the navigation and the footer and drop the hero. In its place comes a `.ds-page-header`: a flat `--color-surface-strong` band with a scalloped lower edge and one large half disc, hoop or quarter at its right end; the breadcrumb, the `--text-h1` title and one line of lead on the left, the actions on the right. Below it one `.ds-band` holds a `.ds-split`: the main column starts with the `.ds-tabs` or the notices, then the grid, text or table; the side column holds the arch-shaped `.ds-sidebar`, panels and the empty state. Inner pages are left-aligned; only band heads on the home page and the footer are centred.\n- Spacing scale: `--space-1` 4px (underline offset, chip padding), `--space-2` 8px (gap between timetable rows, label to control), `--space-3` 12px (row padding, strip padding), `--space-4` 18px (panel padding, gap between buttons, the scallops), `--space-5` 26px (gap between cards and stacked blocks, ticket padding), `--space-6` 36px (hero block padding, drop of the even tiles, pitch of the scallops), `--space-7` 56px (tight band padding, gap between columns, band head to content), `--space-8` 84px (band padding, the space under the curve of an arch), `--space-9` 120px (height of the curve of an arch, the tallest stat). `--space-nudge` 3px is the pressed offset, the focus outline offset and the underline thickness.\n- Fixed sizes: `--size-control` 50px, `--size-control-large` 62px, `--size-control-small` 38px, `--size-logo` 48px, `--size-avatar` 48px, `--size-art` 220px (unit of an exhibit picture and of the hero field), `--size-shape` 110px (the unit of every ornament), `--size-dot` 22px (pitch of every pattern), `--size-stroke` 4px (weight of drawn lines and pattern lines), `--size-dialog` 520px.\n- Below 1000px the navigation stacks (brand, then the two lists centred), the ticket moves under the hero block, still tilted, the grid and the arcade drop to two columns, splits stack and free shapes in bands disappear. Below 600px gutters shrink to `--space-4`, the grid is one column, the hero title is half the display size, the hero field is lower and its shapes smaller, buttons may wrap and table columns marked `.ds-table__extra` are hidden, so nothing scrolls sideways. On a phone (600px and below) `.ds-nav__links` (both lists) leave the bar and `.ds-nav__fold` (a `.ds-menu` with the `.ds-nav__burger` summary) stands at the right of the brand; it opens a list of every view across the width of the window, the current one on the accent fill, and a `.ds-menu__list` elsewhere is at most 80vw wide.\n- Views: four, switched by plain `#name` links. `home` is the poster. `exhibits` is the catalogue: tabs by age, six tiles and the pagination, with the floors and an empty state beside them. `exhibit` is one exhibit: the text and related links, with the status badges, the guide (an avatar and a tooltip) and a facts sidebar beside them. `visit` has the notices, the price table and the questions accordion beside the booking form with a switch and the four buttons, and the confirmation dialog on its overlay band. The navigation marks the current view through `:has()` rules, one per view.\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- Type: headings in a condensed heavy capital face (`--font-heading`: Anton, Bebas Neue, League Gothic, then Impact), navigation, buttons and labels in a condensed sans (`--font-ui`: Barlow Condensed, Oswald, then Arial Narrow), body in Karla or IBM Plex Sans, then Helvetica. `--text-base` 16px at 1.5, `--text-small` 13px, `--text-ui` 15px uppercase at weight 700, `--text-large` 20px for leads. `--text-display` 120px at line height 0.9 for the hero title; `--text-h1` 64px (inner page titles, stat figures, prices), `--text-h2` 42px (band titles, the title of the big tile), `--text-h3` 24px (tile, panel and sidebar titles, the shelf, price stickers). Headings are uppercase at weight 400, the only weight these faces have. Links in running text are underlined, titles and navigation are not.\n- Palette: a cream page `--color-page` #f3e3c3 with lighter cream surfaces, pale tomato `--color-surface-alt` #ffd2bf and pale cobalt `--color-surface-strong` #c9d4ff. The four fills are tomato #df3418, cobalt #2140d8, black #17120f and green #0b8457; they are deep, and the text on them is cream (`--color-accent-text` #fff8ea). `--color-accent` and the primary button are the tomato, `--color-accent-alt` the green, the fifth ornament colour `--color-shadow` is marigold #ffb400. `--color-bar` is the cobalt, for the navigation and table heads; the secondary button, the note on the shelf and the footer are black. Text is the black, links cobalt; link hover is deep tomato, active deep green, visited plum. Danger #b3123a, success #0f7a4c, warning #b85a00, notice pale cobalt.\n- Surface: no outlines and no shadows. `--border-width` and `--border-width-strong` are a 1px solid hairline, used only round form controls and between rows; all five shadow tokens are `none`. Every corner is square, tags included (`--radius-control`, `--radius-panel`, `--radius-pill` 0); `--radius-page` rounds one corner of the largest blocks by 80px. `--fill-page` adds faint diagonal pinstripes to the page; `--fill-bar` gives the bar a hem of small teeth in `--color-bar-alt`; `--fill-bar-alt` draws tomato and cobalt bars on black; `--fill-inverse` scatters tomato crosses and marigold dots over the black footer. `--fill-button-hover` is the green. No text shadow, no blur; `--transition` moves only `transform` and the fill.\n- Which text sits on which fill (the era's convention; every Memphis layout and token set keeps to it):\n  - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` carry `--color-text`, headings in `--color-heading` or `--color-heading-alt`, links in the `--color-link-*` tokens and secondary text in `--color-text-muted`.\n  - `--color-fill-1` to `--color-fill-4`, `--color-accent` (`--fill-accent`), `--color-accent-alt`, `--color-success` and `--color-warning` are the loud fills. They carry `--color-accent-text` and nothing else: headings and links on them inherit it (use `.ds-link--plain`), and there is no muted text on a loud fill. A product tile is such a fill, so everything written on it inherits.\n  - `--color-danger` is readable as text on any surface. Used as a fill (destructive button, danger badge) it carries `--color-surface`. `--color-danger-surface` carries `--color-text`.\n  - `--color-bar` carries `--color-bar-text`, `--color-bar-alt` carries `--color-bar-alt-text`, `--color-inverse` carries `--color-inverse-text`, `--color-notice` carries `--color-notice-text`, buttons carry their own text tokens and `--color-disabled` carries `--color-disabled-text`. The bar is a loud colour of its own, so the primary and the secondary button must both read on it.\n  - A box is a flat block of one colour. It has no outline and nothing behind it: every `--shadow-*` token is `none` and `components.css` never sets `box-shadow`. Two blocks are told apart by their fills, so a block never sits on a ground of its own colour: panels (`--fill-panel`) go on the page, on `--color-surface-alt` or on a pattern; tinted blocks go on the page or on a surface; a picture on a tile takes a `.ds-cover` pair whose ground is not the tile's fill. The secondary button and the menu use the darkest or lightest colour of the palette (`--color-button-secondary`, `--color-inverse`); in a set where that colour is also a fill, keep the secondary button off that fill.\n  - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control and in `--color-border-muted` between rows of a table, list or sidebar, drawn in the set's `--border-style`. `--color-border` and `--color-border-strong` are the ink of drawn ornaments (`.ds-shape--ink`, the specks in the terrazzo and confetti patterns), not of frames. `--color-shadow` is the fifth ornament colour (`.ds-shape--c5`, confetti); it is never a shadow.\n  - Patterns come in two strengths. `--fill-page` is the quiet one, drawn in a faint tint of the ground, and text may sit on it. The loud ones (`--fill-bar-alt`, `--fill-inverse` and every `.ds-cover`) are drawn in a second, clashing colour and never carry text directly: text goes on a flat block or chip laid over the pattern (`.ds-cover__chip`, `.ds-shelf__chip`, `.ds-hero__body`, `.ds-feature`, the footer block). The only exceptions are the faint tints of `.ds-avatar__pic` and `.ds-progress__bar`, which mix `--color-accent-text` at under 30% into the fill.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, the base font and colour; sections are its children, there is no wrapper column.\n- `.ds-brand`: the mark and name, in the middle of the navigation bar with the name under the mark, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (flat fill, text colour, radius, no outline) and tilted 8 degrees; `.ds-brand__name` is the name in the heading font at `--text-h3`. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the header. `.ds-nav__strip` is a strip of `--fill-bar-alt` pattern; its words sit in `.ds-nav__strip-text`, a flat `--color-bar-alt` chip, with a `.ds-nav__strip-link`. `.ds-nav__bar` is flat `--fill-bar`, a grid of three: `.ds-nav__links`, the brand, and a second list with `.ds-nav__links--end`, which holds one `.ds-menu` and ends with a small secondary button. A `.ds-nav__link` is a pill; hovered it takes `--color-surface`, and the current one is a `--color-surface` arch.\n- `.ds-hero`: the poster. Its first child is `.ds-hero__field`, a `.ds-cover` across the whole width holding six `.ds-shape`, placed by their order (the first is the rising half disc). `.ds-hero__inner` is the grid that climbs into the field: `.ds-hero__body`, the flat block with a tilted badge, `.ds-hero__title` at 86% of the display size with one word in `.ds-hero__mark` (a tilted accent pill), `.ds-hero__lead` and `.ds-hero__actions`; and the `.ds-ticket`.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: a flat `--color-surface-strong` band whose lower edge is a row of scallops in `--color-page`. `.ds-page-header__inner`, the breadcrumb, then `.ds-page-header__row` with `.ds-page-header__title` and `.ds-page-header__lead` on the left and `.ds-page-header__actions` on the right; one large shape stands at its right end.\n- `.ds-band`: any full-width section. Fill by `.ds-band--surface`, `.ds-band--alt`, `.ds-band--strong`, `.ds-band--fill` (`--color-fill-4` with `--color-accent-text`; the only loud band, for a call to action), `.ds-band--overlay` (dialog backdrop); `.ds-band--tight` for less padding; `.ds-band--stand` for a band whose content stands on its lower edge. `.ds-band__inner` is the content column, `.ds-band__head` a centred `.ds-band__title`, a `.ds-squiggle` and a `.ds-band__lead`; `.ds-band__label` is a small heading over one block. `.ds-split`, `.ds-stack` (`.ds-stack--wide`) and `.ds-row` arrange blocks.\n- `.ds-stat`: the row of figures as an arcade: four `.ds-stat__cell` arches, each one flat fill, unequal in width and height, touching and standing on one line; a `.ds-stat__value` at `--text-h1` over a short `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-grid`: exhibit tiles. A `.ds-grid__cell` has no frame: a `.ds-cover` with one or two shapes, cut as an arch on odd tiles and as a bowl on even ones, and `.ds-grid__body`, a flat label on `--color-surface-strong` (odd) or `--color-surface-alt` (even) with `.ds-grid__title`, `.ds-grid__text` and an optional badge. On even tiles the label comes first.\n- `.ds-list`: the timetable as ticket stubs, `--space-2` apart: each `.ds-list__item` is a flat `--color-surface` block, every second one set in by `--space-5`; `.ds-list__time` stands at its left end on a loud fill with a rounded nose, cycling through the four fills; then `.ds-list__main` (`.ds-list__title`, `.ds-list__text`) and a muted `.ds-list__meta`. Put it on a tinted band or the page, not on a surface band.\n- `.ds-panel`: a flat `--fill-panel` block with `--radius-panel` corners; its `.ds-panel__title` is led by a disc in the accent fill, then `.ds-panel__body`. `.ds-panel--pick` is `--color-surface-strong` and its title is led by a diamond in `--color-accent-alt`.\n- `.ds-sidebar`: a flat `--color-surface-alt` block cut as an arch window: the centred `.ds-sidebar__title` sits under the curve, then a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines; an item may end with a badge.\n- `.ds-ticket`: the opening hours in the hero: a `--color-fill-3` block with an arched top, tilted 4 degrees, holding `.ds-ticket__title`, a plain badge, `.ds-ticket__rows` of `.ds-ticket__row` (a day and its hours, divided by hairlines in a tint of the text) and a `.ds-link--plain`.\n- `.ds-footer`: a field of `--fill-inverse` pattern with two shapes; on it `.ds-footer__inner`, one flat `--color-inverse` block with `--radius-page` corners, centred: `.ds-footer__sign` with `.ds-footer__brand` and `.ds-footer__text` across the top, three columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`, and `.ds-footer__legal` as the last line, over a faint hairline.\n- `.ds-shape`: an ornament. An empty `aria-hidden` span, absolutely placed in a section that has `position: relative`, behind the content or across the edge of two blocks. Filled kinds, with no outline: `.ds-shape--disc`, `.ds-shape--half`, `.ds-shape--quarter`, `.ds-shape--tri` (clipped box), `.ds-shape--block`. Line-only kinds: `.ds-shape--ring` (a thick circle) and `.ds-shape--hoop` (a thin one), both drawn with a radial gradient and not with a border; `.ds-shape--line`, which holds an inline SVG squiggle or zigzag, and `.ds-shape--draw`, which holds an inline SVG triangle, cross or arc, all stroked in `currentColor` at one and a half times `--size-stroke`. Pattern kinds: `.ds-shape--dots`, `.ds-shape--grid`, `.ds-shape--bars`, `.ds-shape--stripes`. Colour: `.ds-shape--c1` to `.ds-shape--c4` (the four fills), `.ds-shape--c5` (`--color-shadow`), `.ds-shape--ink` (`--color-border-strong`), `.ds-shape--paper` (`--color-surface`). A shape is either filled or a line, never a filled shape with an outline round it. Size: `.ds-shape--s`, none, `.ds-shape--l`, `.ds-shape--xl`, `.ds-shape--xxl` (0.5, 1, 2, 3 and 4.5 times `--size-shape`). `.ds-shape--tilt`, `.ds-shape--turn`, `.ds-shape--flip` and `.ds-shape--side` rotate it. Place with `.ds-shape--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. Free shapes are hidden on narrow screens so they never cover text; keep them out of the way of buttons.\n- `.ds-cover`: a field of pattern, for pictures and for whole grounds: a fill with a pattern in a clashing colour. Colour pairs: `.ds-cover--1` to `.ds-cover--4` (each fill with the next one), `.ds-cover--5` (`--color-surface-strong` with the accent), `.ds-cover--6` (`--color-inverse` with `--color-fill-1`). Patterns: `.ds-cover--dots`, `.ds-cover--stripes`, `.ds-cover--grid`, `.ds-cover--zig` (rows of teeth), `.ds-cover--dash` (short strokes in rows), `.ds-cover--rings`, `.ds-cover--terrazzo` and `.ds-cover--confetti`, all at the pitch of `--size-dot`. As a picture it holds one or two `.ds-shape` (in a row, not absolutely) and may carry a `.ds-cover__chip` label on a solid surface. `.ds-cover--ground` makes it an absolutely placed layer behind the content of a section; the layout places it with a class of its own. Use patterns big: a band across the hero, a third of a section, the end of a page header.\n- `.ds-squiggle`: the short wavy rule under a section title, an inline SVG in `--color-accent`. It is the style's rule: there are no straight heavy rules.\n- `.ds-prose`: long text: h1, h2, h3 (in `--color-heading-alt`), paragraphs, lists with coloured markers, strong, inline code on a flat `--color-surface-alt` chip, and links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content, bold, in `--color-link` with the `--link-decoration` underline as thick as `--space-nudge`; on hover it takes `--color-link-hover` and the underline turns wavy. `.ds-link--quiet` for titles, breadcrumbs and lists; `.ds-link--plain` inherits its colour and is the only link allowed on a loud fill. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` is a wrapping row of them.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners, no outline and no shadow. `.ds-button--secondary` uses the secondary fill; `.ds-button--danger` is `--color-danger` with `--color-surface` text, once per view; `.ds-button--large` and `.ds-button--small` change height and text size. `is-hover` swaps the fill (`--fill-button-hover`; the secondary button takes the accent) and tilts the block 2 degrees, `is-active` drops it by `--space-nudge`, `is-disabled` is `--color-disabled`, `is-focus` shows `--focus-ring`. On a block of the button's own colour use the other button. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag in the UI font with `--radius-pill` corners and no outline; `--fill-accent` by default. `.ds-badge--alt` (`--color-accent-alt`), `.ds-badge--plain` (`--color-surface-strong` with `--color-text`, for counts, neutral tags and tags on a product tile), and the status variants `.ds-badge--success`, `.ds-badge--warning` (both with `--color-accent-text`) and `.ds-badge--danger` (`--color-danger` with `--color-surface` text). `.ds-badge--tilt` turns it 4 degrees. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks, a bold small `.ds-form__label` over a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea, which takes `--radius-panel`), then `.ds-form__hint` or `.ds-form__error`. A control is `--fill-input` with the hairline in `--color-input-border`. `.ds-form__row` puts two fields side by side. `is-focus` adds the focus ring, `is-invalid` turns the control `--color-danger-surface` with a `--color-danger` hairline, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` (checked: the accent fill with a small square in it) and its text.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the label), a flat `.ds-switch__track` with a flat thumb in `--color-button-secondary`, `.ds-switch__label` and an optional `.ds-switch__hint`. On, the track is `--fill-accent`. `.ds-switch--end` puts the track at the right end of a full-width row. `is-on` shows the on state statically.\n- `.ds-table`: one flat `--color-surface` block. The head row is `--color-bar` with `--color-bar-text`; rows alternate `--color-surface` and `--color-surface-alt` and are divided by a hairline in `--color-border-muted`; `is-current` on a row makes it `--color-surface-strong` and bold (the total of the basket). `.ds-table__num` right-aligns figures, `.ds-table__extra` marks a column that is dropped on a phone, `.ds-table__meta` is a muted second line in a cell.\n- `.ds-tabs`: a wrapping row of flat `--color-surface-strong` chips (`.ds-tabs__tab`); the current one (`is-current`) is `--fill-accent` and tilted 3 degrees. `is-hover` tints and tilts. Use for two to four views of one block, as the first row of the main column of an inner page.\n- `.ds-notice`: a flat `--color-notice` block with a striped end drawn in its own text colour; `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with `--color-text` and `--color-danger` stripes.\n- `.ds-pagination`: a row of flat `--color-surface-strong` counters (`.ds-pagination__link`, `--radius-pill`); the current page (`is-current`) is `--fill-accent` and tilted, `is-disabled` is grey, `is-hover` takes `--color-accent-alt` and tilts the other way.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` separated by accent dots; the last has `is-current`. It is the first line of an inner page.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay, with no frame: `.ds-dialog__bar` on `--color-surface-strong` with `.ds-dialog__title` and a `.ds-dialog__close` in the secondary button colours, `.ds-dialog__body`, `.ds-dialog__actions` with the buttons at the right.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small `.ds-shape` in a row), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down under a navigation item, a `<details>` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`. The list is a flat `--color-inverse` block, tilted 1 degree, so it reads on any ground without a frame or a shadow; a hovered link takes the accent fill.\n- `.ds-nav__fold`: the phone navigation, a `.ds-menu` that is hidden above 600px. Below it the links leave the bar and its `.ds-nav__burger` summary, a tilted `--color-surface` arch, opens one list of every view (`.ds-nav__fold-link`, the current one on the accent fill) followed by the secondary links.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat `--color-inverse` chip above it, tilted, shown on hover and focus (`is-open` shows it statically). Do not leave it open over other content.\n- `.ds-accordion`: `.ds-accordion__item` (`<details>`) with a `.ds-accordion__head` summary on `--color-surface-alt` ending in a `.ds-accordion__sign`: an accent disc that becomes a diamond in `--color-accent-alt` when open. The open head sits on `--color-surface-strong`; `.ds-accordion__body` holds the answer on the panel fill.\n- `.ds-progress`: a flat `--color-disabled` track with a `.ds-progress__bar` in `--fill-accent`, striped; `.ds-progress--alt` is dotted `--color-accent-alt`. Width by `.ds-progress--0`, `--25`, `--40`, `--60`, `--75`, `--90` (50% without). `.ds-progress__legend` is the label and figure above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic`, a tile with `--radius-control` corners on a fill with a faint pattern (`.ds-avatar--1` to `.ds-avatar--4`), optionally with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. `.ds-avatar--large` for a feature or a byline.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` on one flat `--color-surface-strong` block (a `.ds-carousel__quote` and an avatar in each; a slide may start with a `.ds-carousel__pic`, an arch of pattern); `.ds-carousel__foot` holds `.ds-carousel__dots` (a disc, a diamond and a square in `--color-border`; `is-current` is the accent) and two `.ds-carousel__arrow` buttons in the secondary button colours.\n\n## Never\n\n- `row-gap <= 8px`: rows of a table or list touch and are divided by hairlines.\n- `block-gap <= 56px`: stacked blocks are 26px apart, columns 56px; sections touch.\n- `content-width >= 72%`: bands are full-bleed and their column is 1120px of a 1440px viewport.\n- `palette-colours <= 18`: black, white, magenta and its wine, pale and bubblegum tints, four greys and the status colours.\n- `font-size <= 120px`: the hero title is the largest text.\n- `font-size >= 13px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: a condensed capital face for headings, a condensed sans for controls and one plain sans for text (plus the monospace of inline code).\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 45%`: headings, the shelf, navigation, buttons, badges and labels are capitals; running text never is.\n- `underlined-links <= 20%`: only links in running text are underlined.\n- `box-shadow = none`: no box has anything behind it, neither a soft shadow nor a hard offset block. A block of colour behind every box is another style; depth here comes from one shape or block overlapping another.\n- `border-width <= 1px`: the only borders are hairlines round form controls and between rows. No card, button, tag, tile or bar is outlined; a thick line is a drawn squiggle or zigzag, never a frame.\n- `text-shadow = none`: type is flat.\n- `gradient-fills <= 8%`: gradients are used only to draw patterns: dots, stripes, dashes, zigzags, rings and terrazzo. No box fades from one colour to another.\n- `animation = none`: nothing moves on its own; only hover tilts a control.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box is one flat fill with a radius token: no border, no `box-shadow`, no outline. If it would vanish on its ground, change its fill or the ground's, do not frame it. Follow the convention above for its text: `--color-accent-text` on the loud fills, `--color-text` on the surfaces. Give depth by overlap: pull a flat block up into a pattern field with a negative margin, lay a tilted block over its corner, stand arches of different fills and heights side by side on the edge of the next band, let a half disc rise from the lower edge of a band. Decoration is the point of this style: a new section gets a `.ds-cover` pattern as part of its ground or a few `.ds-shape` in its empty corners, mixing filled shapes with line-only ones; draw both from the fill tokens so that every palette repaints them, and keep text on flat blocks, off the loud patterns. Corners are square or fully round (discs, arches, bowls, quarters) and come from the radius tokens, some of which round a single corner; never give boxes a uniform medium radius. Tilt small things (tags, the current tab, one word of the title, the ticket) by 2 to 6 degrees with `transform: rotate()`; never tilt running text or a form. For a size the vocabulary lacks use `calc()` over an existing token; `--size-stroke` is the weight of every drawn line.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 100%;\n  --size-content: 1120px;\n  --size-measure: 620px;\n  --size-nav: 92px;\n  --size-control: 50px;\n  --size-control-large: 62px;\n  --size-control-small: 38px;\n  --size-logo: 48px;\n  --size-check: 24px;\n  --size-thumb: 22px;\n  --size-track: 20px;\n  --size-avatar: 48px;\n  --size-art: 220px;\n  --size-shape: 110px;\n  --size-dot: 22px;\n  --size-stroke: 4px;\n  --size-sidebar: 300px;\n  --size-ticket: 320px;\n  --size-dialog: 520px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 18px;\n  --space-5: 26px;\n  --space-6: 36px;\n  --space-7: 56px;\n  --space-8: 84px;\n  --space-9: 120px;\n  --space-gutter: 48px;\n  --space-nudge: 3px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  width: var(--size-page);\n  overflow-x: clip;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n/* views: one screen 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/* nav: a strip of pattern with today's hours on a flat chip, then a flat bar with the brand in the middle and the links on either side */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  color: var(--color-bar-text);\n  background: var(--fill-bar);\n}\n.ds-nav__strip {\n  margin: 0;\n  padding: var(--space-3) var(--space-gutter);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-align: center;\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-alt-text);\n  background: var(--fill-bar-alt);\n}\n.ds-nav__strip-text {\n  display: inline-block;\n  padding: 0 var(--space-4);\n  background: var(--color-bar-alt);\n  border-radius: var(--radius-pill);\n}\n.ds-nav__strip-link {\n  color: inherit;\n  text-decoration: underline;\n  text-underline-offset: var(--space-1);\n}\n.ds-nav__bar {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-6);\n  max-width: calc(var(--size-content) + 2 * var(--space-gutter));\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-gutter);\n}\n.ds-nav__bar > .ds-brand {\n  flex-direction: column;\n  gap: var(--space-1);\n}\n.ds-nav__links {\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-nav__links--end {\n  justify-content: flex-end;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-4);\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: var(--link-decoration-quiet);\n  color: var(--color-bar-text);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-text);\n  background: var(--color-surface);\n}\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(#exhibits:target) .ds-nav__link[href=\"#exhibits\"],\n.ds-page:has(#exhibit:target) .ds-nav__link[href=\"#exhibit\"],\n.ds-page:has(#visit:target) .ds-nav__link[href=\"#visit\"] {\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* bands: full-bleed fields of flat colour or pattern that meet edge to edge, with no rule between them */\n.ds-band {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter);\n  overflow: hidden;\n}\n.ds-band--tight {\n  padding-top: var(--space-7);\n  padding-bottom: var(--space-7);\n}\n.ds-band--surface {\n  background: var(--color-surface);\n}\n.ds-band--alt {\n  background: var(--color-surface-alt);\n}\n.ds-band--strong {\n  background: var(--color-surface-strong);\n}\n.ds-band--fill {\n  color: var(--color-accent-text);\n  background: var(--color-fill-4);\n}\n.ds-band--stand {\n  padding-top: var(--space-6);\n  padding-bottom: 0;\n}\n.ds-band--overlay {\n  background: var(--color-overlay);\n}\n.ds-band__inner {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-band__head {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: center;\n  margin: 0 0 var(--space-7);\n  text-align: center;\n}\n.ds-band__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-band--fill .ds-band__title {\n  color: inherit;\n}\n.ds-band__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-band__label {\n  margin: 0 0 var(--space-4);\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-alt);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-5);\n  align-content: start;\n  min-width: 0;\n}\n.ds-stack--wide {\n  gap: var(--space-7);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-sidebar);\n  gap: var(--space-7);\n  align-items: start;\n}\n.ds-split--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n/* hero: a full-width field of pattern with a rising half disc and loose shapes; the words stand on a flat block that climbs\n   up into the field from below, and a tilted ticket with today's hours lies over the block's corner and the field's edge */\n.ds-hero {\n  position: relative;\n  padding: 0 var(--space-gutter);\n}\n.ds-hero__field {\n  position: relative;\n  height: calc(var(--size-art) * 1.7);\n  margin: 0 calc(var(--space-gutter) * -1);\n  overflow: hidden;\n}\n.ds-hero .ds-hero__field .ds-shape {\n  position: absolute;\n}\n.ds-hero__field .ds-shape:nth-child(1) {\n  right: 8%;\n  bottom: 0;\n}\n.ds-hero__field .ds-shape:nth-child(2) {\n  top: 12%;\n  right: 4%;\n}\n.ds-hero__field .ds-shape:nth-child(3) {\n  top: 10%;\n  left: 5%;\n}\n.ds-hero__field .ds-shape:nth-child(4) {\n  top: 16%;\n  left: 38%;\n}\n.ds-hero__field .ds-shape:nth-child(5) {\n  top: 34%;\n  left: 22%;\n}\n.ds-hero__field .ds-shape:nth-child(6) {\n  top: 8%;\n  right: 34%;\n}\n.ds-hero__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-ticket);\n  align-items: start;\n  max-width: var(--size-content);\n  margin: calc(var(--size-art) * -0.75) auto 0;\n}\n.ds-hero__body {\n  display: grid;\n  gap: var(--space-5);\n  justify-items: start;\n  padding: var(--space-6) var(--space-7) var(--space-6) var(--space-6);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 0.86);\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  color: var(--color-heading);\n}\n.ds-hero__mark {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n  transform: rotate(-2deg);\n  margin: var(--space-1) 0 var(--space-3);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-ticket {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  margin: calc(var(--space-7) * -1) 0 0 calc(var(--space-6) * -1);\n  padding: var(--space-5);\n  color: var(--color-accent-text);\n  background: var(--color-fill-3);\n  border-radius: 50% 50% 0 0 / 22% 22% 0 0;\n  transform: rotate(4deg);\n}\n.ds-ticket__title {\n  margin: var(--space-5) 0 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}\n.ds-ticket__rows {\n  display: grid;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-ticket__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  font-weight: var(--weight-bold);\n  font-variant-numeric: tabular-nums;\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent-text) 45%, transparent);\n}\n\n/* page header: the head of an inner page. A flat tinted band with a rising half disc at its right end and a scalloped lower edge */\n.ds-page-header {\n  position: relative;\n  padding: var(--space-7) var(--space-gutter) var(--space-8);\n  overflow: hidden;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-page-header::after {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--space-4);\n  background: radial-gradient(circle at 50% 100%, var(--color-page) 68%, transparent 70%) 50% 0 / var(--space-6) 100% repeat-x;\n}\n.ds-page-header__inner {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\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__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* stats: an arcade. Four arches of unequal height in four fills that touch and stand on the lower edge of their band */\n.ds-stat {\n  display: grid;\n  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr);\n  align-items: end;\n  margin: 0;\n}\n.ds-stat__cell {\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: flex-end;\n  padding: var(--space-8) var(--space-4) var(--space-5);\n  text-align: center;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: 50% 50% 0 0 / var(--space-9) var(--space-9) 0 0;\n}\n.ds-stat__cell:nth-child(2) {\n  padding-top: var(--space-7);\n  background: var(--color-fill-2);\n}\n.ds-stat__cell:nth-child(3) {\n  padding-top: var(--space-9);\n  background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(4) {\n  padding-top: var(--space-8);\n  background: var(--color-fill-4);\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: 1;\n  letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n  max-width: 18ch;\n  margin: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  text-transform: var(--ui-transform);\n}\n\n/* grid: exhibits in three columns that zigzag. Odd tiles carry an arch of pattern over a tinted label, even tiles the label over a bowl of pattern */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-7) var(--space-5);\n  align-items: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  color: var(--color-text);\n}\n.ds-grid__cell:nth-child(even) {\n  flex-direction: column-reverse;\n  margin-top: var(--space-6);\n}\n.ds-grid__cell .ds-cover {\n  min-height: calc(var(--size-art) * 1.1);\n  border-radius: 50% 50% 0 0 / 46% 46% 0 0;\n}\n.ds-grid__cell:nth-child(even) .ds-cover {\n  min-height: calc(var(--size-art) * 0.8);\n  border-radius: 0 0 50% 50% / 0 0 60% 60%;\n}\n.ds-grid__cell:nth-child(3n) .ds-cover {\n  min-height: calc(var(--size-art) * 1.3);\n}\n.ds-grid__body {\n  display: grid;\n  gap: var(--space-2);\n  justify-items: start;\n  padding: var(--space-4) var(--space-4) var(--space-5);\n  background: var(--color-surface-strong);\n}\n.ds-grid__cell:nth-child(even) .ds-grid__body {\n  background: var(--color-surface-alt);\n}\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  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n\n/* list: the day's timetable as ticket stubs. Each row is a flat block of its own; its time stands on a block of a loud fill at the left end */\n.ds-list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text);\n}\n.ds-list__item {\n  display: flex;\n  align-items: stretch;\n  background: var(--color-surface);\n}\n.ds-list__item:nth-child(even) {\n  margin-left: var(--space-5);\n}\n.ds-list__time {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  min-width: 8ch;\n  padding: var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: 0 50% 50% 0 / 0 50% 50% 0;\n}\n.ds-list__item:nth-child(4n + 2) .ds-list__time {\n  background: var(--color-fill-2);\n}\n.ds-list__item:nth-child(4n + 3) .ds-list__time {\n  background: var(--color-fill-3);\n}\n.ds-list__item:nth-child(4n) .ds-list__time {\n  background: var(--color-fill-4);\n}\n.ds-list__main {\n  flex: 1;\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n}\n.ds-list__title {\n  margin: 0;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.35;\n}\n.ds-list__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n.ds-list__meta {\n  flex: none;\n  align-self: center;\n  padding: 0 var(--space-4) 0 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* panel: a flat block; a disc in the accent fill leads its title */\n.ds-panel {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-4) var(--space-5) 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-alt);\n}\n.ds-panel__title::before {\n  content: \"\";\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: var(--fill-accent);\n  border-radius: 50%;\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-panel__body > * {\n  margin: 0;\n}\n.ds-panel__body > .ds-form,\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-progress__legend,\n.ds-panel__body > .ds-switch {\n  width: 100%;\n}\n.ds-panel--pick {\n  background: var(--color-surface-strong);\n}\n.ds-panel--pick .ds-panel__title::before {\n  background: var(--color-accent-alt);\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-carousel .ds-carousel__pic {\n  min-height: calc(var(--size-art) * 1.3);\n  margin: 0 0 var(--space-4);\n  border-radius: 50% 50% 0 0 / 40% 40% 0 0;\n}\n\n/* sidebar: a flat tinted block cut as an arch window, its title under the curve */\n.ds-sidebar {\n  padding: var(--space-8) var(--space-5) var(--space-5);\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: 50% 50% 0 0 / var(--space-9) var(--space-9) 0 0;\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\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-align: center;\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* footer: a field of pattern; on it one flat inverted block with the name centred over three columns */\n.ds-footer {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter);\n  overflow: hidden;\n  color: var(--color-inverse-text);\n  background: var(--fill-inverse);\n}\n.ds-footer__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5) var(--space-6);\n  max-width: var(--size-content);\n  margin: 0 auto;\n  padding: var(--space-7) var(--space-7) var(--space-6);\n  text-align: center;\n  background: var(--color-inverse);\n  border-radius: var(--radius-page);\n}\n.ds-footer__sign {\n  grid-column: 1 / -1;\n}\n.ds-footer__brand {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-footer__text {\n  max-width: 44ch;\n  margin: 0 auto;\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.5;\n  text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  font-size: var(--text-small);\n  line-height: 1.45;\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline wavy;\n  text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n  grid-column: 1 / -1;\n  margin: 0;\n  padding: var(--space-4) 0 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n}\n\n/* ornaments: shapes that float free of the layout; they paint with currentColor */\n.ds-shape {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  width: var(--size-shape);\n  aspect-ratio: 1;\n  color: var(--color-fill-1);\n  pointer-events: none;\n}\n.ds-shape--disc {\n  background: currentColor;\n  border-radius: 50%;\n}\n.ds-shape--ring {\n  background: radial-gradient(closest-side, transparent 56%, currentColor 58% 98%, transparent 100%);\n}\n.ds-shape--hoop {\n  background: radial-gradient(closest-side, transparent 84%, currentColor 86% 98%, transparent 100%);\n}\n.ds-shape--half {\n  aspect-ratio: 2 / 1;\n  background: currentColor;\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-shape--quarter {\n  background: currentColor;\n  border-radius: 100% 0 0 0;\n}\n.ds-shape--tri {\n  background: currentColor;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-shape--block {\n  background: currentColor;\n  border-radius: var(--radius-panel);\n}\n.ds-shape--dots {\n  background: radial-gradient(currentColor 30%, transparent 34%) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--grid {\n  background:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--bars {\n  aspect-ratio: 3 / 2;\n  background: repeating-linear-gradient(currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3.5));\n}\n.ds-shape--stripes {\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n  border-radius: 50%;\n}\n.ds-shape--line {\n  width: calc(var(--size-shape) * 1.6);\n  aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-shape svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n  background: none;\n}\n.ds-shape--c5 {\n  color: var(--color-shadow);\n}\n.ds-shape--paper {\n  color: var(--color-surface);\n}\n.ds-shape--c1 {\n  color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n  color: var(--color-fill-2);\n}\n.ds-shape--c3 {\n  color: var(--color-fill-3);\n}\n.ds-shape--c4 {\n  color: var(--color-fill-4);\n}\n.ds-shape--ink {\n  color: var(--color-border-strong);\n}\n.ds-shape--s {\n  width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n  width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n  width: calc(var(--size-shape) * 3);\n}\n.ds-shape--xxl {\n  width: calc(var(--size-shape) * 4.5);\n}\n.ds-shape--flip {\n  transform: rotate(180deg);\n}\n.ds-shape--side {\n  transform: rotate(90deg);\n}\n.ds-shape--tilt {\n  transform: rotate(-14deg);\n}\n.ds-shape--turn {\n  transform: rotate(28deg);\n}\n.ds-shape--tl {\n  top: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--tr {\n  top: var(--space-5);\n  right: var(--space-5);\n}\n.ds-shape--bl {\n  bottom: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--br {\n  bottom: var(--space-5);\n  right: var(--space-5);\n}\n.ds-shape--edge-r {\n  top: 30%;\n  right: calc(var(--size-shape) * -0.5);\n}\n.ds-shape--edge-l {\n  bottom: 12%;\n  left: calc(var(--size-shape) * -0.5);\n}\n\n/* covers and pattern grounds: a flat fill with a pattern drawn in a second, clashing fill.\n   Text never sits straight on one: it goes on a flat block laid over the pattern */\n.ds-cover {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  overflow: hidden;\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--1 {\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--2 {\n  background-color: var(--color-fill-2);\n  color: var(--color-fill-3);\n}\n.ds-cover--3 {\n  background-color: var(--color-fill-3);\n  color: var(--color-fill-4);\n}\n.ds-cover--4 {\n  background-color: var(--color-fill-4);\n  color: var(--color-fill-1);\n}\n.ds-cover--5 {\n  background-color: var(--color-surface-strong);\n  color: var(--color-accent);\n}\n.ds-cover--6 {\n  background-color: var(--color-inverse);\n  color: var(--color-fill-1);\n}\n.ds-cover--dots {\n  background-image: radial-gradient(currentColor 28%, transparent 31%);\n  background-size: var(--size-dot) var(--size-dot);\n}\n.ds-cover--stripes {\n  background-image: repeating-linear-gradient(-45deg, currentColor 0 calc(var(--size-stroke) * 1.5), transparent calc(var(--size-stroke) * 1.5) var(--size-dot));\n}\n.ds-cover--grid {\n  background-image:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke));\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--zig {\n  background-image:\n    linear-gradient(135deg, currentColor 25%, transparent 25%),\n    linear-gradient(225deg, currentColor 25%, transparent 25%);\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--terrazzo {\n  background-image:\n    radial-gradient(ellipse 10% 6% at 18% 24%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 11% at 72% 16%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 9% 9% at 46% 58%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 12% 5% at 84% 70%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 8% at 14% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 6% 4% at 56% 92%, var(--color-surface) 96%, transparent);\n  background-size: calc(var(--size-dot) * 7) calc(var(--size-dot) * 6);\n}\n.ds-cover--dash {\n  background-image:\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent),\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 2) calc(var(--size-dot) * 1.5);\n  background-position: 0 0, var(--size-dot) calc(var(--size-dot) * 0.75);\n}\n.ds-cover--rings {\n  background-image:\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%),\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%);\n  background-size: calc(var(--size-dot) * 3) calc(var(--size-dot) * 3);\n  background-position: 0 0, calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--confetti {\n  background-image:\n    radial-gradient(ellipse 4% 4% at 12% 16%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 44% 10%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 2% 9% at 80% 22%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 5% 5% at 66% 52%, var(--color-shadow) 96%, transparent),\n    radial-gradient(ellipse 2% 8% at 26% 48%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 16% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 3% 3% at 50% 78%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 8% 2% at 84% 86%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 8) calc(var(--size-dot) * 8);\n}\n.ds-cover--ground {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  min-height: 0;\n}\n.ds-cover .ds-shape {\n  position: relative;\n  flex: none;\n}\n.ds-cover__chip {\n  position: absolute;\n  left: var(--space-3);\n  bottom: var(--space-3);\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-pill);\n}\n\n/* brand */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-logo);\n  height: var(--size-logo);\n  padding: var(--space-1);\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border-radius: var(--radius-control);\n  transform: rotate(-8deg);\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-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-bar-text);\n}\n\n/* typography */\n.ds-prose {\n  max-width: 66ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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 {\n  margin: 0 0 var(--space-5);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\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-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-prose a {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\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: 1.45;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-decoration-thickness: var(--space-nudge);\n  text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--plain {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link--plain:visited {\n  color: inherit;\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n  text-decoration-style: wavy;\n}\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n  color: inherit;\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  outline-offset: var(--space-nudge);\n}\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\n/* buttons: one flat block of colour, no outline and nothing behind it; hover swaps the fill and tilts the block */\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  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  cursor: pointer;\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border: 0;\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-button--secondary {\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  transition: var(--transition), background-color 0s;\n}\n.ds-button--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  color: var(--color-button-hover-text);\n  background: var(--fill-button-hover);\n  transform: rotate(-2deg);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n  transform: translateY(var(--space-nudge)) rotate(1deg);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n  transform: none;\n  cursor: not-allowed;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* badge: a small flat tag */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  vertical-align: middle;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n  background: var(--color-accent-alt);\n}\n.ds-badge--plain {\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-badge--success {\n  background: var(--color-success);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-badge--tilt {\n  transform: rotate(-4deg);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  align-content: start;\n}\n.ds-form__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-form__control {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\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  color: var(--color-input-text);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-form__control--area {\n  min-height: calc(var(--size-control) * 2.4);\n  border-radius: var(--radius-panel);\n  resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__checkbox {\n  appearance: none;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background:\n    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 44% 44% no-repeat,\n    var(--fill-accent);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* switch: a flat track with a flat thumb; on is the accent fill */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  cursor: pointer;\n}\n.ds-switch--end {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(var(--size-thumb) * 2 + var(--space-nudge) * 2);\n  height: calc(var(--size-thumb) + var(--space-nudge) * 2);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-nudge);\n  left: var(--space-nudge);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  background: var(--color-button-secondary);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-nudge);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* table */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  text-align: left;\n  vertical-align: middle;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th {\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  color: var(--color-bar-text);\n  background: var(--color-bar);\n  border-bottom: 0;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* tabs: a row of flat chips; the current one takes the accent fill and tilts */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n  transform: rotate(-2deg);\n}\n.ds-tabs__tab.is-current {\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-3deg);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* notice: a flat block with a striped end */\n.ds-notice {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-3));\n  color: var(--color-notice-text);\n  background: var(--color-notice);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-notice::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-6);\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n}\n.ds-notice__title {\n  flex: none;\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  flex: 1 1 24ch;\n  margin: 0;\n}\n.ds-notice--error {\n  color: var(--color-text);\n  background: var(--color-danger-surface);\n}\n.ds-notice--error::before {\n  color: var(--color-danger);\n}\n\n/* pagination: flat counters; the current one takes the accent fill and tilts */\n.ds-pagination {\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-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control-small);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  transform: rotate(-3deg);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(6deg);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\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 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\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  background: var(--fill-accent);\n  border-radius: 50%;\n}\n.ds-breadcrumb__item.is-current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog */\n.ds-dialog {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-dialog__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-strong);\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  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  padding: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n}\n.ds-dialog__body {\n  padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  padding: 0 var(--space-4) var(--space-5);\n}\n\n/* empty state: a quiet flat block with a small cluster of shapes */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  text-align: center;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n}\n.ds-empty__art .ds-shape {\n  position: relative;\n}\n.ds-empty__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-empty__text {\n  max-width: 40ch;\n  margin: 0 0 var(--space-2);\n}\n\n/* menu: a drop-down under a navigation item */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle svg {\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n  transform: rotate(180deg);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-3));\n  left: 0;\n  z-index: 8;\n  display: grid;\n  min-width: 24ch;\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-1deg);\n}\n.ds-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-menu__note {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n\n/* tooltip */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 9;\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.5;\n  text-transform: none;\n  white-space: nowrap;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-2deg);\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* accordion */\n.ds-accordion {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-accordion__item {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  list-style: none;\n  cursor: pointer;\n  color: var(--color-heading);\n  background: var(--color-surface-alt);\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__item[open] .ds-accordion__head {\n  background: var(--color-surface-strong);\n}\n.ds-accordion__sign {\n  position: relative;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__sign {\n  background: var(--color-accent-alt);\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-accordion__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* progress: a flat track, the done part striped over the accent */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background:\n    repeating-linear-gradient(-45deg, transparent 0 var(--space-2), color-mix(in srgb, var(--color-accent-text) 28%, transparent) var(--space-2) calc(var(--space-2) + var(--size-stroke))),\n    var(--fill-accent);\n}\n.ds-progress--alt .ds-progress__bar {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 32%, transparent) 26%, transparent 30%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-accent-alt);\n}\n.ds-progress--0 .ds-progress__bar {\n  width: 0;\n}\n.ds-progress--60 .ds-progress__bar {\n  width: 60%;\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n}\n\n/* avatar: a face or initials on a patterned tile */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  color: var(--color-accent-text);\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n  border-radius: var(--radius-control);\n}\n.ds-avatar--1 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-2);\n}\n.ds-avatar--4 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-4);\n}\n.ds-avatar--large .ds-avatar__pic {\n  width: calc(var(--size-avatar) * 1.75);\n  height: calc(var(--size-avatar) * 1.75);\n}\n.ds-avatar__pic svg {\n  display: block;\n  width: 70%;\n  height: 70%;\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n\n/* carousel: one slide shows; the dots are a disc, a diamond and a square */\n.ds-carousel {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-5);\n  scroll-snap-align: start;\n}\n.ds-carousel__quote {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  color: var(--color-heading);\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-carousel__arrow svg {\n  width: var(--space-4);\n  height: var(--space-4);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-6deg);\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-carousel__dot {\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-border);\n  border-radius: 50%;\n}\n.ds-carousel__dot:nth-child(3n + 2) {\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-carousel__dot:nth-child(3n) {\n  border-radius: 0;\n}\n.ds-carousel__dot.is-current {\n  background: var(--fill-accent);\n}\n\n/* squiggle: the wavy rule under a section title */\n.ds-squiggle {\n  display: block;\n  width: calc(var(--size-shape) * 1.25);\n  height: var(--space-4);\n  color: var(--color-accent);\n}\n.ds-squiggle svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-squiggle svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.25);\n}\n\n@media (max-width: 1000px) {\n  .ds-nav__bar {\n    grid-template-columns: minmax(0, 1fr);\n    justify-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__bar > .ds-brand {\n    order: -1;\n    flex-direction: row;\n    gap: var(--space-3);\n  }\n  .ds-nav__links,\n  .ds-nav__links--end {\n    justify-content: center;\n  }\n  .ds-hero__inner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-ticket {\n    width: var(--size-ticket);\n    max-width: 92%;\n    margin: calc(var(--space-5) * -1) 0 0 auto;\n  }\n  .ds-split,\n  .ds-split--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    padding-top: var(--space-7);\n  }\n  .ds-band > .ds-shape,\n  .ds-page-header > .ds-shape,\n  .ds-footer > .ds-shape {\n    display: none;\n  }\n  .ds-footer__inner {\n    padding: var(--space-6) var(--space-5);\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-band,\n  .ds-band--tight {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-band--stand {\n    padding-top: var(--space-5);\n    padding-bottom: 0;\n  }\n  .ds-hero {\n    padding: 0 var(--space-4);\n  }\n  .ds-hero__field {\n    height: calc(var(--size-art) * 1.2);\n    margin: 0 calc(var(--space-4) * -1);\n  }\n  .ds-hero__field .ds-shape {\n    width: calc(var(--size-shape) * 0.6);\n  }\n  .ds-hero__field .ds-shape:nth-child(1) {\n    width: calc(var(--size-shape) * 1.8);\n  }\n  .ds-hero__field .ds-shape--line {\n    width: var(--size-shape);\n  }\n  .ds-hero__inner {\n    margin-top: calc(var(--size-art) * -0.4);\n  }\n  .ds-hero__body {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-page-header {\n    padding: var(--space-6) var(--space-4) var(--space-7);\n  }\n  .ds-nav__strip {\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__link {\n    padding: var(--space-1) var(--space-3);\n    font-size: var(--text-small);\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-ticket__title,\n  .ds-band__title,\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-stat__value {\n    font-size: var(--text-h2);\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    padding: var(--space-6) var(--space-2) var(--space-4);\n    border-radius: 50% 50% 0 0 / var(--space-7) var(--space-7) 0 0;\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-6);\n  }\n  .ds-grid__cell:nth-child(even) {\n    margin-top: 0;\n  }\n  .ds-list__item:nth-child(even) {\n    margin-left: 0;\n  }\n  .ds-list__item {\n    flex-wrap: wrap;\n  }\n  .ds-list__main {\n    flex: 1 1 50%;\n  }\n  .ds-list__meta {\n    flex: 0 0 100%;\n    padding: 0 var(--space-4) var(--space-3);\n  }\n  .ds-footer {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-footer__inner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-footer__brand {\n    font-size: var(--text-h2);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-button {\n    white-space: normal;\n  }\n  .ds-table {\n    font-size: var(--text-small);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-2);\n  }\n  .ds-table .ds-table__extra {\n    display: none;\n  }\n  .ds-menu__list {\n    min-width: 0;\n    width: 28ch;\n    max-width: 80vw;\n  }\n}\n\n/* phone navigation: the links fold into one menu behind a flat block */\n.ds-nav__fold {\n  display: none;\n}\n.ds-nav__burger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-5) var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n  transform: rotate(-2deg);\n  transition: var(--transition);\n}\n.ds-nav__fold[open] .ds-nav__burger {\n  transform: rotate(2deg);\n}\n.ds-nav__burger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold-link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__fold-link[href=\"#home\"],\n.ds-page:has(#exhibits:target) .ds-nav__fold-link[href=\"#exhibits\"],\n.ds-page:has(#exhibit:target) .ds-nav__fold-link[href=\"#exhibit\"],\n.ds-page:has(#visit:target) .ds-nav__fold-link[href=\"#visit\"] {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n@media (max-width: 600px) {\n  .ds-nav__bar {\n    position: relative;\n    grid-template-columns: minmax(0, 1fr) auto;\n    justify-items: start;\n  }\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-nav__fold {\n    position: static;\n    display: block;\n    justify-self: end;\n  }\n  .ds-nav__fold .ds-menu__list {\n    top: 100%;\n    right: var(--space-4);\n    left: var(--space-4);\n    width: auto;\n    max-width: none;\n  }\n}\n.ds-panel .ds-tooltip__tip {\n  width: max-content;\n  max-width: 100%;\n  white-space: normal;\n}\n@media (max-width: 600px) {\n  .ds-hero__title {\n    font-size: min(calc(var(--text-display) * 0.5), 10vw);\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: memphis science centre specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <p class=\"ds-nav__strip\"><span class=\"ds-nav__strip-text\">Open today from 10 to 18. <a class=\"ds-nav__strip-link\" href=\"#visit\">The quiet hour starts at 16</a></span></p>\n  <nav class=\"ds-nav__bar\" aria-label=\"Main\">\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Today</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#exhibits\">Exhibits</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#exhibit\">Echo tunnel</a></li>\n    </ul>\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.8 18q2.3-5.6 4.6 0t4.6 0t4.6 0t4.6 0\" stroke-width=\"2.4\"/><circle cx=\"6.5\" cy=\"7\" r=\"3.4\" fill=\"currentColor\" stroke=\"none\"/><polygon points=\"16.8,3.6 21.2,10.6 12.4,10.6\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links ds-nav__links--end\">\n      <li>\n        <details class=\"ds-menu\" data-component=\"menu\">\n          <summary class=\"ds-nav__link ds-menu__toggle\">For groups <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__link\" href=\"#visit\">School classes <span class=\"ds-menu__note\">free</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#visit\">Birthday parties</a></li>\n            <li><a class=\"ds-menu__link\" href=\"#exhibits\">Workshops <span class=\"ds-menu__note\">6</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#visit\">Getting here</a></li>\n          </ul>\n        </details>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#visit\">Plan a visit</a></li>\n      <li><a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#visit\">Tickets</a></li>\n    </ul>\n    <details class=\"ds-menu ds-nav__fold\" data-component=\"menu\">\n      <summary class=\"ds-nav__burger ds-menu__toggle\">Menu <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n      <ul class=\"ds-menu__list\">\n        <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#home\">Today</a></li>\n        <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#exhibits\">Exhibits</a></li>\n        <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#exhibit\">Echo tunnel</a></li>\n        <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#visit\">Plan a visit</a></li>\n        <li><a class=\"ds-menu__link\" href=\"#visit\">Tickets</a></li>\n        <li><a class=\"ds-menu__link\" href=\"#visit\">School classes <span class=\"ds-menu__note\">free</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#visit\">Birthday parties</a></li>\n        <li><a class=\"ds-menu__link\" href=\"#exhibits\">Workshops <span class=\"ds-menu__note\">6</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#visit\">Getting here</a></li>\n      </ul>\n    </details>\n  </nav>\n</header>\n\n<main>\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <section class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-cover ds-cover--2 ds-cover--confetti ds-hero__field\" aria-hidden=\"true\">\n      <span class=\"ds-shape ds-shape--half ds-shape--xxl ds-shape--c1\"></span>\n      <span class=\"ds-shape ds-shape--hoop ds-shape--l ds-shape--paper\"></span>\n      <span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--c3 ds-shape--tilt\"></span>\n      <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n      <span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c4\"></span>\n      <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--paper ds-shape--turn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v18M3 12h18\"/></svg></span>\n    </div>\n    <div class=\"ds-hero__inner\">\n      <div class=\"ds-hero__body\">\n        <span class=\"ds-badge ds-badge--alt ds-badge--tilt\">A science centre for small hands</span>\n        <h1 class=\"ds-hero__title\">Touch <span class=\"ds-hero__mark\">everything.</span> Ask why.</h1>\n        <p class=\"ds-hero__lead\">chronoskin is three floors of things to push, pour, spin and shout into. Nothing is behind glass, and the grown-ups get to play too.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#visit\">Plan your visit</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#exhibits\">See the exhibits</a>\n        </div>\n      </div>\n      <aside class=\"ds-ticket\" aria-label=\"Opening hours\">\n        <h2 class=\"ds-ticket__title\">Open today</h2>\n        <span class=\"ds-badge ds-badge--plain\">Until 18, last entry at 17</span>\n        <ul class=\"ds-ticket__rows\">\n          <li class=\"ds-ticket__row\"><span>Tuesday to Friday</span><span>10 to 18</span></li>\n          <li class=\"ds-ticket__row\"><span>Saturday, Sunday</span><span>9 to 19</span></li>\n          <li class=\"ds-ticket__row\"><span>Monday</span><span>closed</span></li>\n        </ul>\n        <a class=\"ds-link ds-link--plain\" href=\"#visit\">Prices and how to get here</a>\n      </aside>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--stand\">\n    <span class=\"ds-shape ds-shape--ring ds-shape--c2 ds-shape--edge-l\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner\"><dl class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">things to touch</dt><dd class=\"ds-stat__value\">140</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">floors</dt><dd class=\"ds-stat__value\">3</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">litres in the water table</dt><dd class=\"ds-stat__value\">900</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">things behind glass</dt><dd class=\"ds-stat__value\">0</dd></div>\n    </dl></div>\n  </section>\n\n  <section class=\"ds-band ds-band--surface\">\n    <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c3 ds-shape--tr ds-shape--side\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--c1 ds-shape--bl\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n    <div class=\"ds-band__inner\">\n      <div class=\"ds-band__head\">\n        <h2 class=\"ds-band__title\">Start with these three</h2>\n        <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n        <p class=\"ds-band__lead\">The ones children run to first. <a class=\"ds-link\" href=\"#exhibits\">All 24 exhibits</a></p>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--1 ds-cover--rings\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--hoop ds-shape--paper\"></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The echo tunnel</a></h3>\n            <p class=\"ds-grid__text\">Shout in at one end and wait. Floor 1, from four years.</p>\n            <span class=\"ds-badge\">Loud</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--4 ds-cover--dash\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--paper\"></span><span class=\"ds-shape ds-shape--disc ds-shape--c3\"></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The water table</a></h3>\n            <p class=\"ds-grid__text\">Dams, locks and a whirlpool. Aprons are by the door. Floor 0.</p>\n            <span class=\"ds-badge ds-badge--alt\">Wet</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--3 ds-cover--zig\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--tri ds-shape--c1 ds-shape--tilt\"></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The shadow wall</a></h3>\n            <p class=\"ds-grid__text\">Jump, and your shadow stays behind for a minute. Floor 2.</p>\n            <span class=\"ds-badge ds-badge--plain\">New</span>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--alt\">\n    <span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c2 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split ds-split--even\">\n      <div>\n        <h2 class=\"ds-band__label\">Today at the centre</h2>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">10:30</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Bubbles as big as you</a></h3><p class=\"ds-list__text\">A show with a hoop and a bucket.</p></div>\n            <span class=\"ds-list__meta\">Floor 0</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">12:00</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Build a bridge from paper</a></h3><p class=\"ds-list__text\">Workshop, 12 places, from six years.</p></div>\n            <span class=\"ds-list__meta\">Workshop</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">14:00</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">How long is an echo?</a></h3><p class=\"ds-list__text\">Rosa measures it with a drum.</p></div>\n            <span class=\"ds-list__meta\">Floor 1</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">16:00</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#visit\">The quiet hour</a></h3><p class=\"ds-list__text\">Lights down, sounds off, fewer people.</p></div>\n            <span class=\"ds-list__meta\">All floors</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">How full is it?</h3>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress__legend\"><span>Right now</span><span>310 of 520</span></div>\n            <span class=\"ds-progress ds-progress--60\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Visitors in the building\"><span class=\"ds-progress__bar\"></span></span>\n            <p>It is calmest before eleven and after four.</p>\n            <a class=\"ds-link\" href=\"#visit\">Book a time</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Visitors said\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">I shouted my name and it came back taller.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Aino, 6</span><span class=\"ds-avatar__meta\">in the echo tunnel</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">We came for an hour and left when the lights went out.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Jonas, 41</span><span class=\"ds-avatar__meta\">at the water table</span></span></figcaption>\n            </figure>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--fill ds-band--tight\">\n    <span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c3 ds-shape--br\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--ink ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3 22 21H2z\"/></svg></span>\n    <div class=\"ds-band__inner ds-row\">\n      <div>\n        <h2 class=\"ds-band__title\">Come back all year</h2>\n        <p class=\"ds-band__lead\">A year card pays for itself on the third visit.</p>\n      </div>\n      <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#visit\">Get a year card</a>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"exhibits\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--half ds-shape--xl ds-shape--c1 ds-shape--br\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tr\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Exhibits</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">All ages</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Exhibits</h1>\n          <p class=\"ds-page-header__lead\">Twenty-four things to try on three floors. Six are shown here.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack ds-stack--wide\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#exhibits\" role=\"tab\" aria-selected=\"true\">All ages</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#exhibits\" role=\"tab\">Under six</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#exhibits\" role=\"tab\">Six to ten</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#exhibits\" role=\"tab\">New <span class=\"ds-badge ds-badge--plain\">3</span></a></li>\n        </ul>\n        <ul class=\"ds-grid\">\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--1 ds-cover--rings\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--hoop ds-shape--paper\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The echo tunnel</a></h3>\n              <p class=\"ds-grid__text\">Floor 1, from four years</p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--4 ds-cover--dash\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--paper\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The water table</a></h3>\n              <p class=\"ds-grid__text\">Floor 0, all ages</p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--3 ds-cover--zig\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c1 ds-shape--tilt\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The shadow wall</a></h3>\n              <p class=\"ds-grid__text\">Floor 2, from three years</p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c3 ds-shape--turn\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The marble run</a></h3>\n              <p class=\"ds-grid__text\">Floor 1, from five years</p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--1 ds-cover--stripes\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c4\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The spinning room</a></h3>\n              <p class=\"ds-grid__text\">Floor 2, from six years</p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell\">\n            <div class=\"ds-cover ds-cover--4 ds-cover--terrazzo\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--s ds-shape--paper\"></span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibit\">The wind bench</a></h3>\n              <p class=\"ds-grid__text\">Floor 0, all ages</p>\n            </div>\n          </li>\n        </ul>\n        <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#exhibits\" aria-disabled=\"true\">Previous</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#exhibits\" aria-current=\"page\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#exhibits\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#exhibits\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#exhibits\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#exhibits\">Next</a></li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">By floor</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Floor 0, water and wind</a><span class=\"ds-badge ds-badge--plain\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Floor 1, sound</a><span class=\"ds-badge ds-badge--plain\">8</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Floor 2, light</a><span class=\"ds-badge ds-badge--plain\">7</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">The roof</a><span class=\"ds-badge ds-badge--plain\">0</span></li>\n          </ul>\n        </aside>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--s ds-shape--c1\"></span><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c3\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c2\"></span></div>\n          <h3 class=\"ds-empty__title\">Nothing on the roof today</h3>\n          <p class=\"ds-empty__text\">The kite deck is closed when the wind is too strong.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">See what is on today</a>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"exhibit\">\n  <section class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-shape ds-shape--hoop ds-shape--xl ds-shape--c1 ds-shape--br\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#exhibits\">Exhibits</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">The echo tunnel</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">The echo tunnel</h1>\n          <p class=\"ds-page-header__lead\">Forty metres of pipe, wide enough to crawl through. Floor 1, from four years.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#visit\">Book a time</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack ds-stack--wide\">\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>Shout in, and wait</h1>\n          <p class=\"ds-prose__lead\">Your voice goes down the pipe, hits the far wall and walks back. It takes about a quarter of a second, which is long enough to be surprised.</p>\n          <h2>What to try</h2>\n          <p>Clap once and count the claps that come back. Then whisper: the tunnel carries a whisper further than a shout. The sign at the entrance, <code>40 m</code>, is the length your voice travels each way.</p>\n          <ul>\n            <li>One clap, and listen for three</li>\n            <li>Two friends, one at each end</li>\n            <li>A drum, if Rosa has left it out</li>\n          </ul>\n          <h3>Why it works</h3>\n          <p>Sound is a push that travels through air. <strong>A hard wall pushes back.</strong> A soft one, such as the curtain halfway down, swallows it.</p>\n        </article>\n        <div>\n          <h2 class=\"ds-band__label\">Near the tunnel</h2>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#exhibits\">The marble run</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#exhibits\">The whisper dishes</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#home\">Today's drum show</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#visit\">Plan a visit</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-badges\" data-component=\"badge\">\n          <span class=\"ds-badge\">Loud</span>\n          <span class=\"ds-badge ds-badge--alt\">Hands-on</span>\n          <span class=\"ds-badge ds-badge--plain\">Floor 1</span>\n          <span class=\"ds-badge ds-badge--success\">Open</span>\n          <span class=\"ds-badge ds-badge--warning\">Queue, 10 min</span>\n          <span class=\"ds-badge ds-badge--danger\">Closed at 16</span>\n        </div>\n        <section class=\"ds-panel ds-panel--pick\">\n          <h2 class=\"ds-panel__title\">Your guide</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-avatar ds-avatar--large ds-avatar--1\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">Explains sound, plays the drum</span></span></span>\n            <p>Rosa is at the tunnel from 13 to 15 and answers anything.</p>\n            <span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#visit\">Why does it close at 16?</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">The quiet hour: no shouting after four</span></span>\n          </div>\n        </section>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to know</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span>Age</span><span class=\"ds-badge ds-badge--plain\">from 4</span></li>\n            <li class=\"ds-sidebar__item\"><span>Time</span><span class=\"ds-badge ds-badge--plain\">10 minutes</span></li>\n            <li class=\"ds-sidebar__item\"><span>Step-free</span><span class=\"ds-badge ds-badge--success\">yes</span></li>\n          </ul>\n        </aside>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"visit\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--quarter ds-shape--xl ds-shape--c3 ds-shape--br\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--c1 ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 19a9 9 0 0 1 18 0\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Today</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#visit\">Plan a visit</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Book a time</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Plan a visit</h1>\n          <p class=\"ds-page-header__lead\">Pick a day and a time. You pay at the door, and under-threes come free.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split ds-split--even\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <strong class=\"ds-notice__title\">School holidays</strong>\n            <p class=\"ds-notice__text\">Open on Mondays too until the end of the month.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <strong class=\"ds-notice__title\">Full</strong>\n            <p class=\"ds-notice__text\">Saturday at 10 has no places left. Try 9 or after 14.</p>\n          </div>\n        </div>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Ticket</th><th class=\"ds-table__extra\">Who</th><th class=\"ds-table__num\">Weekday</th><th class=\"ds-table__num\">Weekend</th></tr>\n          </thead>\n          <tbody>\n            <tr><td>Child</td><td class=\"ds-table__extra\">3 to 15 years</td><td class=\"ds-table__num\">8</td><td class=\"ds-table__num\">10</td></tr>\n            <tr><td>Grown-up</td><td class=\"ds-table__extra\">16 and over</td><td class=\"ds-table__num\">11</td><td class=\"ds-table__num\">13</td></tr>\n            <tr class=\"is-current\"><td>Family<span class=\"ds-table__meta\">Most chosen</span></td><td class=\"ds-table__extra\">Two and two</td><td class=\"ds-table__num\">30</td><td class=\"ds-table__num\">36</td></tr>\n            <tr><td>Small ones</td><td class=\"ds-table__extra\">Under 3</td><td class=\"ds-table__num\">0</td><td class=\"ds-table__num\">0</td></tr>\n            <tr><td>Year card</td><td class=\"ds-table__extra\">One person</td><td class=\"ds-table__num\">28</td><td class=\"ds-table__num\">28</td></tr>\n          </tbody>\n        </table>\n        <div>\n          <h2 class=\"ds-band__label\">Before you come</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">What is the quiet hour? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Every day from 16: lights down, sounds off and half as many visitors.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Can we bring lunch? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Yes. There are tables on floor 0 and a tap for water bottles.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Will we get wet? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>At the water table, a little. Aprons hang by the door.</p></div>\n            </details>\n          </div>\n        </div>\n      </div>\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Book a time</h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"v-name\">Your name</label>\n                <input class=\"ds-form__control\" id=\"v-name\" type=\"text\" value=\"Jonas Lindqvist\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"v-mail\">Email</label>\n                <input class=\"ds-form__control is-invalid\" id=\"v-mail\" type=\"email\" value=\"jonas@example\" aria-invalid=\"true\" aria-describedby=\"v-mail-err\">\n                <p class=\"ds-form__error\" id=\"v-mail-err\">Enter a full address, such as name@example.org.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"v-when\">When</label>\n              <select class=\"ds-form__control\" id=\"v-when\">\n                <option>Saturday at 14</option>\n                <option>Saturday at 9</option>\n                <option>Sunday at 10</option>\n              </select>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"v-note\">Who is coming?</label>\n              <textarea class=\"ds-form__control ds-form__control--area\" id=\"v-note\">Two grown-ups, a six-year-old and a pushchair.</textarea>\n              <p class=\"ds-form__hint\">Tell us about wheels, ears and anything else we can help with.</p>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me the month's programme</label>\n            <label class=\"ds-switch\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">We would like the quiet hour<span class=\"ds-switch__hint\">Moves your time to 16</span></span></label>\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Book it</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Add a workshop</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Cancel booking</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Pay now</button>\n            </div>\n          </form>\n        </div>\n      </section>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Cancel this booking?</h2>\n        <a class=\"ds-dialog__close\" href=\"#visit\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>Your four places on Saturday at 14 go to the next family on the list.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#visit\">Keep it</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Cancel booking</button>\n      </div>\n    </div>\n  </section>\n</section>\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <span class=\"ds-shape ds-shape--half ds-shape--xl ds-shape--c1 ds-shape--bl\" aria-hidden=\"true\"></span>\n  <span class=\"ds-shape ds-shape--hoop ds-shape--l ds-shape--paper ds-shape--edge-r\" aria-hidden=\"true\"></span>\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__sign\">\n      <p class=\"ds-footer__brand\">chronoskin</p>\n      <p class=\"ds-footer__text\">A science centre for children and whoever brings them. Placeholder street, placeholder town.</p>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">See</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#exhibits\">Exhibits</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Today</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Come</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Prices and hours</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Getting here</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Groups</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#visit\">School classes</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#visit\">Birthday parties</a></li>\n      </ul>\n    </div>\n    <p class=\"ds-footer__legal\">Specimen page. All names, hours and prices are placeholders.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.portal.s06.p05.t04.u05\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"portal\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-me-6545\",\n  \"short\": \"v1-me-6545\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f1f1ee;\n  --color-canvas: #f1f1ee;\n  --color-surface: #ffffff;\n  --color-surface-alt: #e2e2de;\n  --color-surface-strong: #ffd9ec;\n  --color-bar: #ffa3d1;\n  --color-bar-text: #0d0d0d;\n  --color-bar-alt: #0d0d0d;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #0d0d0d;\n  --color-inverse-text: #ffffff;\n  --color-text: #0d0d0d;\n  --color-text-muted: #5b5b58;\n  --color-heading: #0d0d0d;\n  --color-heading-alt: #b00a59;\n  --color-link: #b00a59;\n  --color-link-quiet: #0d0d0d;\n  --color-link-visited: #6d4a5c;\n  --color-link-hover: #de1173;\n  --color-link-active: #0d0d0d;\n  --color-border: #0d0d0d;\n  --color-border-strong: #0d0d0d;\n  --color-border-muted: #c6c6c1;\n  --color-accent: #de1173;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #0d0d0d;\n  --color-fill-1: #de1173;\n  --color-fill-2: #0d0d0d;\n  --color-fill-3: #5a5a57;\n  --color-fill-4: #8f0a4b;\n  --color-button: #de1173;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #0d0d0d;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #ffffff;\n  --color-input-text: #0d0d0d;\n  --color-input-border: #0d0d0d;\n  --color-disabled: #d3d3cf;\n  --color-disabled-text: #6a6a66;\n  --color-danger: #b3001b;\n  --color-danger-surface: #ffe1e4;\n  --color-success: #1d7a46;\n  --color-warning: #a35a00;\n  --color-notice: #ffd9ec;\n  --color-notice-text: #0d0d0d;\n  --color-focus: #de1173;\n  --color-shadow: #a9a9a4;\n  --color-overlay: rgb(13 13 13 / 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Karla\", \"IBM Plex Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: \"Anton\", \"Bebas Neue\", \"League Gothic\", \"Oswald\", Impact, \"Haettenschweiler\", \"Arial Narrow\", sans-serif;\n  --font-ui: \"Barlow Condensed\", \"Oswald\", \"Roboto Condensed\", \"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --text-base: 16px;\n  --text-small: 13px;\n  --text-ui: 15px;\n  --text-large: 20px;\n  --text-display: 120px;\n  --text-h1: 64px;\n  --text-h2: 42px;\n  --text-h3: 24px;\n  --line-body: 1.5;\n  --line-heading: 1;\n  --line-display: 0.9;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.015em;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\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: 999px;\n  --radius-panel: 0 40px 0 0;\n  --radius-pill: 0;\n  --radius-page: 0 0 120px 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: conic-gradient(from 0deg at 10px 10px, transparent 75%, color-mix(in srgb, var(--color-border-muted) 55%, transparent) 0) 0 0 / 56px 56px, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: conic-gradient(var(--color-accent) 25%, transparent 0 50%, var(--color-accent) 0 75%, transparent 0) 0 0 / 20px 20px, var(--color-bar-alt);\n  --fill-inverse: repeating-linear-gradient(-45deg, var(--color-fill-1) 0 14px, transparent 14px 42px), repeating-linear-gradient(-45deg, transparent 0 24px, var(--color-surface) 24px 28px, transparent 28px 42px), 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: var(--color-inverse);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px dashed var(--color-focus);\n  --transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), background-color 0.18s linear;\n  --backdrop-blur: 0px;\n}\n"
  }
}