{
  "id": "v1-bg-2222",
  "long_id": "v1.bento-grids.landing.s02.p02.t02.u02",
  "name": "Profile bento, 2023",
  "era": {
    "slug": "bento-grids",
    "code": "bg",
    "name": "Bento grids",
    "years": [
      2022,
      2026
    ],
    "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page."
  },
  "archetype": "landing",
  "mode": "pure",
  "viewport": {
    "width": 1440,
    "fluid": false
  },
  "summary": "A profile page built as a bento: the product (or person) is introduced once, in a fixed column at the left with a round mark, a name and a two-line bio, and everything else it has to say is a small rounded tile in a dense grid at the right. Tiles are squares of about 184px with a few double-wide, double-tall and two-by-two ones among them, each holding one thing: an icon, a short title, a caption and a small button or figure. The form was common on link-in-bio pages, personal sites and small product pages from about 2022 to 2026.",
  "url": "https://chrono.skin/s/v1-bg-2222",
  "preview_url": "https://chrono.skin/s/v1-bg-2222/specimen.html",
  "files": {
    "STYLE.md": "# Profile bento, 2023\n\n## Summary\n\nA profile page built as a bento: the product (or person) is introduced once, in a fixed column at the left with a round mark, a name and a two-line bio, and everything else it has to say is a small rounded tile in a dense grid at the right. Tiles are squares of about 184px with a few double-wide, double-tall and two-by-two ones among them, each holding one thing: an icon, a short title, a caption and a small button or figure. The form was common on link-in-bio pages, personal sites and small product pages from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred frame: `--size-page` is 1200px, designed at a 1440px viewport, padded by `--space-5` on narrow screens. `.ds-layout` splits it into two columns: `.ds-layout__side`, `--size-side` 320px wide, and `.ds-layout__main`, 808px, with `--space-gutter` (72px) between them and `--space-8` (64px) above and below.\n- The side column never has a box around it. On the home view it shows the `.ds-hero` (the profile: mark, name, bio, two buttons, a 12px note), which is written inside the home view, and under it, `--space-6` lower and after a hairline, the `.ds-nav` as a vertical list. The menu is written once, after the views, in `.ds-layout__side`; the columns are set with floats (the profile and the side block float left, each view's `.ds-layout__main` floats right) so the menu comes to rest under the profile. On inner views the side block is sticky (`top: --space-8`); on the home view profile and menu scroll with the page. There is no navigation bar at the top of the page and no centred hero.\n- The main column is one `.ds-grid` of four equal tracks (184px at full width). Rows are `--size-tile` (184px) tall, so a plain tile is a square. `--wide` takes two tracks, `--tall` two rows, `--big` two by two, `--wider` three tracks, `--full` all four. Every screenful mixes at least three of these shapes; a `--big` tile sits at the left edge with a `--tall` tile and two squares beside it. `.ds-grid--auto` lets rows follow their content when tiles hold components instead of links.\n- Dense: the gap between tiles is `--space-gap` (24px) in both directions and the padding inside a tile is `--space-cell` (20px). A square tile holds an icon, a title of at most three words, one caption line and a foot; longer content needs a wider tile.\n- Spacing scale: `--space-1` 4px (pill padding, title to caption), `--space-2` 8px (button gap, nav and sidebar item padding), `--space-3` 12px (icon to title, list row padding, table cell padding), `--space-4` 16px (stack gap inside a tile, section label to tiles, toolbar to tiles), `--space-5` 24px (page gutter, mark to name, bio to buttons, panel padding), `--space-6` 32px (between blocks of the side column, footer padding), `--space-7` 48px (above a section label), `--space-8` 64px (top and bottom of the frame, dialog stage), `--space-9` 96px (textarea height).\n- Controls are `--size-control` (34px) tall, `--size-control-large` (44px) under the profile and `--size-control-small` (28px) for the button in a tile's foot; icon tiles are `--size-icon` (36px) with a `--size-glyph` (18px) line icon; the profile mark is `--size-avatar` (112px).\n- A group of tiles may be introduced by a `.ds-section__head`: a left-aligned `--text-h3` label with one grey line beside it, `--space-7` above and `--space-4` below. It is never centred.\n- Inner pages keep the two columns and drop the profile: an inner view has no `.ds-hero`, and the side column shows a small `.ds-sidebar__back` (a 36px mark and the name, linking home) above the same `.ds-nav`; nothing else replaces the hero. The main column opens with the `.ds-breadcrumb`, then the `.ds-page-header` (title at `--text-h2`, one grey line, buttons at the right), then an optional `.ds-toolbar` with the `.ds-tabs` pill at the left and a count at the right, `--space-4` above a `.ds-grid--auto`. The working table takes a `--full` `--flush` tile and reaches the tile's edges, with its pagination in a `.ds-grid__bar` under it; a form takes a `--wider` tile with a square note beside it; messages, lists and an empty state take `--wide` tiles in pairs; a `.ds-sidebar` is a one-track tile; a dialog stage takes `--full`.\n- Views: `home` is the overview (the link tiles, the stats row, the shelf list, the chart and the call to action); `library` is every book (tabs, the table with pagination, messages and the empty state for lent books); `book` is one book (the shelf menu as a `.ds-sidebar` tile, progress, the action buttons, notes, shelf settings and the dialog that marks it finished); `add` is the form for a new book with the shelf counts beside it; `guide` is the short guide (prose, links, the label legend and two panels). Each view has its own row in the navigation.\n- `.ds-footer` is a single line under both columns: name and a 12px note at the left, four quiet links at the right, a hairline above.\n- Below 960px the page is one column: the navigation comes first as a wrapping row, then the profile on the home view, then the tiles; nothing is sticky; below 600px the grid has two tracks with a 16px gap, every tile wider than a square (and a lone square marked `--solo`) takes both, the page header's buttons go under its text. Below 600px a table hides the columns marked `.ds-table__extra` and scrolls sideways inside `.ds-table__scroll` if it still does not fit; a row's first cell holds a `.ds-table__link` to its detail view.\n\n## Typography and colour roles\n\n- The page is white: `--color-page`, `--color-canvas` and `--color-bar` are `#ffffff`. Cells are a pale grey step, `--color-surface` `#f6f6f6`; panels, the dialog and current navigation items take `--color-surface-alt` `#ececec`; the current tab, neutral badges, chart bars and inline code take `--color-surface-strong` `#dddddd`.\n- Text is black on pale: `--color-heading` `#000000`, `--color-text` and `--color-heading-alt` `#333333`, `--color-text-muted` and `--color-link-quiet` `#6f6f6f` for every caption and navigation link.\n- The primary button is a black block (`--color-button` `#000000`, `--color-button-text` `#ffffff`); the secondary button is white (`--color-button-secondary` `#ffffff`) with its label in the body grey (`--color-button-secondary-text` `#333333`) and is held by its hairline. `--color-inverse` `#000000` is the button on the accent cell and the knob of a switched-on toggle.\n- One coloured accent, periwinkle `--color-accent` / `--color-link` / `--color-focus` `#5871ff` with white text: links, icons, the round profile mark, the accent badge, the highlighted chart bar and the call-to-action tile. `--color-accent-alt` and `--color-success` `#37996b` mark \"new\", passed checks and switched-on toggles.\n- Feature tiles are tinted with four pale washes laid flat over the whole tile: `--color-fill-1` `#e8f8fc` (blue), `--color-fill-2` `#fcf4f0` (peach), `--color-fill-3` `#fcfcf0` (yellow), `--color-fill-4` `#fcf0f0` (pink). Body text stays `#333333` on all of them.\n- Hairlines are black at low alpha so they work on white and on a tint: `--color-border` 6%, `--color-border-strong` 10%, `--color-border-muted` 4%; inputs take the solid `--color-input-border` `#aaaaaa`.\n- Status: `--color-warning` `#fc6418`, `--color-danger` `#fc0000` on `--color-danger-surface` `#fcf0f0`; the notice is `--color-notice` `#e8f8fc` with `--color-notice-text` `#005c7c`. `--color-shadow` is `#000000`, `--color-overlay` black at 30%.\n- One geometric sans for `--font-body`, `--font-heading` and `--font-ui`: Manrope first, then Avenir Next and the Helvetica fallbacks. `--font-mono` (Source Code Pro, Menlo) is for code only.\n- Everything is set light. `--weight-body`, `--weight-heading`, `--weight-display` and `--weight-ui` are all 400; `--weight-bold` 500 is the only emphasis. Hierarchy comes from size and colour, never from weight.\n- The largest text is thin: `--text-display` 72px at `--line-display` 1 is kept for one big figure (`.ds-stat--display`) in a tile; the profile name in the side column is `--text-h1`. Headings step down quickly: `--text-h1` 34px, `--text-h2` 24px (the title of an inner page), `--text-h3` 18px (the label between two groups of tiles) at `--line-heading` 1.3.\n- `--text-base` 15px at `--line-body` 1.5; `--text-large` 18px for the profile bio; tile titles are `--text-base` in `--color-heading`; `--text-small` and `--text-ui` 14px for captions, navigation, buttons, tables and forms.\n- No tracking and no transforms (`--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none). Links carry no underline (`--link-decoration` none) and gain one on hover.\n- Tight corners: `--radius-page` 12px on tiles, `--radius-panel` 8px on panels, tables, notices and the dialog, `--radius-control` 6px on buttons, inputs and icon tiles; `--radius-pill` for badges, tabs and switches.\n- Cells are outlined, not lifted: `--shadow-panel` is a 1px ring of `--color-border-strong` plus a 3px blur of `--color-shadow` at 10%, drawn outside the `--border-width` 1px hairline, so a tile has a double hairline on any palette. `--border-width-strong` 2px is the focus ring only; `--focus-ring` is `--color-focus` at 60%.\n- `--fill-panel` is the flat `--color-surface`: a tile is told from the page by its outline, not by lighting. A pressed button takes a 2px inset shade (`--shadow-control-pressed`).\n- Controls are flat: `--fill-button` and `--fill-button-secondary` are the plain colours, `--shadow-control` is a 2px blur at 5%, and `--fill-button-hover` moves the button 15% toward its own text colour. `--shadow-dialog` is a 15px blur at 10%.\n- The side menu has no fill of its own: it sits on the page, so `--fill-bar` and `--color-bar` are not painted by this layout. `--transition` is a 0.1s fade of colours and shadow; nothing moves.\n- The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, list meta, the note under the profile, the footer line. Code in a tile is `calc(var(--text-small) * 0.886)`.\n- Which text sits on which fill: `--color-heading` and `--color-link-quiet` on the navigation and the brand name, which sit on the bare page (current item on `--color-surface-alt`); `--color-heading`, `--color-text` and `--color-text-muted` on the page, on tiles and on the four `--color-fill-*` tiles; `--color-accent-text` on the accent tile and the profile mark; `--color-bar-alt-text` on the table head and the tab row; `--color-text` on table rows, which are `--color-page`; `--color-inverse-text` only on the `--inverse` button.\n- One-off mixes written in `components.css` because no token exists: the button hairline (25% button text in the button colour), the `--new` and status badges (the colour at 14% with a 30% hairline), the danger button's hairline (danger at 45%) and hover fill, notice borders.\n\n## Components\n\n- `.ds-page` on `<body>`: sets the page fill, family and body size. `.ds-page__inner` is the 1200px frame. `.ds-layout` is the two-column split: every view wraps its tiles in `.ds-layout__main`, and `.ds-layout__side` follows the views; `--page` starts an inner page with a hairline above.\n- `.ds-nav`: a vertical menu in the side column under the profile, with a hairline above it. `.ds-nav__links` holds `.ds-nav__link` rows (current: `is-current`, a filled row; a count badge may sit at the right); `.ds-nav__foot` closes it with the small `.ds-brand` and `.ds-nav__actions` holding one small secondary button.\n- `.ds-brand`: the site's mark and name, in the foot of the side menu, beside the log-in button. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 1px hairline, `--radius-control`, `--shadow-control`), so it takes on every palette and surface; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in the heading family at 14px, with the heading weight, tracking and transform, in `--color-heading`, because it sits on the page. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: the profile, left-aligned on the bare page. `.ds-hero__avatar` (a round accent mark with a `.ds-hero__glyph`), `.ds-hero__title` at `--text-h1`, `.ds-hero__lead`, `.ds-hero__actions` with one primary and one secondary large button, `.ds-hero__note`. One per site, home page only.\n- `.ds-section__head`: left-aligned label between two groups of tiles, with `.ds-section__title` and `.ds-section__lead`.\n- `.ds-grid`: the tiles. Children are `.ds-grid__cell` with shape variants `--wide`, `--tall`, `--big`, `--wider`, `--full`; `--stack` (16px between children), `--center`, `--flush` (no padding, for a table); fill variants `--fill-1` to `--fill-4` (flat tints), `--accent` (the call to action, with a `.ds-button--inverse`), `--bare` (outline only). Inside: `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__foot` (pushed to the bottom: a small button and a badge), `.ds-grid__visual` (pushed to the bottom: a list, rows or a chart), `.ds-grid__split` (a figure beside a chart) and `.ds-grid__bar` (a padded strip above or below a flush table). `.ds-grid--auto` is for tiles that hold components.\n- Tile visuals: `.ds-chart` of `.ds-chart__bar` (`--2` to `--5` set the height, `is-current` the accent), `.ds-code` with `.ds-code__key` and `.ds-code__str`, `.ds-checks` of `.ds-checks__item` with `.ds-checks__mark`, `.ds-chips`, `.ds-rows` of `.ds-rows__item` with a `.ds-switch` (`is-on`) or a small button.\n- `.ds-page-header`: head of an inner page at the top of the main column: `.ds-page-header__copy` with `.ds-page-header__title` and `.ds-page-header__text`, `.ds-page-header__actions` at the right. Put the `.ds-breadcrumb` above it; never use it beside a `.ds-hero`.\n- `.ds-stat`: one figure: `.ds-stat__label` above `.ds-stat__value` (`--text-h1`, tabular figures, optional `.ds-stat__unit`), optional `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row: it spans the whole grid and repeats its four tracks, and each `.ds-stat` in it is a small tile with the label at the top and the figure at the bottom. `.ds-stat--display` raises one figure to `--text-display` inside a wide tile.\n- `.ds-prose`: long-form text in a `--wider` tile; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey links. `.ds-links` lays several out; `--stack` puts them in a column for a square tile.\n- `.ds-button`: primary. `--secondary` is held by a hairline, `--danger` is the destructive action (danger text on `--color-danger-surface` with a danger hairline, never a solid block), `--inverse` only on the accent tile, `--large` under the profile, `--small` in a tile's foot. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` groups them; `--stack` makes a full-width column for a square tile.\n- `.ds-badge`: 12px pill. `--accent` filled, `--new` tinted, `--count` a square-cornered number; optional `.ds-badge__dot`. Status labels are `--success`, `--warning` and `--danger`: coloured text on a 14% tint with a 30% hairline, used in a table's status column.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full` spans both) with `.ds-form__label` and `.ds-form__control` (`--area`; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`. It lives in a `--wide` tile.\n- `.ds-table`: fills a `--full` `--flush` tile edge to edge; no border of its own, the tile's corners clip it. Tinted head, hairline rows on the page colour; `.ds-table__num` right-aligns numbers, `.ds-table__muted` greys a column, `tr.is-current` lifts a row.\n- `.ds-list`: one line per `.ds-list__item`: `.ds-list__title` at the left, `.ds-list__meta` at the right, an optional 12px `.ds-list__text` under them; hairlines between rows. It lives in a `--big` tile.\n- `.ds-panel`: a small card inside a tile with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented pill of `.ds-tabs__tab`; `is-current` is the filled segment. `.ds-toolbar` puts it on one line with a count, on the bare page under the page header.\n- `.ds-sidebar`: a section menu inside a view, as a one-track tile: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled). `.ds-sidebar__back` with `.ds-sidebar__avatar` is the small way home at the top of the side column on inner views.\n- `.ds-notice`: information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the danger variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items; `is-current` filled with a hairline, `is-disabled` greyed. It sits in the `.ds-grid__bar` under a table.\n- `.ds-breadcrumb`: trail of `.ds-breadcrumb__item` separated by slashes; the last carries `is-current`. First thing in the main column of an inner page.\n- `.ds-dialog`: box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with `.ds-dialog__glyph`), `.ds-dialog__body` and `.ds-dialog__actions`, shown on a `.ds-stage`, a `--full` tile filled with `--color-overlay`.\n- `.ds-empty`: centred icon, `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` tile.\n- `.ds-footer`: one line: `.ds-footer__inner` with `.ds-footer__brand`, `.ds-footer__text` and a `.ds-footer__list` of `.ds-footer__link`.\n\n## Never\n\n- `content-width <= 1200px`: content stays in the centred two-column frame, 320px profile plus 808px of tiles.\n- `block-gap <= 48px`: tiles sit 24px apart; the largest gap between stacked blocks is the 48px above a section label.\n- `palette-colours <= 36`: one neutral ramp, one periwinkle, one green and four pale washes; no further hues.\n- `font-weight <= 500`: all text is regular; 500 is the only emphasis.\n- `font-size <= 72px`: the hero heading is the largest text, 72px.\n- `font-size >= 12px`: the smallest text is 12px.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `underlined-links <= 1%`: links are told apart by colour; underline appears only on hover.\n- `line-height <= 1.6`: body text sits at 1.5.\n- `uppercase-text <= 1%`: nothing is set in capitals.\n- `border-radius <= 12px`: corners are tight; the largest box radius is the 12px cell.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `box-shadow-blur <= 15px`: shadows are rings and short blurs; the largest is the dialog's 15px.\n- `text-shadow = none`: no text shadows.\n- `animation = none`: nothing animates.\n- `gradient-fills <= 30%`: tiles are flat; no token of this pack is a gradient.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new thing to show is a new tile: pick the smallest shape that holds it (a square for a link, `--wide` for a sentence and a button, `--big` for a list), give it an icon, a short title, one caption and a foot. Anything about the product as a whole goes in the side column, never in a bar across the top. Use tokens only: fills are `--fill-panel` or a flat `--color-fill-*`, outlines are `--border-width` in `--color-border`, corners are `--radius-page` for tiles, `--radius-panel` inside them and `--radius-control` for controls, spacing comes from the `--space-*` scale. Keep one subject per tile, separate tiles with the gap and never with a rule, and do not add a top navigation bar, a centred hero or a full-width band.\n",
    "components.css": "/* Layout tokens (structure part): profile bento. A fixed profile column and a dense grid of small tiles */\n:root {\n  --size-page: 1200px;\n  --size-side: 320px;\n  --size-tile: 184px;\n  --size-avatar: 112px;\n  --size-measure: 560px;\n  --size-control: 34px;\n  --size-control-large: 44px;\n  --size-control-small: 28px;\n  --size-icon: 36px;\n  --size-glyph: 18px;\n  --size-check: 16px;\n  --size-dot: 8px;\n  --size-chart: 64px;\n  --size-switch: 32px;\n  --size-knob: 14px;\n  --size-dialog: 420px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 64px;\n  --space-9: 96px;\n  --space-gap: 24px;\n  --space-cell: 20px;\n  --space-gutter: 72px;\n}\n\n/* shell */\n.ds-page {\n  margin: 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  -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-page__inner {\n  width: 100%;\n  max-width: calc(var(--size-page) + var(--space-5) * 2);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\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/* layout: the two columns of every page, set with floats so that the navigation, written once after the\n   views, comes to rest under the profile, which belongs to the home view */\n.ds-layout {\n  display: flow-root;\n  padding: var(--space-8) 0;\n}\n.ds-layout__main {\n  float: right;\n  width: calc(100% - var(--size-side) - var(--space-gutter));\n  min-width: 0;\n}\n/* the side column: a small way back and the menu. It stays put while the tiles of an inner page scroll */\n.ds-layout__side {\n  position: sticky;\n  top: var(--space-8);\n  float: left;\n  clear: left;\n  display: grid;\n  gap: var(--space-6);\n  width: var(--size-side);\n  min-width: 0;\n}\n/* on the home view the profile stands above the menu and both scroll with the page; the way back is not needed */\n.ds-page:not(:has(.ds-view:not(.ds-view--home):target)) .ds-layout__side {\n  position: static;\n}\n.ds-page:not(:has(.ds-view:not(.ds-view--home):target)) .ds-sidebar__back {\n  display: none;\n}\n\n/* hero: the profile. A round mark, the name, a short bio and the main action, left-aligned in the side column */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  float: left;\n  width: var(--size-side);\n  margin-bottom: var(--space-6);\n}\n.ds-hero__avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n}\n.ds-hero__glyph {\n  width: 44%;\n  height: 44%;\n}\n.ds-hero__title {\n  margin: var(--space-5) 0 0;\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  color: var(--color-heading);\n}\n.ds-hero__lead {\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.5;\n  color: var(--color-text-muted);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin-top: var(--space-5);\n}\n.ds-hero__note {\n  margin: var(--space-4) 0 0;\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-text-muted);\n}\n\n/* nav: a vertical list under the profile, closed by a small brand row */\n.ds-nav {\n  padding-top: var(--space-5);\n  color: var(--color-heading);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__links {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0 calc(var(--space-3) * -1);\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.2;\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  color: var(--color-link-quiet);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-heading);\n}\n/* the current view marks its navigation item */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#library:target) .ds-nav__link[href=\"#library\"],\n.ds-page:has(#book:target) .ds-nav__link[href=\"#book\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-nav__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-5);\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-glyph) + var(--space-1));\n  height: calc(var(--size-glyph) + var(--space-1));\n  background: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\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  font-family: var(--font-heading);\n  font-size: var(--text-small);\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-heading);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* section head: a small left-aligned label between two groups of tiles */\n.ds-section__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  margin: var(--space-7) 0 var(--space-4);\n}\n.ds-section__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-section__lead {\n  margin: 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* page header: the head of an inner page, at the top of the main column */\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4) var(--space-5);\n  margin: 0 0 var(--space-5);\n}\n.ds-page-header__copy {\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-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-page-header__text {\n  max-width: var(--size-measure);\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* grid: four tracks of small square tiles; wide, tall and big tiles break the rhythm */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  grid-auto-rows: minmax(var(--size-tile), auto);\n  grid-auto-flow: dense;\n  gap: var(--space-gap);\n}\n.ds-grid--auto {\n  grid-auto-rows: auto;\n}\n.ds-grid__cell {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-cell);\n  overflow: hidden;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--wide {\n  grid-column: span 2;\n}\n.ds-grid__cell--wider {\n  grid-column: span 3;\n}\n.ds-grid__cell--full {\n  grid-column: 1 / -1;\n}\n.ds-grid__cell--tall {\n  grid-row: span 2;\n}\n.ds-grid__cell--big {\n  grid-column: span 2;\n  grid-row: span 2;\n}\n.ds-grid__cell--center {\n  align-items: center;\n  text-align: center;\n}\n/* a single small tile that takes the full row on a phone */\n.ds-grid__cell--solo {\n  min-width: 0;\n}\n.ds-grid__cell--stack {\n  gap: var(--space-4);\n}\n.ds-grid__cell--flush {\n  padding: 0;\n}\n.ds-grid__cell--fill-1 {\n  background: var(--color-fill-1);\n}\n.ds-grid__cell--fill-2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--fill-3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--fill-4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__cell--accent {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: transparent;\n}\n.ds-grid__cell--bare {\n  background: transparent;\n  box-shadow: none;\n  border-color: var(--color-border-strong);\n}\n.ds-grid__icon {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-bottom: var(--space-3);\n  background: var(--color-page);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n}\n.ds-grid__glyph {\n  width: var(--size-glyph);\n  height: var(--size-glyph);\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__title {\n  font-size: var(--text-h3);\n  color: var(--color-accent-text);\n}\n.ds-grid__cell--accent .ds-grid__text {\n  color: var(--color-accent-text);\n  opacity: 0.85;\n}\n.ds-grid__visual {\n  width: 100%;\n  margin-top: auto;\n  padding-top: var(--space-4);\n}\n.ds-grid__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin-top: auto;\n  padding-top: var(--space-3);\n}\n.ds-grid__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-cell);\n}\n.ds-grid__bar + .ds-table,\n.ds-table__scroll + .ds-grid__bar {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* small things that live inside cells */\n.ds-chart {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n  height: var(--size-chart);\n}\n.ds-chart__bar {\n  flex: 1;\n  height: 30%;\n  background: var(--color-surface-strong);\n  border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar--2 {\n  height: 45%;\n}\n.ds-chart__bar--3 {\n  height: 60%;\n}\n.ds-chart__bar--4 {\n  height: 75%;\n}\n.ds-chart__bar--5 {\n  height: 100%;\n}\n.ds-chart__bar.is-current {\n  background: var(--fill-accent);\n}\n.ds-stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n  margin: 0;\n}\n.ds-stat__label {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-stat__value {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-heading);\n}\n.ds-stat__unit {\n  font-size: var(--text-h3);\n  color: var(--color-text-muted);\n}\n.ds-stat__note {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  font-size: calc(var(--text-small) * 0.857);\n  line-height: 1.34;\n  color: var(--color-text-muted);\n}\n.ds-stat__note--success {\n  color: var(--color-success);\n}\n.ds-stat__note--warning {\n  color: var(--color-warning);\n}\n.ds-stat__note--danger {\n  color: var(--color-danger);\n}\n.ds-stat--display .ds-stat__value {\n  font-size: var(--text-display);\n}\n.ds-stat--display .ds-stat__unit {\n  font-size: var(--text-h2);\n}\n\n.ds-code {\n  margin: 0;\n  padding: var(--space-4);\n  overflow: hidden;\n  background: var(--color-page);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-mono);\n  font-size: calc(var(--text-small) * 0.886);\n  line-height: 1.6;\n  white-space: pre;\n}\n.ds-code__key {\n  color: var(--color-accent-alt);\n}\n.ds-code__str {\n  color: var(--color-link);\n}\n.ds-checks {\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  color: var(--color-text);\n}\n.ds-checks__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-checks__mark {\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  color: var(--color-accent-alt);\n}\n.ds-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n.ds-grid__cell--center .ds-chips {\n  justify-content: center;\n}\n.ds-rows {\n  display: grid;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-rows__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch {\n  position: relative;\n  flex: none;\n  width: var(--size-switch);\n  height: calc(var(--size-knob) + var(--space-1));\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n}\n.ds-switch::after {\n  content: \"\";\n  position: absolute;\n  top: calc(var(--space-1) / 2);\n  left: calc(var(--space-1) / 2);\n  width: var(--size-knob);\n  height: var(--size-knob);\n  background: var(--color-text-muted);\n  border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n  background: var(--color-accent-alt);\n}\n.ds-switch.is-on::after {\n  left: auto;\n  right: calc(var(--space-1) / 2);\n  background: var(--color-inverse);\n}\n\n/* typography */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\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  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-prose ul {\n  padding-left: var(--space-5);\n}\n.ds-prose li + li {\n  margin-top: var(--space-1);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n  color: var(--color-text);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-radius: calc(var(--radius-control) / 2);\n  font-family: var(--font-mono);\n  font-size: 87.5%;\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\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  border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  font-size: var(--text-small);\n}\n\n/* buttons: small, control corners, a hairline one step lighter than the fill */\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  padding: 0 var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\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: 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  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: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\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: calc(var(--space-1) / 2);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n  background: var(--color-surface);\n}\n.ds-button--danger {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 20%, var(--color-danger-surface));\n  color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n  background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: var(--color-heading-alt);\n  color: var(--color-inverse-text);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-5);\n  font-size: var(--text-base);\n}\n.ds-button--small {\n  min-height: var(--space-6);\n  padding: 0 var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: var(--color-border);\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: calc(var(--text-small) * 0.857);\n  font-weight: var(--weight-ui);\n  line-height: 1.34;\n  white-space: nowrap;\n  text-decoration: none;\n}\n.ds-badge--accent {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: transparent;\n}\n.ds-badge--new {\n  background: color-mix(in srgb, var(--color-accent-alt) 14%, transparent);\n  color: var(--color-accent-alt);\n  border-color: color-mix(in srgb, var(--color-accent-alt) 30%, transparent);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 14%, transparent);\n  color: var(--color-success);\n  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n  color: var(--color-warning);\n  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n  color: var(--color-danger);\n  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n  padding: var(--space-1) var(--space-2);\n  border-radius: var(--radius-control);\n  font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n  width: var(--size-dot);\n  height: var(--size-dot);\n  background: var(--color-accent-alt);\n  border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n  background: currentColor;\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  align-content: start;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__field--full {\n  grid-column: 1 / -1;\n}\n.ds-form__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.2;\n  color: var(--color-text);\n}\n.ds-form__control {\n  width: 100%;\n  min-height: var(--size-control);\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-ui);\n  font-size: var(--text-ui);\n  line-height: 1.4;\n  transition: var(--transition);\n}\n.ds-form__control::placeholder {\n  color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n  min-height: var(--space-9);\n  resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n  border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__hint {\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-text-muted);\n}\n.ds-form__error {\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-danger);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  grid-column: 1 / -1;\n}\n\n/* panel: the small card with panel corners; sits inside a cell */\n.ds-panel {\n  min-width: 0;\n  padding: var(--space-5);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  line-height: 1.4;\n  color: var(--color-heading-alt);\n}\n.ds-panel__body {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-panel__meta {\n  display: block;\n  margin-top: var(--space-4);\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-text-muted);\n}\n.ds-panels {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-3);\n}\n\n/* tabs: a segmented pill */\n.ds-tabs {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-1);\n  list-style: none;\n  background: var(--fill-bar-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.2;\n  color: var(--color-bar-alt-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n/* notice */\n.ds-notice {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 20%, transparent);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-small);\n}\n.ds-notice__title {\n  display: block;\n  font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n  margin: 0;\n  opacity: 0.8;\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-text);\n  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n  color: var(--color-danger);\n}\n.ds-notices {\n  display: grid;\n  gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--space-6);\n  min-height: var(--space-6);\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  color: var(--color-link-quiet);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n  background: var(--color-surface-alt);\n}\n.ds-pagination__link.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin-right: var(--space-2);\n  color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n  color: var(--color-text);\n}\n\n/* dialog: a lifted box on a dimmed stage */\n.ds-dialog {\n  width: 100%;\n  max-width: var(--size-dialog);\n  background: var(--color-surface-alt);\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__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-heading);\n  color: var(--color-heading);\n}\n.ds-dialog__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-6);\n  height: var(--space-6);\n  padding: 0;\n  background: transparent;\n  color: var(--color-text-muted);\n  border: 0;\n  border-radius: var(--radius-control);\n  cursor: pointer;\n}\n.ds-dialog__glyph {\n  width: var(--size-check);\n  height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-dialog__body {\n  padding: var(--space-5);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-8) var(--space-5);\n  background: var(--color-overlay);\n}\n\n/* empty state: an empty cell with only an outline */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  color: var(--color-heading);\n}\n.ds-empty__text {\n  max-width: 36ch;\n  margin: var(--space-1) 0 var(--space-5);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n\n/* small button: the follow button of a tile */\n.ds-button--small {\n  min-height: var(--size-control-small);\n}\n.ds-buttons--stack {\n  flex-direction: column;\n  align-items: stretch;\n}\n.ds-links--stack {\n  flex-direction: column;\n}\n\n/* stats: a row of four small tiles, one figure each, label on top and figure at the bottom */\n.ds-stats {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stats .ds-stat {\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-cell);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n\n/* table: fills its tile edge to edge; the tile's corners are the table's corners */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-small);\n  text-align: left;\n}\n.ds-table th {\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-weight: var(--weight-ui);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-page);\n  color: var(--color-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th:first-child,\n.ds-table td:first-child {\n  padding-left: var(--space-cell);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n  padding-right: var(--space-cell);\n}\n.ds-table tr.is-current td {\n  background: var(--color-surface);\n}\n.ds-table__scroll {\n  max-width: 100%;\n  overflow-x: auto;\n}\n.ds-table .ds-table__link {\n  font-weight: var(--weight-bold);\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n  color: var(--color-link);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n  color: var(--color-text-muted);\n}\n\n/* list: one line per item, title at the left and meta at the right */\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: minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: 0 var(--space-3);\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n  padding-bottom: 0;\n}\n.ds-list__title {\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link);\n}\n.ds-list__text {\n  grid-column: 1 / -1;\n  margin: 0;\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-text-muted);\n}\n.ds-list__meta {\n  font-size: calc(var(--text-small) * 0.857);\n  color: var(--color-text-muted);\n  white-space: nowrap;\n}\n\n/* sidebar: the section menu of an inner page, on the bare page in the side column */\n.ds-sidebar {\n  font-size: var(--text-small);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-heading);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  display: grid;\n  gap: var(--space-1);\n  margin: 0 calc(var(--space-3) * -1);\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n  font-size: var(--text-small);\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n}\n.ds-sidebar__back {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  color: var(--color-heading);\n  text-decoration: none;\n}\n.ds-sidebar__avatar {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n}\n\n/* footer: one quiet line under the two columns */\n.ds-footer {\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-6);\n  max-width: calc(var(--size-page) + var(--space-5) * 2);\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-5);\n}\n.ds-footer__brand {\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  color: var(--color-heading);\n}\n.ds-footer__text {\n  margin: 0;\n  font-size: calc(var(--text-small) * 0.857);\n}\n.ds-footer__list {\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.ds-footer__link {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  color: var(--color-link-hover);\n}\n\n.ds-view > .ds-toolbar {\n  margin: 0 0 var(--space-4);\n}\n.ds-grid__split {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n}\n.ds-grid__split .ds-chart {\n  flex: 1;\n}\n\n@media (max-width: 960px) {\n  .ds-layout {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-6);\n    padding: var(--space-6) 0;\n  }\n  .ds-layout__main,\n  .ds-hero {\n    float: none;\n    width: auto;\n  }\n  .ds-layout__side {\n    position: static;\n    float: none;\n    order: -1;\n    gap: var(--space-5);\n    width: auto;\n  }\n  .ds-page:not(:has(.ds-view:not(.ds-view--home):target)) .ds-nav {\n    padding-top: 0;\n    border-top: 0;\n  }\n  .ds-nav {\n    padding-top: var(--space-4);\n  }\n  .ds-nav__links {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .ds-nav__foot {\n    margin-top: var(--space-4);\n  }\n}\n@media (max-width: 600px) {\n  .ds-page__inner {\n    padding: 0 var(--space-4);\n  }\n  .ds-grid,\n  .ds-stats {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-4);\n  }\n  .ds-grid__cell--wider,\n  .ds-grid__cell--wide,\n  .ds-grid__cell--solo,\n  .ds-grid__cell--big {\n    grid-column: 1 / -1;\n  }\n  .ds-table .ds-table__num {\n    white-space: nowrap;\n  }\n  .ds-grid__cell--tall,\n  .ds-grid__cell--big {\n    grid-row: auto;\n  }\n  .ds-form,\n  .ds-panels {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-table .ds-table__extra {\n    display: none;\n  }\n  .ds-page-header__copy {\n    flex-basis: 100%;\n  }\n  .ds-tabs {\n    max-width: 100%;\n    overflow-x: auto;\n  }\n  .ds-tabs__tab {\n    white-space: nowrap;\n  }\n  .ds-pagination,\n  .ds-form__actions,\n  .ds-dialog__actions {\n    flex-wrap: wrap;\n  }\n  .ds-stage {\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-prose h1 {\n    font-size: var(--text-h2);\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, profile bento 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<main>\n  <div class=\"ds-page__inner\">\n    <div class=\"ds-layout\">\n      <section class=\"ds-view ds-view--home\" id=\"home\">\n      <section class=\"ds-hero\" data-component=\"hero\">\n        <span class=\"ds-hero__avatar\"><svg class=\"ds-hero__glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h6a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h6z\"/></svg></span>\n        <h1 class=\"ds-hero__title\">chronoskin</h1>\n        <p class=\"ds-hero__lead\">A reading log for people who finish one book at a time. Shelves, notes and a gentle nudge at nine.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#add\">Start a shelf</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#guide\">Take the tour</a>\n        </div>\n        <p class=\"ds-hero__note\">Free for one shelf. No account needed to look around.</p>\n      </section>\n        <div class=\"ds-layout__main\">\n        <div class=\"ds-grid\" data-component=\"grid\">\n          <article class=\"ds-grid__cell ds-grid__cell--fill-1\">\n            <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"5.5\" y=\"2\" width=\"9\" height=\"16\" rx=\"2\"/><path d=\"M9 15.5h2\"/></svg></span>\n            <h2 class=\"ds-grid__title\">Phone app</h2>\n            <p class=\"ds-grid__text\">Log a page count</p>\n            <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#add\">Get</a></div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--fill-2\">\n            <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"2\" y=\"4\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M7 17h6\"/></svg></span>\n            <h2 class=\"ds-grid__title\">Desktop</h2>\n            <p class=\"ds-grid__text\">Notes beside the text</p>\n            <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#library\">Open</a></div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--wide\">\n            <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"2\" y=\"4\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"m3 6 7 5 7-5\"/></svg></span>\n            <h2 class=\"ds-grid__title\">The Sunday letter</h2>\n            <p class=\"ds-grid__text\">Three books worth an evening, sent once a week.</p>\n            <div class=\"ds-grid__foot\">\n              <a class=\"ds-button ds-button--small\" href=\"#guide\">Subscribe</a>\n              <span class=\"ds-badge\">4,120 readers</span>\n            </div>\n          </article>\n\n          <ul class=\"ds-stats\" data-component=\"stats\">\n            <li class=\"ds-stat\">\n              <span class=\"ds-stat__label\">Books this year</span>\n              <span class=\"ds-stat__value\">31</span>\n            </li>\n            <li class=\"ds-stat\">\n              <span class=\"ds-stat__label\">Pages a day</span>\n              <span class=\"ds-stat__value\">46</span>\n            </li>\n            <li class=\"ds-stat\">\n              <span class=\"ds-stat__label\">Longest streak</span>\n              <span class=\"ds-stat__value\">88<span class=\"ds-stat__unit\"> d</span></span>\n            </li>\n            <li class=\"ds-stat\">\n              <span class=\"ds-stat__label\">Notes kept</span>\n              <span class=\"ds-stat__value\">412</span>\n            </li>\n          </ul>\n\n          <article class=\"ds-grid__cell ds-grid__cell--big\">\n            <h2 class=\"ds-grid__title\">On the shelf now</h2>\n            <p class=\"ds-grid__text\">What the team is reading this month.</p>\n            <div class=\"ds-grid__visual\">\n              <ul class=\"ds-list\" data-component=\"list\">\n                <li class=\"ds-list__item\">\n                  <a class=\"ds-list__title\" href=\"#book\">The Salt Road</a>\n                  <span class=\"ds-list__meta\">p. 212 of 340</span>\n                  <p class=\"ds-list__text\">Novel &middot; started 3 May</p>\n                </li>\n                <li class=\"ds-list__item\">\n                  <a class=\"ds-list__title\" href=\"#book\">A Field Guide to Quiet</a>\n                  <span class=\"ds-list__meta\">p. 64 of 188</span>\n                  <p class=\"ds-list__text\">Essays &middot; started 9 May</p>\n                </li>\n                <li class=\"ds-list__item\">\n                  <a class=\"ds-list__title\" href=\"#book\">Harbour Lights</a>\n                  <span class=\"ds-list__meta\">p. 18 of 402</span>\n                  <p class=\"ds-list__text\">History &middot; started 14 May</p>\n                </li>\n                <li class=\"ds-list__item\">\n                  <a class=\"ds-list__title\" href=\"#book\">Small Machines</a>\n                  <span class=\"ds-list__meta\">finished</span>\n                  <p class=\"ds-list__text\">Stories &middot; 11 days</p>\n                </li>\n              </ul>\n            </div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--tall ds-grid__cell--fill-4\">\n            <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 8a5 5 0 0 1 10 0c0 5 2 6 2 6H3s2-1 2-6m3 9h4\"/></svg></span>\n            <h2 class=\"ds-grid__title\">Nudges</h2>\n            <p class=\"ds-grid__text\">One reminder a day, at the hour you pick.</p>\n            <div class=\"ds-grid__visual\">\n              <ul class=\"ds-rows\">\n                <li class=\"ds-rows__item\">Evening <span class=\"ds-switch is-on\"></span></li>\n                <li class=\"ds-rows__item\">Commute <span class=\"ds-switch is-on\"></span></li>\n                <li class=\"ds-rows__item\">Weekend <span class=\"ds-switch\"></span></li>\n              </ul>\n            </div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--fill-3\">\n            <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 3h8v14l-4-3-4 3z\"/></svg></span>\n            <h2 class=\"ds-grid__title\">Web clipper</h2>\n            <p class=\"ds-grid__text\">Save a quote in one click</p>\n          </article>\n\n          <article class=\"ds-grid__cell\">\n            <h2 class=\"ds-grid__title\">Changelog</h2>\n            <p class=\"ds-grid__text\">Shared shelves</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-badge ds-badge--new\"><span class=\"ds-badge__dot\"></span>New</span>\n              <span class=\"ds-badge ds-badge--accent\">3.2</span>\n            </div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--wide\">\n            <h2 class=\"ds-grid__title\">Pages per day</h2>\n            <p class=\"ds-grid__text\">The last ten days, with the best one marked.</p>\n            <div class=\"ds-grid__visual ds-grid__split\">\n              <p class=\"ds-stat ds-stat--display\"><span class=\"ds-stat__value\">46</span></p>\n              <div class=\"ds-chart\">\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--4\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--5 is-current\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--4\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n              </div>\n            </div>\n          </article>\n\n          <article class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--accent\">\n            <h2 class=\"ds-grid__title\">Start with the book on your table</h2>\n            <p class=\"ds-grid__text\">Type its name, set tonight's page and you are done.</p>\n            <div class=\"ds-grid__foot\">\n              <a class=\"ds-button ds-button--inverse\" href=\"#add\">Start a shelf</a>\n            </div>\n          </article>\n        </div>\n        </div>\n      </section>\n\n      <section class=\"ds-view\" id=\"library\">\n        <div class=\"ds-layout__main\">\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\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#library\">Library</a></li>\n          <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">All books</li>\n        </ol>\n\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <div class=\"ds-page-header__copy\">\n            <h1 class=\"ds-page-header__title\">All books</h1>\n            <p class=\"ds-page-header__text\">Everything logged this year, newest first.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#library\">Export</a>\n            <a class=\"ds-button\" href=\"#add\">Add a book</a>\n          </div>\n        </header>\n\n        <div class=\"ds-toolbar\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#library\" aria-current=\"true\">All</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#library\">Reading</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#library\">Finished</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#library\">Lent out</a></li>\n          </ul>\n          <span class=\"ds-badge\">31 books</span>\n        </div>\n\n        <div class=\"ds-grid ds-grid--auto\">\n          <div class=\"ds-grid__cell ds-grid__cell--full ds-grid__cell--flush\">\n            <div class=\"ds-table__scroll\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th>Title</th><th class=\"ds-table__extra\">Author</th><th>Status</th><th class=\"ds-table__num\">Pages</th><th class=\"ds-table__num\">Days</th></tr>\n              </thead>\n              <tbody>\n                <tr class=\"is-current\"><td><a class=\"ds-table__link\" href=\"#book\">The Salt Road</a></td><td class=\"ds-table__muted ds-table__extra\">Ilse Varga</td><td><span class=\"ds-badge ds-badge--warning\">Reading</span></td><td class=\"ds-table__num\">212 / 340</td><td class=\"ds-table__num\">14</td></tr>\n                <tr><td><a class=\"ds-table__link\" href=\"#book\">Small Machines</a></td><td class=\"ds-table__muted ds-table__extra\">Theo Abara</td><td><span class=\"ds-badge ds-badge--success\">Finished</span></td><td class=\"ds-table__num\">256</td><td class=\"ds-table__num\">11</td></tr>\n                <tr><td><a class=\"ds-table__link\" href=\"#book\">North of the Orchard</a></td><td class=\"ds-table__muted ds-table__extra\">Runa Castellan</td><td><span class=\"ds-badge ds-badge--success\">Finished</span></td><td class=\"ds-table__num\">318</td><td class=\"ds-table__num\">19</td></tr>\n                <tr><td><a class=\"ds-table__link\" href=\"#book\">The Paper Atlas</a></td><td class=\"ds-table__muted ds-table__extra\">Milan Oyelaran</td><td><span class=\"ds-badge ds-badge--danger\">Overdue</span></td><td class=\"ds-table__num\">90 / 472</td><td class=\"ds-table__num\">41</td></tr>\n                <tr><td><a class=\"ds-table__link\" href=\"#book\">Winter Kitchens</a></td><td class=\"ds-table__muted ds-table__extra\">Petra Lindahl</td><td><span class=\"ds-badge ds-badge--success\">Finished</span></td><td class=\"ds-table__num\">204</td><td class=\"ds-table__num\">6</td></tr>\n              </tbody>\n            </table>\n            </div>\n            <div class=\"ds-grid__bar\">\n              <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n                <li><a class=\"ds-pagination__link is-disabled\" href=\"#library\">Previous</a></li>\n                <li><a class=\"ds-pagination__link is-current\" href=\"#library\" aria-current=\"page\">1</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#library\">2</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#library\">3</a></li>\n                <li><a class=\"ds-pagination__link\" href=\"#library\">Next</a></li>\n              </ul>\n              <span class=\"ds-badge\">1 to 5 of 31</span>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">Messages</h3>\n            <div class=\"ds-notices\" data-component=\"notice\">\n              <div class=\"ds-notice\">\n                <strong class=\"ds-notice__title\">The Paper Atlas is due back on Friday</strong>\n                <p class=\"ds-notice__text\">It was lent to you 41 days ago from a shared shelf.</p>\n              </div>\n              <div class=\"ds-notice ds-notice--error\">\n                <strong class=\"ds-notice__title\">The export did not finish</strong>\n                <p class=\"ds-notice__text\">Two notes could not be read. Try again in a minute.</p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--bare\">\n            <div class=\"ds-empty\" data-component=\"empty\">\n              <span class=\"ds-grid__icon\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"14\" height=\"14\" rx=\"3\"/><path d=\"M10 7v6m-3-3h6\"/></svg></span>\n              <h3 class=\"ds-empty__title\">Nothing lent out</h3>\n              <p class=\"ds-empty__text\">Books you lend appear here with the day they are due back.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#book\">Lend a book</a>\n            </div>\n          </div>\n        </div>\n        </div>\n      </section>\n\n      <section class=\"ds-view\" id=\"book\">\n        <div class=\"ds-layout__main\">\n        <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#library\">Library</a></li>\n          <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">The Salt Road</li>\n        </ol>\n\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__copy\">\n            <h1 class=\"ds-page-header__title\">The Salt Road</h1>\n            <p class=\"ds-page-header__text\">A novel by Ilse Varga, on the Evenings shelf since 3 May.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <span class=\"ds-badge ds-badge--warning\"><span class=\"ds-badge__dot\"></span>Reading</span>\n            <a class=\"ds-button ds-button--secondary\" href=\"#library\">All books</a>\n          </div>\n        </header>\n\n        <div class=\"ds-grid ds-grid--auto\">\n          <aside class=\"ds-grid__cell ds-sidebar\" data-component=\"sidebar\">\n            <h2 class=\"ds-sidebar__title\">On this shelf</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li><a class=\"ds-sidebar__link is-current\" href=\"#book\">The Salt Road</a></li>\n              <li><a class=\"ds-sidebar__link\" href=\"#book\">A Field Guide to Quiet</a></li>\n              <li><a class=\"ds-sidebar__link\" href=\"#book\">Harbour Lights</a></li>\n              <li><a class=\"ds-sidebar__link\" href=\"#library\">All books <span class=\"ds-badge ds-badge--count\">31</span></a></li>\n            </ul>\n          </aside>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide\">\n            <h3 class=\"ds-grid__title\">Progress</h3>\n            <p class=\"ds-grid__text\">Page 212 of 340, fourteen days in. About nine evenings to go.</p>\n            <div class=\"ds-grid__visual ds-grid__split\">\n              <p class=\"ds-stat ds-stat--display\"><span class=\"ds-stat__value\">62<span class=\"ds-stat__unit\">%</span></span></p>\n              <div class=\"ds-chart\">\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--4\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--5 is-current\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--4\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--2\"></span>\n                <span class=\"ds-chart__bar ds-chart__bar--3\"></span>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">Actions</h3>\n            <div class=\"ds-buttons ds-buttons--stack\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Log pages</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Add note</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Remove</button>\n              <button class=\"ds-button is-disabled\" type=\"button\" disabled>Lent out</button>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">Notes</h3>\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">The ferry chapter is the whole book in small</span>\n                <span class=\"ds-list__meta\">p. 198</span>\n                <p class=\"ds-list__text\">Note &middot; 16 May</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">Salt is counted, never weighed</span>\n                <span class=\"ds-list__meta\">p. 143</span>\n                <p class=\"ds-list__text\">Quote &middot; 12 May</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">Slow start, worth the first forty pages</span>\n                <span class=\"ds-list__meta\">p. 41</span>\n                <p class=\"ds-list__text\">Note &middot; 5 May</p>\n              </li>\n            </ul>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--stack\">\n            <div>\n              <h3 class=\"ds-grid__title\">This shelf</h3>\n              <p class=\"ds-grid__text\">Evenings holds three books and has room for two more.</p>\n            </div>\n            <ul class=\"ds-rows\">\n              <li class=\"ds-rows__item\">Pause the streak for a week <button class=\"ds-button ds-button--secondary ds-button--small\" type=\"button\">Pause</button></li>\n              <li class=\"ds-rows__item\">Empty this shelf <button class=\"ds-button ds-button--danger ds-button--small\" type=\"button\">Empty</button></li>\n            </ul>\n            <div class=\"ds-grid__foot\">\n              <a class=\"ds-link\" href=\"#guide\">How a shelf works</a>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--full ds-stage\">\n            <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n              <div class=\"ds-dialog__bar\">\n                <h3 class=\"ds-dialog__title\" id=\"d-title\">Mark The Salt Road as finished?</h3>\n                <button class=\"ds-dialog__close\" type=\"button\" aria-label=\"Close\"><svg class=\"ds-dialog__glyph\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"m4 4 8 8m0-8-8 8\"/></svg></button>\n              </div>\n              <div class=\"ds-dialog__body\">\n                <p>You are on page 212 of 340. Finishing moves the book off the shelf and keeps its notes.</p>\n              </div>\n              <div class=\"ds-dialog__actions\">\n                <button class=\"ds-button ds-button--secondary\" type=\"button\">Keep reading</button>\n                <button class=\"ds-button\" type=\"button\">Mark finished</button>\n              </div>\n            </div>\n          </div>\n        </div>\n        </div>\n      </section>\n\n      <section class=\"ds-view\" id=\"add\">\n        <div class=\"ds-layout__main\">\n        <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#library\">Library</a></li>\n          <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Add a book</li>\n        </ol>\n\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__copy\">\n            <h1 class=\"ds-page-header__title\">Add a book</h1>\n            <p class=\"ds-page-header__text\">Type its name, set the page count and pick a shelf. The first note can wait.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#library\">Back to the library</a>\n          </div>\n        </header>\n\n        <div class=\"ds-grid ds-grid--auto\">\n          <div class=\"ds-grid__cell ds-grid__cell--wider ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">The book</h3>\n            <form class=\"ds-form\" data-component=\"form\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-title\">Title</label>\n                <input class=\"ds-form__control\" id=\"f-title\" type=\"text\" value=\"Harbour Lights\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-shelf\">Shelf</label>\n                <select class=\"ds-form__control\" id=\"f-shelf\"><option>Evenings</option><option>Commute</option><option>Lent out</option></select>\n              </div>\n              <div class=\"ds-form__field ds-form__field--full\">\n                <label class=\"ds-form__label\" for=\"f-pages\">Pages</label>\n                <input class=\"ds-form__control is-invalid\" id=\"f-pages\" type=\"text\" value=\"four hundred\" aria-invalid=\"true\">\n                <span class=\"ds-form__error\">Enter the page count as a number, such as 402.</span>\n              </div>\n              <div class=\"ds-form__field ds-form__field--full\">\n                <label class=\"ds-form__label\" for=\"f-note\">First note</label>\n                <textarea class=\"ds-form__control ds-form__control--area\" id=\"f-note\" placeholder=\"Why this one, and why now\"></textarea>\n              </div>\n              <div class=\"ds-form__actions\">\n                <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Nudge me at nine</label>\n                <span class=\"ds-buttons\"><a class=\"ds-button ds-button--secondary\" href=\"#library\">Cancel</a><a class=\"ds-button\" href=\"#book\">Add book</a></span>\n              </div>\n            </form>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--fill-3 ds-grid__cell--stack ds-grid__cell--solo\">\n            <div>\n              <h3 class=\"ds-grid__title\">Room on the shelf</h3>\n              <p class=\"ds-grid__text\">A shelf holds five books at most. Evenings has two places left.</p>\n            </div>\n            <ul class=\"ds-rows\">\n              <li class=\"ds-rows__item\">Evenings <span class=\"ds-badge ds-badge--count\">3</span></li>\n              <li class=\"ds-rows__item\">Commute <span class=\"ds-badge ds-badge--count\">5</span></li>\n              <li class=\"ds-rows__item\">Lent out <span class=\"ds-badge ds-badge--count\">0</span></li>\n            </ul>\n            <div class=\"ds-grid__foot\">\n              <a class=\"ds-link\" href=\"#guide\">Why only five</a>\n            </div>\n          </div>\n        </div>\n        </div>\n      </section>\n\n      <section class=\"ds-view\" id=\"guide\">\n        <div class=\"ds-layout__main\">\n        <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">chronoskin</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\">Shelves</li>\n        </ol>\n\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__copy\">\n            <h1 class=\"ds-page-header__title\">How a shelf works</h1>\n            <p class=\"ds-page-header__text\">The short guide, and the pieces a shelf is built from.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button\" href=\"#add\">Start a shelf</a>\n          </div>\n        </header>\n\n        <div class=\"ds-grid ds-grid--auto\">\n          <div class=\"ds-grid__cell ds-grid__cell--wider ds-grid__cell--tall\">\n            <article class=\"ds-prose\" data-component=\"typography\">\n              <h1>Shelves</h1>\n              <p>A shelf is a short list of books you mean to finish. It holds <strong>five at most</strong>, so adding a sixth means deciding which one goes back.</p>\n              <h2>Logging a page</h2>\n              <p>Type the page you stopped on, or run <code>chronoskin log 212</code> from the desktop app. The <a href=\"#book\">streak counter</a> moves when the number does.</p>\n              <h3>What a shelf keeps</h3>\n              <ul>\n                <li>The page you stopped on, per book</li>\n                <li>Every quote you clipped, with its page</li>\n                <li>The day you started and the day you finished</li>\n              </ul>\n            </article>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">Read next</h3>\n            <p class=\"ds-links ds-links--stack\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#guide\">Lending a book</a>\n              <a class=\"ds-link is-visited\" href=\"#guide\">Quiet weeks</a>\n              <a class=\"ds-link is-hover\" href=\"#library\">Library</a>\n              <a class=\"ds-link is-active\" href=\"#add\">Add a book</a>\n            </p>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--fill-1 ds-grid__cell--stack\">\n            <div>\n              <h3 class=\"ds-grid__title\">Try it</h3>\n              <p class=\"ds-grid__text\">Start with the book on your table.</p>\n            </div>\n            <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#add\">Start a shelf</a></div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide\" data-component=\"badge\">\n            <h3 class=\"ds-grid__title\">Labels</h3>\n            <p class=\"ds-grid__text\">Pills mark state, squares count. Green, amber and red are status only.</p>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-badge\">Draft</span>\n              <span class=\"ds-badge ds-badge--accent\">Beta</span>\n              <span class=\"ds-badge ds-badge--new\"><span class=\"ds-badge__dot\"></span>New</span>\n              <span class=\"ds-badge ds-badge--count\">7</span>\n            </div>\n            <div class=\"ds-grid__foot\">\n              <span class=\"ds-badge ds-badge--success\"><span class=\"ds-badge__dot\"></span>Finished</span>\n              <span class=\"ds-badge ds-badge--warning\"><span class=\"ds-badge__dot\"></span>Due back</span>\n              <span class=\"ds-badge ds-badge--danger\"><span class=\"ds-badge__dot\"></span>Overdue</span>\n            </div>\n          </div>\n\n          <div class=\"ds-grid__cell ds-grid__cell--wide ds-grid__cell--stack\">\n            <h3 class=\"ds-grid__title\">Good to know</h3>\n            <div class=\"ds-panels\">\n              <section class=\"ds-panel\" data-component=\"panel\">\n                <h4 class=\"ds-panel__title\">Quiet week</h4>\n                <p class=\"ds-panel__body\">Pause the streak for seven days without losing it.</p>\n                <span class=\"ds-panel__meta\">Twice a year</span>\n              </section>\n              <section class=\"ds-panel\">\n                <h4 class=\"ds-panel__title\">Lending</h4>\n                <p class=\"ds-panel__body\">Mark a book as lent and set the day it is due back.</p>\n                <span class=\"ds-panel__meta\">Shared shelves only</span>\n              </section>\n            </div>\n          </div>\n        </div>\n        </div>\n      </section>\n\n      <div class=\"ds-layout__side\">\n        <a class=\"ds-sidebar__back\" href=\"#home\"><span class=\"ds-sidebar__avatar\"><svg class=\"ds-grid__glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h6a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h6z\"/></svg></span>chronoskin</a>\n\n        <nav class=\"ds-nav\" data-component=\"nav\" aria-label=\"Site\">\n          <ul class=\"ds-nav__links\">\n            <li><a class=\"ds-nav__link\" href=\"#home\">Overview <span class=\"ds-badge ds-badge--count\">12</span></a></li>\n            <li><a class=\"ds-nav__link\" href=\"#library\">Library</a></li>\n            <li><a class=\"ds-nav__link\" href=\"#book\">Reading now</a></li>\n            <li><a class=\"ds-nav__link\" href=\"#add\">Add a book</a></li>\n            <li><a class=\"ds-nav__link\" href=\"#guide\">Guide</a></li>\n          </ul>\n          <div class=\"ds-nav__foot\">\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.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n              <span class=\"ds-brand__name\">chronoskin</span>\n            </a>\n            <div class=\"ds-nav__actions\">\n              <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#library\">Log in</a>\n            </div>\n          </div>\n        </nav>\n      </div>\n    </div>\n  </div>\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div>\n      <span class=\"ds-footer__brand\">chronoskin</span>\n      <p class=\"ds-footer__text\">A placeholder product for this specimen.</p>\n    </div>\n    <ul class=\"ds-footer__list\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">About</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#guide\">Guide</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#library\">Library</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#add\">Add a book</a></li>\n    </ul>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.bento-grids.landing.s02.p02.t02.u02\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"bento-grids\",\n    \"years\": [\n      2022,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-bg-2222\",\n  \"short\": \"v1-bg-2222\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #f6f6f6;\n  --color-surface-alt: #ececec;\n  --color-surface-strong: #dddddd;\n  --color-bar: #ffffff;\n  --color-bar-text: #000000;\n  --color-bar-alt: #f6f6f6;\n  --color-bar-alt-text: #6f6f6f;\n  --color-inverse: #000000;\n  --color-inverse-text: #ffffff;\n  --color-text: #333333;\n  --color-text-muted: #6f6f6f;\n  --color-heading: #000000;\n  --color-heading-alt: #333333;\n  --color-link: #5871ff;\n  --color-link-quiet: #6f6f6f;\n  --color-link-visited: #5468cc;\n  --color-link-hover: #000000;\n  --color-link-active: #5468cc;\n  --color-border: rgb(0 0 0 / 0.06);\n  --color-border-strong: rgb(0 0 0 / 0.1);\n  --color-border-muted: rgb(0 0 0 / 0.04);\n  --color-accent: #5871ff;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #37996b;\n  --color-fill-1: #e8f8fc;\n  --color-fill-2: #fcf4f0;\n  --color-fill-3: #fcfcf0;\n  --color-fill-4: #fcf0f0;\n  --color-button: #000000;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #333333;\n  --color-input: #ffffff;\n  --color-input-text: #333333;\n  --color-input-border: #aaaaaa;\n  --color-disabled: #f0f0f0;\n  --color-disabled-text: #aaaaaa;\n  --color-danger: #fc0000;\n  --color-danger-surface: #fcf0f0;\n  --color-success: #37996b;\n  --color-warning: #fc6418;\n  --color-notice: #e8f8fc;\n  --color-notice-text: #005c7c;\n  --color-focus: #5871ff;\n  --color-shadow: #000000;\n  --color-overlay: rgb(0 0 0 / 0.3);\n}\n\n/* @part type */\n:root {\n  --font-body: Manrope, \"Avenir Next\", Avenir, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Manrope, \"Avenir Next\", Avenir, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-ui: Manrope, \"Avenir Next\", Avenir, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"Source Code Pro\", Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 14px;\n  --text-ui: 14px;\n  --text-large: 18px;\n  --text-display: 72px;\n  --text-h1: 34px;\n  --text-h2: 24px;\n  --text-h3: 18px;\n  --line-body: 1.5;\n  --line-heading: 1.3;\n  --line-display: 1;\n  --weight-body: 400;\n  --weight-bold: 500;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --ui-transform: none;\n  --link-decoration: none;\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: 2px;\n  --border-style: solid;\n  --radius-control: 6px;\n  --radius-panel: 8px;\n  --radius-pill: 9999px;\n  --radius-page: 12px;\n  --shadow-panel: 0 0 0 1px var(--color-border-strong), 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n  --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 5%, transparent);\n  --shadow-control-hover: 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n  --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n  --shadow-dialog: 0 10px 15px -3px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);\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);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, var(--color-button-text));\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n  --transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}