{ "id": "v1-em-5455", "long_id": "v1.editorial-minimal.docs.s05.p04.t05.u05", "name": "Editorial minimalism handbook", "era": { "slug": "editorial-minimal", "code": "em", "name": "Editorial minimalism", "years": [ 2012, 2018 ], "description": "Reading-first pages of 2012 to 2018: one narrow column of large serif text on white, a thin header, generous white space, hairline rules, a single accent colour and almost no boxes." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: carefully set type on a plain page, hairline rules, a single accent and almost no boxes or decoration. This layout is its documentation form, the manual written and laid out as a book, as small tools and writing applications of those years published theirs: a title page, a table of contents with leaders and page numbers, chapters with their own contents at the left and notes in the margin, a glossary and an index. Its quality lies in the regular line: every block stands a whole line of text from the next, and listings sit quietly inside the text.", "url": "https://chrono.skin/s/v1-em-5455", "preview_url": "https://chrono.skin/s/v1-em-5455/specimen.html", "files": { "STYLE.md": "# Editorial minimalism handbook\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: carefully set type on a plain page, hairline rules, a single accent and almost no boxes or decoration. This layout is its documentation form, the manual written and laid out as a book, as small tools and writing applications of those years published theirs: a title page, a table of contents with leaders and page numbers, chapters with their own contents at the left and notes in the margin, a glossary and an index. Its quality lies in the regular line: every block stands a whole line of text from the next, and listings sit quietly inside the text.\n\n## Layout\n\n- The page is a fixed centred sheet of `--size-page` (1040px), designed for a 1280px viewport; `.ds-wrap` holds every row. Only the running head and the footer strip paint edge to edge.\n- Navigation is a running head `--size-nav` (56px) tall on `--fill-bar` with a hairline under it, in three parts: the brand with the edition at the left, the parts of the book in the middle, a search field of `--size-search` (220px) at the right. The current part stands on a `--border-width-strong` accent stroke on the bar's lower edge.\n- The home view is the title page and the contents. The `.ds-hero` is two columns, seven and five parts: title, lead and two buttons at the left, a first listing on the inverted block at the right. Then `.ds-stat` across the sheet, the contents as `.ds-toc` (two parts of the book side by side, each a `.ds-list` with leaders), four ways in as a ruled `.ds-grid`, and the edition `.ds-panel`. Rows begin with a `.ds-rule`: small capitals at the left and a hairline running out to the right.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (an optional label, the title at `--text-h1`, one grey line, one action at the right) closed by a strong rule. A chapter is `.ds-book`: the chapter's contents in a column of `--size-toc` (200px) that stays in view, the text in the middle (568px, about 63 characters) and side notes in a column of `--size-note` (200px), with `--space-5` between them. A reference page puts `.ds-tabs` directly over the table. A page with two tasks uses `.ds-split`, seven and five parts.\n- Views. The specimen is the handbook of a small command-line tool with four views. `home` is the title page, the figures, the contents of both parts, four ways in and the edition panel. `chapter` is one chapter: breadcrumb, page header, contents at the left, the text with a listing, a list of options and two notices, see-also links and the chapter pagination, notes at the right. `glossary` is the tabs by letter, the table of terms with its label legend and the empty last letters. `index` is the search with its results and the open confirmation dialog at the left, the report form with its button row at the right. Below 1000px the notes fall under the text and the title page stacks; below 680px the parts of the book move to a second row of the running head, columns stack, the figures go two across and a wide table or listing scrolls inside its own box, while the page itself never scrolls sideways.\n- Spacing scale, built on the 24px line of the text: `--space-1` 4px (inside badges, tabs, between list entries), `--space-2` 8px (label to field, adjacent controls), `--space-3` 12px (row padding, button row), `--space-4` 24px, one line (between paragraphs, fields and blocks, panel and cell padding, side padding of the sheet), `--space-5` 36px (between the columns of a chapter, above a second-level heading), `--space-6` 48px, two lines (between sections, between the columns of the contents), `--space-7` 96px (above the title).\n- Other sizes: `--size-dialog` 440px, `--size-icon` 40px.\n- On a phone (680px and below) there is no menu button: the running head has two columns, the brand and the search, and `.ds-nav__links` takes a second row of its own, spread over the full width with tighter padding. The current part keeps its accent stroke on the lower edge. At 1000px and below a tooltip opens as a note fixed to the bottom of the window, `--space-3` from its edges, the full width at 600px and below and no wider than 28 characters above that.\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- With this pack's own type set every role is one monospaced face (IBM Plex Mono, then Menlo and Consolas): `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same stack, and hierarchy comes from weight and size alone. With another type set the roles separate as usual: headings and figures in `--font-heading`, running text in `--font-body`, navigation, labels, notes and captions in `--font-ui`, listings and inline code in `--font-mono`.\n- Body is `--text-base` 15px at `--line-body` 1.6, a 24px line, in `--color-text`. Lead lines are `--text-large` 18px at 1.5. Listings are 85% of `--text-base` at 1.6, inline code 90%.\n- Sizes: `--text-display` 40px (the title of the book only), `--text-h1` 28px (page titles, first-level headings, figures), `--text-h2` 20px (second-level headings, part titles of the contents, panel, dialog and empty titles), `--text-h3` 15px (brand, cell titles), `--text-ui` 13px (running head, buttons, tabs, form labels), `--text-small` 12px (labels, notes, captions, contents of a chapter, footer). Headings are `--weight-heading`; a third-level heading is a small bold capital label in `--color-heading-alt`.\n- `.ds-label`, `.ds-rule`, table heads and badges are small capitals with letter spacing of a tenth of their size; navigation, buttons, tabs and form labels follow `--ui-transform` with 4% spacing.\n- The text and fill pairs are those of the era, set by its first layout: page, canvas and surface colours and `--fill-panel` carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and the link colours; `--fill-bar` carries `--color-bar-text` (navigation, brand name, table head); `--fill-bar-alt` carries `--color-bar-alt-text` only (the footer); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for quieter lines, and the only button on it is `.ds-button--inverse`; `--fill-accent` carries `--color-accent-text`, as does `--color-danger` when it is a fill; `--color-fill-1` to `--color-fill-4` are picture tones that carry only a few words or a mark in `--color-inverse-text`, never running text; `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border and `--fill-button-hover` carries `--color-button-hover-text`; `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline; `--fill-input` carries `--color-input-text`; `--color-notice` carries `--color-notice-text`; `--color-danger-surface` carries `--color-danger`. `--color-success`, `--color-warning` and `--color-danger` are text and outline colours on the page. Nothing assumes that the page is light.\n- The highlight: `--color-notice` with `--color-notice-text` marks a found word (`.ds-mark`) as well as a note. `--fill-inverse` is used once, for the listing on the title page. `--color-accent` marks the current part, chapter entry and page number; a current tab and the default badge are filled with `--fill-accent`.\n- Rules use `--border-style`, dotted in this pack's surface set: hairlines of `--border-width` in `--color-border` under the head, around the grid and the empty box and above second-level headings; `--color-border-muted` between rows; `--border-width-strong` in `--color-border-strong` under the page header and each part title, over the figures and under a table head. Leaders are dots of the text face, not a border. `--radius-panel` dresses the panel, grid, listings and dialog, `--radius-page` and `--shadow-panel` the picture tones, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: line heights of 1.5 for leads, notes and captions; comment lines of a listing and the edition beside the brand at an opacity of 0.6.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill and the body type. It has no width; `.ds-wrap` is the sheet.\n- `.ds-wrap`: the 1040px sheet with 24px side padding. `.ds-section` gives a block 48px above and below (`--first` 36px above, `--flush` none above). `.ds-stack` stacks blocks one line apart. `.ds-split` is two columns of seven and five parts. `.ds-label` is a small capital line; `.ds-rule` a section head with a hairline running to the right.\n- `.ds-book`: a chapter in three columns: `.ds-book__side` (contents, sticky), `.ds-book__main` (the text) and `.ds-book__notes`, a list of `.ds-note` side notes, each a `.ds-note__no` and a few small lines under a hairline.\n- `.ds-brand`: the mark and name at the left of the running head. `.ds-brand__mark` is a 24px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` border, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name in bold; `.ds-brand__edition` a quiet line after it. Name and mark are placeholders for the installing project's own.\n- `.ds-nav`: the running head. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`) and `.ds-nav__search` with one `.ds-form__input` narrowed by `.ds-nav__field`. In the specimen the showing view marks its item with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the title page: `.ds-hero__copy` with a label, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (a primary and a secondary button), and `.ds-hero__aside` with a `.ds-code--inverse` listing and its caption.\n- `.ds-page-header`: head of an inner page, after the breadcrumb, over a strong rule: `.ds-page-header__copy` with an optional label, `.ds-page-header__title` and one `.ds-page-header__text` line, `.ds-page-header__actions` with a single button.\n- `.ds-prose`: the text of a chapter: `h1`, `h2` (under a hairline), `h3` (a label), paragraphs, lists, `strong`, `code`, `sup` for note numbers. `.ds-prose__lead` is a larger paragraph; `.ds-prose__dropcap` is a span around a first letter that makes it a three-line initial. `.ds-mark` highlights a word.\n- `.ds-code`: a listing in a `
`, quiet on `--color-surface-alt` with a strong rule at its left; `--inverse` sets it on `--fill-inverse`. `.ds-code__dim` is a comment or output line; `.ds-code__caption` the line under a listing.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for titles in tables and side lists; `--more` is a small capital link with an arrow. `.ds-linklist` with `.ds-linklist__item` sets links as rows on faint rules.\n- `.ds-button`: a word in a bordered box on `--fill-button`. Variants: `--secondary` (hairline border on `--fill-button-secondary`), `--danger` (outlined in `--color-danger`, filled on hover; destructive actions only), `--inverse` (on an inverted block), `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-3` apart.\n- `.ds-form`: vertical form, `--space-4` between fields. `.ds-form__row` sets fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`. `--inline` puts one field and its button on a line.\n- `.ds-table`: text rows on faint hairlines, no box and no stripes; the head is small capitals over a strong rule. `.ds-table__num` right-aligns figures; `.ds-table__caption` is a note below. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the row under it with the pagination and a legend.\n- `.ds-badge`: a small capital label on `--fill-accent`. `--alt` is outlined in `--color-accent-alt`, `--quiet` sits on `--color-surface-strong` for counts. Status variants are outlines in their own colour: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-notice`: a tinted line with a strong rule at its left; `--error` uses the danger colours. `.ds-notice__title` is the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: a row of words and numbers, `.ds-pagination__link`; `is-current` is underlined in the accent, `is-disabled` is grey.\n- `.ds-dialog`: a veil of `--color-overlay` centring a plain `.ds-dialog__box` with a strong hairline border and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, right-aligned `.ds-dialog__actions`.\n- `.ds-list`: a table of contents. Each `.ds-list__item` is a `.ds-list__no`, a `.ds-list__line` of the bold `.ds-list__title`, a `.ds-list__leader` of dots and the `.ds-list__page`, and under it a `.ds-list__meta` line. `.ds-toc` sets two `.ds-toc__part` columns, each under a `.ds-toc__title` with a strong rule. `--results` turns the list into search results: title, meta line and a `.ds-list__text` excerpt.\n- `.ds-panel`: the one box of a page on `--fill-panel`: `.ds-panel__split` puts `.ds-panel__copy` (label, `.ds-panel__title`, `.ds-panel__body`) beside an inline form.\n- `.ds-stat`: the book in figures between a strong rule and a hairline. `.ds-stat` is the row; each `.ds-stat__item` sets a `.ds-stat__figure` and its `.ds-stat__label` on one baseline, divided by vertical hairlines.\n- `.ds-grid`: four ways in as one ruled strip. Each `.ds-grid__cell` has a 48px `.ds-grid__tile` in a picture tone (`--2`, `--3`, `--4`) with one sign on it, a `.ds-grid__title` and a `.ds-grid__text`.\n- `.ds-tabs`: a strip of joined cells; `.ds-tabs__tab` with `is-current` is filled with `--fill-accent`.\n- `.ds-sidebar`: a titled list hung on a hairline at its left: `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item`; the current row is `is-current`, bold, with an accent stroke.\n- `.ds-breadcrumb`: a path of `.ds-breadcrumb__item` separated by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-empty`: a centred message in a hairline box where the rows would be: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the colophon strip on `--fill-bar-alt`: `.ds-footer__inner` with a line of text and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-progress`: a `--border-width-strong` line with a `.ds-progress__bar` in the accent (`--third`, `--most` set its length; a project sets the width itself) and a `.ds-progress__label` under it that says the same in words. Use it for how far a reader or a count has come, inside a margin, sidebar or panel.\n- `.ds-tooltip`: a word with a hairline under it and a `.ds-tooltip__tip` shown on hover or focus (`--plain` drops the hairline, for a badge). Use it for a definition or a footnote of one sentence; it is never forced open.\n- `.ds-switch`: an on or off preference: a hidden `.ds-switch__input` checkbox, the `.ds-switch__track` and the words. Use it only for a setting that takes effect by itself, such as email preferences; a statement to confirm stays a `.ds-form__check`.\n\n## Never\n\n- `content-width <= 1040px`: everything stays on the sheet.\n- `block-gap <= 96px`: the largest space is the one above the title.\n- `font-size <= 40px`: the title of the book is the largest text.\n- `font-size >= 12px`: notes and labels are the smallest text.\n- `font-weight <= 700`: bold is the only weight besides regular.\n- `font-families <= 1`: one monospaced face for everything.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 1.2px`: only small capitals are tracked.\n- `box-shadow-blur <= 0px`: nothing has a soft shadow; the dialog is framed by a second hard line.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 0px`: every corner is square.\n- `border-width <= 2px`: hairlines are 1px; 2px marks the current item, a part title and a table head.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Keep every vertical distance to the scale, which counts in lines of text: one line (`--space-4`) between blocks, two (`--space-6`) between sections. A new reference page is a `.ds-page-header`, `.ds-tabs` and a `.ds-table`; a new kind of explanation is `.ds-prose` in `.ds-book` with its asides as `.ds-note`. Anything typed or printed by the tool is a `.ds-code` listing or inline `code`. Use the inverted block once per page at most. Keep to the era's fill and text pairs so that the component works with every palette, light or dark.\n",
    "components.css": ":root {\n  --size-page: 1040px;\n  --size-toc: 200px;\n  --size-note: 200px;\n  --size-nav: 56px;\n  --size-search: 220px;\n  --size-dialog: 440px;\n  --size-icon: 40px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 24px;\n  --space-5: 36px;\n  --space-6: 48px;\n  --space-7: 96px;\n}\n\n/* shell: a manual laid out as a book; a title page, a contents page, chapters with notes in the margin */\n.ds-page {\n  margin: 0;\n  padding: 0;\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  text-rendering: optimizeLegibility;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site 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/* label: the small tracked capitals of meta lines and section heads */\n.ds-label {\n  display: block;\n  margin: 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n\n/* sheet: the width of the book */\n.ds-wrap {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  margin: 0 auto;\n  padding: 0 var(--space-4);\n}\n.ds-section {\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\n}\n.ds-section--first {\n  padding-top: var(--space-5);\n}\n.ds-section--flush {\n  padding-top: 0;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n/* rule: a section head; its words at the left, a hairline running out to the right edge */\n.ds-rule {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-rule::after {\n  content: \"\";\n  flex: 1 1 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n/* split: two unequal columns of an inner page */\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  column-gap: var(--space-6);\n  align-items: start;\n}\n/* book: a chapter. Its contents at the left, the text in the middle, the notes at the right */\n.ds-book {\n  display: grid;\n  grid-template-columns: var(--size-toc) minmax(0, 1fr) var(--size-note);\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.ds-book__side {\n  position: sticky;\n  top: var(--space-4);\n  min-width: 0;\n}\n.ds-book__main {\n  min-width: 0;\n}\n.ds-book__notes {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n/* note: a side note; a number and a few lines under a hairline */\n.ds-note {\n  margin: 0 0 var(--space-4);\n  padding-top: var(--space-2);\n  color: var(--color-text-muted);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-note__no {\n  display: block;\n  margin-bottom: var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n}\n\n/* nav: the running head. Brand at the left, the parts of the book in the middle, search at the right */\n.ds-nav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__inner {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-4);\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  justify-self: start;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--space-4);\n  height: var(--space-4);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-brand__edition {\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  opacity: 0.6;\n}\n.ds-nav__links {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-nav);\n  margin-bottom: calc(var(--border-width) * -1);\n  color: var(--color-bar-text);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  border-bottom-color: var(--color-border);\n}\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-accent);\n}\n/* the current view marks its navigation item */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#chapter:target) .ds-nav__link[href=\"#chapter\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#glossary:target) .ds-nav__link[href=\"#glossary\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-nav__search {\n  justify-self: end;\n  width: 100%;\n  max-width: var(--size-search);\n  margin: 0;\n}\n.ds-nav__field {\n  padding-top: var(--space-1);\n  padding-bottom: var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n\n/* hero: the title page. The title and what the book is at the left, a first taste of it at the right */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  column-gap: var(--space-6);\n  align-items: center;\n  padding: var(--space-7) 0 var(--space-6);\n}\n.ds-hero__copy {\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: var(--space-3) 0 var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  max-width: 54ch;\n  font-size: var(--text-large);\n  line-height: 1.5;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-4);\n}\n.ds-hero__aside {\n  min-width: 0;\n}\n\n/* code: a listing. Quiet on a pale surface in a chapter; --inverse sets it on the inverted block of the title page */\n.ds-code {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  overflow-x: auto;\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-mono);\n  font-size: calc(var(--text-base) * 0.85);\n  line-height: 1.6;\n  white-space: pre;\n  tab-size: 2;\n}\n.ds-code--inverse {\n  margin: 0;\n  padding: var(--space-4);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-left: 0;\n  border-radius: var(--radius-page);\n}\n.ds-code__dim {\n  opacity: 0.6;\n}\n.ds-code__caption {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* page header: the head of an inner page over a strong rule; title and one line, the action at the right */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n  padding: var(--space-3) 0 var(--space-4);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: var(--space-2) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: 0;\n  max-width: 68ch;\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* typography: the text of a chapter; every block one line of the text apart */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  color: var(--color-heading);\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}\n.ds-prose h1 {\n  margin: var(--space-6) 0 var(--space-4);\n  font-size: var(--text-h1);\n}\n.ds-prose h1:first-child,\n.ds-prose h2:first-child {\n  margin-top: 0;\n}\n.ds-prose h2 {\n  margin: var(--space-5) 0 var(--space-3);\n  padding-top: var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-4) 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding-left: var(--space-4);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n  border-radius: var(--radius-control);\n  font-family: var(--font-mono);\n  font-size: calc(var(--text-base) * 0.9);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose sup {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 0;\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  line-height: 1.5;\n}\n.ds-prose .ds-noticerow {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose + .ds-rule {\n  margin-top: var(--space-5);\n}\n/* mark: a found word, on the notice colour */\n.ds-mark {\n  padding: 0 var(--space-1);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n/* drop cap: three lines deep. The span is a floated box holding an unseen strut in the text face, pushed two lines down, and the letter with no line height of its own; the two share a baseline, so the letter stands on the third line of the paragraph whatever the metrics of the two faces */\n.ds-prose__dropcap {\n  float: left;\n  display: flex;\n  align-items: baseline;\n  margin: 0 var(--space-2) calc(var(--text-base) * -0.2) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-base) * (2 * var(--line-body) + 0.7) * 1.4);\n  font-style: normal;\n  font-weight: var(--weight-heading);\n  line-height: 0;\n}\n.ds-prose__dropcap::before {\n  content: \"\\200B\";\n  padding-top: calc(var(--text-base) * var(--line-body) * 2);\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\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: calc(var(--text-small) * 0.25);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link);\n}\n.ds-link--more {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-link--more::after {\n  content: \" \\2192\";\n}\n.ds-linklist {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-linklist__item {\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* buttons: a word in a bordered box; the palette decides whether it is an outline or a fill */\n.ds-button {\n  display: inline-block;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-align: center;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-border);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: currentColor;\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n  background: var(--fill-button-secondary);\n  color: var(--color-link-active);\n  border-color: currentColor;\n}\n.ds-button--danger {\n  background: transparent;\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n  background: var(--color-danger);\n  color: var(--color-accent-text);\n}\n/* inverse: the only button allowed on an inverted block */\n.ds-button--inverse {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  border-color: var(--color-inverse-text);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: transparent;\n  color: var(--color-inverse-text);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: transparent;\n  box-shadow: none;\n  cursor: default;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__row {\n  display: flex;\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-body);\n  font-size: calc(var(--text-base) * 0.85);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--space-7) + var(--space-5));\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-form__checkbox {\n  margin: 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding-top: var(--space-2);\n}\n/* inline: one field and its button on a line */\n.ds-form--inline {\n  flex-direction: row;\n  align-items: stretch;\n  gap: var(--space-2);\n}\n.ds-form--inline .ds-form__input {\n  flex: 1 1 0;\n  min-width: 0;\n  width: auto;\n}\n\n/* table: text rows on hairlines; no box, no stripes */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: calc(var(--text-base) * 0.85);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  text-align: left;\n  vertical-align: baseline;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n  padding-right: 0;\n}\n.ds-table thead th {\n  padding-top: var(--space-2);\n  padding-bottom: var(--space-2);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-table tbody th {\n  color: var(--color-heading);\n  font-weight: var(--weight-body);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-align: left;\n}\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-style: normal;\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.ds-badge--alt {\n  background: transparent;\n  color: var(--color-heading);\n  border-color: var(--color-accent-alt);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: transparent;\n  color: var(--color-success);\n  border-color: currentColor;\n}\n.ds-badge--warning {\n  background: transparent;\n  color: var(--color-warning);\n  border-color: currentColor;\n}\n.ds-badge--danger {\n  background: transparent;\n  color: var(--color-danger);\n  border-color: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n/* notice: a tinted line with a strong rule at its left */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border-left: var(--border-width-strong) var(--border-style) currentColor;\n  border-radius: var(--radius-panel);\n  font-size: calc(var(--text-base) * 0.85);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-1);\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-heading);\n  border-bottom-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* dialog: a plain sheet on a veil */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-5) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-dialog__close::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-large) * 0.75);\n  height: calc(var(--text-large) * 0.75);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  rotate: 45deg;\n  vertical-align: middle;\n}\n.ds-dialog__body {\n  padding: var(--space-2) var(--space-4) var(--space-4);\n  font-size: calc(var(--text-base) * 0.85);\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-2);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* contents: the parts of the book side by side */\n.ds-toc {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  column-gap: var(--space-6);\n  align-items: start;\n}\n.ds-toc__part {\n  min-width: 0;\n}\n.ds-toc__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding-bottom: var(--space-2);\n  color: var(--color-heading);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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}\n/* list: a table of contents. Number, chapter title, a leader of dots, the page; one line of what it covers underneath */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--space-5) minmax(0, 1fr);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__no {\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__line {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-list__title {\n  flex: 0 1 auto;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-list__leader {\n  flex: 1 1 0;\n  min-width: var(--space-4);\n  overflow: hidden;\n  color: var(--color-text-muted);\n  white-space: nowrap;\n}\n.ds-list__leader::before {\n  content: \". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .\";\n}\n.ds-list__page {\n  flex: 0 0 auto;\n  color: var(--color-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-list__meta {\n  grid-column: 2;\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n/* results: what a search found; a title, where it is, the line with the word in it */\n.ds-list--results .ds-list__item {\n  display: block;\n  padding: var(--space-3) 0;\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n  font-size: calc(var(--text-base) * 0.9);\n}\n\n/* panel: the one box of a page */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  padding: var(--space-4);\n}\n.ds-panel__title {\n  margin: var(--space-2) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-panel__body p {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n  margin-bottom: 0;\n}\n.ds-panel__split {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  column-gap: var(--space-6);\n  align-items: end;\n}\n.ds-panel__copy {\n  min-width: 0;\n}\n\n/* stats: the book in figures; number and label on one baseline, between two rules */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 var(--space-2);\n  min-width: 0;\n  padding: var(--space-3) var(--space-3);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n  padding-left: 0;\n  border-left: 0;\n}\n.ds-stat__figure {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n\n/* grid: four ways in, as one ruled strip of cells; each has a small picture tone with a sign on it */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-grid__cell {\n  display: block;\n  min-width: 0;\n  padding: var(--space-4);\n  color: var(--color-text);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  text-decoration: none;\n}\n.ds-grid__cell:first-child {\n  border-left: 0;\n}\n.ds-grid__tile {\n  display: block;\n  width: var(--space-6);\n  height: var(--space-6);\n  margin-bottom: var(--space-3);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  align-content: center;\n  text-align: center;\n  text-box: trim-both cap alphabetic;\n}\n.ds-grid__tile--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n\n/* tabs: a strip of joined cells, for the letters of a glossary; the current one is filled */\n.ds-tabs {\n  display: flex;\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--border-width);\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  margin-left: calc(var(--border-width) * -1);\n  padding: var(--space-1) var(--space-3);\n  color: var(--color-text);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n\n/* sidebar: the contents of a chapter, a list hung on a hairline at its left */\n.ds-sidebar {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-sidebar + .ds-sidebar {\n  margin-top: var(--space-5);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n  margin-left: calc(var(--border-width) * -1);\n  padding: var(--space-1) 0 var(--space-1) var(--space-3);\n  color: var(--color-text-muted);\n  border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n  border-left-color: var(--color-accent);\n  font-weight: var(--weight-bold);\n}\n\n/* breadcrumb: a path */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-5) 0 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin-right: var(--space-2);\n  color: var(--color-border-strong);\n  opacity: 0.4;\n}\n.ds-breadcrumb__current {\n  color: var(--color-heading);\n}\n\n/* empty state: a hairline box where the rows would be */\n.ds-empty {\n  padding: var(--space-5) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n  margin: 0 auto var(--space-4);\n  max-width: 56ch;\n  color: var(--color-text-muted);\n}\n\n/* footer: the colophon strip */\n.ds-footer {\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-footer__inner {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  margin: 0 auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* a window too narrow for three columns: the notes fall under the text, the title page stacks */\n@media (max-width: 1000px) {\n  .ds-book {\n    grid-template-columns: var(--size-toc) minmax(0, 1fr);\n  }\n  .ds-book__notes {\n    grid-column: 2;\n    margin-top: var(--space-4);\n  }\n  .ds-hero {\n    grid-template-columns: minmax(0, 1fr);\n    row-gap: var(--space-5);\n    padding: var(--space-6) 0 var(--space-5);\n  }\n  .ds-split,\n  .ds-panel__split {\n    grid-template-columns: minmax(0, 1fr);\n    row-gap: var(--space-5);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-grid__cell:nth-child(odd) {\n    border-left: 0;\n  }\n  .ds-grid__cell:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n}\n\n/* narrow windows: one column; the parts of the book move to a second row of the running head */\n@media (max-width: 680px) {\n  .ds-wrap,\n  .ds-nav__inner,\n  .ds-footer__inner {\n    padding-left: var(--space-3);\n    padding-right: var(--space-3);\n  }\n  .ds-nav__inner {\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    gap: 0 var(--space-3);\n    padding-top: var(--space-2);\n    min-height: 0;\n  }\n  .ds-nav__links {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    gap: var(--space-4);\n  }\n  .ds-nav__link {\n    min-height: 0;\n    padding: var(--space-2) 0 var(--space-1);\n  }\n  .ds-brand__edition {\n    display: none;\n  }\n  .ds-hero {\n    padding: var(--space-5) 0;\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-section {\n    padding-top: var(--space-5);\n    padding-bottom: var(--space-5);\n  }\n  .ds-section--flush {\n    padding-top: 0;\n  }\n  .ds-book,\n  .ds-toc {\n    grid-template-columns: minmax(0, 1fr);\n    row-gap: var(--space-5);\n  }\n  .ds-book__side {\n    position: static;\n  }\n  .ds-book__notes {\n    grid-column: 1;\n    margin-top: 0;\n  }\n  .ds-page-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-3);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-stat__item:nth-child(odd) {\n    padding-left: 0;\n    border-left: 0;\n  }\n  .ds-stat__item:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-grid__cell {\n    padding: var(--space-3);\n  }\n  .ds-tabs {\n    flex-wrap: wrap;\n    row-gap: var(--space-1);\n  }\n  .ds-table {\n    min-width: 64ch;\n  }\n  .ds-form__row,\n  .ds-form--inline {\n    flex-direction: column;\n  }\n  .ds-dialog {\n    padding: var(--space-4) var(--space-3);\n  }\n}\n\n/* progress: a thin line that shows how far along; the words under it say the same */\n.ds-progress {\n  display: block;\n  height: var(--border-width-strong);\n  margin: var(--space-3) 0 var(--space-1);\n  background: var(--color-border-muted);\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background: var(--color-accent);\n}\n.ds-progress--third .ds-progress__bar {\n  width: 33%;\n}\n.ds-progress--most .ds-progress__bar {\n  width: 80%;\n}\n.ds-progress__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* tooltip: a note on a word, shown on hover or focus */\n.ds-tooltip {\n  position: relative;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  z-index: 5;\n  bottom: 100%;\n  left: 0;\n  width: max-content;\n  max-width: 28ch;\n  margin-bottom: var(--space-1);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-style: normal;\n  font-weight: var(--weight-ui);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n  visibility: hidden;\n  opacity: 0;\n  transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n  visibility: visible;\n  opacity: 1;\n}\n@media (max-width: 1000px) {\n  .ds-tooltip__tip {\n    position: fixed;\n    right: var(--space-3);\n    bottom: var(--space-3);\n    left: var(--space-3);\n    width: auto;\n    max-width: none;\n    margin: 0;\n  }\n}\n@media (min-width: 601px) and (max-width: 1000px) {\n  .ds-tooltip__tip {\n    right: auto;\n    max-width: 28ch;\n  }\n}\n\n/* switch: a preference that is on or off, drawn over a checkbox */\n.ds-switch {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  width: var(--border-width);\n  height: var(--border-width);\n  opacity: 0;\n}\n.ds-switch__track {\n  position: relative;\n  flex: 0 0 auto;\n  width: calc(var(--space-4) * 2);\n  height: var(--space-4);\n  background: var(--color-text-muted);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: var(--border-width-strong);\n  left: var(--border-width-strong);\n  width: calc(var(--space-4) - var(--border-width-strong) * 2);\n  height: calc(var(--space-4) - var(--border-width-strong) * 2);\n  background: var(--color-surface);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track {\n  background: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n  transform: translateX(var(--space-4));\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--border-width-strong) var(--border-style) var(--color-focus);\n  outline-offset: var(--border-width-strong);\n}\n\n/* phones: the links spread across the bar */\n@media (max-width: 680px) {\n  .ds-nav__links {\n    justify-content: space-between;\n  }\n}\n",
    "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, handbook specimen\n\n\n\n\n\n
\n  
\n    \n      \n      chronoskin\n      handbook 2.4\n    \n    \n    
\n      \n    
\n  
\n
\n\n
\n  
\n    
\n      
\n        The handbook · Second edition Revised\n        
Keeping a log of your working day, from the first line to the yearly report
\n        
chronoskin is a small command for writing down what you did and when. This book explains all of it in twelve chapters, in the order you will need them.
\n        
\n          Start reading\n          Look something up\n        
\n      
\n      
\n        
# the whole idea, in four lines\n$ chronoskin start \"page proofs\"\n$ chronoskin stop\n$ chronoskin today\n09:10  11:45  page proofs   2h35
\n        
Listing 1. Chapter 2 takes this apart line by line.
\n      
\n    
\n\n    
    \n      
  • 12Chapters
    • \n      
  • 184Pages
    • \n      
  • 96Listings
    • \n      
  • 4hTo read it all
    • \n    
\n\n    
\n      
Contents
\n      
\n        
\n          
Part one. Every day Pages 1 to 88
\n          \n        
\n        
\n          
Part two. Now and then Pages 89 to 184
\n          \n        
\n      
\n    
\n\n    
\n      
Four ways in
\n      
\n        \n          
$
\n          
In ten minutes
\n          
Chapters 1 and 2, and nothing else, for a first working day.
\n        \n        \n          
?
\n          
By question
\n          
Forty short answers, each pointing at the page that explains it.
\n        \n        \n          
A
\n          
By word
\n          
The glossary: sixty terms the book uses in one sense only.
\n        \n        \n          
#
\n          
By page
\n          
The index and the search, for readers who know what they want.
\n        \n      
\n    
\n\n    
\n      
\n        
\n          
\n            This edition\n            
Second edition, revised in March 2016
\n            Ten of twelve chapters revised for version 2.4\n            
\n              
Chapters 3 and 9 are rewritten for version 2.4. Leave an address and we will write when a chapter changes, and at no other time.
\n            
\n          
\n          
\n            \n            \n          
\n        
\n      
\n    
\n  
\n
\n\n
\n  
\n    
    \n      
  1. Handbook
    2. \n      
  2. Part one
    3. \n      
  3. 3. Clocks that disagree
    4. \n    
\n    
\n      
\n        Chapter 3 · Pages 24 to 40 · 22 minutes\n        
Clocks that disagree
\n        
What chronoskin does when your laptop, your phone and the calendar on the wall hold three different opinions about the time.
\n      
\n      
\n        Report a mistake\n      
\n    
\n\n    
\n      \n\n      
\n        
\n          
3.1 One clock is the rule
\n          
Every entry is stored against a single clock, and it is never the one on your wall.
\n          
chronoskin writes each start and stop as a moment in universal timeGlossary: the one clock every entry is stored against. It has no zone and no summer time. and remembers, beside it, which zone you were in. Nothing is converted until something is shown to you.1 That is why a log copied to another machine reads the same there.
\n          
$ chronoskin today --zone\n09:10  11:45  page proofs   2h35  Europe/Oslo\n13:00  15:20  index         2h20  Europe/Oslo
\n          
3.2 Travelling
\n          
When the zone of the machine changes, the next entry simply carries the new one. You can ask to see a day either way:2
\n          
    \n            
  • --as-lived shows each entry in the zone it was made in;
    • \n            
  • --as-here shows all of them in the zone you are in now;
    • \n            
  • --zone NAME shows them in any zone you name.
    • \n          
\n          
\n            
Note. Totals never depend on the view. Two hours are two hours in every zone.
\n            
Changed in 2.4. --local no longer exists and stops with an error. Use --as-here.
\n          
\n          
If the machine has no zone
\n          
A machine without a zone is treated as universal time, and chronoskin says so once on the first entry of each day.
\n        
\n\n        
See also
\n        \n\n        
\n          \n          Contents\n        
\n      
\n\n      
    \n        
  1. 1Chapter 8 shows the two fields as they stand in the log file.
    2. \n        
  2. 2The default is set by view.zone; see page 141.
    3. \n        
  3. In printThis section is on pages 24 to 29 of the paper edition.
    4. \n      
\n    
\n  
\n
\n\n
\n  
\n    
    \n      
  1. Handbook
    2. \n      
  2. Glossary
    3. \n    
\n    
\n      
\n        
Glossary
\n        
Sixty words this book uses in one sense only, with the chapter that introduces each.
\n      
\n      
\n        Suggest a term\n      
\n    
\n\n    
\n      \n      
\n        \n          \n          \n            \n              \n              \n              \n              \n              \n            \n          \n          \n            \n            \n            \n            \n            \n            \n            \n          \n        
Showing 7 of 60 terms. Page numbers follow the paper edition.
TermMeaningStatusChapterPage
as-hereA view that shows every entry in the zone you are in now.New327
as-livedA view that shows each entry in the zone it was made in.Stable326
breakA gap between two entries that is shorter than the rounding step.Stable444
dayFrom four in the morning to four in the morning, unless set otherwise.Changed212
driftThe difference between two machines' clocks at the moment of a merge.Under review9126
entryOne line of the log: a start, a stop and what was done between them.Stable29
epoch fileThe older log format, read but no longer written.Removed8119
\n      
\n      
\n        
\n          New\n          Changed\n          60\n          Stable\n          Under review\n          Removed\n        
\n        F to L\n      
\n    
\n\n    
\n      
X to Z
\n      
\n        \n        
No terms under X, Y or Z
\n        
The book has not needed a word that begins with one of these letters. If you think it should, say which.
\n        Suggest a term\n      
\n    
\n  
\n
\n\n
\n  
\n    
    \n      
  1. Handbook
    2. \n      
  2. Index and search
    3. \n    
\n    
\n      
\n        
Index and search
\n        
Four hundred index entries and every sentence of the twelve chapters.
\n      
\n      
\n        Back to the contents\n      
\n    
\n\n    
\n      
\n        
\n          \n          \n        
\n        
\n          
4 places for \"summer time\"
\n          
    \n            
  • 3.3 The missing hourChapter 3 · page 31
    On the night summer time begins, an entry that runs through two o'clock is one hour shorter than it looks.
    • \n            
  • 7.2 A month that is an hour longChapter 7 · page 94
    Monthly totals count real hours, so March and October differ when summer time changes.
    • \n            
  • 10.4 view.zoneChapter 10 · page 141
    A named zone follows summer time; a fixed offset such as +01:00 does not.
    • \n            
  • Glossary: summer timePage 176
    The hour added to local clocks for part of the year.
    • \n          
\n        
\n        
\n          
When a report is sent
\n          
\n            
\n              
\n                
Send this report?
\n                \n              
\n              
\n                
It goes to the two editors of the handbook, with the page and section you named.
\n              
\n              
\n                Go back\n                Send it\n              
\n            
\n          
\n        
\n      
\n\n      
\n        
Report a mistake
\n        
\n          \n          
\n            \n            \n          
\n          \n          \n          
\n            \n            Preview\n            Save draft\n            Discard\n            \n          
\n        
\n      
\n    
\n  
\n
\n\n\n\n\n\n",
    "style.json": "{\n  \"id\": \"v1.editorial-minimal.docs.s05.p04.t05.u05\",\n  \"library\": \"2026.10.09-1036\",\n  \"era\": {\n    \"slug\": \"editorial-minimal\",\n    \"years\": [\n      2012,\n      2018\n    ]\n  },\n  \"archetype\": \"docs\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-em-5455\",\n  \"short\": \"v1-em-5455\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #efefef;\n  --color-canvas: #efefef;\n  --color-surface: #f9f9f9;\n  --color-surface-alt: #e6e6e8;\n  --color-surface-strong: #d8d8dc;\n  --color-bar: #efefef;\n  --color-bar-text: #181038;\n  --color-bar-alt: #e6e6e8;\n  --color-bar-alt-text: #5e5c68;\n  --color-inverse: #201840;\n  --color-inverse-text: #f9f9f9;\n  --color-text: #303038;\n  --color-text-muted: #707078;\n  --color-heading: #181038;\n  --color-heading-alt: #5b3fb8;\n  --color-link: #5b3fb8;\n  --color-link-quiet: #5e5c68;\n  --color-link-visited: #6e5a94;\n  --color-link-hover: #3f2a8c;\n  --color-link-active: #201840;\n  --color-border: #cdcdd2;\n  --color-border-strong: #181038;\n  --color-border-muted: #dedee2;\n  --color-accent: #5b3fb8;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #a8650f;\n  --color-fill-1: #282048;\n  --color-fill-2: #8474b8;\n  --color-fill-3: #86868e;\n  --color-fill-4: #686870;\n  --color-button: #181038;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #efefef;\n  --color-button-secondary-text: #181038;\n  --color-input: #ffffff;\n  --color-input-text: #181038;\n  --color-input-border: #b4b4bc;\n  --color-disabled: #dcdce0;\n  --color-disabled-text: #9a9aa2;\n  --color-danger: #b0202c;\n  --color-danger-surface: #f6e1e2;\n  --color-success: #2c7a4b;\n  --color-warning: #96600a;\n  --color-notice: #e4e0f2;\n  --color-notice-text: #3f2a8c;\n  --color-focus: #5b3fb8;\n  --color-shadow: rgb(24 16 56 / 0.1);\n  --color-overlay: rgb(32 24 64 / 0.55);\n}\n\n/* @part type */\n:root {\n  --font-body: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n  --font-heading: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n  --font-ui: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n  --font-mono: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 18px;\n  --text-display: 40px;\n  --text-h1: 28px;\n  --text-h2: 20px;\n  --text-h3: 15px;\n  --line-body: 1.6;\n  --line-heading: 1.3;\n  --line-display: 1.2;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: dotted;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n  --shadow-dialog: 0 0 0 3px var(--color-surface), 0 0 0 4px var(--color-border-strong);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface-alt);\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-surface);\n  --focus-ring: 1px dashed var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}