{
  "id": "v1-me-7744",
  "long_id": "v1.memphis.docs.s07.p07.t04.u04",
  "name": "Memphis handbook (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": "docs",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A fluid documentation site in the Memphis revival look of 2016 to 2022: flat loud colours that clash on purpose, whole fields of pattern, and squiggles, rings and quarter circles 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. This pack is the handbook of a kit of shapes, the kind of playful style guide and documentation site that agencies and design tools published in those years: chapters hang from the header as index tabs, the front page sets its contents as a poster of staggered stripes, and every inner page reads on one flat sheet between a pattern-edged index and a short list of what is on the page.",
  "url": "https://chrono.skin/s/v1-me-7744",
  "preview_url": "https://chrono.skin/s/v1-me-7744/specimen.html",
  "files": {
    "STYLE.md": "# Memphis handbook (2016 to 2022)\n\n## Summary\n\nA fluid documentation site in the Memphis revival look of 2016 to 2022: flat loud colours that clash on purpose, whole fields of pattern, and squiggles, rings and quarter circles 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. This pack is the handbook of a kit of shapes, the kind of playful style guide and documentation site that agencies and design tools published in those years: chapters hang from the header as index tabs, the front page sets its contents as a poster of staggered stripes, and every inner page reads on one flat sheet between a pattern-edged index and a short list of what is on the page.\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` (1240px) column with `--space-gutter` (36px) at the sides. Designed at a 1440px viewport.\n- The header has two parts. `.ds-nav__bar` is one flat bar (`--size-nav` 64px) with the brand, the search field (`--size-search` 320px), the version menu and a small button. Under it `.ds-nav__rack` is a thin strip of the loud `--fill-bar-alt` pattern, and the chapters hang from it as index tabs: flat blocks in the four fills, each of its own length, the current one longer, inverted and tilted. The tabs reach down over the top of the section below.\n- Order of the home page: the header, the hero, a tinted band whose row of stat diamonds climbs over the foot of the hero, a band with the list of changed pages beside a panel and a carousel, a band that is one whole field of pattern with a flat tilted card on it, and the footer.\n- The hero is the contents as a poster, not a centred message. The left half holds a tilted badge, the title at display size with one word on an accent block, the lead and two buttons, all on the open ground. The right half is `.ds-grid`: four stripes of colour with a huge number each, of different lengths and heights, pushed left and right of each other and overlapping, each ending in a patterned cut-out (disc, quarter, tilted block, arch). `.ds-hero__ground` is a quarter circle of pattern that fills the top right corner of the window; three shapes lie across the seams.\n- `.ds-stat` is four diamonds of four sizes that touch at their points; each label is a flat tilted chip over the lower point. The row is pulled up by `--space-9`.\n- Inner pages keep the header and footer and drop the hero. In its place comes a `.ds-page-header`: a `--color-surface-alt` band with the breadcrumb, then the chapter number on a tilted accent block that hangs over the lower edge, the `--text-h1` title and one line of lead, and the actions at the right; a row of pennants in two fills closes it. Below it one `.ds-band` holds `.ds-doc`: the index (`.ds-sidebar`, `--size-sidebar` 250px), the page on its `.ds-sheet`, and `.ds-toc` (`--size-aside` 220px). `.ds-doc--wide` drops the third column. Tabs are the first row inside the sheet. Pages without an index use `.ds-split` (7 to 5 columns; `--even`, `--flip`).\n- Spacing scale: `--space-1` 4px (chip padding, gaps between tabs), `--space-2` 8px (label to control, rows of chips), `--space-3` 12px (row padding), `--space-4` 16px (panel padding, gap between buttons, the pattern edge of the index), `--space-5` 22px (gap between stacked blocks, height of the rack), `--space-6` 30px (pennant pitch, large padding), `--space-7` 44px (sheet padding, gap between columns), `--space-8` 68px (band padding), `--space-9` 96px (hero padding and the climb of the stat row). `--space-nudge` 2px is the pressed offset and the focus outline offset.\n- Fixed sizes: `--size-control` 44px, `--size-control-large` 54px, `--size-control-small` 32px, `--size-logo` 34px, `--size-avatar` 40px, `--size-art` 150px (unit of the diamonds and the stripe cut-outs), `--size-shape` 88px (unit of every ornament), `--size-dot` 16px (pitch of every pattern), `--size-stroke` 4px (weight of drawn lines), `--size-dialog` 480px.\n- Below 1100px the list of what is on the page moves under the sheet. Below 1000px columns stack (the index goes last), the hero pattern shrinks to a small quarter in the corner, the stripes line up, free shapes and pattern slabs disappear and the search field takes a row of its own. Below 600px gutters shrink to `--space-4`, the index tabs share the width equally and lose their numbers, the hero title is half the display size, the diamonds stand two by two, and table columns marked `.ds-table__extra` are hidden, so nothing scrolls sideways. Below 600px `.ds-nav__actions` spreads across the row, the menu list `.ds-menu--end` opens from the left edge, and a `.ds-tooltip__tip` opens under its line within the gutters.\n- Views: five, switched by plain `#name` links. `home` is the front of the handbook. `guide` is a page of prose with the index, code, notices, a tooltip, links and the pagination. `shapes` is the reference: tabs, the table with a shape in each row, the badges and an empty state. `news` is the changelog with its panels. `ask` has the questions accordion, the form with a switch and the four buttons, and the confirmation dialog on its overlay band.\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.\n- `.ds-brand`: the mark and name, first in the bar, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button and tilted; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the header. `.ds-nav__bar` and `.ds-nav__inner` hold the brand, `.ds-nav__search` (one small `.ds-form__control`) and `.ds-nav__actions` with the version `.ds-menu` (its toggle is `.ds-nav__version`, a flat surface chip) and a small button. `.ds-nav__rack` is the pattern strip; `.ds-nav__links` hangs the `.ds-nav__link` tabs from it, each with a `.ds-nav__num`. The current tab is marked through `:has()` rules, one per view, or with `is-current`.\n- `.ds-hero`: the front page. `.ds-hero__ground` is a `.ds-cover .ds-cover--ground` cut as a quarter circle. `.ds-hero__inner` is two halves and holds three free `.ds-shape`; `.ds-hero__body` has a badge, `.ds-hero__title` with one word in `.ds-hero__mark`, `.ds-hero__lead` and `.ds-hero__actions`. The second half is the `.ds-grid`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__inner`, the breadcrumb, then `.ds-page-header__row` with `.ds-page-header__num` (the chapter number on a tilted accent block), `.ds-page-header__text` (`.ds-page-header__title`, `.ds-page-header__lead`) and `.ds-page-header__actions`. One or two shapes sit at its right end.\n- `.ds-band`: any full-width section. `.ds-band--surface`, `--alt`, `--strong` set the fill; `--tight` less padding; `--lift` for a band whose content climbs into the section above; `--overlay` is the dialog backdrop; `--pattern` is a band that is one field of pattern (`.ds-band__field`, a ground cover) with the flat tilted `.ds-band__card` on it. `.ds-band__slab` is a ground cover down the right 30% of a band. `.ds-band__inner` is the content column; `.ds-band__head` (`--late` when it follows a lifted row) holds `.ds-band__title`, a `.ds-squiggle` and `.ds-band__lead`; `.ds-band__label` is a small heading over one block. `.ds-split`, `.ds-stack` (`--wide`) and `.ds-row` arrange blocks.\n- `.ds-doc`: the three columns of an inner page (`--wide` for two). `.ds-doc__main` holds the `.ds-sheet`, a flat `--fill-panel` block with `--radius-page`, and may hold one large shape that shows from behind the sheet's corner. `.ds-toc` lists what is on the page: `.ds-toc__title`, `.ds-toc__list` of `.ds-toc__item` led by small shapes, then free blocks such as a progress bar, a switch or an avatar.\n- `.ds-code`: a code sample on a flat `--color-inverse` block in the monospace, with its language on the tilted accent chip `.ds-code__tag`.\n- `.ds-stat`: the row of figures; `.ds-stat` is the row. Each `.ds-stat__cell` is a `.ds-stat__value` on a diamond in the next fill and a `.ds-stat__label` chip.\n- `.ds-grid`: the contents. Each `.ds-grid__cell` is a stripe in the next fill with a `.ds-grid__num`, a `.ds-grid__title` (its link is `.ds-link--plain`), a `.ds-grid__text` and one `.ds-cover` as the cut-out at its end.\n- `.ds-list`: rows on one flat `--color-surface` block: `.ds-list__item` with a `.ds-list__mark` (a disc, a tilted block, a triangle, a quarter, through the fills), `.ds-list__main` (`.ds-list__title`, `.ds-list__text`) and a muted `.ds-list__meta`; hairlines between rows.\n- `.ds-panel`: a flat `--fill-panel` block whose `.ds-panel__title` is a label on `--color-surface-strong` stuck, tilted, over its top edge; `.ds-panel__body` holds the content. `.ds-panel--pick` gives the label the accent fill; `.ds-panel--flat` is a tinted panel for a surface ground.\n- `.ds-release`: one version in the changelog: a flat block with `.ds-release__num` on a tilted fill block hanging off its corner, `.ds-release__title`, `.ds-release__meta` and a `.ds-release__list` of `.ds-release__item`, each a status badge and a line.\n- `.ds-sidebar`: the index: a flat `--color-surface-strong` block with an edge of dots down its left side, `.ds-sidebar__title` and `.ds-sidebar__list` of `.ds-sidebar__item`. The current item (`is-current`) is an accent block that reaches out over the edge; its link is `.ds-link--plain`.\n- `.ds-footer`: a field of `--fill-inverse` pattern with two shapes; `.ds-footer__inner` holds `.ds-footer__block`, one flat inverted block set to the left with `.ds-footer__brand`, `.ds-footer__text`, columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`, and `.ds-footer__legal`.\n- `.ds-shape`: an ornament: an empty `aria-hidden` span, absolutely placed in a section, behind the content or across an edge. Filled kinds: `--disc`, `--half`, `--quarter`, `--tri`, `--block`. Line-only kinds: `--ring`, `--hoop`, `--line` (holds an SVG squiggle or zigzag), `--draw` (holds an SVG triangle, cross or arc). Pattern kinds: `--dots`, `--grid`, `--bars`, `--stripes`. Colour `--c1` to `--c4`, `--c5`, `--ink`, `--paper`; size `--s`, `--l`, `--xl`, `--xxl`; rotation `--tilt`, `--turn`, `--flip`, `--side`; place `--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. A shape is either filled or a line, never a filled shape with an outline. Free shapes are hidden on narrow screens.\n- `.ds-cover`: a field of pattern: a fill with a pattern in a clashing colour. Pairs `.ds-cover--1` to `--6`; patterns `--dots`, `--stripes`, `--grid`, `--zig`, `--dash`, `--rings`, `--terrazzo`, `--confetti`. `--ground` makes it a layer behind a section's content. `.ds-cover__chip` is a label on a solid surface.\n- `.ds-squiggle`: the short wavy rule under a section title, an inline SVG in `--color-accent`.\n- `.ds-prose`: long text: h1, h2, h3, paragraphs, lists, strong, inline code on a flat chip, links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content. `.ds-link--quiet` for titles 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.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners. `.ds-button--secondary`, `.ds-button--danger` (once per view), `--large`, `--small`. `is-hover` swaps the fill and tilts the block, `is-active` drops it, `is-disabled`, `is-focus`. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag; `--alt`, `--plain`, the status variants `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `--tilt`. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks: `.ds-form__label`, `.ds-form__control` (`--area` for a textarea), `.ds-form__hint` or `.ds-form__error`; `.ds-form__row` puts two side by side; `is-focus`, `is-invalid`, `is-disabled`. `.ds-form__check` wraps a `.ds-form__checkbox`.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`, `.ds-switch__hint`; `--end` puts the track at the right; `is-on`.\n- `.ds-table`: one flat block; the head row is `--color-bar`; rows alternate and are divided by hairlines; `is-current` marks a row. `.ds-table__art` is a narrow first column holding a small `.ds-shape`, so a row can show the thing it describes; `.ds-table__num` right-aligns figures, `.ds-table__extra` is dropped on a phone, `.ds-table__meta` is a muted second line.\n- `.ds-tabs`: one flat `--color-surface-strong` bar cut into segments (`.ds-tabs__tab`); the current one (`is-current`) is an accent block, larger than the bar and tilted. First row inside the sheet.\n- `.ds-notice`: a flat `--color-notice` block with a diamond set half over its left edge; `.ds-notice__title`, `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with a `--color-danger` diamond.\n- `.ds-pagination`: flat counters in the shape of the controls (`.ds-pagination__link`); `is-current` is the accent fill, tilted; `is-disabled`; `is-hover`. The last one may name the next page.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` with accent triangles between; the last has `is-current`.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay band: `.ds-dialog__bar` with `.ds-dialog__title` and `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small shapes), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down, a `<details>` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`; a flat `--color-inverse` block, tilted. `.ds-menu--end` opens it leftwards.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat inverted chip 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` ending in a `.ds-accordion__sign` (a disc that becomes a diamond when open) and a `.ds-accordion__body`.\n- `.ds-progress`: a flat track with a striped `.ds-progress__bar`; `--alt` is dotted; width by `--0`, `--25`, `--40`, `--60`, `--75`, `--90`. `.ds-progress__legend` is the line above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic` on a fill (`--1` to `--4`), with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`; `--large`.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` (a `.ds-carousel__quote` and an avatar); `.ds-carousel__foot` holds `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and two `.ds-carousel__arrow`.\n\n## Never\n\n- `row-gap <= 8px`: rows of a table or list touch and are divided by hairlines.\n- `content-width >= 75%`: bands are full-bleed and their column is 1240px of a 1440px viewport.\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: hang a block over the lower edge of its band, stick a label over the top edge of a panel, let a `.ds-shape` show from behind the corner of the sheet, set stripes of different fills against each other and make them unequal. A new page gets its chapter number on the tilted block of the page header and one shape or pattern of its own; keep text on flat blocks, off the loud patterns. Tilt small things (tabs, labels, the current item) by 1 to 6 degrees; 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: 1240px;\n  --size-measure: 600px;\n  --size-nav: 64px;\n  --size-control: 44px;\n  --size-control-large: 54px;\n  --size-control-small: 32px;\n  --size-logo: 34px;\n  --size-check: 20px;\n  --size-thumb: 18px;\n  --size-track: 14px;\n  --size-avatar: 40px;\n  --size-art: 150px;\n  --size-shape: 88px;\n  --size-dot: 16px;\n  --size-stroke: 4px;\n  --size-sidebar: 250px;\n  --size-aside: 220px;\n  --size-search: 320px;\n  --size-dialog: 480px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 22px;\n  --space-6: 30px;\n  --space-7: 44px;\n  --space-8: 68px;\n  --space-9: 96px;\n  --space-gutter: 36px;\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\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\n/* nav: a flat bar with the brand, the search field and the version menu; under it a thin rack of pattern\n   from which the chapters hang as index tabs of four colours and four lengths, over the top of the page below */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  color: var(--color-bar-text);\n}\n.ds-nav__bar {\n  background: var(--fill-bar);\n}\n.ds-nav__inner {\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: var(--space-2) var(--space-gutter);\n}\n.ds-nav__search {\n  flex: 1;\n  max-width: var(--size-search);\n  margin: 0 0 0 auto;\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__version {\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-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  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-pill);\n}\n.ds-nav__rack {\n  height: var(--space-5);\n  background: var(--fill-bar-alt);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-1);\n  max-width: calc(var(--size-content) + 2 * var(--space-gutter));\n  height: 100%;\n  margin: 0 auto;\n  padding: 0 var(--space-gutter);\n  list-style: none;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\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  text-decoration: var(--link-decoration-quiet);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  transform-origin: 50% 0;\n  transition: var(--transition);\n}\n.ds-nav__links li:nth-child(4n + 2) .ds-nav__link {\n  min-height: calc(var(--size-control) + var(--space-3));\n  background: var(--color-fill-2);\n}\n.ds-nav__links li:nth-child(4n + 3) .ds-nav__link {\n  min-height: calc(var(--size-control) - var(--space-2));\n  background: var(--color-fill-3);\n}\n.ds-nav__links li:nth-child(4n) .ds-nav__link {\n  min-height: calc(var(--size-control) + var(--space-2));\n  background: var(--color-fill-4);\n}\n.ds-nav__num {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  transform: rotate(3deg);\n}\n.ds-nav__links .ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#guide:target) .ds-nav__links .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#shapes:target) .ds-nav__links .ds-nav__link[href=\"#shapes\"],\n.ds-page:has(#news:target) .ds-nav__links .ds-nav__link[href=\"#news\"],\n.ds-page:has(#ask:target) .ds-nav__links .ds-nav__link[href=\"#ask\"] {\n  position: relative;\n  z-index: 1;\n  min-height: calc(var(--size-control) + var(--space-6));\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  transform: rotate(-3deg);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* bands: full-bleed fields that meet edge to edge */\n.ds-band {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter);\n  overflow: hidden;\n}\n.ds-band--surface {\n  background: var(--color-surface);\n}\n.ds-band--strong {\n  background: var(--color-surface-strong);\n}\n.ds-band--lift {\n  z-index: 2;\n  display: flow-root;\n  padding-top: 0;\n  overflow: visible;\n}\n.ds-band--overlay {\n  background: var(--color-overlay);\n}\n.ds-band--pattern {\n  padding-top: var(--space-9);\n  padding-bottom: var(--space-9);\n}\n.ds-band__field {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.ds-band__slab {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 30%;\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__card {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-4);\n  justify-items: start;\n  max-width: calc(var(--size-measure) * 1.15);\n  padding: var(--space-7);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n  transform: rotate(-1deg);\n}\n.ds-band__card > * {\n  margin: 0;\n}\n.ds-band__head {\n  display: grid;\n  gap: var(--space-3);\n  max-width: var(--size-measure);\n  margin: 0 0 var(--space-6);\n}\n.ds-band__head--late {\n  margin: var(--space-7) 0 0;\n}\n.ds-band__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-band__lead {\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-band__label {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-5);\n  align-content: start;\n  min-width: 0;\n}\n.ds-stack--wide {\n  gap: var(--space-7);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\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-split--flip {\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\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/* doc: the three columns of an inner page: the index, the page on its sheet, and what is on the page */\n.ds-doc {\n  display: grid;\n  grid-template-columns: var(--size-sidebar) minmax(0, 1fr) var(--size-aside);\n  gap: var(--space-7);\n  align-items: start;\n}\n.ds-doc--wide {\n  grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n}\n.ds-doc__main {\n  position: relative;\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-doc__main > .ds-shape {\n  top: calc(var(--size-shape) * -0.4);\n  right: calc(var(--size-shape) * -0.4);\n}\n.ds-sheet {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-5);\n  min-width: 0;\n  padding: var(--space-7);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-page);\n}\n.ds-sheet > * {\n  min-width: 0;\n}\n.ds-toc {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-toc__title {\n  margin: 0;\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-heading-alt);\n}\n.ds-toc__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n.ds-toc__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-toc__item::before {\n  content: \"\";\n  flex: none;\n  width: var(--space-2);\n  height: var(--space-2);\n  background: var(--color-fill-1);\n}\n.ds-toc__item:nth-child(4n + 2)::before {\n  background: var(--color-fill-2);\n  border-radius: 50%;\n}\n.ds-toc__item:nth-child(4n + 3)::before {\n  background: var(--color-fill-3);\n  transform: rotate(45deg);\n}\n.ds-toc__item:nth-child(4n)::before {\n  background: var(--color-fill-4);\n  border-radius: 50%;\n}\n.ds-toc__item.is-current {\n  font-weight: var(--weight-bold);\n}\n\n/* code: a flat inverted block with its language on a tilted chip */\n.ds-code {\n  position: relative;\n  margin: 0;\n  padding: var(--space-5) var(--space-5) var(--space-4);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: 1.6;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n}\n.ds-code code {\n  font-family: var(--font-mono);\n}\n.ds-code__tag {\n  position: absolute;\n  top: 0;\n  right: var(--space-4);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.7;\n  text-transform: var(--ui-transform);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(3deg);\n}\n\n/* hero: the front of the handbook. The title on the open ground at the left; at the right the chapters as four\n   stripes of colour, staggered, over a quarter circle of pattern that fills the top corner of the window */\n.ds-hero {\n  position: relative;\n  padding: calc(var(--space-9) + var(--space-5)) var(--space-gutter) calc(var(--space-9) + var(--space-8));\n  overflow: hidden;\n}\n.ds-hero__ground {\n  top: 0;\n  right: 0;\n  width: calc(var(--size-shape) * 6.5);\n  aspect-ratio: 1;\n  border-radius: 0 0 0 100%;\n}\n.ds-hero__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);\n  gap: var(--space-7);\n  align-items: center;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-hero__body {\n  position: relative;\n  z-index: 3;\n  display: grid;\n  gap: var(--space-5);\n  justify-items: start;\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-hero__mark {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-2deg);\n}\n.ds-hero__lead {\n  max-width: 46ch;\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-hero__inner > .ds-shape:nth-of-type(1) {\n  bottom: calc(var(--size-shape) * -1.1);\n  left: 38%;\n}\n.ds-hero__inner > .ds-shape:nth-of-type(2) {\n  top: calc(var(--size-shape) * -0.7);\n  left: 44%;\n}\n.ds-hero__inner > .ds-shape:nth-of-type(3) {\n  bottom: calc(var(--size-shape) * -0.9);\n  right: 2%;\n}\n\n/* page header: the head of an inner page. A tinted band with the chapter number on a tilted block that hangs\n   over its lower edge, closed by a row of pennants in two fills */\n.ds-page-header {\n  position: relative;\n  z-index: 1;\n  padding: calc(var(--space-8) + var(--space-5)) var(--space-gutter) var(--space-7);\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n}\n.ds-page-header::after {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--space-4);\n  background:\n    linear-gradient(135deg, var(--color-fill-1) 50%, transparent 50%) 0 0 / var(--space-6) 100%,\n    linear-gradient(225deg, var(--color-fill-2) 50%, transparent 50%) 0 0 / var(--space-6) 100%;\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  align-items: flex-end;\n  gap: var(--space-6);\n}\n.ds-page-header__num {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-control-large) * 1.7);\n  aspect-ratio: 1;\n  margin: 0 0 calc(var(--space-8) * -1);\n  padding-top: calc(var(--figure-shift) * -2);\n  padding-bottom: calc(var(--figure-shift) * 2);\n  padding-left: calc(var(--text-h1) * 0.1);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-6deg);\n}\n.ds-page-header__text {\n  flex: 1;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-page-header__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-2) 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-3);\n}\n.ds-page-header > .ds-shape {\n  z-index: 0;\n}\n\n/* stats: each figure on a diamond in the next fill, of four sizes, the diamonds touching; the label is a flat\n   tilted chip laid over the lower point */\n.ds-stat {\n  display: flex;\n  align-items: center;\n  margin: calc(var(--space-9) * -1) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: calc(var(--size-art) * 1.2);\n}\n.ds-stat__cell + .ds-stat__cell {\n  margin-left: calc(var(--space-5) * -1);\n}\n.ds-stat__cell:nth-child(2) {\n  z-index: 1;\n  width: calc(var(--size-art) * 0.92);\n  margin-top: var(--space-7);\n}\n.ds-stat__cell:nth-child(3) {\n  width: calc(var(--size-art) * 1.36);\n}\n.ds-stat__cell:nth-child(4) {\n  z-index: 1;\n  width: var(--size-art);\n  margin-top: calc(var(--space-7) * -1);\n}\n.ds-stat__value {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);\n}\n.ds-stat__cell:nth-child(2) .ds-stat__value {\n  font-size: var(--text-h2);\n  background: var(--color-fill-2);\n}\n.ds-stat__cell:nth-child(3) .ds-stat__value {\n  background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(4) .ds-stat__value {\n  font-size: var(--text-h2);\n  background: var(--color-fill-4);\n}\n.ds-stat__label {\n  position: relative;\n  z-index: 2;\n  margin: calc(var(--space-6) * -1) 0 0;\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-align: center;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  transform: rotate(-4deg);\n}\n.ds-stat__cell:nth-child(even) .ds-stat__label {\n  transform: rotate(3deg);\n}\n\n/* grid: the contents as a poster. Each chapter is one stripe of colour with a huge number, of its own length\n   and height, pushed left or right of its neighbours and overlapping them; a patterned cut-out ends each */\n.ds-grid {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  position: relative;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  gap: var(--space-5);\n  align-items: center;\n  margin: 0 10% 0 0;\n  padding: var(--space-4) var(--space-5);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n}\n.ds-grid__cell:nth-child(4n + 2) {\n  z-index: 1;\n  margin: calc(var(--space-2) * -1) 0 0 12%;\n  padding-top: var(--space-5);\n  padding-bottom: var(--space-5);\n  background: var(--color-fill-2);\n}\n.ds-grid__cell:nth-child(4n + 3) {\n  z-index: 2;\n  margin: calc(var(--space-2) * -1) 6% 0 -10%;\n  background: var(--color-fill-3);\n  transform: rotate(-1.5deg);\n}\n.ds-grid__cell:nth-child(4n) {\n  z-index: 1;\n  margin: calc(var(--space-3) * -1) 0 0 20%;\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\n  background: var(--color-fill-4);\n}\n.ds-grid__num {\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\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}\n.ds-grid__text {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n.ds-grid__cell .ds-cover {\n  flex: none;\n  width: calc(var(--size-art) * 0.72);\n  min-height: 0;\n  aspect-ratio: 1;\n  margin: calc(var(--space-5) * -1) 0;\n  border-radius: 50%;\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-cover {\n  border-radius: 100% 0 0 0;\n}\n.ds-grid__cell:nth-child(4n + 3) .ds-cover {\n  border-radius: 0;\n  transform: rotate(9deg);\n}\n.ds-grid__cell:nth-child(4n) .ds-cover {\n  border-radius: 50% 50% 0 0 / 60% 60% 0 0;\n}\n.ds-grid__cell .ds-cover .ds-shape {\n  width: 40%;\n}\n\n/* list: pages on one flat block, each led by a small shape in the next fill */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__mark {\n  flex: none;\n  width: var(--space-6);\n  aspect-ratio: 1;\n  background: var(--color-fill-1);\n  border-radius: 50%;\n}\n.ds-list__item:nth-child(4n + 2) .ds-list__mark {\n  background: var(--color-fill-2);\n  border-radius: 0;\n  transform: rotate(12deg);\n}\n.ds-list__item:nth-child(4n + 3) .ds-list__mark {\n  background: var(--color-fill-3);\n  border-radius: 0;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-list__item:nth-child(4n) .ds-list__mark {\n  background: var(--color-fill-4);\n  border-radius: 100% 0 0 0;\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\n/* panel: a flat block whose title is a label stuck over its top edge */\n.ds-panel {\n  position: relative;\n  margin-top: var(--space-4);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n  position: absolute;\n  top: 0;\n  left: var(--space-4);\n  max-width: calc(100% - var(--space-6));\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n  background: var(--color-surface-strong);\n  transform: translateY(-50%) rotate(-2deg);\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-6) var(--space-4) 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-accordion {\n  width: 100%;\n}\n.ds-panel--pick .ds-panel__title {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: translateY(-50%) rotate(2deg);\n}\n.ds-panel--flat {\n  background: var(--color-surface-alt);\n}\n\n/* release: one entry of the changelog: the version on a tilted block that hangs off the corner of a flat block */\n.ds-release {\n  position: relative;\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  margin: 0 0 0 var(--space-6);\n  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--size-control-large) * 1.5);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n}\n.ds-release > * {\n  margin: 0;\n}\n.ds-release__num {\n  position: absolute;\n  top: var(--space-4);\n  left: calc(var(--space-6) * -1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control-large) * 1.6);\n  padding: var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  transform: rotate(-5deg);\n}\n.ds-release:nth-of-type(4n + 2) .ds-release__num {\n  background: var(--color-fill-2);\n  transform: rotate(4deg);\n}\n.ds-release:nth-of-type(4n + 3) .ds-release__num {\n  background: var(--color-fill-3);\n}\n.ds-release:nth-of-type(4n) .ds-release__num {\n  background: var(--color-fill-4);\n  transform: rotate(3deg);\n}\n.ds-release__title {\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-release__meta {\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-release__list {\n  display: grid;\n  gap: var(--space-2);\n  width: 100%;\n  padding: 0;\n  list-style: none;\n}\n.ds-release__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n}\n.ds-release__item .ds-badge {\n  flex: none;\n  min-width: 9ch;\n  justify-content: center;\n}\n\n/* sidebar: the index. A flat tinted block with an edge of pattern down its left side; the current page is a\n   flat accent block that reaches out over that edge */\n.ds-sidebar {\n  position: relative;\n  padding: var(--space-5) var(--space-4) var(--space-5) calc(var(--space-5) + var(--space-4));\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-4);\n  background:\n    radial-gradient(circle, var(--color-fill-1) 36%, transparent 40%) 0 0 / 100% var(--space-4),\n    var(--color-fill-2);\n  border-radius: inherit;\n}\n.ds-sidebar__title {\n  margin: 0 0 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;\n  list-style: none;\n}\n.ds-sidebar__list + .ds-sidebar__title {\n  margin-top: var(--space-5);\n}\n.ds-sidebar__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n  font-size: var(--text-base);\n  line-height: 1.4;\n}\n.ds-sidebar__item.is-current {\n  margin: var(--space-1) 0 var(--space-1) calc((var(--space-5) + var(--space-4)) * -1);\n  padding: var(--space-1) var(--space-3);\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-2deg);\n}\n\n/* footer: a field of pattern; the columns lie on one flat inverted block set to the left, so the pattern shows beside it */\n.ds-footer {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter) 0;\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  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-footer__block {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  gap: var(--space-5) var(--space-6);\n  width: 74%;\n  padding: var(--space-7) var(--space-6) var(--space-5);\n  background: var(--color-inverse);\n  border-radius: var(--radius-page);\n}\n.ds-footer__brand {\n  margin: 0 0 var(--space-2);\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__text {\n  max-width: 36ch;\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.5;\n  text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  font-size: var(--text-small);\n  line-height: 1.45;\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline wavy;\n  text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n  grid-column: 1 / -1;\n  margin: 0;\n  padding: var(--space-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--stripes {\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n  border-radius: 50%;\n}\n.ds-shape--line {\n  width: calc(var(--size-shape) * 1.6);\n  aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-shape svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n  background: none;\n}\n.ds-shape--c5 {\n  color: var(--color-shadow);\n}\n.ds-shape--paper {\n  color: var(--color-surface);\n}\n.ds-shape--c1 {\n  color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n  color: var(--color-fill-2);\n}\n.ds-shape--c3 {\n  color: var(--color-fill-3);\n}\n.ds-shape--c4 {\n  color: var(--color-fill-4);\n}\n.ds-shape--ink {\n  color: var(--color-border-strong);\n}\n.ds-shape--s {\n  width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n  width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n  width: calc(var(--size-shape) * 3);\n}\n.ds-shape--flip {\n  transform: rotate(180deg);\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--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--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--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__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: one flat block; the first column may show the thing itself as a small shape */\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 .ds-table__art {\n  width: calc(var(--space-7) + var(--space-4));\n  padding-right: 0;\n}\n.ds-table__art .ds-shape {\n  position: relative;\n  width: var(--space-6);\n}\n.ds-table__art .ds-shape--line {\n  width: var(--space-7);\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: one flat bar cut into segments; the current segment is an accent block, larger than the bar and tilted */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  background: var(--color-surface-strong);\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control);\n  padding: 0 var(--space-5);\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  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-tabs__tab.is-current {\n  position: relative;\n  z-index: 1;\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: scale(1.1) rotate(-2deg);\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 diamond set half over its left edge */\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  margin-left: var(--space-4);\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-2));\n  color: var(--color-notice-text);\n  background: var(--color-notice);\n}\n.ds-notice::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: calc(var(--space-5) * -1);\n  width: calc(var(--space-5) * 2);\n  aspect-ratio: 1;\n  background: currentColor;\n  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);\n  transform: translateY(-50%);\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 in the shape of the controls; 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);\n  min-height: var(--size-control);\n  padding: 0 var(--space-4);\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-control);\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(5deg);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n\n/* breadcrumb: a small trail; a triangle in the accent fill points from each level to the next */\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-5);\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-3);\n  background: var(--fill-accent);\n  clip-path: polygon(0 0, 100% 50%, 0 100%);\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--25 .ds-progress__bar {\n  width: 25%;\n}\n.ds-progress--40 .ds-progress__bar {\n  width: 40%;\n}\n.ds-progress--75 .ds-progress__bar {\n  width: 75%;\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__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/* menu at the right end of the bar opens leftwards */\n.ds-menu--end .ds-menu__list {\n  right: 0;\n  left: auto;\n}\n\n@media (max-width: 1100px) {\n  .ds-doc {\n    grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n  }\n  .ds-doc > .ds-toc {\n    grid-column: 2;\n  }\n}\n\n@media (max-width: 1000px) {\n  .ds-split,\n  .ds-split--even,\n  .ds-split--flip,\n  .ds-doc,\n  .ds-doc--wide {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-doc > .ds-toc {\n    grid-column: auto;\n  }\n  .ds-doc > .ds-sidebar,\n  .ds-doc > .ds-stack:first-child {\n    order: 3;\n  }\n  .ds-hero {\n    padding-bottom: calc(var(--space-9) + var(--space-6));\n  }\n  .ds-hero__inner {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__ground {\n    width: calc(var(--size-shape) * 2);\n  }\n  .ds-grid__cell,\n  .ds-grid__cell:nth-child(4n + 2),\n  .ds-grid__cell:nth-child(4n + 3),\n  .ds-grid__cell:nth-child(4n) {\n    margin-right: 0;\n    margin-left: 0;\n  }\n  .ds-grid__cell:nth-child(odd) {\n    margin-right: var(--space-4);\n  }\n  .ds-grid__cell:nth-child(even) {\n    margin-left: var(--space-4);\n  }\n  .ds-band__slab,\n  .ds-band > .ds-shape,\n  .ds-hero__inner > .ds-shape,\n  .ds-doc__main > .ds-shape,\n  .ds-page-header > .ds-shape,\n  .ds-footer > .ds-shape {\n    display: none;\n  }\n  .ds-footer__block {\n    width: 100%;\n  }\n  .ds-nav__inner {\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__search {\n    order: 3;\n    flex: 0 0 100%;\n    max-width: none;\n  }\n  .ds-nav__links {\n    padding: 0 var(--space-4);\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-band,\n  .ds-band--tight {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-band--lift {\n    padding-top: 0;\n  }\n  .ds-hero {\n    padding: var(--space-9) var(--space-4) calc(var(--space-9) + var(--space-4));\n  }\n  .ds-page-header {\n    padding: var(--space-9) var(--space-4) var(--space-6);\n  }\n  .ds-nav__links {\n    gap: 0;\n    padding: 0;\n  }\n  .ds-nav__links li {\n    flex: 1;\n  }\n  .ds-nav__link {\n    justify-content: center;\n    padding: var(--space-2) var(--space-1);\n    font-size: var(--text-small);\n  }\n  .ds-nav__num {\n    display: none;\n  }\n  .ds-hero__ground {\n    width: calc(var(--size-shape) * 1.5);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-page-header__row {\n    flex-wrap: wrap;\n    gap: var(--space-4);\n  }\n  .ds-page-header__num {\n    width: var(--size-control-large);\n    margin-bottom: 0;\n    padding-left: calc(var(--text-h2) * 0.1);\n    font-size: var(--text-h2);\n  }\n  .ds-page-header__text {\n    flex: 1 1 60%;\n  }\n  .ds-page-header__actions {\n    flex: 0 0 100%;\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-band__title,\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-stat {\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--space-4) 0;\n    margin-top: calc(var(--space-8) * -1);\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    width: 46%;\n    margin-top: 0;\n  }\n  .ds-stat__cell + .ds-stat__cell {\n    margin-left: 0;\n  }\n  .ds-stat__value,\n  .ds-stat__cell:nth-child(2) .ds-stat__value,\n  .ds-stat__cell:nth-child(4) .ds-stat__value {\n    font-size: var(--text-h2);\n  }\n  .ds-grid__cell,\n  .ds-grid__cell:nth-child(4n + 2),\n  .ds-grid__cell:nth-child(4n),\n  .ds-grid__cell:nth-child(4n + 3) {\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-grid__num {\n    font-size: var(--text-h2);\n  }\n  .ds-grid__cell .ds-cover {\n    width: calc(var(--size-art) * 0.4);\n    margin: 0;\n  }\n  .ds-sheet,\n  .ds-band__card {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-release {\n    margin-left: var(--space-3);\n    padding: calc(var(--size-control-large) + var(--space-4)) var(--space-4) var(--space-4);\n  }\n  .ds-release__num {\n    top: calc(var(--space-2) * -1);\n    left: calc(var(--space-3) * -1);\n  }\n  .ds-release__item {\n    flex-wrap: wrap;\n    gap: var(--space-1) var(--space-3);\n  }\n  .ds-tabs__tab {\n    padding: 0 var(--space-3);\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__meta {\n    flex: 0 0 100%;\n  }\n  .ds-menu__list {\n    min-width: 0;\n    width: 26ch;\n    max-width: 80vw;\n  }\n  .ds-footer {\n    padding: var(--space-7) var(--space-4) 0;\n  }\n  .ds-footer__block {\n    grid-template-columns: 1fr 1fr;\n    padding: var(--space-6) var(--space-4) var(--space-4);\n  }\n  .ds-footer__block > :first-child {\n    grid-column: 1 / -1;\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-nav__actions {\n    flex: 1 1 auto;\n    justify-content: space-between;\n  }\n  .ds-menu--end .ds-menu__list {\n    right: auto;\n    left: 0;\n  }\n  .ds-page:has(#ask:target) .ds-nav__links li:last-child .ds-nav__link[href=\"#ask\"] {\n    transform: rotate(3deg);\n  }\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 handbook 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  <div class=\"ds-nav__bar\">\n    <div class=\"ds-nav__inner\">\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      <form class=\"ds-nav__search\" role=\"search\">\n        <input class=\"ds-form__control\" type=\"search\" aria-label=\"Search the handbook\" placeholder=\"Search 62 shapes and 14 patterns\">\n      </form>\n      <div class=\"ds-nav__actions\">\n        <details class=\"ds-menu ds-menu--end\" data-component=\"menu\">\n          <summary class=\"ds-nav__version ds-menu__toggle\">Version 3.2 <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=\"#home\">Version 3.2 <span class=\"ds-menu__note\">current</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#news\">Version 3.1</a></li>\n            <li><a class=\"ds-menu__link\" href=\"#news\">Version 2.8 <span class=\"ds-menu__note\">old</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#news\">What changed</a></li>\n          </ul>\n        </details>\n        <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#ask\">Ask</a>\n      </div>\n    </div>\n  </div>\n  <nav class=\"ds-nav__rack\" aria-label=\"Main\">\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\"><span class=\"ds-nav__num\">00</span> Handbook</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#guide\"><span class=\"ds-nav__num\">01</span> Guide</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#shapes\"><span class=\"ds-nav__num\">02</span> Shapes</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#news\"><span class=\"ds-nav__num\">03</span> News</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#ask\"><span class=\"ds-nav__num\">04</span> Ask</a></li>\n    </ul>\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    <span class=\"ds-cover ds-cover--2 ds-cover--confetti ds-cover--ground ds-hero__ground\" aria-hidden=\"true\"></span>\n    <div class=\"ds-hero__inner\">\n      <span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--c5\" aria-hidden=\"true\"></span>\n      <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\" 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      <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c1 ds-shape--flip\" aria-hidden=\"true\"></span>\n      <div class=\"ds-hero__body\">\n        <span class=\"ds-badge ds-badge--alt ds-badge--tilt\">The handbook, version 3.2</span>\n        <h1 class=\"ds-hero__title\">Every shape has a <span class=\"ds-hero__mark\">page.</span></h1>\n        <p class=\"ds-hero__lead\">chronoskin is a kit of shapes, patterns and four loud colours for people who make posters. This handbook says what each piece is for and which rules are worth breaking.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#guide\">Start here</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#shapes\">All 62 shapes</a>\n        </div>\n      </div>\n      <ol class=\"ds-grid\" data-component=\"grid\">\n        <li class=\"ds-grid__cell\">\n          <span class=\"ds-grid__num\">01</span>\n          <div><h2 class=\"ds-grid__title\"><a class=\"ds-link ds-link--plain\" href=\"#guide\">Start</a></h2><p class=\"ds-grid__text\">Install the kit and draw a first poster in ten minutes.</p></div>\n          <span class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"></span>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <span class=\"ds-grid__num\">02</span>\n          <div><h2 class=\"ds-grid__title\"><a class=\"ds-link ds-link--plain\" href=\"#shapes\">Shapes</a></h2><p class=\"ds-grid__text\">Sixty-two of them, from the disc to the squiggle.</p></div>\n          <span class=\"ds-cover ds-cover--3 ds-cover--stripes\" aria-hidden=\"true\"></span>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <span class=\"ds-grid__num\">03</span>\n          <div><h2 class=\"ds-grid__title\"><a class=\"ds-link ds-link--plain\" href=\"#guide\">Patterns</a></h2><p class=\"ds-grid__text\">Fourteen fields, and the grounds each one may cover.</p></div>\n          <span class=\"ds-cover ds-cover--4 ds-cover--zig\" aria-hidden=\"true\"></span>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <span class=\"ds-grid__num\">04</span>\n          <div><h2 class=\"ds-grid__title\"><a class=\"ds-link ds-link--plain\" href=\"#guide\">Colour</a></h2><p class=\"ds-grid__text\">Four fills, one ink and the rule of the clashing pair.</p></div>\n          <span class=\"ds-cover ds-cover--1 ds-cover--rings\" aria-hidden=\"true\"></span>\n        </li>\n      </ol>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--strong ds-band--lift\">\n    <div class=\"ds-band__inner ds-split ds-split--even\">\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">62</strong><span class=\"ds-stat__label\">shapes</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">14</strong><span class=\"ds-stat__label\">patterns</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">4</strong><span class=\"ds-stat__label\">loud fills</span></li>\n        <li class=\"ds-stat__cell\"><strong class=\"ds-stat__value\">10</strong><span class=\"ds-stat__label\">minutes to start</span></li>\n      </ul>\n      <div class=\"ds-band__head ds-band__head--late\">\n        <h2 class=\"ds-band__title\">Version 3.2 is out</h2>\n        <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n        <p class=\"ds-band__lead\">Arcs, hoops and a field of dashes are new. Two shapes have new names and one is gone for good.</p>\n        <a class=\"ds-link\" href=\"#news\">Read what changed</a>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--c2 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--c3 ds-shape--tl 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 ds-split\">\n      <div>\n        <h2 class=\"ds-band__label\">Pages changed this week</h2>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__mark\" aria-hidden=\"true\"></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">The hoop</a></h3><p class=\"ds-list__text\">A thin circle, drawn as a line and never filled.</p></div>\n            <span class=\"ds-list__meta\">new, Tuesday</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__mark\" aria-hidden=\"true\"></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Text on a pattern</a></h3><p class=\"ds-list__text\">Why words go on a flat block, with six examples.</p></div>\n            <span class=\"ds-list__meta\">rewritten, Monday</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__mark\" aria-hidden=\"true\"></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">Triangle, filled and drawn</a></h3><p class=\"ds-list__text\">One page now covers both kinds.</p></div>\n            <span class=\"ds-list__meta\">merged, Monday</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__mark\" aria-hidden=\"true\"></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">The clashing pair</a></h3><p class=\"ds-list__text\">A table of which fill goes on which.</p></div>\n            <span class=\"ds-list__meta\">corrected, last week</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__mark\" aria-hidden=\"true\"></span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#news\">Moving from 2 to 3</a></h3><p class=\"ds-list__text\">The renamed classes, side by side.</p></div>\n            <span class=\"ds-list__meta\">longer, last week</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ds-stack ds-stack--wide\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">The handbook for 3.2</h3>\n          <div class=\"ds-panel__body\">\n            <p>Forty-six of sixty-two shape pages are rewritten for the new version. The rest still describe 3.1 and say so at the top.</p>\n            <div class=\"ds-progress__legend\"><span>Pages up to date</span><span>46 of 62</span></div>\n            <span class=\"ds-progress ds-progress--75\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"74\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Pages up to date\"><span class=\"ds-progress__bar\"></span></span>\n            <a class=\"ds-link\" href=\"#ask\">Tell us which page you miss</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Tips from the people who write this\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">If a poster looks tidy, tilt one thing by four degrees and stop there.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines Marchetti</span><span class=\"ds-avatar__meta\">writes the shape pages</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">Use a pattern big or not at all.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">TO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tunde Okafor</span><span class=\"ds-avatar__meta\">writes the pattern pages</span></span></figcaption>\n            </figure>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--pattern\">\n    <span class=\"ds-cover ds-cover--4 ds-cover--terrazzo ds-cover--ground ds-band__field\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--disc ds-shape--xl ds-shape--c3 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--paper ds-shape--br\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner\">\n      <div class=\"ds-band__card\">\n        <h2 class=\"ds-band__title\">Is a page missing?</h2>\n        <p class=\"ds-band__lead\">Ask, and the answer becomes the next page of the handbook.</p>\n        <div class=\"ds-buttons\">\n          <a class=\"ds-button\" href=\"#ask\">Ask a question</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#news\">See what is planned</a>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"guide\">\n  <section class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c3 ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--hoop 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\">Handbook</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Guide</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Start</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <span class=\"ds-page-header__num\" aria-hidden=\"true\">01</span>\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Guide</h1>\n          <p class=\"ds-page-header__lead\">Five short pages. Read them in order once, then never again.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#ask\">Ask about this page</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-doc\">\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">Guide</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--plain\" href=\"#guide\">Start</a><span>1</span></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Shapes on a ground</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Patterns, used big</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">The clashing pair</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Tilt and overlap</a></li>\n        </ul>\n        <h2 class=\"ds-sidebar__title\">Look up</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">All shapes</a><span class=\"ds-badge ds-badge--plain\">62</span></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">All patterns</a><span class=\"ds-badge ds-badge--plain\">14</span></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#news\">What changed</a><span class=\"ds-badge\">3.2</span></li>\n        </ul>\n      </aside>\n      <div class=\"ds-doc__main\">\n        <span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c4\" aria-hidden=\"true\"></span>\n        <div class=\"ds-sheet\">\n          <article class=\"ds-prose\" data-component=\"typography\">\n            <h1>Start</h1>\n            <p class=\"ds-prose__lead\">A poster is a short list: name a ground, list the shapes that lie on it and say where the words go. The kit draws the rest.</p>\n            <h2>Install</h2>\n            <p>Copy <code>kit.css</code> next to your own stylesheet and load it first. Nothing else is needed: the kit has no script and asks for no build step. Then describe a first poster:</p>\n          </article>\n          <pre class=\"ds-code\"><span class=\"ds-code__tag\">poster</span><code>ground: dots\nshapes:\n  - disc, large, across the seam\n  - squiggle, tilted\nwords: on a flat block</code></pre>\n          <div class=\"ds-stack\" data-component=\"notice\">\n            <div class=\"ds-notice\" role=\"status\">\n              <strong class=\"ds-notice__title\">New in 3.2</strong>\n              <p class=\"ds-notice__text\">A shape now takes its size from the ground it lies on, so one class fits a poster and a phone.</p>\n            </div>\n            <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n              <strong class=\"ds-notice__title\">Removed</strong>\n              <p class=\"ds-notice__text\">The outlined shape is gone. A page that still asks for it shows a plain disc.</p>\n            </div>\n          </div>\n          <article class=\"ds-prose\">\n            <h2>Draw a first poster</h2>\n            <p>Three moves make a poster, and the order matters less than doing all three.</p>\n            <ul>\n              <li>Lay a pattern over a third of the sheet, edge to edge</li>\n              <li>Put one large filled shape across the seam</li>\n              <li>Set the words on a flat block, never on the pattern</li>\n            </ul>\n            <h3>Then break one rule</h3>\n            <p>A poster that follows every page of this handbook is <strong>correct and a little dull</strong>. Pick one rule, break it once and leave the rest alone. The usual choice is the <span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link\" href=\"#guide\">clashing pair</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">two fills that sit side by side on purpose</span></span>.</p>\n          </article>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#guide\">Shapes on a ground</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#shapes\">The table of shapes</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#news\">What changed in 3.2</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#ask\">Ask about this page</a></li>\n          </ul>\n        </div>\n        <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages of the guide\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#guide\" aria-disabled=\"true\">Previous</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#guide\" aria-current=\"page\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#guide\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#guide\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#guide\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#guide\">5</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#guide\">Next: shapes on a ground</a></li>\n        </ul>\n      </div>\n      <aside class=\"ds-toc\" aria-label=\"On this page\">\n        <h2 class=\"ds-toc__title\">On this page</h2>\n        <ul class=\"ds-toc__list\">\n          <li class=\"ds-toc__item is-current\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Install</a></li>\n          <li class=\"ds-toc__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Draw a first poster</a></li>\n          <li class=\"ds-toc__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Then break one rule</a></li>\n        </ul>\n        <div>\n          <div class=\"ds-progress__legend\"><span>The guide</span><span>1 of 5</span></div>\n          <span class=\"ds-progress ds-progress--25 ds-progress--alt\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Pages of the guide read\"><span class=\"ds-progress__bar\"></span></span>\n        </div>\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\">Show the code<span class=\"ds-switch__hint\">Hide it to read like a book</span></span></label>\n        <a class=\"ds-avatar ds-avatar--1\" href=\"#news\"><span class=\"ds-avatar__pic\">IM</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines Marchetti</span><span class=\"ds-avatar__meta\">changed this on Tuesday</span></span></a>\n      </aside>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"shapes\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--c4 ds-shape--tr ds-shape--turn\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--ink 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 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Handbook</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">Shapes</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Filled</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <span class=\"ds-page-header__num\" aria-hidden=\"true\">02</span>\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Shapes</h1>\n          <p class=\"ds-page-header__lead\">Every shape in the kit, its class and the sizes it comes in.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#news\">New in 3.2</a>\n          <a class=\"ds-button\" href=\"#ask\">Suggest a shape</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-doc ds-doc--wide\">\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Kinds</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--plain\" href=\"#shapes\">Filled</a><span>24</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">Line only</a><span class=\"ds-badge ds-badge--plain\">18</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">Pattern</a><span class=\"ds-badge ds-badge--plain\">20</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#shapes\">Deprecated</a><span class=\"ds-badge ds-badge--plain\">0</span></li>\n          </ul>\n          <h2 class=\"ds-sidebar__title\">Read first</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Shapes on a ground</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Tilt and overlap</a></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--c2\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s\"></span><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c3\"></span></div>\n          <h3 class=\"ds-empty__title\">Nothing is deprecated</h3>\n          <p class=\"ds-empty__text\">Version 3.2 retires no shape. Old names keep working until 4.0.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#news\">See what changed</a>\n        </div>\n      </div>\n      <div class=\"ds-doc__main\">\n        <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c2\" aria-hidden=\"true\"></span>\n        <div class=\"ds-sheet\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#shapes\" role=\"tab\" aria-selected=\"true\">Filled</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#shapes\" role=\"tab\">Line only</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#shapes\" role=\"tab\">Pattern</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#shapes\" role=\"tab\">Deprecated <span class=\"ds-badge ds-badge--plain\">0</span></a></li>\n          </ul>\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th class=\"ds-table__art\"><span aria-hidden=\"true\"></span></th><th>Shape</th><th class=\"ds-table__extra\">Class</th><th>Status</th><th class=\"ds-table__extra ds-table__num\">Since</th><th class=\"ds-table__num\">Sizes</th></tr>\n            </thead>\n            <tbody>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--disc ds-shape--c1\" aria-hidden=\"true\"></span></td><td><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Disc</a><span class=\"ds-table__meta\">the one to start with</span></td><td class=\"ds-table__extra\">shape--disc</td><td><span class=\"ds-badge ds-badge--success\">Stable</span></td><td class=\"ds-table__extra ds-table__num\">1.0</td><td class=\"ds-table__num\">5</td></tr>\n              <tr class=\"is-current\"><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--half ds-shape--c2\" aria-hidden=\"true\"></span></td><td><span class=\"ds-tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Half disc</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">called dome before 3.0</span></span><span class=\"ds-table__meta\">flat side down, or on a seam</span></td><td class=\"ds-table__extra\">shape--half</td><td><span class=\"ds-badge ds-badge--warning\">Renamed</span></td><td class=\"ds-table__extra ds-table__num\">1.0</td><td class=\"ds-table__num\">5</td></tr>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--quarter ds-shape--c3\" aria-hidden=\"true\"></span></td><td><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Quarter</a><span class=\"ds-table__meta\">for the corner of a block</span></td><td class=\"ds-table__extra\">shape--quarter</td><td><span class=\"ds-badge ds-badge--success\">Stable</span></td><td class=\"ds-table__extra ds-table__num\">1.2</td><td class=\"ds-table__num\">4</td></tr>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--tri ds-shape--c4\" aria-hidden=\"true\"></span></td><td><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Triangle</a><span class=\"ds-table__meta\">tilt it, always</span></td><td class=\"ds-table__extra\">shape--tri</td><td><span class=\"ds-badge ds-badge--success\">Stable</span></td><td class=\"ds-table__extra ds-table__num\">1.0</td><td class=\"ds-table__num\">5</td></tr>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--block ds-shape--c5\" aria-hidden=\"true\"></span></td><td><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Block</a><span class=\"ds-table__meta\">the ground under the words</span></td><td class=\"ds-table__extra\">shape--block</td><td><span class=\"ds-badge ds-badge--success\">Stable</span></td><td class=\"ds-table__extra ds-table__num\">1.0</td><td class=\"ds-table__num\">3</td></tr>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--ring ds-shape--c1\" aria-hidden=\"true\"></span></td><td><a class=\"ds-link ds-link--quiet\" href=\"#guide\">Ring</a><span class=\"ds-table__meta\">a thick circle, not a border</span></td><td class=\"ds-table__extra\">shape--ring</td><td><span class=\"ds-badge ds-badge--alt\">New</span></td><td class=\"ds-table__extra ds-table__num\">3.2</td><td class=\"ds-table__num\">4</td></tr>\n              <tr><td class=\"ds-table__art\"><span class=\"ds-shape ds-shape--stripes ds-shape--c3\" aria-hidden=\"true\"></span></td><td>Outlined disc<span class=\"ds-table__meta\">a filled shape with a dark line</span></td><td class=\"ds-table__extra\">shape--outline</td><td><span class=\"ds-badge ds-badge--danger\">Removed</span></td><td class=\"ds-table__extra ds-table__num\">2.0</td><td class=\"ds-table__num\">0</td></tr>\n            </tbody>\n          </table>\n          <div class=\"ds-row\">\n            <div class=\"ds-badges\" data-component=\"badge\">\n              <span class=\"ds-badge\">Filled</span>\n              <span class=\"ds-badge ds-badge--alt\">New</span>\n              <span class=\"ds-badge ds-badge--plain\">Line only</span>\n              <span class=\"ds-badge ds-badge--success\">Stable</span>\n              <span class=\"ds-badge ds-badge--warning\">Renamed</span>\n              <span class=\"ds-badge ds-badge--danger\">Removed</span>\n            </div>\n            <a class=\"ds-link\" href=\"#ask\">A shape is missing</a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"news\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--c2 ds-shape--tr\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--ink ds-shape--br ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3 22 21H2z\"/></svg></span>\n    <div class=\"ds-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\">Handbook</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#news\">News</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Version 3</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <span class=\"ds-page-header__num\" aria-hidden=\"true\">03</span>\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">What changed</h1>\n          <p class=\"ds-page-header__lead\">Every version, newest first, in one line per change.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack ds-stack--wide\">\n        <article class=\"ds-release\">\n          <span class=\"ds-release__num\">3.2</span>\n          <h2 class=\"ds-release__title\">Arcs, hoops and dashes</h2>\n          <p class=\"ds-release__meta\">Tuesday, by Ines Marchetti and Tunde Okafor</p>\n          <ul class=\"ds-release__list\">\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--success\">Added</span><span>The arc and the hoop, two shapes drawn as lines.</span></li>\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--success\">Added</span><span>A field of dashes, in rows that shift by half a step.</span></li>\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--warning\">Changed</span><span>A shape takes its size from the ground it lies on.</span></li>\n          </ul>\n        </article>\n        <article class=\"ds-release\">\n          <span class=\"ds-release__num\">3.1</span>\n          <h2 class=\"ds-release__title\">Terrazzo</h2>\n          <p class=\"ds-release__meta\">Six weeks ago, by Rosa Kiviniemi</p>\n          <ul class=\"ds-release__list\">\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--success\">Added</span><span>Terrazzo and confetti, the two scattered patterns.</span></li>\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--warning\">Changed</span><span>The dome is now called the half disc.</span></li>\n          </ul>\n        </article>\n        <article class=\"ds-release\">\n          <span class=\"ds-release__num\">3.0</span>\n          <h2 class=\"ds-release__title\">No more outlines</h2>\n          <p class=\"ds-release__meta\">Last spring, by Jonas Lindqvist</p>\n          <ul class=\"ds-release__list\">\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--danger\">Removed</span><span>The outlined shape and the offset block behind a box.</span></li>\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--warning\">Changed</span><span>Depth comes from overlap: one block climbs over the next.</span></li>\n            <li class=\"ds-release__item\"><span class=\"ds-badge ds-badge--success\">Added</span><span>Tilt classes, from one to six degrees.</span></li>\n          </ul>\n        </article>\n      </div>\n      <div class=\"ds-stack ds-stack--wide\">\n        <section class=\"ds-panel ds-panel--pick\">\n          <h2 class=\"ds-panel__title\">Still on version 2?</h2>\n          <div class=\"ds-panel__body\">\n            <p>Nine classes have new names. The old ones work until 4.0 and are listed side by side.</p>\n            <div class=\"ds-progress__legend\"><span>Old names still in use</span><span>3 of 9</span></div>\n            <span class=\"ds-progress ds-progress--40\" role=\"progressbar\" aria-valuenow=\"33\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Old names still in use\"><span class=\"ds-progress__bar\"></span></span>\n            <a class=\"ds-button ds-button--small\" href=\"#guide\">Read the moving guide</a>\n          </div>\n        </section>\n        <section class=\"ds-panel ds-panel--flat\">\n          <h2 class=\"ds-panel__title\">Who writes this</h2>\n          <div class=\"ds-panel__body\">\n            <a class=\"ds-avatar ds-avatar--1\" href=\"#ask\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines Marchetti</span><span class=\"ds-avatar__meta\">shapes, 41 pages</span></span></a>\n            <a class=\"ds-avatar ds-avatar--2\" href=\"#ask\"><span class=\"ds-avatar__pic\">TO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tunde Okafor</span><span class=\"ds-avatar__meta\">patterns, 14 pages</span></span></a>\n            <a class=\"ds-avatar ds-avatar--3\" href=\"#ask\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">colour, 9 pages</span></span></a>\n            <a class=\"ds-avatar ds-avatar--4\" href=\"#ask\"><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\">the kit itself</span></span></a>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"ask\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--c1 ds-shape--tr\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--ink ds-shape--edge-r\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20a9 9 0 0 1 18 0\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Handbook</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#ask\">Ask</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">New question</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <span class=\"ds-page-header__num\" aria-hidden=\"true\">04</span>\n        <div class=\"ds-page-header__text\">\n          <h1 class=\"ds-page-header__title\">Ask</h1>\n          <p class=\"ds-page-header__lead\">A question, or a mistake you found. Both end up as a better page.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-cover ds-cover--1 ds-cover--dash ds-cover--ground ds-band__slab\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split ds-split--flip\">\n      <div>\n        <h2 class=\"ds-band__label\">Asked often</h2>\n        <div class=\"ds-accordion\" data-component=\"accordion\">\n          <details class=\"ds-accordion__item\" open>\n            <summary class=\"ds-accordion__head\">May text sit on a pattern? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>On the quiet page pattern, yes. On every loud one, put a flat block under the words first.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">How many colours on one poster? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>The four fills, the ink and the ground. A fifth colour is for one small shape.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Why is there no shadow class? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>Nothing in the kit casts one. Let a block overlap its neighbour instead.</p></div>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__head\">Can I use the kit in print? <span class=\"ds-accordion__sign\"></span></summary>\n            <div class=\"ds-accordion__body\"><p>Yes. Every pattern is drawn from two flat colours, so it separates cleanly.</p></div>\n          </details>\n        </div>\n      </div>\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Your question</h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"q-name\">Name</label>\n                <input class=\"ds-form__control\" id=\"q-name\" type=\"text\" value=\"Aino Berg\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"q-mail\">Email</label>\n                <input class=\"ds-form__control is-invalid\" id=\"q-mail\" type=\"email\" value=\"aino@example\" aria-invalid=\"true\" aria-describedby=\"q-mail-err\">\n                <p class=\"ds-form__error\" id=\"q-mail-err\">Enter a full address, such as name@example.org.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"q-about\">About</label>\n              <select class=\"ds-form__control\" id=\"q-about\">\n                <option>Guide: Start</option>\n                <option>Shapes</option>\n                <option>Patterns</option>\n                <option>Colour</option>\n              </select>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"q-text\">Question</label>\n              <textarea class=\"ds-form__control ds-form__control--area\" id=\"q-text\">Which pattern may lie under a half disc?</textarea>\n              <p class=\"ds-form__hint\">One question at a time gets the fastest answer.</p>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> This is a mistake in the handbook</label>\n            <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Email me the answer<span class=\"ds-switch__hint\">It is also added to the page</span></span></label>\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Send</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Save draft</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Discard</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Attach a sketch</button>\n            </div>\n          </form>\n        </div>\n      </section>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Discard this question?</h2>\n        <a class=\"ds-dialog__close\" href=\"#ask\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>The draft is kept nowhere else. If you only want to finish it later, save it instead.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#ask\">Keep writing</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Discard</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--c2 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n  <span class=\"ds-shape ds-shape--tri ds-shape--c4 ds-shape--br ds-shape--tilt\" aria-hidden=\"true\"></span>\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__block\">\n      <div>\n        <p class=\"ds-footer__brand\">chronoskin</p>\n        <p class=\"ds-footer__text\">The handbook of a kit of shapes. Placeholder authors, placeholder versions.</p>\n      </div>\n      <div>\n        <p class=\"ds-footer__title\">Handbook</p>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#guide\">Guide</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#shapes\">Shapes</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#news\">What changed</a></li>\n        </ul>\n      </div>\n      <div>\n        <p class=\"ds-footer__title\">Help</p>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#ask\">Ask a question</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#ask\">Report a mistake</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Front page</a></li>\n        </ul>\n      </div>\n      <p class=\"ds-footer__legal\">Specimen page. All names, versions and figures are placeholders.</p>\n    </div>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.docs.s07.p07.t04.u04\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"docs\",\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-7744\",\n  \"short\": \"v1-me-7744\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #25102f;\n  --color-canvas: #2b1437;\n  --color-surface: #351b42;\n  --color-surface-alt: #43244f;\n  --color-surface-strong: #5a3366;\n  --color-bar: #79c7ff;\n  --color-bar-text: #25102f;\n  --color-bar-alt: #ffd97a;\n  --color-bar-alt-text: #25102f;\n  --color-inverse: #f8ecdc;\n  --color-inverse-text: #25102f;\n  --color-text: #f5eaf3;\n  --color-text-muted: #c9b0cd;\n  --color-heading: #ffffff;\n  --color-heading-alt: #ffb072;\n  --color-link: #8fd0ff;\n  --color-link-quiet: #f5eaf3;\n  --color-link-visited: #d5b3ff;\n  --color-link-hover: #ffd97a;\n  --color-link-active: #ff8a94;\n  --color-border: #f5eaf3;\n  --color-border-strong: #ffffff;\n  --color-border-muted: #6d4879;\n  --color-accent: #ff5470;\n  --color-accent-text: #25102f;\n  --color-accent-alt: #ffd97a;\n  --color-fill-1: #ff8a1f;\n  --color-fill-2: #79c7ff;\n  --color-fill-3: #ff5470;\n  --color-fill-4: #ffd97a;\n  --color-button: #ff8a1f;\n  --color-button-text: #25102f;\n  --color-button-hover-text: #25102f;\n  --color-button-secondary: #f8ecdc;\n  --color-button-secondary-text: #25102f;\n  --color-input: #180a1f;\n  --color-input-text: #ffffff;\n  --color-input-border: #f5eaf3;\n  --color-disabled: #3e2649;\n  --color-disabled-text: #a892ad;\n  --color-danger: #ff7a85;\n  --color-danger-surface: #5c1a36;\n  --color-success: #7be0a5;\n  --color-warning: #ffad33;\n  --color-notice: #b9e2ff;\n  --color-notice-text: #25102f;\n  --color-focus: #ffd97a;\n  --color-shadow: #c79bff;\n  --color-overlay: rgb(14 5 19 / 0.78);\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: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0 0 0 80px;\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: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-border-muted) 45%, transparent) 0 2px, transparent 2px 22px), var(--color-page);\n  --fill-bar: linear-gradient(45deg, var(--color-bar-alt) 25%, transparent 25%) 0 100% / 14px 14px repeat-x, linear-gradient(-45deg, var(--color-bar-alt) 25%, transparent 25%) 0 100% / 14px 14px repeat-x, var(--color-bar);\n  --fill-bar-alt: repeating-linear-gradient(90deg, var(--color-accent) 0 8px, transparent 8px 22px, var(--color-fill-2) 22px 26px, transparent 26px 40px), var(--color-bar-alt);\n  --fill-inverse: radial-gradient(ellipse 30% 9% at 50% 50%, var(--color-fill-1) 96%, transparent) 0 0 / 64px 64px, radial-gradient(ellipse 9% 30% at 50% 50%, var(--color-fill-1) 96%, transparent) 0 0 / 64px 64px, radial-gradient(var(--color-shadow) 5px, transparent 5.5px) 32px 32px / 64px 64px, 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-fill-4);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 4px solid var(--color-focus);\n  --transition: transform 0.12s ease-out, background-color 0.12s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}