{
  "id": "v1-wl-8a6a",
  "long_id": "v1.weblogs-2000s.portal.s08.p10.t06.u10",
  "name": "Planet of weblogs, 2005",
  "era": {
    "slug": "weblogs-2000s",
    "code": "wl",
    "name": "Weblogs",
    "years": [
      2002,
      2007
    ],
    "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own."
  },
  "archetype": "portal",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": true
  },
  "summary": "A planet as communities ran them between 2003 and 2007: one page, written again by a script every half hour, that gathers the newest entries of several dozen weblogs into a single river. The sheet stretches with the window on a dark, finely lined page; a filled bar carries the brand (mark and site name) and a lowercase menu, a thin strip under it says when the feeds were last fetched, and below them the entries run down a wide column, each under the strip of the weblog it came from with its writer's small tile, beside a tinted column of subscriptions. Text is 12px Tahoma under bold Palatino headings in black and maroon on white, with honey-coloured strips, square corners, 1px lines, thick 5px rules and fine double frames in place of shadows.",
  "url": "https://chrono.skin/s/v1-wl-8a6a",
  "preview_url": "https://chrono.skin/s/v1-wl-8a6a/specimen.html",
  "files": {
    "STYLE.md": "# Planet of weblogs, 2005\n\n## Summary\n\nA planet as communities ran them between 2003 and 2007: one page, written again by a script every half hour, that gathers the newest entries of several dozen weblogs into a single river. The sheet stretches with the window on a dark, finely lined page; a filled bar carries the brand (mark and site name) and a lowercase menu, a thin strip under it says when the feeds were last fetched, and below them the entries run down a wide column, each under the strip of the weblog it came from with its writer's small tile, beside a tinted column of subscriptions. Text is 12px Tahoma under bold Palatino headings in black and maroon on white, with honey-coloured strips, square corners, 1px lines, thick 5px rules and fine double frames in place of shadows.\n\n## Layout\n\n- The page is fluid: `.ds-page__frame` fills the window less `--space-6` at each side, never narrower than `--size-min` (760px) and never wider than `--size-page` (1100px), centred beyond that. It is `--color-canvas` on `--fill-page`, outlined with a 1px `--color-border` line and stands `--space-5` clear of the top of the window. No text is ever placed on the page outside the sheet.\n- Order from the top, all inside the sheet: `.ds-nav` (the `.ds-nav__bar` in `--fill-bar` with the `.ds-brand` at the left and the `.ds-nav__menu` standing on its lower edge at the right; then the `.ds-nav__strip` in `--fill-bar-alt` with the time of the last round left and the feed links right), the view, and the `.ds-footer`. There is one bar only and the menu is inside it.\n- The home view opens with two full-width bands: the `.ds-hero` (one tinted line of title and lead with the action at the right) and the `.ds-stats` line of counters. Under them `.ds-page__columns` holds the river (`.ds-page__main`, fluid) at the left and `.ds-sidebar` at `--size-side` (232px) at the right. There is no gap between the two: the sidebar is a tinted column with a 1px line down its left side and runs the full height of the view, and each column carries its own padding (`--space-6`).\n- The river is a single stack: a `.ds-day` line (the date on a thick pale rule), then one `.ds-post` per entry, `--space-6` apart, then blocks (`.ds-page__section`) that open with a `.ds-page__label`. Entries are not boxed: the `.ds-post__head` strip marks where each begins.\n- Inner pages keep the sheet, the bar, the strip and the footer. The hero and the counters are not used. A `.ds-breadcrumb` line sits directly under the strip, across the sheet. A page about one thing (the form, the about page) keeps `.ds-page__columns` with the tinted sidebar: the main column opens with `.ds-page-header` (20px title, one muted line, one button at the right, a thick pale rule below), then notices and the form, or the text, links and a panel. A page that is a listing (the weblogs) drops the sidebar and uses `.ds-page__wide`: page header, `.ds-tabs` with the table in `.ds-tabs__body`, `.ds-pagination` with the summary counts at its far end, then `.ds-page__halves` for the two blocks that belong under the table. Tabs stand on their own rule under the page header, never in the bar.\n- Views: the specimen is one planet with four views. `river` is the front page: the band that says what is gathered, the counters, two entries in full, the short entries of the day, the four channels, and the column of subscriptions, feeds and the newest member. `weblogs` is every feed that is followed: tabs by channel over the table, pagination with the state counts, the dialog that takes your own weblog out, and an empty channel. `add` is the form that proposes a feed, under the notices that answer it. `about` is what a planet is: the text, links to take away and the panel on the keepers. The menu links to all four; titles and subscriptions lead to the list of weblogs.\n- Spacing scale: `--space-1` 1px is the padding of sidebar rows and the gap between a title and its meta line; `--space-2` 3px is the padding of strips, buttons and inputs; `--space-3` 5px is the padding of table cells, list rows, tabs and notices and the gap between buttons; `--space-4` 9px is the padding of panels, grid cells and the dialog, the inset of an entry and the gap between paragraphs; `--space-5` 13px is the padding of the bar, the hero, the form and the sidebar's sides; `--space-6` 18px is the side padding of the sheet's columns and the gap between entries and blocks; `--space-7` 26px is list indent, the foot of a column and the gap between counters.\n- Fixed sizes: `--size-face` 64px is a writer's tile, `--size-time` 72px the time column of the short list, `--size-label` 116px the label column of a form, `--size-field` 280px a text input, `--size-num` 76px a numeric table column, `--size-dialog` 380px a dialog.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` and `--font-heading` are Georgia (then Times), both at normal weight (`--weight-heading` 400); `--font-ui` is \"Trebuchet MS\", used small, in capitals (`--ui-transform` uppercase) and tracked for the menu, the tag bar, buttons, tabs, every label and the footer. `--font-mono` (Courier New) is only for code. All are system fonts; the references' body Times is kept as the fallback.\n- `--text-base` 13px with `--line-body` 1.6 is running text and item lines. `--text-small` 11px is meta lines, the sidebar, tables and notices; `--text-ui` 10px is all Trebuchet labels. `--text-large` 15px is the hero's lead, a quoted line and the third weight of a tag.\n- `--text-display` 27px is the site name and the counts in the closing grid, `--text-h1` 18px a page title and the heaviest tags, `--text-h2` 15px a sub-heading, `--text-h3` 13px bold Trebuchet a minor heading. Headings are never uppercased. Labels are tracked 1px to 3px, written `var(--space-1)` and multiples of it because the type part has no token for the tracking of labels.\n- `--color-text` #333333 is body text; `--color-text-muted` #999999 is meta lines, kinds and captions. `--color-heading` #cc6600, the orange, is the site name, titles and day dates; `--color-heading-alt` #003366, the navy, is sidebar and panel titles, quoted lines and stat figures.\n- `--color-link` #5588aa, not underlined, turning `--color-link-hover` #cc6600 and underlined on hover; visited #4477aa; active #003366. An item's title link is bold. `--color-link-quiet` #999999 is tag and tool links in meta lines.\n- `--color-bar` #003366 with white text is the tag bar, the current menu tab and dialog titles; `--color-bar-alt` #114477 with `--color-bar-alt-text` #99ccff is the idle menu tabs; `--color-inverse` #002244 with `--color-inverse-text` #99ccff is the footer.\n- Surfaces: `--color-surface` and `--color-canvas` #f8f0e0; `--color-surface-alt` #f0e8e0 is the stats line, forms, alternate rows and the keeper's reply; `--color-surface-strong` #e0d8c0 is panel titles, idle tabs and the current page number.\n- Text on fills follows the era's layouts: body and heading colours on the canvas, surfaces and `--color-fill-*` tints; `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`; `--color-accent-text` only on `--fill-accent`; `--color-button-text` on the button fill.\n- `--color-fill-1` to `--color-fill-4` (#f0e8e0, #e0d8c0, #d8c8b8, #ffffff) are the four cells of the closing grid; fill-1 is also the hero. `--color-accent` #cc6600 with white text is the count badge and list bullets; `--color-accent-alt` #5588aa is the \"new\" word.\n- Borders: `--color-border` #d0c0b0 for ordinary rules, `--color-border-muted` #e0d8c0 for the heavy left rule of a day block and the rule under a page header or table head, `--color-border-strong` #cc6600 for the left edge of the stats line and of a quotation and the outline of notices. `--border-width-strong` is 3px.\n- Status colours are used only as the text and 1px outline of status labels and for a destructive button: `--color-success` #538620, `--color-warning` #bb5500, `--color-danger` #cc0000.\n- Surface: every line is drawn in `--border-style` (dotted here). `--shadow-panel` is a soft even glow (10px blur, no offset) around the sheet, panels and the boxed sidebar block; `--shadow-dialog` is the same at 16px. `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` darken towards the bottom, `--fill-page` towards the sides of the window; buttons, inputs and panels are flat. A pressed button takes an inset shade. Focus is a 1px solid outline. Hover, visited, active and focus colours were not measurable on static captures and are taken from the same palette.\n\n- The early WordPress look: a white sheet on a light grey page. `--color-page` #e3e3e3, `--color-canvas` and `--color-surface` #ffffff, `--color-surface-alt` #f8f8f8 and `--color-surface-strong` #eeeeee. Almost everything is grey; colour is kept for links and one green.\n- `--color-bar` #707070, a mid grey with white text, is the navigation bar or banner, table head and dialog title; `--color-bar-alt` #90b068, a soft leaf green with white text, is the one coloured strip (sidebar titles, date labels); `--color-inverse` #303030 with #e0e0e0 text is the footer.\n- `--color-text` #383838, `--color-heading` #2d2d2d, `--color-text-muted` #888888; `--color-heading-alt` #555555 is sub-headings, dates and code.\n- `--color-link` #192a72, a dark navy, underlined; visited #666666, hover and active #000000; `--color-link-quiet` #555555 is the grey link of menus and meta lines.\n- Lines are `--color-border` #bbbbbb, `--color-border-muted` #e0e0e0 and `--color-border-strong` #000000: the black rule under an entry or on top of a hero.\n- Fills are greys (#f8f8f8, #eeeeee, #e0e0e0, #f0f0f0). `--color-accent` #90b068 with white text is the count badge, the current day and bullets; `--color-accent-alt` #686868 is the \"new\" word.\n- Buttons are the operating system's grey: `--color-button` #eeeeee with #2d2d2d text, the secondary #f8f8f8. Status colours are the era's usual ones, since these references show none: `--color-success` #538620, `--color-warning` #cc6600, `--color-danger` #cc0000.\n\n- Etched frames: `--border-width` 2px with `--border-style` groove, so every outline is a cut line with a light and a dark edge, and control bevels are 4px. `--border-width-strong` 5px is the heavy rule on top of a sheet or a hero.\n- Bars, the footer strip and the primary button are bevelled, not shaded: `--fill-bar`, `--fill-bar-alt`, `--fill-inverse` and `--fill-button` are the flat colour with a 1px highlight along the top and a 1px shade along the bottom. Page, panels, inputs and the secondary button are flat.\n- All radii are 0, all shadows `none`; `--focus-ring` is a 1px dotted outline; `--transition` none.\n\n## Components\n\n- `.ds-page` on `<body>`: page fill and base type. Everything goes in `.ds-page__frame`. `.ds-page__columns` holds `.ds-page__main` and the sidebar; `.ds-page__wide` is a view without the sidebar; `.ds-page__halves` sets two blocks side by side. `.ds-page__section` is a block with `--space-6` under it (`--last` drops the gap); `.ds-page__label` is the small bold caption on a hairline over a block.\n- `.ds-view`: one screen of the example site. The specimen holds its views side by side in the markup and shows one at a time: the view named in the address, or the `.ds-view--home` view when none is named. In a real project each view is a page of its own; drop the class there.\n- `.ds-brand`: the site's mark and name, at the left of the top bar; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the same mixed 1px edge, `--radius-control`, `--shadow-control`), as large as `--text-display` on a side and never less than 2.2 times `--text-base`, so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at `--text-display` with `--weight-display` and `--display-tracking`, in `--color-bar-text` because it stands on the bar. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo; keep the classes and swap the text and the drawing.\n- `.ds-nav`: site header, written once above the views. `.ds-nav__bar` holds the `.ds-brand` and `.ds-nav__menu`, a row of `.ds-nav__link` words in `--color-bar-text` on the lower edge of the bar; the current one is a tab in `--fill-bar-alt`, the colour of the strip below: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href`. `.ds-nav__strip` is the thin line under the bar with `.ds-nav__strip-link`.\n- `.ds-breadcrumb`: one 11px line under the strip, ruled below: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`/`), ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the front page's introduction, once, as a tinted band across the sheet: `.ds-hero__main` holds `.ds-hero__title` (20px) and `.ds-hero__lead` (14px); `.ds-hero__actions` at the right stacks one button over one text link. It is one or two lines high, not a banner.\n- `.ds-page-header`: the head of an inner page, used instead of the hero and never with it: `.ds-page-header__main` holds the `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button or one text link. A 5px pale rule closes it.\n- `.ds-stat`: one counter on a line: a `.ds-stat__value` (15px bold Palatino, `--color-heading-alt`) followed on the same line by its `.ds-stat__label` (11px muted). Three to five sit in a `.ds-stats` band under the hero, ruled below, `--space-7` apart. They are words on a line, not boxes.\n- `.ds-day`: the date that opens a day of the river, on a thick pale rule.\n- `.ds-post`: one gathered entry. `.ds-post__head` is the strip that names where it came from: `.ds-post__source` (the weblog, bold) with the writer after it, and `.ds-post__time` at the right. `.ds-post__body` holds a `.ds-face`, a `.ds-prose` whose h1 carries a `.ds-prose__title` link, and `.ds-post__meta` on a faint rule (category, comments at the weblog, permalink separated by `|`).\n- `.ds-face`: the writer's tile, hung at the right of an entry: a `.ds-face__tile` square with initials (`--size-face`) and the first name under it. `.ds-face--2` and `.ds-face--3` choose another fill. In a real project the tile holds a small portrait.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists with maroon markers, `code`, `blockquote` with a thick pale rule at the left.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the grey meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: flat filled button with a darker 1px edge, bold lowercase Tahoma. `.ds-button--secondary` is the grey button for the second choice. `.ds-button--danger` is the destructive action (withdraw, stop following): the grey button lettered and outlined in `--color-danger`, never filled with it. `disabled` or `is-disabled` greys it; `is-hover` lightens the face and adds a 1px ring (`--shadow-control-hover`); `is-active` turns the ring inward. Group with `.ds-buttons`.\n- `.ds-form`: a tinted block under a 5px `--color-border-strong` rule with `.ds-form__title` and rows (`.ds-form__row`) of a bold right-aligned `.ds-form__label` and a `.ds-form__field`. Controls take `.ds-form__input` (`--wide` full width, `--auto` for selects); `is-invalid` plus `.ds-form__error` marks a validation error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` aligns the buttons with the fields and wraps.\n- `.ds-table`: data table at 11px without an outline: `--fill-bar` head row, rows divided by `--color-border-muted`, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row, `.ds-table__title` for the bold link that names a row and `.ds-table__sub` for the muted line under it.\n- `.ds-list`: the short entries: each `.ds-list__item` is a `.ds-list__time` at the left and, beside it, a bold `.ds-list__title` link over a `.ds-list__meta` line (and an optional `.ds-list__excerpt`), rows divided by faint rules.\n- `.ds-panel`: 1px outlined box in a fine double frame with a `.ds-panel__title` strip in `--fill-bar-alt` and a `.ds-panel__body` of `.ds-panel__text` paragraphs. For the newest member in the sidebar or an aside in the text.\n- `.ds-grid`: four `.ds-grid__cell` boxes across under a 5px top rule, tinted with the four fills (`--2`, `--3`, `--4`), each with a `.ds-grid__title` and a `.ds-grid__text`. For channels and section indexes.\n- `.ds-tabs`: a row of `.ds-tabs__tab` words on a 1px rule, `--space-6` apart, each with an optional `.ds-tabs__count`; `is-current` is in the heading colour with a 5px `--color-border-strong` line under it. The content goes in `.ds-tabs__body`.\n- `.ds-badge`: small square label on the accent fill, for feed formats and counts. `.ds-badge--alt` is a bare coloured word; `.ds-badge--tag` is a quiet outlined label for a channel or a lesser feed format. Status labels are `.ds-badge--success` (fetched), `.ds-badge--warning` (slow) and `.ds-badge--danger` (failing): a small square and a bold word, both in the status colour, without a box.\n- `.ds-sidebar`: the tinted right column at 11px. Each `.ds-sidebar__block` has a Palatino `.ds-sidebar__title` on a `--color-border-strong` hairline and a `.ds-sidebar__list` of `.ds-sidebar__item` rows: a `.ds-sidebar__link` at the left and an optional `.ds-sidebar__count` (a number or how long ago) at the right. `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button; `.ds-sidebar__feeds` is a wrapping row of badges.\n- `.ds-notice`: one-line message in `--color-notice` with a 1px outline and a 5px `--color-border-strong` rule at the left, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and lines on `--color-danger-surface`. Stack several in `.ds-notices`.\n- `.ds-pagination`: a row of underlined `.ds-pagination__link` words and numbers at the left: earlier, numbers, later. `is-current` stands on the accent fill; `is-disabled` is faded. `.ds-pagination__summary` at the far end holds counts as badges.\n- `.ds-dialog`: a white box outlined in `--color-border-strong` with a `--fill-bar` `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`, in the double frame of `--shadow-dialog`. It sits in the page flow on `.ds-dialog__backdrop` (the overlay colour).\n- `.ds-empty`: tinted outlined box with a centred `.ds-empty__text` and one secondary button.\n- `.ds-footer`: the inverted band that closes the sheet: one `.ds-footer__row` with a line of text left and `.ds-footer__links` of underlined `.ds-footer__link` items right, and a fainter `.ds-footer__note` line that says how the page was made.\n- `ds-accordion`: a sidebar list that opens and closes, a details element whose summary holds the block title.\n- `ds-tooltip`: a hint shown on hover or focus of a link; the tip is a child with class ds-tooltip__tip.\n\n## Never\n\n- `block-gap <= 26px`: entries and blocks sit 18px apart.\n- `content-width <= 1100px`: the sheet stretches with the window but stops at 1100px.\n- `font-size <= 27px`: the largest text is the site name; titles are 18px.\n- `font-size >= 9px`: the smallest text measured is 9px; the pack itself stops at 10px.\n- `font-weight <= 700`: bold is the heaviest weight; titles are not bold.\n- `font-families <= 3`: Georgia, Trebuchet MS for labels and a monospace for code.\n- `line-height <= 1.7`: body line height is 1.4 to 1.6 in the references.\n- `line-height >= 1.3`: text is never set solid.\n- `letter-spacing <= 3px`: only small capitals are tracked.\n- `uppercase-text <= 25%`: capitals are for labels, never for running text or titles.\n- `underlined-links <= 15%`: links are told by colour; only footer links are underlined at rest.\n- `border-radius <= 0px`: every block is square.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 20%`: bars and buttons carry a 1px bevel edge drawn as a gradient; nothing is shaded across its height.\n- `border-width <= 5px`: lines are 1px, bevels 2px, the heavy rule 5px.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new kind of entry copies `.ds-post` (a `--color-surface-strong` strip with a 5px `--color-border-strong` rule at its left, the text inset by `--space-4`), a new boxed block copies `.ds-panel`, a new row type copies `.ds-list__item` (faint rule below, `--space-3` padding), a new sidebar block copies `.ds-sidebar__block` with its title on a hairline, a new tinted box copies `.ds-grid__cell`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`; if a size is missing, take the nearest step of the scale rather than a new number. Text on a fill uses the token paired with it: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-accent-text` on `--fill-accent`, `--color-inverse-text` on `--fill-inverse`, and `--color-text` or `--color-heading` on surfaces and the four fills. Keep the sheet fluid, keep entries unboxed, and mark emphasis with a thick rule rather than a fill.\n",
    "components.css": "/* Layout tokens (structure part). A planet: many weblogs gathered into one fluid page, 2004 to 2006. */\n:root {\n  --size-page: 1100px;\n  --size-min: 760px;\n  --size-side: 232px;\n  --size-face: 64px;\n  --size-time: 72px;\n  --size-label: 116px;\n  --size-field: 280px;\n  --size-num: 76px;\n  --size-dialog: 380px;\n  --space-1: 1px;\n  --space-2: 3px;\n  --space-3: 5px;\n  --space-4: 9px;\n  --space-5: 13px;\n  --space-6: 18px;\n  --space-7: 26px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-5) var(--space-6) var(--space-7);\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n/* The sheet stretches with the window between a least and a greatest width. */\n.ds-page__frame {\n  box-sizing: border-box;\n  min-width: var(--size-min);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  overflow: hidden;\n  background: var(--color-canvas);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n}\n/* The river and the tinted column at its right, which runs the full height. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-page__main {\n  min-width: 0;\n  padding: var(--space-6) var(--space-6) var(--space-7);\n}\n/* A page without the column. */\n.ds-page__wide {\n  padding: var(--space-6) var(--space-6) var(--space-7);\n}\n.ds-page__halves {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-6);\n  align-items: start;\n}\n.ds-page__section {\n  margin: 0 0 var(--space-6);\n}\n.ds-page__section--last {\n  margin-bottom: 0;\n}\n/* The caption over a block: small bold words on a hairline. */\n.ds-page__label {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  color: var(--color-text-muted);\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/* ---------- links ---------- */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\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  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ---------- nav: one filled bar with the name and the menu, a thin strip under it ---------- */\n.ds-nav {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: var(--space-6);\n  padding: var(--space-5) var(--space-6) 0;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so every token set reskins it. */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-5);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: max(var(--text-display), calc(var(--text-base) * 2.2));\n  height: max(var(--text-display), calc(var(--text-base) * 2.2));\n  background: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) solid color-mix(in srgb, var(--color-button), var(--color-button-text) 45%);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__menu {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-3) var(--space-5);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  text-decoration: underline;\n}\n/* The current item: a tab in the colour of the strip below. One selector per view. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#river\"],\n.ds-page:has(#river:target) .ds-nav__link[href=\"#river\"],\n.ds-page:has(#weblogs:target) .ds-nav__link[href=\"#weblogs\"],\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  text-shadow: none;\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-nav__strip {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-6);\n  margin: 0;\n  padding: var(--space-2) var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n.ds-nav__strip-link {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  text-decoration: underline;\n}\n.ds-nav__strip-link:hover,\n.ds-nav__strip-link.is-hover {\n  text-decoration: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-3) var(--space-6);\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n  color: var(--color-text);\n}\n\n/* ---------- hero: one tinted band that says what the page gathers ---------- */\n.ds-hero {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-7);\n  padding: var(--space-5) var(--space-6);\n  background: var(--color-fill-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__main {\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-hero__lead {\n  margin: 0;\n  font-size: var(--text-large);\n}\n.ds-hero__actions {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: the title line of an inner page ---------- */\n.ds-page-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: var(--space-6);\n  margin: 0 0 var(--space-6);\n  padding: 0 0 var(--space-4);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-page-header__text {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.ds-page-header__action {\n  flex: none;\n}\n\n/* ---------- stats: the counters, one line of figures under the hero ---------- */\n.ds-stats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-7);\n  margin: 0;\n  padding: var(--space-3) var(--space-6);\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n}\n.ds-stat__value {\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  color: var(--color-heading-alt);\n}\n.ds-stat__label {\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- the river: a day line, then entries under the strip of the weblog they came from ---------- */\n.ds-day {\n  margin: 0 0 var(--space-5);\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-muted);\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-alt);\n}\n.ds-post {\n  margin: 0 0 var(--space-6);\n}\n.ds-post__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: var(--space-5);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-surface-strong);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  font-size: var(--text-small);\n  color: var(--color-text);\n}\n.ds-post__source {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__source:hover,\n.ds-post__source.is-hover {\n  text-decoration: underline;\n}\n.ds-post__time {\n  flex: none;\n  color: var(--color-text-muted);\n}\n.ds-post__body {\n  display: flow-root;\n  padding: var(--space-4) 0 0 var(--space-4);\n}\n.ds-post__meta {\n  clear: both;\n  margin: var(--space-4) 0 0;\n  padding: var(--space-2) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n/* The writer's face: a small tile with initials, hung at the right of the entry. */\n.ds-face {\n  float: right;\n  width: var(--size-face);\n  margin: 0 0 var(--space-4) var(--space-5);\n  text-align: center;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  color: var(--color-text-muted);\n}\n.ds-face__tile {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--size-face);\n  margin: 0 0 var(--space-2);\n  background: var(--color-fill-2);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n}\n.ds-face--2 .ds-face__tile {\n  background: var(--color-fill-4);\n}\n.ds-face--3 .ds-face__tile {\n  background: var(--color-fill-1);\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0 0 var(--space-3);\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}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h2);\n  color: var(--color-heading-alt);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  font-family: var(--font-body);\n  font-size: var(--text-h3);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-7);\n}\n.ds-prose ul {\n  list-style: disc;\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n}\n.ds-prose code {\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  color: var(--color-heading-alt);\n}\n.ds-prose blockquote {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-5);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n  color: var(--color-text-muted);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n  margin-bottom: 0;\n}\n/* The entry's own title, a link to the weblog it came from. */\n.ds-prose__title {\n  color: var(--color-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-prose__title:hover,\n.ds-prose__title.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: underline;\n}\n\n/* ---------- buttons ---------- */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-button {\n  display: inline-block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: var(--space-2) var(--space-5);\n  border: var(--border-width) solid color-mix(in srgb, var(--color-button), var(--color-button-text) 45%);\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-align: center;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: color-mix(in srgb, var(--color-button-secondary), var(--color-button-secondary-text) 45%);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-ui);\n  text-shadow: none;\n}\n/* Destructive action: the secondary button, lettered and outlined in the error colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  border-color: var(--color-danger);\n  background: var(--fill-button-secondary);\n  color: var(--color-danger);\n  text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-disabled-text);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n  margin: 0;\n  padding: var(--space-5) var(--space-5) var(--space-5);\n  background: var(--color-surface-alt);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-form__title {\n  margin: 0 0 var(--space-4);\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-form__row {\n  display: flex;\n  align-items: flex-start;\n  margin: 0 0 var(--space-4);\n}\n.ds-form__label {\n  flex: none;\n  box-sizing: border-box;\n  width: var(--size-label);\n  padding: var(--space-2) var(--space-4) 0 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: right;\n}\n.ds-form__field {\n  flex: 1;\n  min-width: 0;\n}\n.ds-form__input {\n  box-sizing: border-box;\n  width: var(--size-field);\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) solid var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  box-shadow: var(--shadow-control);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__input--wide {\n  width: 100%;\n}\n.ds-form__input--auto {\n  width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--text-small);\n}\n.ds-form__checkbox {\n  margin: 0;\n}\n/* The buttons start under the fields and wrap when a type set makes them wide. */\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin: var(--space-5) 0 0;\n  padding: 0 0 0 var(--size-label);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--text-small);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--space-2));\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  vertical-align: top;\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  width: var(--size-num);\n  text-align: right;\n}\n.ds-table__group td {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table__title {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: underline;\n}\n.ds-table__sub {\n  display: block;\n  color: var(--color-text-muted);\n}\n\n/* ---------- list: the short entries, a time and a line each ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-time) minmax(0, 1fr);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n.ds-list__time {\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n.ds-list__title {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: underline;\n}\n.ds-list__excerpt {\n  margin: var(--space-1) 0 0;\n}\n.ds-list__meta {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__body > :last-child {\n  margin-bottom: 0;\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-3);\n}\n\n/* ---------- grid: the channels, four across ---------- */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  padding: var(--space-4);\n  background: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-small);\n}\n.ds-grid__cell--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0;\n}\n\n/* ---------- tabs: words on a rule, the current one underlined thick ---------- */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n  display: block;\n  margin-bottom: calc(var(--border-width) * -1);\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: underline;\n}\n.ds-tabs__tab.is-current {\n  border-bottom-color: var(--color-border-strong);\n  color: var(--color-heading);\n}\n.ds-tabs__count {\n  font-weight: var(--weight-body);\n  color: var(--color-text-muted);\n}\n.ds-tabs__body {\n  padding: var(--space-5) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-decoration: none;\n  vertical-align: baseline;\n}\n.ds-badge--alt {\n  padding: 0;\n  background: transparent;\n  color: var(--color-accent-alt);\n}\n.ds-badge--tag {\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n}\n/* Status labels: a square dot in the status colour before a plain word. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n  padding: 0;\n  background: transparent;\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-small) * 0.7);\n  height: calc(var(--text-small) * 0.7);\n  margin: 0 var(--space-3) 0 0;\n  background: currentColor;\n}\n.ds-badge--success {\n  color: var(--color-success);\n}\n.ds-badge--warning {\n  color: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-danger);\n}\n\n/* ---------- sidebar: the tinted column of subscriptions ---------- */\n.ds-sidebar {\n  min-width: 0;\n  padding: var(--space-6) var(--space-5) var(--space-7);\n  background: var(--color-surface-alt);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n}\n.ds-sidebar__block {\n  margin: 0 0 var(--space-6);\n}\n.ds-sidebar__block:last-child {\n  margin-bottom: 0;\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n}\n.ds-sidebar__link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: underline;\n}\n.ds-sidebar__count {\n  flex: none;\n  color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-sidebar__search {\n  display: flex;\n  gap: var(--space-3);\n}\n.ds-sidebar__feeds {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  color: var(--color-notice-text);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n  color: var(--color-danger);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-pagination__link {\n  display: block;\n  padding: 0 var(--space-3);\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  text-decoration: none;\n}\n\n/* What the page shows, in counts, at the far end of the row. */\n.ds-pagination__summary {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin-left: auto;\n}\n\n/* ---------- dialog: a boxed question in the page flow ---------- */\n.ds-dialog__backdrop {\n  padding: var(--space-6);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  box-sizing: border-box;\n  width: var(--size-dialog);\n  max-width: 100%;\n  margin: 0 auto;\n  background: var(--color-surface);\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  color: var(--color-text);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--space-2));\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  padding: var(--space-4);\n}\n.ds-dialog__text {\n  margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-3);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n  padding: var(--space-6);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n  color: var(--color-text-muted);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n  padding: var(--space-5) var(--space-6);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-size: var(--text-small);\n}\n.ds-footer__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-6);\n  margin: 0;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-inverse-text);\n  text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: none;\n}\n.ds-footer__note {\n  margin: var(--space-2) 0 0;\n  opacity: 0.8;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-accordion__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__summary::after {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-base) * 0.7);\n  height: calc(var(--text-base) * 0.7);\n  margin-left: var(--space-2);\n  margin-bottom: calc(var(--space-2) + var(--border-width));\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n  color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n  display: block;\n  flex: 1 1 auto;\n  margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n  outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-tooltip {\n  position: relative;\n  display: inline-block;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  z-index: 5;\n  width: max-content;\n  max-width: calc(var(--space-6) * 8);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-surface-strong);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n  visibility: visible;\n  opacity: 1;\n}\n.ds-progress::-moz-progress-bar {\n  background: var(--fill-bar);\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, planet 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<div class=\"ds-page__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__bar\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#river\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20l1.2-5.2L16 4l4 4L9.2 18.8z\"/><line x1=\"13.4\" y1=\"6.6\" x2=\"17.4\" y2=\"10.6\"/><polygon points=\"4,20 5.2,14.8 9.2,18.8\" fill=\"currentColor\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <ul class=\"ds-nav__menu\">\n        <li><a class=\"ds-nav__link\" href=\"#river\">The river</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#weblogs\">Weblogs</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#add\">Add yours</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#about\">About</a></li>\n      </ul>\n    </div>\n    <p class=\"ds-nav__strip\">\n      <span>Gathered on Monday 14 March 2005 at 21:40. The next round is in twenty minutes.</span>\n      <span>Follow everything: <a class=\"ds-nav__strip-link\" href=\"#about\">RSS</a> or <a class=\"ds-nav__strip-link\" href=\"#about\">Atom</a></span>\n    </p>\n  </header>\n\n  <!-- View 1, the river: every new entry from every weblog, newest first. -->\n  <section class=\"ds-view ds-view--home\" id=\"river\">\n    <section class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__main\">\n        <h1 class=\"ds-hero__title\">Forty-eight beekeepers' weblogs on one page</h1>\n        <p class=\"ds-hero__lead\">Whatever they write about their hives turns up here within the half hour, newest at the top.</p>\n      </div>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button\" href=\"#add\">Add your weblog</a>\n        <a class=\"ds-link\" href=\"#about\">How this works</a>\n      </div>\n    </section>\n    <ul class=\"ds-stats\" data-component=\"stats\">\n      <li class=\"ds-stat\"><span class=\"ds-stat__value\">48</span> <span class=\"ds-stat__label\">weblogs followed</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__value\">11</span> <span class=\"ds-stat__label\">entries today</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__value\">207</span> <span class=\"ds-stat__label\">this month</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__value\">9,318</span> <span class=\"ds-stat__label\">since March 2003</span></li>\n    </ul>\n\n    <div class=\"ds-page__columns\">\n      <main class=\"ds-page__main\">\n\n        <h2 class=\"ds-day\">Monday, 14 March 2005</h2>\n\n        <article class=\"ds-post\">\n          <p class=\"ds-post__head\"><span><a class=\"ds-post__source\" href=\"#weblogs\">The out-apiary</a> by Wilma Aksnes</span> <span class=\"ds-post__time\">21:12</span></p>\n          <div class=\"ds-post__body\">\n            <div class=\"ds-face\"><span class=\"ds-face__tile\">WA</span>Wilma</div>\n            <div class=\"ds-prose\">\n              <h1><a class=\"ds-prose__title\" href=\"#weblogs\">First flight of the year</a></h1>\n              <p>Eleven degrees at noon and every hive was flying. Hive four, which I had written off in January, was the busiest of the lot, with <a class=\"ds-link\" href=\"#weblogs\">pollen coming in on two legs out of three</a>.</p>\n              <p>I lifted each box from behind to judge the stores. Two are light and will get fondant this week; the rest can <strong>wait for the willow</strong>.</p>\n            </div>\n            <p class=\"ds-post__meta\">Filed under <a class=\"ds-link ds-link--quiet\" href=\"#weblogs\">Spring</a> | <a class=\"ds-link\" href=\"#weblogs\">4 comments at the weblog</a> | <span class=\"ds-tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#weblogs\">Permalink</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">Link to this entry only</span></span></p>\n          </div>\n        </article>\n\n        <article class=\"ds-post\">\n          <p class=\"ds-post__head\"><span><a class=\"ds-post__source\" href=\"#weblogs\">Bees on the roof</a> by Teodor Lind</span> <span class=\"ds-post__time\">18:47</span></p>\n          <div class=\"ds-post__body\">\n            <div class=\"ds-face ds-face--2\"><span class=\"ds-face__tile\">TL</span>Teodor</div>\n            <div class=\"ds-prose\">\n              <h1><a class=\"ds-prose__title\" href=\"#weblogs\">The landlord has questions</a></h1>\n              <p>Six floors up there is nobody to sting, I said. He wanted to know where forty thousand of anything go when it rains.</p>\n              <blockquote><p>Inside, mostly. They are better at staying dry than I am.</p></blockquote>\n              <p>We agreed on one more season and a jar for every flat.</p>\n            </div>\n            <p class=\"ds-post__meta\">Filed under <a class=\"ds-link ds-link--quiet\" href=\"#weblogs\">Town bees</a> | <a class=\"ds-link\" href=\"#weblogs\">9 comments at the weblog</a> | <span class=\"ds-tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#weblogs\">Permalink</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">Link to this entry only</span></span></p>\n          </div>\n        </article>\n\n        <section class=\"ds-page__section\" data-component=\"list\">\n          <h2 class=\"ds-page__label\">Earlier today, in short</h2>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__time\">16:20</span>\n              <div>\n                <a class=\"ds-list__title\" href=\"#weblogs\">Frames, forty of them, by Saturday</a> <span class=\"ds-badge ds-badge--alt\">new here</span>\n                <p class=\"ds-list__meta\">A shed full of sawdust, by Ansgar Hol</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__time\">13:05</span>\n              <div>\n                <a class=\"ds-list__title\" href=\"#weblogs\">What the hive scale said in February</a>\n                <p class=\"ds-list__meta\">Kilograms and weather, by Petra Sund</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__time\">11:38</span>\n              <div>\n                <a class=\"ds-list__title\" href=\"#weblogs\">Mouse guards off, at last</a>\n                <p class=\"ds-list__meta\">The out-apiary, by Wilma Aksnes</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__time\">08:14</span>\n              <div>\n                <a class=\"ds-list__title\" href=\"#weblogs\">A beginner's first winter, counted</a>\n                <p class=\"ds-list__meta\">Two hives and a notebook, by Ines Moe</p>\n              </div>\n            </li>\n          </ul>\n        </section>\n\n        <section class=\"ds-page__section ds-page__section--last\" data-component=\"grid\">\n          <h2 class=\"ds-page__label\">Channels</h2>\n          <div class=\"ds-grid\">\n            <div class=\"ds-grid__cell\">\n              <h3 class=\"ds-grid__title\">Country hives</h3>\n              <p class=\"ds-grid__text\">Orchards, heather and long drives. 21 weblogs. <a class=\"ds-link\" href=\"#weblogs\">Read &raquo;</a></p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--2\">\n              <h3 class=\"ds-grid__title\">Town bees</h3>\n              <p class=\"ds-grid__text\">Roofs, yards and neighbours. 12 weblogs. <a class=\"ds-link\" href=\"#weblogs\">Read &raquo;</a></p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--3\">\n              <h3 class=\"ds-grid__title\">Workshop</h3>\n              <p class=\"ds-grid__text\">Boxes, frames and extractors. 9 weblogs. <a class=\"ds-link\" href=\"#weblogs\">Read &raquo;</a></p>\n            </div>\n            <div class=\"ds-grid__cell ds-grid__cell--4\">\n              <h3 class=\"ds-grid__title\">First year</h3>\n              <p class=\"ds-grid__text\">Beginners, counting everything. 6 weblogs. <a class=\"ds-link\" href=\"#weblogs\">Read &raquo;</a></p>\n            </div>\n          </div>\n        </section>\n\n      </main>\n\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Search the river</h2>\n          <form class=\"ds-sidebar__search\" action=\"#\">\n            <input class=\"ds-form__input ds-form__input--wide\" type=\"text\" value=\"fondant\" aria-label=\"Search every entry\">\n            <button class=\"ds-button ds-button--secondary\" type=\"button\">Go</button>\n          </form>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <details class=\"ds-accordion\" open>\n<summary class=\"ds-accordion__summary\"><span class=\"ds-sidebar__title\">Subscriptions</span></summary>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">A shed full of sawdust</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Bees on the roof</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Kilograms and weather</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">The out-apiary</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Two hives and a notebook</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link is-visited\" href=\"#weblogs\">Heather honey diary</a> <span class=\"ds-sidebar__count\">2 days</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Notes from the bee shed</a> <span class=\"ds-sidebar__count\">2 days</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link is-hover\" href=\"#weblogs\">Top bars only</a> <span class=\"ds-sidebar__count\">3 days</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">The swarm list</a> <span class=\"ds-sidebar__count\">5 days</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link is-visited\" href=\"#weblogs\">Queens I have lost</a> <span class=\"ds-sidebar__count\">a week</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">An orchard and six hives</a> <span class=\"ds-sidebar__count\">a week</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">All 48 weblogs</a></li>\n          </ul>\n        </details></div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Feeds</h2>\n          <ul class=\"ds-sidebar__feeds\">\n            <li><a class=\"ds-badge\" href=\"#about\">RSS 2.0</a></li>\n            <li><a class=\"ds-badge\" href=\"#about\">Atom</a></li>\n            <li><a class=\"ds-badge ds-badge--tag\" href=\"#about\">OPML</a></li>\n            <li><a class=\"ds-badge ds-badge--tag\" href=\"#about\">FOAF</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <div class=\"ds-panel\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">Newest here</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\"><a class=\"ds-link ds-link--strong\" href=\"#weblogs\">A shed full of sawdust</a> joined on Saturday. Ansgar builds his own boxes and photographs every joint.</p>\n              <p class=\"ds-panel__text\"><a class=\"ds-button ds-button--secondary\" href=\"#weblogs\">See all weblogs</a></p>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Colophon</h2>\n          <p class=\"ds-sidebar__text\">A script fetches each feed every half hour and writes this page. What you read belongs to the people who wrote it.</p>\n        </div>\n      </aside>\n    </div>\n  </section>\n\n  <!-- View 2, the weblogs: every feed the planet follows, and what state it is in. -->\n  <section class=\"ds-view\" id=\"weblogs\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#river\">The river</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#weblogs\">Weblogs</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li class=\"ds-breadcrumb__current\">Everything followed</li>\n    </ol>\n    <div class=\"ds-page__wide\">\n\n      <div class=\"ds-page-header\" data-component=\"page-header\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">The weblogs gathered here</h1>\n          <p class=\"ds-page-header__text\">Forty-eight feeds, fetched every half hour. A feed that fails for a month is dropped.</p>\n        </div>\n        <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#add\">Add your weblog</a></div>\n      </div>\n\n      <section class=\"ds-page__section\" data-component=\"tabs\">\n        <ul class=\"ds-tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#weblogs\">All <span class=\"ds-tabs__count\">(48)</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#weblogs\">Country hives <span class=\"ds-tabs__count\">(21)</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#weblogs\">Town bees <span class=\"ds-tabs__count\">(12)</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#weblogs\">Workshop <span class=\"ds-tabs__count\">(9)</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#weblogs\">First year <span class=\"ds-tabs__count\">(6)</span></a></li>\n        </ul>\n        <div class=\"ds-tabs__body\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr><th>Weblog</th><th>Channel</th><th>Last entry</th><th>Feed</th><th class=\"ds-table__num\">This month</th><th class=\"ds-table__num\">In all</th></tr>\n            </thead>\n            <tbody>\n              <tr><td><a class=\"ds-table__title\" href=\"#weblogs\">The out-apiary</a> <span class=\"ds-table__sub\">Wilma Aksnes</span></td><td><span class=\"ds-badge ds-badge--tag\">Country hives</span></td><td>today, 21:12</td><td><span class=\"ds-badge ds-badge--success\">fetched</span></td><td class=\"ds-table__num\">14</td><td class=\"ds-table__num\">612</td></tr>\n              <tr class=\"ds-table__row--alt\"><td><a class=\"ds-table__title\" href=\"#weblogs\">Bees on the roof</a> <span class=\"ds-table__sub\">Teodor Lind</span></td><td><span class=\"ds-badge ds-badge--tag\">Town bees</span></td><td>today, 18:47</td><td><span class=\"ds-badge ds-badge--success\">fetched</span></td><td class=\"ds-table__num\">9</td><td class=\"ds-table__num\">188</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#weblogs\">A shed full of sawdust</a> <span class=\"ds-table__sub\">Ansgar Hol</span></td><td><span class=\"ds-badge ds-badge--tag\">Workshop</span></td><td>today, 16:20</td><td><span class=\"ds-badge ds-badge--success\">fetched</span></td><td class=\"ds-table__num\">2</td><td class=\"ds-table__num\">2</td></tr>\n              <tr class=\"ds-table__row--alt\"><td><a class=\"ds-table__title\" href=\"#weblogs\">Kilograms and weather</a> <span class=\"ds-table__sub\">Petra Sund</span></td><td><span class=\"ds-badge ds-badge--tag\">Country hives</span></td><td>today, 13:05</td><td><span class=\"ds-badge ds-badge--warning\">slow</span></td><td class=\"ds-table__num\">21</td><td class=\"ds-table__num\">1,340</td></tr>\n              <tr><td><a class=\"ds-table__title\" href=\"#weblogs\">Two hives and a notebook</a> <span class=\"ds-table__sub\">Ines Moe</span></td><td><span class=\"ds-badge ds-badge--tag\">First year</span></td><td>today, 08:14</td><td><span class=\"ds-badge ds-badge--success\">fetched</span></td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num\">73</td></tr>\n              <tr class=\"ds-table__row--alt\"><td><a class=\"ds-table__title\" href=\"#weblogs\">Queens I have lost</a> <span class=\"ds-table__sub\">Halvard Brekke</span></td><td><span class=\"ds-badge ds-badge--tag\">Country hives</span></td><td>7 March</td><td><span class=\"ds-badge ds-badge--danger\">failing</span></td><td class=\"ds-table__num\">1</td><td class=\"ds-table__num\">405</td></tr>\n            </tbody>\n          </table>\n        </div>\n      </section>\n\n      <section class=\"ds-page__section\" data-component=\"pagination\">\n        <ul class=\"ds-pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#weblogs\">&laquo; Earlier</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#weblogs\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#weblogs\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#weblogs\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#weblogs\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#weblogs\">Later &raquo;</a></li>\n          <li class=\"ds-pagination__summary\" data-component=\"badge\"><span class=\"ds-badge\">6 of 48</span> <span class=\"ds-badge ds-badge--success\">45 fetched</span> <span class=\"ds-badge ds-badge--warning\">2 slow</span> <span class=\"ds-badge ds-badge--danger\">1 failing</span></li>\n        </ul>\n      </section>\n\n      <div class=\"ds-page__halves\">\n        <section data-component=\"dialog\">\n          <h2 class=\"ds-page__label\">Taking your own weblog out</h2>\n          <div class=\"ds-dialog__backdrop\">\n            <div class=\"ds-dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n              <h3 class=\"ds-dialog__title\" id=\"dlg-title\">Stop following this feed?</h3>\n              <div class=\"ds-dialog__body\">\n                <p class=\"ds-dialog__text\">Queens I have lost will leave the river at the next round. Its 405 gathered entries stay in the archive.</p>\n                <div class=\"ds-dialog__actions\">\n                  <button class=\"ds-button ds-button--danger\" type=\"button\">Stop following</button>\n                  <a class=\"ds-button ds-button--secondary\" href=\"#weblogs\">Keep it</a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section>\n          <h2 class=\"ds-page__label\">Newest channel: Top bars</h2>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <p class=\"ds-empty__text\">No weblog has been filed under &ldquo;Top bars&rdquo; yet.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#add\">Suggest the first</a>\n          </div>\n        </section>\n      </div>\n\n    </div>\n  </section>\n\n  <!-- View 3, add yours: the form that proposes a feed. -->\n  <section class=\"ds-view\" id=\"add\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#river\">The river</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#weblogs\">Weblogs</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li class=\"ds-breadcrumb__current\">Add yours</li>\n    </ol>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-page-header\">\n          <div class=\"ds-page-header__main\">\n            <h1 class=\"ds-page-header__title\">Add your weblog</h1>\n            <p class=\"ds-page-header__text\">Tell us where the feed is. A keeper reads a few entries and answers within the week.</p>\n          </div>\n          <div class=\"ds-page-header__action\"><a class=\"ds-link\" href=\"#about\">What gets in</a></div>\n        </div>\n\n        <section class=\"ds-page__section\" data-component=\"notice\">\n          <div class=\"ds-notices\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">Feed found.</span> Twelve entries, the newest from this morning.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not sent.</span> One field below needs another look.</p>\n          </div>\n        </section>\n\n        <section class=\"ds-page__section ds-page__section--last\" data-component=\"form\">\n          <form class=\"ds-form\" action=\"#\">\n            <h2 class=\"ds-form__title\">The feed and its keeper</h2>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"a-feed\">Feed address</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input ds-form__input--wide\" id=\"a-feed\" type=\"text\" value=\"hives.example/journal/index.xml\">\n                <p class=\"ds-form__hint\">RSS or Atom. A feed of one category is fine.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"a-name\">Your name</label>\n              <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"a-name\" type=\"text\" value=\"Solveig Dale\"></div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"a-mail\">E-mail</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input is-invalid\" id=\"a-mail\" type=\"text\" value=\"solveig at example\">\n                <p class=\"ds-form__error\">That does not look like an e-mail address.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"a-channel\">Channel</label>\n              <div class=\"ds-form__field\">\n                <select class=\"ds-form__input ds-form__input--auto\" id=\"a-channel\">\n                  <option>Country hives</option>\n                  <option>Town bees</option>\n                  <option>Workshop</option>\n                  <option>First year</option>\n                </select>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"a-note\">A line about it</label>\n              <div class=\"ds-form__field\">\n                <textarea class=\"ds-form__input ds-form__input--wide\" id=\"a-note\" rows=\"4\">Nine hives on a north slope, written up every Sunday since 2003.</textarea>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <span class=\"ds-form__label\"></span>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Show my initials beside my entries</label>\n            </div>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Send</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Test the feed</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Withdraw</button>\n              <button class=\"ds-button is-disabled\" type=\"button\" disabled>Sent</button>\n            </div>\n          </form>\n        </section>\n\n      </div>\n\n      <aside class=\"ds-sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">What gets in</h2>\n          <p class=\"ds-sidebar__text\">A weblog by someone who keeps bees, with at least a month of entries and a feed that carries the whole text.</p>\n          <p class=\"ds-sidebar__text\">Shops and press releases do not.</p>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Waiting for an answer</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Nine hives, north slope</a> <span class=\"ds-sidebar__count\">today</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Wax and wicks</a> <span class=\"ds-sidebar__count\">2 days</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">The observation hive</a> <span class=\"ds-sidebar__count\">4 days</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Joined lately</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">A shed full of sawdust</a> <span class=\"ds-sidebar__count\">12 March</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Two hives and a notebook</a> <span class=\"ds-sidebar__count\">2 Dec</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link is-visited\" href=\"#weblogs\">Top bars only</a> <span class=\"ds-sidebar__count\">19 Nov</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">All 48 weblogs</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Your feed</h2>\n          <p class=\"ds-sidebar__text\">Nothing changes on your own weblog. Entries are copied here with your name and a link back.</p>\n        </div>\n      </aside>\n    </div>\n  </section>\n\n  <!-- View 4, about: what a planet is and who keeps this one. -->\n  <section class=\"ds-view\" id=\"about\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-breadcrumb__link\" href=\"#river\">The river</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li><a class=\"ds-breadcrumb__link\" href=\"#about\">About</a></li>\n      <li class=\"ds-breadcrumb__sep\" aria-hidden=\"true\">/</li>\n      <li class=\"ds-breadcrumb__current\">How this works</li>\n    </ol>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-page-header\">\n          <div class=\"ds-page-header__main\">\n            <h1 class=\"ds-page-header__title\">How this works</h1>\n            <p class=\"ds-page-header__text\">One page, one script and forty-eight people who write about bees.</p>\n          </div>\n          <div class=\"ds-page-header__action\"><a class=\"ds-button\" href=\"#add\">Add your weblog</a></div>\n        </div>\n\n        <section class=\"ds-page__section\" data-component=\"typography\">\n          <div class=\"ds-prose\">\n            <h1>A page that reads the others for you</h1>\n            <p>Nobody writes here. Every half hour a script asks each weblog on the list for its feed, sorts what is new by time and writes the front page again. The entries stay where they were written; this is only a window onto them.</p>\n            <h2>What you can do with it</h2>\n            <ul>\n              <li>Read the river in your browser, newest first.</li>\n              <li>Follow one combined feed instead of forty-eight.</li>\n              <li>Take the whole list away as one file and read it your own way.</li>\n            </ul>\n            <h3>For keepers of other planets</h3>\n            <p>The list lives in one plain file. Each weblog is a section headed by its feed address, with a <code>name</code> line and an optional <code>face</code> line; set <code>items_per_page = 40</code> to change how far back the river runs.</p>\n          </div>\n        </section>\n\n        <section class=\"ds-page__section\" data-component=\"links\">\n          <h2 class=\"ds-page__label\">Take it with you</h2>\n          <ul class=\"ds-links\">\n            <li><a class=\"ds-link\" href=\"#river\">The combined feed</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#weblogs\">The list of weblogs</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#weblogs\">The list as one file</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#add\">Add your weblog</a></li>\n            <li><a class=\"ds-link ds-link--quiet\" href=\"#about\">The script</a></li>\n            <li><a class=\"ds-link ds-link--strong\" href=\"#add\">Write to the keepers</a></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-page__section ds-page__section--last\">\n          <div class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">The keepers</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Wilma Aksnes and Teodor Lind read every proposed weblog and look after the script. Neither sells anything; the machine it runs on is lent by a club of forty members.</p>\n              <p class=\"ds-panel__text\">If your entries appear here and you would rather they did not, <a class=\"ds-link\" href=\"#weblogs\">take your weblog out</a> and it is gone at the next round.</p>\n            </div>\n          </div>\n        </section>\n\n      </div>\n\n      <aside class=\"ds-sidebar\">\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">On this site</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#river\">The river</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">The weblogs</a> <span class=\"ds-sidebar__count\">48</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#add\">Add yours</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Feeds</h2>\n          <ul class=\"ds-sidebar__feeds\">\n            <li><a class=\"ds-badge\" href=\"#about\">RSS 2.0</a></li>\n            <li><a class=\"ds-badge\" href=\"#about\">Atom</a></li>\n            <li><a class=\"ds-badge ds-badge--tag\" href=\"#about\">OPML</a></li>\n            <li><a class=\"ds-badge ds-badge--tag\" href=\"#about\">FOAF</a></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Channels</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Country hives</a> <span class=\"ds-sidebar__count\">21</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Town bees</a> <span class=\"ds-sidebar__count\">12</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">Workshop</a> <span class=\"ds-sidebar__count\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-sidebar__link\" href=\"#weblogs\">First year</a> <span class=\"ds-sidebar__count\">6</span></li>\n          </ul>\n        </div>\n        <div class=\"ds-sidebar__block\">\n          <h2 class=\"ds-sidebar__title\">Colophon</h2>\n          <p class=\"ds-sidebar__text\">A script fetches each feed every half hour and writes this page. What you read belongs to the people who wrote it.</p>\n        </div>\n      </aside>\n    </div>\n  </section>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <div class=\"ds-footer__row\">\n      <span>chronoskin gathers; the entries belong to their writers.</span>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#river\">The river</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#weblogs\">Weblogs</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#add\">Add yours</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#about\">About</a></li>\n      </ul>\n    </div>\n    <p class=\"ds-footer__note\">Written again every half hour by a small script. Last round took 41 seconds.</p>\n  </footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.weblogs-2000s.portal.s08.p10.t06.u10\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"weblogs-2000s\",\n    \"years\": [\n      2002,\n      2007\n    ]\n  },\n  \"archetype\": \"portal\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-wl-8a6a\",\n  \"short\": \"v1-wl-8a6a\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #e3e3e3;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f8f8f8;\n  --color-surface-strong: #eeeeee;\n  --color-bar: #707070;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #90b068;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #303030;\n  --color-inverse-text: #e0e0e0;\n  --color-text: #383838;\n  --color-text-muted: #888888;\n  --color-heading: #2d2d2d;\n  --color-heading-alt: #555555;\n  --color-link: #192a72;\n  --color-link-quiet: #555555;\n  --color-link-visited: #666666;\n  --color-link-hover: #000000;\n  --color-link-active: #000000;\n  --color-border: #bbbbbb;\n  --color-border-strong: #000000;\n  --color-border-muted: #e0e0e0;\n  --color-accent: #90b068;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #686868;\n  --color-fill-1: #f8f8f8;\n  --color-fill-2: #eeeeee;\n  --color-fill-3: #e0e0e0;\n  --color-fill-4: #f0f0f0;\n  --color-button: #eeeeee;\n  --color-button-text: #2d2d2d;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #f8f8f8;\n  --color-button-secondary-text: #383838;\n  --color-input: #ffffff;\n  --color-input-text: #2d2d2d;\n  --color-input-border: #767676;\n  --color-disabled: #f0f0f0;\n  --color-disabled-text: #989898;\n  --color-danger: #cc0000;\n  --color-danger-surface: #f8f8f8;\n  --color-success: #538620;\n  --color-warning: #cc6600;\n  --color-notice: #eeeeee;\n  --color-notice-text: #383838;\n  --color-focus: #192a72;\n  --color-shadow: #686868;\n  --color-overlay: #e8e8e8;\n}\n\n/* @part type */\n:root {\n  --font-body: Georgia, \"Times New Roman\", Times, serif;\n  --font-heading: Georgia, Times, serif;\n  --font-ui: \"Trebuchet MS\", Trebuchet, Arial, sans-serif;\n  --font-mono: \"Courier New\", Courier, monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 10px;\n  --text-large: 15px;\n  --text-display: 27px;\n  --text-h1: 18px;\n  --text-h2: 15px;\n  --text-h3: 13px;\n  --line-body: 1.6;\n  --line-heading: 1.25;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\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  --figure-shift: 0.1em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 2px;\n  --border-width-strong: 5px;\n  --border-style: groove;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 40%) 0, color-mix(in srgb, var(--color-bar), white 40%) 1px, var(--color-bar) 1px, var(--color-bar) calc(100% - 1px), color-mix(in srgb, var(--color-bar), black 30%) calc(100% - 1px));\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 40%) 0, color-mix(in srgb, var(--color-bar-alt), white 40%) 1px, var(--color-bar-alt) 1px, var(--color-bar-alt) calc(100% - 1px), color-mix(in srgb, var(--color-bar-alt), black 30%) calc(100% - 1px));\n  --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 40%) 0, color-mix(in srgb, var(--color-inverse), white 40%) 1px, var(--color-inverse) 1px, var(--color-inverse) calc(100% - 1px), color-mix(in srgb, var(--color-inverse), black 30%) calc(100% - 1px));\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 40%) 0, color-mix(in srgb, var(--color-button), white 40%) 1px, var(--color-button) 1px, var(--color-button) calc(100% - 1px), color-mix(in srgb, var(--color-button), black 30%) calc(100% - 1px));\n  --fill-button-hover: var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
