{
  "id": "v1-me-7865",
  "long_id": "v1.memphis.docs.s07.p08.t06.u05",
  "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-7865",
  "preview_url": "https://chrono.skin/s/v1-me-7865/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 soft, heavy serif (`--font-heading`: Fraunces, Recoleta, Cooper Black, then Rockwell and American Typewriter); body, navigation and buttons in a geometric sans (Outfit, Jost, then Avenir Next and Century Gothic). `--text-base` 18px at 1.58, `--text-small` 15px, `--text-ui` 16px at weight 600, `--text-large` 23px for leads. `--text-display` 88px at weight 700 and line height 0.98 (the hero title is set at 86% of it, so that it fits its block); `--text-h1` 50px (inner page titles, stat figures, the footer name), `--text-h2` 37px (band titles, the ticket), `--text-h3` 23px (tile, panel and sidebar titles, timetable times). Nothing is uppercase. Links in running text carry a dotted underline, titles and navigation none.\n- Palette: sun-faded. A grey-beige page `--color-page` #e7dfd2 with paper surfaces #f8f3ea, faded salmon `--color-surface-alt` #f2d8cd and faded turquoise `--color-surface-strong` #cde4de. The four fills are salmon #ee8a74, turquoise #4bbdb1, mustard #e3b23c and cornflower #93a9dc; the text on them and all other text is one slate ink #25383f (`--color-accent-text`, `--color-text`). `--color-accent` and the primary button are the salmon, `--color-accent-alt` the turquoise, the fifth ornament colour `--color-shadow` is sea green #2f8f83. `--color-bar` is the mustard, for the navigation and table heads; the secondary button, the strip and the footer are the ink. Links are deep turquoise; link hover and the second heading colour are brick #a3432f, visited a dusty plum. Danger #a8273a, success #84c48d, warning #f0a35e, notice pale mustard.\n- Surface: no outlines and no shadows. `--border-width` and `--border-width-strong` are a 1px dashed hairline, used only round form controls and between rows; all five shadow tokens are `none`. Buttons and inputs are pills with one square corner (`--radius-control`), tags are pills, panels round their lower right corner by 36px (`--radius-panel`) and the largest blocks two opposite corners by 64px (`--radius-page`). `--fill-page` scatters faint flecks over the page; `--fill-bar-alt` is a strip with salmon scallops along its upper edge and turquoise ones along its lower; `--fill-inverse` sets mustard and turquoise half discs and salmon dashes on the ink. `--fill-button-hover` is the turquoise. The focus ring is a double line. 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. The ticket and the stat arches are such fills, so everything written on them 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 (tile labels, the sidebar, the empty state) go on the page or on a surface. 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-nav__strip-text`, `.ds-cover__chip`, `.ds-hero__body`, the ticket, 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 <= 76px`: the hero title, at 86% of the display size, is the largest text of this layout.\n- `font-size >= 15px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 2`: a soft heavy serif for headings and one geometric sans for the rest (plus the monospace of inline code).\n- `line-height <= 1.58`: body text is set at 1.58.\n- `uppercase-text <= 1%`: nothing is set in capitals in this type set.\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.p08.t06.u05\",\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-7865\",\n  \"short\": \"v1-me-7865\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #fff0f5;\n  --color-canvas: #fff0f5;\n  --color-surface: #ffffff;\n  --color-surface-alt: #ffd9e6;\n  --color-surface-strong: #ffb8d2;\n  --color-bar: #ff8fba;\n  --color-bar-text: #3f0a25;\n  --color-bar-alt: #0e7a55;\n  --color-bar-alt-text: #fff0f5;\n  --color-inverse: #3f0a25;\n  --color-inverse-text: #fff0f5;\n  --color-text: #3f0a25;\n  --color-text-muted: #8a4a66;\n  --color-heading: #3f0a25;\n  --color-heading-alt: #c2185b;\n  --color-link: #c2185b;\n  --color-link-quiet: #3f0a25;\n  --color-link-visited: #7a3b8f;\n  --color-link-hover: #0c7d55;\n  --color-link-active: #3f0a25;\n  --color-border: #3f0a25;\n  --color-border-strong: #3f0a25;\n  --color-border-muted: #f2b3ca;\n  --color-accent: #2fd39a;\n  --color-accent-text: #3f0a25;\n  --color-accent-alt: #f0609b;\n  --color-fill-1: #ff8fba;\n  --color-fill-2: #2fd39a;\n  --color-fill-3: #f7a6e4;\n  --color-fill-4: #f0609b;\n  --color-button: #2fd39a;\n  --color-button-text: #3f0a25;\n  --color-button-hover-text: #3f0a25;\n  --color-button-secondary: #3f0a25;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #ffffff;\n  --color-input-text: #3f0a25;\n  --color-input-border: #3f0a25;\n  --color-disabled: #ecd3dc;\n  --color-disabled-text: #8f6878;\n  --color-danger: #b80f2a;\n  --color-danger-surface: #ffe0d9;\n  --color-success: #5fdc8a;\n  --color-warning: #ffb84d;\n  --color-notice: #d3f6e6;\n  --color-notice-text: #3f0a25;\n  --color-focus: #c2185b;\n  --color-shadow: #e8203f;\n  --color-overlay: rgb(63 10 37 / 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Outfit\", \"Jost\", \"Avenir Next\", Avenir, \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n  --font-heading: \"Fraunces\", \"Recoleta\", \"Cooper Black\", \"Rockwell\", \"American Typewriter\", Georgia, serif;\n  --font-ui: \"Outfit\", \"Jost\", \"Avenir Next\", Avenir, \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n  --font-mono: \"Courier Prime\", \"Courier New\", Courier, monospace;\n  --text-base: 18px;\n  --text-small: 15px;\n  --text-ui: 16px;\n  --text-large: 23px;\n  --text-display: 88px;\n  --text-h1: 50px;\n  --text-h2: 37px;\n  --text-h3: 23px;\n  --line-body: 1.58;\n  --line-heading: 1.1;\n  --line-display: 0.98;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: -0.005em;\n  --display-tracking: -0.025em;\n  --figure-shift: -0.16em;\n  --ui-transform: none;\n  --link-decoration: underline dotted;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 999px;\n  --radius-panel: 0 40px 0 0;\n  --radius-pill: 0;\n  --radius-page: 0 0 120px 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: conic-gradient(from 0deg at 10px 10px, transparent 75%, color-mix(in srgb, var(--color-border-muted) 55%, transparent) 0) 0 0 / 56px 56px, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: conic-gradient(var(--color-accent) 25%, transparent 0 50%, var(--color-accent) 0 75%, transparent 0) 0 0 / 20px 20px, var(--color-bar-alt);\n  --fill-inverse: repeating-linear-gradient(-45deg, var(--color-fill-1) 0 14px, transparent 14px 42px), repeating-linear-gradient(-45deg, transparent 0 24px, var(--color-surface) 24px 28px, transparent 28px 42px), var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-inverse);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px dashed var(--color-focus);\n  --transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), background-color 0.18s linear;\n  --backdrop-blur: 0px;\n}\n"
  }
}