{
  "id": "v1-me-5545",
  "long_id": "v1.memphis.forum.s05.p05.t04.u05",
  "name": "Memphis community board (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": "forum",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A fluid community board in the Memphis revival look of 2016 to 2022: a few flat colours used at full strength, whole fields of bold stripes, checks and terrazzo, and discs, quarters 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 forums and member pages of art schools, zine fairs and maker communities; this pack is such a board, with a split-screen poster for a hero, board tiles in a brick bond, topic rows with faces and reply counts, a thread whose authors stand on blocks of colour, and a form for a new topic.",
  "url": "https://chrono.skin/s/v1-me-5545",
  "preview_url": "https://chrono.skin/s/v1-me-5545/specimen.html",
  "files": {
    "STYLE.md": "# Memphis community board (2016 to 2022)\n\n## Summary\n\nA fluid community board in the Memphis revival look of 2016 to 2022: a few flat colours used at full strength, whole fields of bold stripes, checks and terrazzo, and discs, quarters 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 forums and member pages of art schools, zine fairs and maker communities; this pack is such a board, with a split-screen poster for a hero, board tiles in a brick bond, topic rows with faces and reply counts, a thread whose authors stand on blocks of colour, and a form for a new topic.\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` (1160px) column with `--space-gutter` (32px) at the sides; the hero alone has no column and splits the window in two. Designed at a 1440px viewport.\n- Order of the home page: the navigation bar (`--size-nav` 64px) in one flat colour with the brand, the links, a search field, the new-topic button and the member's face; the split hero; the boards on the open ground; a surface band with the latest topics beside a panel and a carousel, a field of pattern down its right edge; 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 is a split screen. The left half, `.ds-hero__poster`, is one field of pattern from edge to edge with three shapes; the title stands on it as three flat blocks, one per line, each in its own colour, the middle one tilted across the other two. The right half is a flat `--color-surface` with a tilted badge, the lead, the buttons and the stats.\n- `.ds-stat` is three bars of unequal length (100%, 74%, 52%) stacked like a chart with no gap; the second is tilted. The stack is wider than its column by `--space-9` plus `--space-8` and starts that far to the left, so the bars begin on the pattern of the poster and end on the surface.\n- `.ds-grid` is a twelve-column grid in which the board tiles take 7 and 5 columns, then 5 and 7, like bricks. A tile is a flat row; its square of pattern is cut in turn as a quarter, a tilted block, a disc and a half, stands at the left or the right end in turn, and rises above or drops below the tile by `--space-4`. `.ds-split` is a main column and a `--size-sidebar` (300px) column, `.ds-split--even` two halves.\n- Inner pages keep the navigation and the footer and drop the hero. In its place comes a `.ds-page-header` on the open ground: the breadcrumb, the `--text-h1` title and one line of lead on the left, the actions on the right, one large shape at the right edge, and a full-width strip of `--fill-bar-alt` pattern that closes it. Below it one `.ds-band` holds a `.ds-split`: the main column starts with the `.ds-tabs`, then the table, the posts or the form; the side column holds panels, a `.ds-sidebar` and the notices. Inner pages are left-aligned.\n- Spacing scale: `--space-1` 4px (underline offset, chip padding), `--space-2` 8px (gaps in rows of chips, gap between the title blocks, bar padding), `--space-3` 12px (row padding, overlap of the title blocks), `--space-4` 16px (panel padding, gap between buttons, the rise of a tile picture), `--space-5` 20px (gap between stacked blocks and tiles, post padding, the pattern strips), `--space-6` 28px (row gap of the boards, footer block), `--space-7` 40px (tight band padding, gap between columns, band head to content), `--space-8` 60px (band and hero padding), `--space-9` 88px (the reach of the stat bars over the seam). `--space-nudge` 2px is the pressed offset and the focus outline offset.\n- Fixed sizes: `--size-control` 42px, `--size-control-large` 52px, `--size-control-small` 32px, `--size-logo` 34px, `--size-avatar` 40px, `--size-art` 150px (the square of a board tile; the poster is 3.6 of them tall), `--size-shape` 80px (the unit of every ornament), `--size-dot` 16px (pitch of every pattern), `--size-stroke` 6px (weight of drawn lines and pattern lines), `--size-author` 190px (the author block of a post), `--size-search` 240px, `--size-dialog` 460px.\n- Below 1000px the navigation links wrap under the brand and the search field goes, the hero stacks (poster, then the pitch and the stat bars), every board tile takes the full width, splits stack, and the pattern field of the band and all free shapes disappear. Below 600px gutters shrink to `--space-4`, the title is half the display size, tile pictures shrink, the author of a post becomes a strip above its words, 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` and the small button 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, the boards and the latest topics. `board` is one board: tabs, the topic table, the badge key and the pagination, with the other boards and an empty state beside it. `thread` is one topic: three posts, the first holding the long text and a picture, a notice, and beside them a poll of two progress bars, the faces in the topic and related links. `new` is the form for a topic with a switch and the four buttons, the notices, the house rules as an accordion, an upload bar, 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, first in the navigation bar, 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, flat `--fill-bar`. `.ds-nav__bar` is the centred row: the brand, `.ds-nav__links` of `.ds-nav__link` (the current one is a `--color-inverse` pill with `--color-inverse-text`, tilted; a hovered one takes the accent fill) with one `.ds-menu`, `.ds-nav__search` holding a small search field, and `.ds-nav__actions` with a small primary button and `.ds-nav__account`, a link around the member's avatar.\n- `.ds-hero`: the split screen. `.ds-hero__poster` is the left half: its first child is `.ds-hero__ground`, a `.ds-cover .ds-cover--ground` that fills it, then two or three `.ds-shape`, then `.ds-hero__title`, whose lines are three `.ds-hero__line` blocks: `--color-inverse`, `--fill-accent` (tilted, overlapping the others) and `--color-surface`, each with its own text token. `.ds-hero__body` is the right half on `--color-surface`: a tilted badge, `.ds-hero__lead`, `.ds-hero__actions` and the `.ds-stat`.\n- `.ds-page-header`: the head of an inner page, used instead of the hero, on the open ground: `.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. A full-width strip of `--fill-bar-alt` pattern closes it; one large shape may hang over its right edge.\n- `.ds-band`: any full-width section. Fill by `.ds-band--surface`, `.ds-band--alt`, `.ds-band--strong`, `.ds-band--overlay` (dialog backdrop); `.ds-band--tight` for less padding. `.ds-band__slab` places a `.ds-cover--ground` down the right 18%, under the ends of the side column's blocks. `.ds-band__inner` is the content column, `.ds-band__head` a row with a `.ds-band__title` over a `.ds-squiggle` on the left and a link on the right; `.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 figures as a chart: three `.ds-stat__cell` bars of unequal length that touch, in `--color-fill-1`, `--color-fill-2` (tilted) and `--color-fill-4`; in each a `.ds-stat__value` at `--text-h1` beside a `.ds-stat__label`. `.ds-stat` is the stack.\n- `.ds-grid`: the boards. A `.ds-grid__cell` is a flat `--fill-panel` row, 7 or 5 of twelve columns wide: a square `.ds-cover` with at most one small shape, cut and placed by its position in the grid, and `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and a muted `.ds-grid__meta` line of counts.\n- `.ds-list`: topic rows on the open ground or on a surface band, divided by hairlines: `.ds-list__item` with a small `.ds-avatar`, `.ds-list__main` (`.ds-list__title`, `.ds-list__text`), a muted `.ds-list__meta` and `.ds-list__count`, the reply count on a tilted disc, square or half disc that cycles through the four fills.\n- `.ds-panel`: a flat `--fill-panel` block with `--radius-panel` corners under a `.ds-panel__title` strip in `--color-inverse`, then `.ds-panel__body`. `.ds-panel--pick` gives the strip the accent fill; `.ds-panel--tint` makes the body `--color-surface-strong`.\n- `.ds-sidebar`: a flat `--color-surface-alt` block that starts with a strip of `--fill-bar-alt` pattern, then a `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines; an item may end with a badge. `.ds-faces` is a row of small avatars, every second one tilted, ending in a plain badge with the number of the rest.\n- `.ds-post`: one message of a thread, two blocks that touch: `.ds-post__author`, a `--size-author` block of a loud fill (magenta for the first, then others in turn) with a tilted avatar, `.ds-post__name`, `.ds-post__meta` and an optional plain badge in a tooltip; and `.ds-post__body`, a flat `--fill-panel` block with the words, an optional `.ds-post__pic` (a `.ds-cover` with shapes) and `.ds-post__foot`, a muted line with the time and a quiet link.\n- `.ds-footer`: a field of `--fill-inverse` pattern with one shape; on it lies `.ds-footer__inner`, a single flat `--color-inverse` block holding `.ds-footer__brand`, a `.ds-footer__list` of `.ds-footer__link` in one row and `.ds-footer__legal` as its 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 `--fill-accent` pill, 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`: here a flat `--fill-panel` block, so that it can lie over a pattern. `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` on `--color-surface-strong`; a slide is a `.ds-carousel__pic` (a `.ds-cover` with shapes) over an avatar with a name, or a `.ds-carousel__quote`. `.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 <= 40px`: stacked blocks are 20px apart, columns 40px; sections touch.\n- `content-width >= 75%`: bands are full-bleed and their column is 1160px 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: set blocks of different fills edge to edge and make them unequal in length, stand a picture higher or lower than its tile, let a row of bars start on a pattern field and end on the surface beside it, lay a flat block over the edge of a pattern. 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, 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 line of a title, a reply count, an avatar) by 2 to 8 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: 1160px;\n  --size-measure: 580px;\n  --size-nav: 64px;\n  --size-control: 42px;\n  --size-control-large: 52px;\n  --size-control-small: 32px;\n  --size-logo: 34px;\n  --size-check: 20px;\n  --size-thumb: 18px;\n  --size-track: 16px;\n  --size-avatar: 40px;\n  --size-art: 150px;\n  --size-shape: 80px;\n  --size-dot: 16px;\n  --size-stroke: 6px;\n  --size-sidebar: 300px;\n  --size-author: 190px;\n  --size-search: 240px;\n  --size-dialog: 460px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 28px;\n  --space-7: 40px;\n  --space-8: 60px;\n  --space-9: 88px;\n  --space-gutter: 32px;\n  --space-nudge: 2px;\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: one flat bar. Brand, the links, a search field and the member's menu at the right end */\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__bar {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\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__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\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-3);\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-control);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(2deg);\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(#board:target) .ds-nav__link[href=\"#board\"],\n.ds-page:has(#thread:target) .ds-nav__link[href=\"#thread\"],\n.ds-page:has(#new:target) .ds-nav__links .ds-nav__link[href=\"#board\"] {\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  transform: rotate(-2deg);\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.ds-nav__search {\n  flex: 0 1 var(--size-search);\n  min-width: 0;\n}\n.ds-nav__search .ds-form__control {\n  min-height: var(--size-control-small);\n  padding-top: 0;\n  padding-bottom: 0;\n  font-size: var(--text-small);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-nav__account {\n  padding: var(--space-1);\n}\n.ds-menu--end .ds-menu__list {\n  right: 0;\n  left: auto;\n}\n\n/* bands: full-bleed fields of flat colour 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--overlay {\n  background: var(--color-overlay);\n}\n.ds-band__slab {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 18%;\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: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-7);\n}\n.ds-band__title {\n  margin: 0 0 var(--space-2);\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__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 split screen. The left half is one field of pattern with the words on three flat blocks, each line a block of its own;\n   the right half is a flat surface with the pitch, and the stat bars reach back across the seam onto the pattern */\n.ds-hero {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  overflow: hidden;\n}\n.ds-hero__poster {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  min-height: calc(var(--size-art) * 3.6);\n  padding: var(--space-8) var(--space-9) var(--space-8) var(--space-gutter);\n  overflow: hidden;\n}\n.ds-hero__ground {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.ds-hero__title {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-2);\n  justify-items: start;\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 0.82);\n  font-weight: var(--weight-display);\n  line-height: 1.1;\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__line {\n  display: block;\n  padding: 0 var(--space-4);\n  white-space: nowrap;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n}\n.ds-hero__line:nth-child(2) {\n  position: relative;\n  z-index: 1;\n  margin: calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1) var(--space-8);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-4deg);\n}\n.ds-hero__line:nth-child(3) {\n  margin-left: var(--space-6);\n  color: var(--color-text);\n  background: var(--color-surface);\n}\n.ds-hero__body {\n  display: grid;\n  gap: var(--space-5);\n  align-content: center;\n  justify-items: start;\n  padding: var(--space-8) var(--space-gutter) var(--space-8) var(--space-8);\n  color: var(--color-text);\n  background: var(--color-surface);\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\n/* page header: the head of an inner page. Title and actions on the open ground, closed by a full-width strip of pattern */\n.ds-page-header {\n  position: relative;\n  padding: var(--space-7) var(--space-gutter) 0;\n  overflow: hidden;\n  color: var(--color-text);\n}\n.ds-page-header::after {\n  content: \"\";\n  display: block;\n  height: var(--space-5);\n  margin: var(--space-6) calc(var(--space-gutter) * -1) 0;\n  background: var(--fill-bar-alt);\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: three bars of unequal length stacked like a chart, flat blocks that touch; they start on the pattern and end on the surface */\n.ds-stat {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  justify-items: start;\n  width: calc(100% + var(--space-9) + var(--space-8));\n  margin: var(--space-4) 0 0 calc((var(--space-9) + var(--space-8)) * -1);\n}\n.ds-stat__cell {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: baseline;\n  justify-content: flex-end;\n  gap: var(--space-3);\n  width: 100%;\n  padding: var(--space-2) var(--space-5);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n}\n.ds-stat__cell:nth-child(2) {\n  z-index: 1;\n  width: 74%;\n  background: var(--color-fill-2);\n  transform: rotate(-2deg);\n}\n.ds-stat__cell:nth-child(3) {\n  width: 52%;\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.1;\n  letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  text-transform: var(--ui-transform);\n}\n\n/* grid: the boards. Wide flat tiles of two widths in a brick bond; each has a square of pattern, cut as a quarter, a block,\n   a disc or a half, standing higher or lower than the tile at one end */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--space-6) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  grid-column: span 7;\n  align-items: stretch;\n  min-width: 0;\n  color: var(--color-text);\n  background: var(--fill-panel);\n}\n.ds-grid__cell:nth-child(4n + 2),\n.ds-grid__cell:nth-child(4n + 3) {\n  grid-column: span 5;\n}\n.ds-grid__cell:nth-child(even) {\n  flex-direction: row-reverse;\n}\n.ds-grid__cell .ds-cover {\n  flex: none;\n  width: var(--size-art);\n  min-height: var(--size-art);\n  margin: calc(var(--space-4) * -1) 0 var(--space-4);\n  border-radius: 0 100% 0 0;\n}\n.ds-grid__cell:nth-child(even) .ds-cover {\n  margin: var(--space-4) 0 calc(var(--space-4) * -1);\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-cover {\n  border-radius: 0;\n  transform: rotate(4deg);\n}\n.ds-grid__cell:nth-child(4n + 3) .ds-cover {\n  border-radius: 50%;\n}\n.ds-grid__cell:nth-child(4n) .ds-cover {\n  border-radius: 50% 0 0 50% / 50% 0 0 50%;\n}\n.ds-grid__body {\n  display: grid;\n  flex: 1;\n  gap: var(--space-2);\n  align-content: center;\n  justify-items: start;\n  min-width: 0;\n  padding: var(--space-4) var(--space-5);\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.ds-grid__meta {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* list: topic rows on the open ground, divided by hairlines; each starts with a face and ends with its reply count on a tilted disc */\n.ds-list {\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: center;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__main {\n  flex: 1;\n  min-width: 0;\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  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-list__count {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  aspect-ratio: 1;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\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: 50%;\n  transform: rotate(-8deg);\n}\n.ds-list__item:nth-child(4n + 2) .ds-list__count {\n  background: var(--color-fill-2);\n  border-radius: 0;\n}\n.ds-list__item:nth-child(4n + 3) .ds-list__count {\n  background: var(--color-fill-3);\n  transform: rotate(6deg);\n}\n.ds-list__item:nth-child(4n) .ds-list__count {\n  background: var(--color-fill-4);\n  border-radius: 0 50% 50% 0;\n}\n\n/* panel: a flat block under an inverted title strip */\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  margin: 0;\n  padding: var(--space-3) 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-inverse-text);\n  background: var(--color-inverse);\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-4);\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 .ds-panel__title {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-panel--tint {\n  background: var(--color-surface-strong);\n}\n\n/* sidebar: a flat tinted block under a strip of pattern */\n.ds-sidebar {\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-sidebar::before {\n  content: \"\";\n  display: block;\n  height: var(--space-5);\n  background: var(--fill-bar-alt);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-4) var(--space-4) var(--space-2);\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-sidebar__list {\n  margin: 0;\n  padding: 0 var(--space-4) var(--space-3);\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.ds-faces {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  padding: 0 var(--space-4) var(--space-4);\n}\n.ds-faces .ds-avatar:nth-child(odd) {\n  transform: rotate(-6deg);\n}\n\n/* post: one message of a thread. The author stands on a block of loud colour, the words on a flat surface beside it; the two touch */\n.ds-post {\n  display: grid;\n  grid-template-columns: var(--size-author) minmax(0, 1fr);\n}\n.ds-post__author {\n  display: grid;\n  gap: var(--space-2);\n  align-content: start;\n  justify-items: start;\n  padding: var(--space-4);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n}\n.ds-post:nth-child(4n + 2) .ds-post__author {\n  background: var(--color-fill-3);\n}\n.ds-post:nth-child(4n + 3) .ds-post__author {\n  background: var(--color-fill-4);\n}\n.ds-post:nth-child(4n) .ds-post__author {\n  background: var(--color-fill-3);\n}\n.ds-post__author .ds-avatar {\n  transform: rotate(-6deg);\n}\n.ds-post__name {\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-post__meta {\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n.ds-post__body {\n  display: grid;\n  gap: var(--space-4);\n  align-content: start;\n  min-width: 0;\n  padding: var(--space-5);\n  color: var(--color-text);\n  background: var(--fill-panel);\n}\n.ds-post__body > * {\n  margin: 0;\n}\n.ds-post__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-post__body .ds-post__pic {\n  min-height: calc(var(--size-art) * 1.4);\n}\n.ds-carousel {\n  padding: var(--space-3);\n  background: var(--fill-panel);\n}\n.ds-carousel .ds-carousel__pic {\n  min-height: calc(var(--size-art) * 1.2);\n  margin: 0 0 var(--space-4);\n}\n\n/* footer: one field of bold pattern with a single flat inverted block on it: the name, a row of links, the legal line */\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: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-7);\n  max-width: var(--size-content);\n  margin: 0 auto;\n  padding: var(--space-5) var(--space-6);\n  background: var(--color-inverse);\n}\n.ds-footer__brand {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\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__list {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.45;\n  text-transform: var(--ui-transform);\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  flex: 0 0 100%;\n  margin: 0;\n  padding: var(--space-3) 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--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\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--25 .ds-progress__bar {\n  width: 25%;\n}\n.ds-progress--40 .ds-progress__bar {\n  width: 40%;\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--3 .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-3);\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    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-2) var(--space-4);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n    flex-wrap: wrap;\n  }\n  .ds-nav__search {\n    display: none;\n  }\n  .ds-hero {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__poster {\n    align-items: flex-start;\n    min-height: 0;\n    padding: var(--space-7) var(--space-4) var(--space-8);\n  }\n  .ds-hero__body {\n    padding: 0 var(--space-4) var(--space-7);\n  }\n  .ds-stat {\n    width: 100%;\n    margin: var(--space-2) 0 0;\n  }\n  .ds-grid__cell,\n  .ds-grid__cell:nth-child(4n + 2),\n  .ds-grid__cell:nth-child(4n + 3) {\n    grid-column: 1 / -1;\n  }\n  .ds-split,\n  .ds-split--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-band__slab {\n    display: none;\n  }\n  .ds-band > .ds-shape,\n  .ds-page-header > .ds-shape,\n  .ds-footer > .ds-shape {\n    display: none;\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-page-header {\n    padding: var(--space-6) var(--space-4) 0;\n  }\n  .ds-page-header::after {\n    margin-right: calc(var(--space-4) * -1);\n    margin-left: calc(var(--space-4) * -1);\n  }\n  .ds-nav__link {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-small);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-hero__line:nth-child(2) {\n    margin-left: var(--space-6);\n  }\n  .ds-hero__poster .ds-shape {\n    display: none;\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-stat__cell {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-stat__cell:nth-child(2) {\n    width: 86%;\n  }\n  .ds-stat__cell:nth-child(3) {\n    width: 70%;\n  }\n  .ds-stat__value {\n    font-size: var(--text-h2);\n  }\n  .ds-stat__label {\n    font-size: var(--text-small);\n  }\n  .ds-band__title,\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-grid__cell .ds-cover {\n    width: calc(var(--size-art) * 0.6);\n    min-height: calc(var(--size-art) * 0.6);\n  }\n  .ds-grid__body {\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-post {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-post__author {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-2) var(--space-3);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-post__body {\n    padding: var(--space-4);\n  }\n  .ds-footer {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-footer__inner {\n    padding: var(--space-4);\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-list__item {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-3);\n  }\n  .ds-list__main {\n    flex: 1 1 50%;\n  }\n  .ds-list__meta {\n    flex: 0 0 100%;\n    order: 3;\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-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: var(--line-body);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-control);\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(#board:target) .ds-nav__fold-link[href=\"#board\"],\n.ds-page:has(#thread:target) .ds-nav__fold-link[href=\"#thread\"],\n.ds-page:has(#new:target) .ds-nav__fold-link[href=\"#new\"] {\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    gap: var(--space-2);\n  }\n  .ds-nav__actions {\n    gap: var(--space-2);\n    margin-left: auto;\n  }\n  .ds-nav__links,\n  .ds-nav__actions > .ds-button {\n    display: none;\n  }\n  .ds-nav__fold {\n    position: static;\n    display: block;\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@media (max-width: 600px) {\n  .ds-tooltip {\n    position: static;\n    display: inline;\n  }\n  .ds-tooltip__tip {\n    bottom: auto;\n    left: 0;\n    width: max-content;\n    max-width: calc(100% - 2 * var(--space-4));\n    margin: var(--space-1) var(--space-4) 0;\n    white-space: normal;\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 community board 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  <nav class=\"ds-nav__bar\" aria-label=\"Main\">\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\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Boards</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#board\">Show your work</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#thread\">Topic of the week</a></li>\n      <li>\n        <details class=\"ds-menu\" data-component=\"menu\">\n          <summary class=\"ds-nav__link ds-menu__toggle\">More <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=\"#new\">House rules</a></li>\n            <li><a class=\"ds-menu__link\" href=\"#board\">Unanswered <span class=\"ds-menu__note\">14</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#home\">Members <span class=\"ds-menu__note\">2,340</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#board\">Swaps and jobs</a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n    <div class=\"ds-nav__search\">\n      <input class=\"ds-form__control\" type=\"search\" aria-label=\"Search the boards\" placeholder=\"Search the boards\">\n    </div>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-button ds-button--small\" href=\"#new\">New topic</a>\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\">Boards</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#board\">Show your work</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#thread\">Topic of the week</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#new\">New topic</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#new\">House rules</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#board\">Unanswered <span class=\"ds-menu__note\">14</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#home\">Members <span class=\"ds-menu__note\">2,340</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#board\">Swaps and jobs</a></li>\n        </ul>\n      </details>\n      <details class=\"ds-menu ds-menu--end\" data-component=\"menu\">\n        <summary class=\"ds-nav__link ds-nav__account ds-menu__toggle\" aria-label=\"Your account, Aino Berg\"><span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">AB</span></span></summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__link\" href=\"#board\">Your topics <span class=\"ds-menu__note\">4</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#new\">Drafts <span class=\"ds-menu__note\">1</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#thread\">Answers to you</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#home\">Sign out</a></li>\n        </ul>\n      </details>\n    </div>\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-hero__poster\">\n      <span class=\"ds-cover ds-cover--1 ds-cover--stripes ds-cover--ground ds-hero__ground\" aria-hidden=\"true\"></span>\n      <span class=\"ds-shape ds-shape--disc ds-shape--xl ds-shape--paper ds-shape--tl\" aria-hidden=\"true\"></span>\n      <span class=\"ds-shape ds-shape--quarter ds-shape--xl ds-shape--c4 ds-shape--bl ds-shape--side\" aria-hidden=\"true\"></span>\n      <span class=\"ds-shape ds-shape--line ds-shape--paper ds-shape--br\" 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      <h1 class=\"ds-hero__title\"><span class=\"ds-hero__line\">Make it.</span><span class=\"ds-hero__line\">Show it.</span><span class=\"ds-hero__line\">Argue.</span></h1>\n    </div>\n    <div class=\"ds-hero__body\">\n      <span class=\"ds-badge ds-badge--tilt\">Open to anyone who makes things</span>\n      <p class=\"ds-hero__lead\">chronoskin is a board for people who print, draw, cut and code. Pin up what you made this week and let two thousand strangers be kind and honest about it.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--large\" href=\"#new\">Start a topic</a>\n        <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#board\">Look around first</a>\n      </div>\n      <dl class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">members, 61 here now</dt><dd class=\"ds-stat__value\">2,340</dd></div>\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">topics this week</dt><dd class=\"ds-stat__value\">187</dd></div>\n        <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">boards</dt><dd class=\"ds-stat__value\">8</dd></div>\n      </dl>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-shape ds-shape--hoop ds-shape--l ds-shape--c1 ds-shape--edge-r\" 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 3v18M3 12h18\"/></svg></span>\n    <div class=\"ds-band__inner\">\n      <div class=\"ds-band__head\">\n        <div>\n          <h2 class=\"ds-band__title\">The boards</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        </div>\n        <a class=\"ds-link\" href=\"#board\">All eight boards</a>\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--dots\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--tri 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=\"#board\">Show your work</a></h3>\n            <p class=\"ds-grid__text\">Finished or not. Say what kind of answer you want: a cheer, a nudge or the truth.</p>\n            <span class=\"ds-grid__meta\">1,204 topics, 38 new today</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--2 ds-cover--zig\" 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=\"#board\">Tools and paper</a></h3>\n            <p class=\"ds-grid__text\">Inks, knives, printers that jam.</p>\n            <span class=\"ds-grid__meta\">611 topics</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--4 ds-cover--grid\" aria-hidden=\"true\"></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Type and lettering</a></h3>\n            <p class=\"ds-grid__text\">Alphabets, drawn or found.</p>\n            <span class=\"ds-grid__meta\">480 topics</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--3 ds-cover--rings\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c1 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=\"#board\">Swaps and jobs</a></h3>\n            <p class=\"ds-grid__text\">Trade a print for a print, lend a press, find someone to share a studio or a deadline with.</p>\n            <span class=\"ds-grid__meta\">352 topics, 9 open swaps</span>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--surface\">\n    <span class=\"ds-cover ds-cover--6 ds-cover--terrazzo ds-cover--ground ds-band__slab\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split\">\n      <div>\n        <div class=\"ds-band__head\">\n          <div>\n            <h2 class=\"ds-band__title\">Just said</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          </div>\n          <a class=\"ds-link\" href=\"#board\">Everything new</a>\n        </div>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--1\" 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>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Is this poster too loud, or not loud enough?</a></h3><p class=\"ds-list__text\">Ines Marchetti in Show your work</p></div>\n            <span class=\"ds-list__meta\">4 minutes ago</span>\n            <span class=\"ds-list__count\" aria-label=\"23 replies\">23</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">TO</span></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#thread\">A stencil alphabet cut from one sheet</a></h3><p class=\"ds-list__text\">Tunde Okafor in Type and lettering</p></div>\n            <span class=\"ds-list__meta\">20 minutes ago</span>\n            <span class=\"ds-list__count\" aria-label=\"9 replies\">9</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--2\"><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>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Which pink survives a risograph?</a></h3><p class=\"ds-list__text\">Rosa Kiviniemi in Tools and paper</p></div>\n            <span class=\"ds-list__meta\">1 hour ago</span>\n            <span class=\"ds-list__count\" aria-label=\"41 replies\">41</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">MD</span></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Forty loops, none of them finished</a></h3><p class=\"ds-list__text\">Milan Dvorak in Show your work</p></div>\n            <span class=\"ds-list__meta\">2 hours ago</span>\n            <span class=\"ds-list__count\" aria-label=\"6 replies\">6</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">PH</span></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Will swap two prints for one good ruler</a></h3><p class=\"ds-list__text\">Petra Halloran in Swaps and jobs</p></div>\n            <span class=\"ds-list__meta\">3 hours ago</span>\n            <span class=\"ds-list__count\" aria-label=\"12 replies\">12</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel ds-panel--pick\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">New here?</h3>\n          <div class=\"ds-panel__body\">\n            <p>Say hello in one line, then pin something up. Nobody minds if it is not finished.</p>\n            <a class=\"ds-link\" href=\"#new\">Read the three house rules</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Pinned this week\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <div class=\"ds-cover ds-cover--2 ds-cover--confetti ds-carousel__pic\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--c1\"></span><span class=\"ds-shape ds-shape--ring ds-shape--s ds-shape--paper\"></span></div>\n              <figcaption class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">SO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Sami Oyelaran</span><span class=\"ds-avatar__meta\">pinned: a rug in three colours</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <div class=\"ds-cover ds-cover--1 ds-cover--grid ds-carousel__pic\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--paper\"></span></div>\n              <figcaption class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">JL</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Jonas Lindqvist</span><span class=\"ds-avatar__meta\">pinned: a hand-painted sign</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</section>\n\n<section class=\"ds-view\" id=\"board\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c1 ds-shape--edge-r\" aria-hidden=\"true\"></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\">Boards</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Show your work</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Latest</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Show your work</h1>\n          <p class=\"ds-page-header__lead\">1,204 topics. Say what kind of answer you want before you pin.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#new\">New topic</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\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#board\" role=\"tab\" aria-selected=\"true\">Latest</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\" role=\"tab\">Loudest</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\" role=\"tab\">Unanswered <span class=\"ds-badge ds-badge--plain\">14</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#board\" role=\"tab\">Yours</a></li>\n        </ul>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Topic</th><th>Wants</th><th class=\"ds-table__num\">Replies</th><th class=\"ds-table__num ds-table__extra\">Views</th><th class=\"ds-table__extra\">Last word</th></tr>\n          </thead>\n          <tbody>\n            <tr class=\"is-current\"><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Is this poster too loud, or not loud enough?</a><span class=\"ds-table__meta\">Ines Marchetti, pinned by the hosts</span></td><td><span class=\"ds-badge ds-badge--danger\">The truth</span></td><td class=\"ds-table__num\">23</td><td class=\"ds-table__num ds-table__extra\">1,480</td><td class=\"ds-table__extra\">4 minutes ago</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Forty loops, none of them finished</a><span class=\"ds-table__meta\">Milan Dvorak</span></td><td><span class=\"ds-badge ds-badge--warning\">A nudge</span></td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num ds-table__extra\">212</td><td class=\"ds-table__extra\">2 hours ago</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">A rug in three colours</a><span class=\"ds-table__meta\">Sami Oyelaran</span></td><td><span class=\"ds-badge ds-badge--success\">A cheer</span></td><td class=\"ds-table__num\">31</td><td class=\"ds-table__num ds-table__extra\">940</td><td class=\"ds-table__extra\">5 hours ago</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">My first hand-painted sign</a><span class=\"ds-table__meta\">Jonas Lindqvist</span></td><td><span class=\"ds-badge ds-badge--success\">A cheer</span></td><td class=\"ds-table__num\">18</td><td class=\"ds-table__num ds-table__extra\">655</td><td class=\"ds-table__extra\">yesterday</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">A map of a place that never existed</a><span class=\"ds-table__meta\">Aino Berg</span></td><td><span class=\"ds-badge ds-badge--warning\">A nudge</span></td><td class=\"ds-table__num\">0</td><td class=\"ds-table__num ds-table__extra\">47</td><td class=\"ds-table__extra\">yesterday</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#thread\">Cover for a very small magazine</a><span class=\"ds-table__meta\">Petra Halloran</span></td><td><span class=\"ds-badge ds-badge--danger\">The truth</span></td><td class=\"ds-table__num\">52</td><td class=\"ds-table__num ds-table__extra\">2,301</td><td class=\"ds-table__extra\">2 days ago</td></tr>\n          </tbody>\n        </table>\n        <div class=\"ds-row\">\n          <div class=\"ds-badges\" data-component=\"badge\">\n            <span class=\"ds-badge\">Pinned</span>\n            <span class=\"ds-badge ds-badge--alt\">New</span>\n            <span class=\"ds-badge ds-badge--plain\">Closed</span>\n            <span class=\"ds-badge ds-badge--success\">A cheer</span>\n            <span class=\"ds-badge ds-badge--warning\">A nudge</span>\n            <span class=\"ds-badge ds-badge--danger\">The truth</span>\n          </div>\n          <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#board\" aria-disabled=\"true\">Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#board\" aria-current=\"page\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#board\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Other boards</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Tools and paper</a><span class=\"ds-badge ds-badge--plain\">611</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Type and lettering</a><span class=\"ds-badge ds-badge--plain\">480</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Swaps and jobs</a><span class=\"ds-badge\">9 open</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Off the table</a><span class=\"ds-badge ds-badge--plain\">208</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--disc ds-shape--s ds-shape--c1\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--ink\"></span><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c4\"></span></div>\n          <h3 class=\"ds-empty__title\">Nothing of yours here yet</h3>\n          <p class=\"ds-empty__text\">Your topics on this board will be listed here.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#new\">Pin something up</a>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"thread\">\n  <section class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-shape ds-shape--hoop ds-shape--l ds-shape--ink ds-shape--edge-r\" 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\">Boards</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Show your work</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Too loud?</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Is this poster too loud, or not loud enough?</h1>\n          <p class=\"ds-page-header__lead\">23 replies, 1,480 views. Ines asked for the truth.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#board\">Back to the board</a>\n          <a class=\"ds-button\" href=\"#new\">Reply</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\">\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--large ds-avatar--3\"><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>\n            <span class=\"ds-post__name\">Ines Marchetti</span>\n            <span class=\"ds-post__meta\">Poster maker, 412 posts</span>\n            <span class=\"ds-tooltip\" data-component=\"tooltip\"><span class=\"ds-badge ds-badge--plain\" tabindex=\"0\">Host</span><span class=\"ds-tooltip__tip\" role=\"tooltip\">Hosts keep one board tidy</span></span>\n          </div>\n          <div class=\"ds-post__body\">\n            <div class=\"ds-prose\" data-component=\"typography\">\n              <h1>Too loud, or not loud enough?</h1>\n              <p class=\"ds-prose__lead\">It is a poster for a three-day festival in an old tram depot, and I have printed it twice. I cannot tell any more whether it shouts or just talks fast.</p>\n              <h2>What I tried</h2>\n              <p>Two colours, pink over black, on a sheet that is slightly too small. The file is <code>depot-v9.pdf</code>, which tells you how the week went.</p>\n              <ul>\n                <li>The date is the biggest thing on the sheet</li>\n                <li>The stripes run the wrong way on purpose</li>\n                <li>There is no logo, only the name</li>\n              </ul>\n              <h3>What I want to hear</h3>\n              <p>The truth. <strong>Would you stop walking for it?</strong> If not, tell me where your eye gave up.</p>\n            </div>\n            <div class=\"ds-cover ds-cover--1 ds-cover--stripes ds-post__pic\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--paper\"></span><span class=\"ds-shape ds-shape--tri ds-shape--ink ds-shape--tilt\"></span></div>\n            <div class=\"ds-post__foot\"><span>Monday, 09:12</span><a class=\"ds-link ds-link--quiet\" href=\"#new\">Quote</a></div>\n          </div>\n        </article>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">TO</span></span>\n            <span class=\"ds-post__name\">Tunde Okafor</span>\n            <span class=\"ds-post__meta\">Type designer, 96 posts</span>\n          </div>\n          <div class=\"ds-post__body\">\n            <p>I stopped. Then I could not find the place. Make the depot as big as the date and you have it.</p>\n            <div class=\"ds-post__foot\"><span>Monday, 09:40</span><a class=\"ds-link ds-link--quiet\" href=\"#new\">Quote</a></div>\n          </div>\n        </article>\n        <article class=\"ds-post\">\n          <div class=\"ds-post__author\">\n            <span class=\"ds-avatar ds-avatar--2\"><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>\n            <span class=\"ds-post__name\">Rosa Kiviniemi</span>\n            <span class=\"ds-post__meta\">Toy maker, 230 posts</span>\n          </div>\n          <div class=\"ds-post__body\">\n            <p>Not loud enough. The pink is polite. Print it a third time, further off, and let the two blacks fight.</p>\n            <div class=\"ds-post__foot\"><span>Monday, 10:05</span><a class=\"ds-link ds-link--quiet\" href=\"#new\">Quote</a></div>\n          </div>\n        </article>\n        <div class=\"ds-notice\" role=\"status\">\n          <strong class=\"ds-notice__title\">20 more</strong>\n          <p class=\"ds-notice__text\">The rest of the replies load as you read on.</p>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">The room says</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress__legend\"><span>Not loud enough</span><span>60%</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=\"Not loud enough\"><span class=\"ds-progress__bar\"></span></span>\n            <div class=\"ds-progress__legend\"><span>Too loud</span><span>25%</span></div>\n            <span class=\"ds-progress ds-progress--25 ds-progress--alt\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Too loud\"><span class=\"ds-progress__bar\"></span></span>\n            <p>74 votes so far. The poll closes on Friday.</p>\n          </div>\n        </section>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">In this topic</h2>\n          <div class=\"ds-faces\">\n            <span class=\"ds-avatar ds-avatar--3\"><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>\n            <span class=\"ds-avatar ds-avatar--1\"><span class=\"ds-avatar__pic\">TO</span></span>\n            <span class=\"ds-avatar ds-avatar--2\"><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>\n            <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">MD</span></span>\n            <span class=\"ds-badge ds-badge--plain\">+14</span>\n          </div>\n        </aside>\n        <div>\n          <h2 class=\"ds-band__label\">Read next</h2>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#thread\">Which pink survives a risograph?</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#thread\">Cover for a very small magazine</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#board\">More from Ines</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#home\">All boards</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"new\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c4 ds-shape--edge-r\" aria-hidden=\"true\"></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\">Boards</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#board\">Show your work</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">New topic</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Pin something up</h1>\n          <p class=\"ds-page-header__lead\">A title, a picture or a few lines, and the kind of answer you are after.</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      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Your topic</h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"n-title\">Title</label>\n              <input class=\"ds-form__control is-invalid\" id=\"n-title\" type=\"text\" value=\"Help\" aria-invalid=\"true\" aria-describedby=\"n-title-err\">\n              <p class=\"ds-form__error\" id=\"n-title-err\">Say a little more: a title needs at least ten letters.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"n-board\">Board</label>\n                <select class=\"ds-form__control\" id=\"n-board\">\n                  <option>Show your work</option>\n                  <option>Tools and paper</option>\n                  <option>Type and lettering</option>\n                </select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"n-tag\">One tag</label>\n                <input class=\"ds-form__control\" id=\"n-tag\" type=\"text\" value=\"poster\">\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"n-text\">What did you make?</label>\n              <textarea class=\"ds-form__control ds-form__control--area\" id=\"n-text\">A map of a place that never existed. The rivers are wrong on purpose.</textarea>\n              <p class=\"ds-form__hint\">Pictures can be dropped anywhere in the text.</p>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I want the truth, not a cheer</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\">Tell me when someone answers<span class=\"ds-switch__hint\">One letter a day at most</span></span></label>\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Pin it up</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep as a draft</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Throw it away</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Add a poll</button>\n            </div>\n          </form>\n        </div>\n      </section>\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\">Draft kept</strong>\n            <p class=\"ds-notice__text\">Saved a minute ago. It waits for you on this device.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <strong class=\"ds-notice__title\">Too big</strong>\n            <p class=\"ds-notice__text\">The picture is over ten megabytes. Make it smaller and drop it in again.</p>\n          </div>\n        </div>\n        <div>\n          <h2 class=\"ds-band__label\">The three house rules</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Say what kind of answer you want <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>A cheer, a nudge or the truth. People answer better when they know.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Talk about the work, not the person <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>The poster can be wrong. Its maker is having a week like yours.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Give back twice what you take <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Answer two topics for every one you start.</p></div>\n            </details>\n          </div>\n        </div>\n        <section class=\"ds-panel ds-panel--tint\">\n          <h3 class=\"ds-panel__title\">Your picture</h3>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress__legend\"><span>map-v3.png</span><span>40%</span></div>\n            <span class=\"ds-progress ds-progress--40\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Upload\"><span class=\"ds-progress__bar\"></span></span>\n          </div>\n        </section>\n      </div>\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\">Throw this draft away?</h2>\n        <a class=\"ds-dialog__close\" href=\"#new\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>The text and the half-loaded picture will be gone. There is no bin to fish them out of.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#new\">Keep writing</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Throw it away</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--disc ds-shape--l ds-shape--paper ds-shape--edge-r\" aria-hidden=\"true\"></span>\n  <div class=\"ds-footer__inner\">\n    <p class=\"ds-footer__brand\">chronoskin</p>\n    <ul class=\"ds-footer__list\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">Boards</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#new\">House rules</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#board\">Unanswered</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#home\">Members</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#new\">Write to the hosts</a></li>\n    </ul>\n    <p class=\"ds-footer__legal\">Specimen page. All names, topics and figures are placeholders.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.forum.s05.p05.t04.u05\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"forum\",\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-5545\",\n  \"short\": \"v1-me-5545\"\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"
  }
}