{ "id": "v1-w2-62bb", "long_id": "v1.web-2-0-gloss.blog.s06.p02.t11.u11", "name": "Web 2.0 gloss developer blog", "era": { "slug": "web-2-0-gloss", "code": "w2", "name": "Web 2.0 gloss", "years": [ 2005, 2009 ], "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The developer pages of a Web 2.0 service: a blog with an API reference beside it, built as one sheet with a dark spine down the left that carries the brand in a glossy cell and the sections as rows, and a white content column with a pale introduction band, dated posts with tag labels and a narrow column of feeds and archives. It was common from about 2006 to 2009, when every hosted application opened an API and wrote about it. Buttons and fields are nearly pills (10px), boxes are flat and almost square under heavy 3px rules, headlines are large and light, and the only gloss is on buttons and the brand cell.", "url": "https://chrono.skin/s/v1-w2-62bb", "preview_url": "https://chrono.skin/s/v1-w2-62bb/specimen.html", "files": { "STYLE.md": "# Web 2.0 gloss developer blog\n\n## Summary\n\nThe developer pages of a Web 2.0 service: a blog with an API reference beside it, built as one sheet with a dark spine down the left that carries the brand in a glossy cell and the sections as rows, and a white content column with a pale introduction band, dated posts with tag labels and a narrow column of feeds and archives. It was common from about 2006 to 2009, when every hosted application opened an API and wrote about it. Buttons and fields are nearly pills (10px), boxes are flat and almost square under heavy 3px rules, headlines are large and light, and the only gloss is on buttons and the brand cell.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px viewport. It does not stretch.\n- Everything lives in `.ds-page__sheet`, a sheet in `--color-canvas` with a 1px `--color-border-strong` rule down each side. It is a row of two parts that are equally tall: the spine (`.ds-nav`, `--size-spine` 180px) and `.ds-page__content` (780px).\n- Navigation is the spine, on every page: `.ds-nav__head`, a cell in the bar colour with the brand mark above the name and a tagline; `.ds-nav__links`, one row for each section; then `.ds-nav__block` cells for the search field, a status line and the account line. The spine is filled with `--fill-inverse` from top to bottom. There is no bar across the top of the page.\n- Content sits in `.ds-page__body`, padded `--size-pad` (28px) at the sides, so the working width is 724px. Home page, top to bottom: the hero band, bleeding to both edges of the content column (claim and two buttons on the left, a `.ds-code` sample `--size-code` 300px wide on the right); the `.ds-stats` line; the `.ds-grid` of four cells; then `.ds-page__columns`: `.ds-page__main` (506px) with the `.ds-tabs`, the post list and the pagination, and `.ds-page__side` of `--size-side` (190px) on the right, `--size-gutter` (28px) apart, with one panel and the link blocks. The footer strip closes the content column.\n- Spacing scale: `--space-1` 2px (inside badges, between a title and its meta line), `--space-2` 5px (gaps between buttons and tags, tab padding, above a ruled heading), `--space-3` 9px (table cell padding, nav rows, notice padding), `--space-4` 14px (panel padding, grid gap, form rows, under a ruled heading), `--space-5` 22px (between posts, between side blocks, above the columns), `--space-6` 32px (hero padding, above a section; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 24px tall, the hero buttons `--size-control-large` 34px, a feed icon `--size-icon` 12px, the textarea `--size-textarea` 90px, the dialog `--size-dialog` 400px.\n- Views: the specimen is one example site of four screens, each a `.ds-view` section inside `.ds-page__body`, with the spine and the footer written once around them in the sheet. `home` is the blog's front page (hero, stats, library cells, the posts under their tabs with pagination; panel, feeds, archive, tags and links in the side column). `post` is one post, where every title leads (prose with a code block beside the post's contents, then comments and the comment form side by side with the notices). `reference` is one page of the API reference (tabs over the method table with status badges and their key, then how to make a call beside the reference menu). `keys` is the reader's own keys (a toolbar, the key table, the confirming dialog; limits and the account menu in the side column; the empty state for listed programs below). Links are plain `href=\"#name\"`. The spine row of the showing view is marked by a `.ds-page:has(#name:target)` rule, Blog also when no view is named and for `post`.\n- Inner pages drop the hero, the stats line and the grid. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place (a large light title and one line on the left, at most two buttons on the right, a 3px rule under it), then either `.ds-page__columns` 22px below with the same two columns, or, for a page that needs the whole width, a `.ds-section--tight` holding `.ds-tabs` directly above the table they switch. `.ds-tabs` always sit directly on top of the list or table they switch. The side column holds `.ds-sidebar` blocks and at most one `.ds-panel`; blocks that would make the main column much longer than the side column (comments, a form, an empty state) go below the columns, across the full width or as the two halves of a `.ds-page__split`.\n- Posts and comments are separated by 22px of space and a 1px rule; table rows are ruled; nothing is a card except the grid cells and the panel.\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- A serif set: `--font-body` and `--font-heading` are Georgia, \"Times New Roman\", serif. `--font-ui` is \"Lucida Grande\", Arial, Helvetica, sans-serif for buttons, tabs, fields and table text. `--font-mono` (\"Courier New\") for inline code only.\n- `--text-base` 13px at `--line-body` 1.3; `--text-small` 11px for meta lines and the footer; `--text-ui` 11px bold (`--weight-ui` 700).\n- Headings are Georgia in regular weight (`--weight-heading` and `--weight-display` 400): `--text-display` 22px (the name in the header, hero title), `--text-h1` 20px, `--text-h2` 17px, `--text-h3` 14px, at `--line-heading` 1.2. `--text-large` 15px for the hero lead and the large button. Emphasis inside text is `--weight-bold` 700.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are none, `--link-decoration-hover` underline.\n\n- Matte, not glossy: `--fill-bar-alt`, `--fill-inverse`, `--fill-accent`, `--fill-panel` and `--fill-button-secondary` are flat colours. Only `--fill-bar` (12% lighter at the top) and `--fill-button` (18% lighter at the top) carry a soft sheen with no hard break.\n- Softly rounded boxes, nearly square controls: `--radius-panel` and `--radius-page` 6px, `--radius-control` and `--radius-pill` 3px.\n- No shadows of any kind: `--shadow-panel`, `--shadow-control*`, `--shadow-dialog` and `--shadow-text` are none.\n- `--border-width` and `--border-width-strong` are 1px solid. `--focus-ring` is a 1px dotted outline in `--color-focus`. `--transition` none.\n\n## Components\n\n- `.ds-page`: on ``; paints `--fill-page`. `.ds-page__sheet` is the row of spine and content; `.ds-page__content` stacks `.ds-page__body` and the footer; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__side`; `.ds-page__split` is two equal columns below them. `.ds-section` separates blocks by 32px (`.ds-section--tight` 22px); `.ds-section__label` is an 18px heading under a 3px rule. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first).\n- `.ds-nav`: the spine. `.ds-nav__head` holds the `.ds-brand` and `.ds-nav__tagline`; `.ds-nav__links` holds one bold `.ds-nav__link` row for each section (current: `is-current`, the bar fill with a 3px edge in `--color-bar-text` on its left, so that it reads apart from the head above it); each `.ds-nav__block` holds a `.ds-nav__label` over a `.ds-nav__text` line (with `.ds-nav__tool` links) or the `.ds-nav__search` form (`.ds-nav__input` and a small secondary button). Up to six section rows; a seventh belongs in a side column.\n- `.ds-brand`: the site's mark and name at the top of the spine, linking home; one per page. `.ds-brand__mark` is a tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark in `--color-button-text`, 1.5 times the size of the name and above it, so that a long name still fits the spine. `.ds-brand__name` is the name in `--font-heading` at `--text-h1` in `--weight-display`, coloured `--color-bar-text` for the cell it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the page introduction, a pale band across the content column: `.ds-hero__main` with `.ds-hero__title` (32px light), `.ds-hero__lead` and `.ds-hero__action` (one large primary and one large secondary button), and `.ds-hero__code` holding a `.ds-code` sample. One per site, on the home page.\n- `.ds-code`: a framed block of monospace lines: an optional `.ds-code__title` strip, then `.ds-code__body` (a `pre`), with `.ds-code__dim` for replies and remarks. `.ds-code--after` gives it a lower margin inside running text.\n- `.ds-page-header`: the head of an inner page instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (26px light) and one grey `.ds-page-header__text` line (which may carry tags), `.ds-page-header__actions` at the right, a 3px rule under it. One per inner page.\n- `.ds-stat`: one figure, a pink 18px `.ds-stat__number` and an 11px `.ds-stat__label` on one line; three or four of them form the `.ds-stats` line between two 3px rules.\n- `.ds-grid`: a row of four small cells, 14px apart. `.ds-grid__cell` takes `--1` to `--4` for the fills and holds a `.ds-grid__title`, a `.ds-grid__text` line and a bold `.ds-grid__more` link. For libraries, downloads or sections; repeat the fills in a second row.\n- `.ds-tabs`: plain word links on a hairline (`.ds-tabs__tab`, current: `is-current`, bold over a 3px rule; `.ds-tabs__count` for a grey number). Directly above the list or table they switch.\n- `.ds-prose`: long text: h1 (light), h2, h3 (pink), p, ul, ol, code, strong, mark and underlined links.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` for titles, `.ds-link--quiet` (grey). `.ds-link--feed` puts a `.ds-link__icon`, a small orange tile with the feed drawing, before the words. `.ds-links` lays several out in a row.\n- `.ds-button`: primary action: glossy blue pill, white bold 12px, 24px tall. Variants `.ds-button--secondary` (pale grey, plain text; the usual button), `.ds-button--danger` (`--color-danger`, only for what cannot be undone) and `.ds-button--large` (34px, the hero). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` the toolbar over a table. One primary button per form, panel or dialog.\n- `.ds-form`: labels above the controls: `.ds-form__row` with a bold `.ds-form__label` and a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` (full width, corners of `--radius-control`); `.ds-form__pair` puts two rows side by side; `.ds-form__hint` and `.ds-form__error`; `is-error`, `is-focus`, `is-disabled`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`. `.ds-form--after` adds space above a form that follows notices.\n- `.ds-table`: no frame: a `.ds-table__head` row in the bar fill, `.ds-table__row` (`is-alt` for alternate rows) of ruled `.ds-table__cell`, a 3px rule under the last row. `is-numeric` right-aligns and bolds; `is-name` keeps a name on one line; `.ds-table__name` is a monospace name and `.ds-table__verb` the grey monospace line under it.\n- `.ds-list`: posts or comments. Each `.ds-list__item` (last: `is-last`) is a `.ds-list__date` leaf (`.ds-list__day` over `.ds-list__month`) beside `.ds-list__body`: `.ds-list__title` holding a `.ds-link--title`, a grey `.ds-list__meta` line, `.ds-list__text`, and `.ds-list__foot` with `.ds-badge--tag` links and a bold `.ds-list__more` link at the right. A comment leaves out the title and the foot.\n- `.ds-panel`: a flat tinted box under a 3px pink rule: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and `.ds-panel__actions`. At most one per side column, for the one thing a reader should do.\n- `.ds-badge`: a small squared label, pale pink by default. Variants `.ds-badge--count` (button colours), `.ds-badge--tag` (grey, a label link), `.ds-badge--new` (orange, the word NEW typed in capitals), and the status labels `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`; one per table row. `.ds-badges` lays a key out in a row.\n- `.ds-sidebar`: a block in the side column: `.ds-sidebar__title` under a 3px rule, then a `.ds-sidebar__list` of `.ds-sidebar__item` rows (current: `is-current`), each a link with an optional `.ds-sidebar__count`, or a `.ds-sidebar__tags` run of tag badges.\n- `.ds-notice`: a boxed message with a 3px accent edge on the left and a bold `.ds-notice__title`. `.ds-notice--error` in the danger colours. `is-first` removes the top margin.\n- `.ds-pagination`: a row above a 3px rule: `.ds-pagination__start` and `.ds-pagination__end` hold the newer and older links at the two ends, page numbers between; `.ds-pagination__link`, current `is-current` (a blue pill), unavailable `is-disabled`, `.ds-pagination__gap`.\n- `.ds-breadcrumb`: an 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` (a slash) and `.ds-breadcrumb__current`, above the page header.\n- `.ds-dialog`: a box with a translucent halo: a pale `.ds-dialog__title` strip (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons at the left, the acting one first. It sits on `.ds-dialog__backdrop`.\n- `.ds-empty`: a tinted box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the pale strip that closes the content column: `.ds-footer__links` of bold `.ds-footer__link` entries on the left, `.ds-footer__legal` on the right.\n- `.ds-menu`: a fly-out beside a link of the spine, for the parts of the section it names. The `li` carries `.ds-menu`, its link gets a `.ds-menu__caret` (a right guillemet), and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last row. A white hairline box that opens to the right of the spine, over the content, on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-tooltip`: a small round question mark (`.ds-tooltip__trigger`, a link to the reference) that shows `.ds-tooltip__tip`, a pale speech bubble in the notice colours, above it on hover or focus. It follows a figure or a table heading whose meaning needs one sentence; code never goes into it.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a pale glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For the short help beside a working page, in a `.ds-sidebar`.\n- `.ds-progress`: how much of a limit is used: a `.ds-progress__label` line (the program in `.ds-progress__name`, the share on the right) over `progress.ds-progress__bar`, a pill-shaped track filled with the glossy button fill. Variants of the bar: `.ds-progress__bar--success`, `--warning` (near the limit), `--danger` (over it). One per key in the limits panel.\n- `.ds-avatar`: the picture of an author or commenter: an 18px tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4`. It opens a `.ds-list__meta` line, before the name; `.ds-avatar--large` doubles it for an author's own page. Decorative: the name always follows it.\n\n## Never\n\n- `row-gap <= 50px`: posts are 22px and a rule apart.\n- `block-gap <= 32px`: sections are at most 32px apart.\n- `content-width <= 960px`: all text stays inside the sheet.\n- `palette-colours <= 32`: one blue family, lime, yellow, orange, olive, dark red and warm greys; no further hues.\n- `font-size <= 22px`: the name in the header and the hero title are the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Georgia, Lucida Grande and a monospace for inline code.\n- `line-height <= 1.3`: body text is 13px on 17px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 6px`: corners are 3 or 6px.\n- `border-width <= 1px`: every border and rule is a 1px hairline.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 10%`: only the bar, the table head and the primary button carry a sheen.\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 and use tokens only. A new section of the site is a row of the spine; a new view of one page is a tab above its table or list; anything dated is a `.ds-list` item with a date leaf; anything a program would type or receive is a `.ds-code` block; a set of links is a `.ds-sidebar` under its 3px rule, and the single invitation of a page is the `.ds-panel`. A new heading inside the content takes the 3px `--color-border` rule above it, a new band `--fill-bar-alt` bleeding to the edges of the content column. Keep gloss to buttons and the bar fill, keep boxes flat, and make any extra shade with `color-mix()` over existing colour tokens.\n", "components.css": ":root {\n --size-page: 960px;\n --size-spine: 180px;\n --size-pad: 28px;\n --size-side: 190px;\n --size-gutter: 28px;\n --size-control: 24px;\n --size-control-large: 34px;\n --size-code: 300px;\n --size-icon: 12px;\n --size-label: 110px;\n --size-textarea: 90px;\n --size-dialog: 400px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 9px;\n --space-4: 14px;\n --space-5: 22px;\n --space-6: 32px;\n --size-drop: 170px;\n --size-tip: 200px;\n --size-meter: 12px;\n --size-avatar: 18px;\n}\n\n/* shell: one sheet on the page, split into a coloured spine on the left and the content beside it */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__sheet {\n display: flex;\n align-items: stretch;\n width: var(--size-page);\n margin: 0 auto;\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-canvas);\n}\n.ds-page__content {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n min-width: 0;\n}\n.ds-page__body {\n flex: 1 0 auto;\n padding: 0 var(--size-pad) var(--space-6);\n}\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__side {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-page__split {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n align-items: start;\n gap: var(--size-gutter);\n margin: var(--space-6) 0 0;\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-5); }\n.ds-section__label {\n margin: 0 0 var(--space-4);\n padding: var(--space-2) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\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/* nav: the spine, an inverted column; brand in a glossy cell, then the sections as rows, the search field and a status line */\n.ds-nav {\n flex: 0 0 var(--size-spine);\n width: var(--size-spine);\n margin: 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-nav__head {\n padding: var(--space-5) var(--space-4) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-brand {\n display: block;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h1) * 1.5);\n height: calc(var(--text-h1) * 1.5);\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\n display: block;\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n}\n.ds-nav__links {\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-4);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__link.is-current { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#post:target) .ds-nav__link[href=\"#home\"] { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#reference:target) .ds-nav__link[href=\"#reference\"] { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#keys:target) .ds-nav__link[href=\"#keys\"] { padding-left: calc(var(--space-4) - var(--border-width-strong)); border-left: var(--border-width-strong) var(--border-style) var(--color-bar-text); background: var(--fill-bar); color: var(--color-bar-text); text-shadow: var(--shadow-text); }\n.ds-nav__block {\n padding: var(--space-4);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n font-size: var(--text-small);\n}\n.ds-nav__label {\n display: block;\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-nav__input {\n flex: 1 1 0;\n min-width: 0;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus { outline: var(--focus-ring); }\n.ds-nav__text { margin: 0; }\n.ds-nav__tool {\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* hero: a pale band at the top of the content; claim and actions on the left, a sample call on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--size-gutter);\n margin: 0 calc(0px - var(--size-pad));\n padding: var(--space-6) var(--size-pad);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n color: var(--color-bar-alt-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}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-hero__code {\n flex: 0 0 var(--size-code);\n width: var(--size-code);\n}\n\n/* code: a framed block of monospace lines, a title strip above it */\n.ds-code {\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n color: var(--color-text);\n overflow: hidden;\n}\n.ds-code__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-code__body {\n margin: 0;\n padding: var(--space-3);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n.ds-code__dim { color: var(--color-text-muted); }\n.ds-code--after { margin: 0 0 var(--space-4); }\n\n/* stats: one line of figures between two heavy rules */\n.ds-stats {\n display: flex;\n gap: var(--space-5);\n margin: var(--space-5) 0 0;\n padding: var(--space-3) 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-stat {\n display: flex;\n flex: 1 1 0;\n align-items: baseline;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-stat__number {\n color: var(--color-heading-alt);\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}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: four small cells of colour in a row, one for each library */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: var(--space-5) 0 0;\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--color-surface-alt);\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* tabs: plain words on a hairline; a heavy rule under the current one */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0px - var(--border-width));\n padding: var(--space-2) 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 line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-heading-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-tabs__count { color: var(--color-text-muted); font-weight: var(--weight-body); }\n\n/* page header: head of an inner page; a large title, one line, the action on the right, a heavy rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); font-weight: var(--weight-display); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { color: var(--color-heading-alt); font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose mark {\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a { color: var(--color-link); text-decoration: underline; }\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title { text-decoration: var(--link-decoration-quiet); }\n.ds-link--quiet {\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 { color: var(--color-link); }\n.ds-link--feed {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-link__icon {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) + var(--space-1) + var(--space-1));\n height: calc(var(--size-icon) + var(--space-1) + var(--space-1));\n border-radius: var(--radius-pill);\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-link__icon svg {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* buttons */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-buttons--bar { margin: 0 0 var(--space-4); }\n.ds-button {\n display: inline-block;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 75%, var(--color-shadow));\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: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n 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 background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--secondary {\n border-color: var(--color-border-strong);\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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-link-quiet);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 75%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 28%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 8%) 50%, var(--color-danger) 51%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 40%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 16%) 50%, color-mix(in srgb, var(--color-danger), var(--color-surface) 6%) 51%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\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: labels above the controls, one column */\n.ds-form { margin: 0; }\n.ds-form--after { margin-top: var(--space-4); }\n.ds-form__row { margin: 0 0 var(--space-4); }\n.ds-form__pair {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__pair .ds-form__row {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; padding: 0 var(--space-2); }\n.ds-form__textarea {\n height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n\n/* table: the reference; a bar for a head, ruled rows, monospace names */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n line-height: var(--line-body);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\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 text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__cell.is-name { white-space: nowrap; }\n.ds-table__name {\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-table__verb {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* list: the posts; a date leaf in the margin, title, a meta line, a paragraph, tags */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-last {\n margin-bottom: 0;\n border-bottom: 0;\n}\n.ds-list__date {\n flex: 0 0 auto;\n min-width: calc(var(--text-h2) * 2.4);\n padding: var(--space-1) var(--space-2) var(--space-2);\n border-radius: var(--radius-panel);\n background: var(--color-surface-strong);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-list__day {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n}\n.ds-list__month {\n display: block;\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-list__meta {\n margin: var(--space-1) 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__text { margin: 0 0 var(--space-3); }\n.ds-list__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-list__more { margin-left: auto; font-weight: var(--weight-bold); }\n\n/* badge: a small squared label; tags, verbs, status */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\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: calc(var(--text-small) + var(--space-2));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-button);\n color: var(--color-button-text);\n}\n.ds-badge--tag {\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n.ds-badge--tag:hover,\n.ds-badge--tag.is-hover { color: var(--color-link); }\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-4);\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a flat tinted box under a heavy rule in the accent colour */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-heading-alt);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); font-size: var(--text-ui); }\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-3);\n font-size: var(--text-small);\n}\n\n/* sidebar: a headed block of links in the right column, a heavy grey rule above the heading */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__item.is-current .ds-link { color: var(--color-heading); }\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n white-space: nowrap;\n}\n.ds-sidebar__tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n}\n\n/* notice */\n.ds-notice {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice.is-first { margin-top: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: older and newer at the two ends, page numbers between */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-border); }\n.ds-pagination__link.is-current {\n border-color: var(--color-button);\n background: var(--color-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n font-weight: var(--weight-body);\n}\n.ds-pagination__gap { color: var(--color-text-muted); }\n.ds-pagination__end { margin-left: auto; }\n.ds-pagination__start { margin-right: auto; }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-4) 0 var(--space-3);\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); }\n\n/* dialog: a square-cornered box with a translucent halo, the title on a pale strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration);\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n gap: var(--space-2);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer: a pale strip at the foot of the content column */\n.ds-footer {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-4) var(--size-pad);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal { margin: 0; }\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n margin-left: var(--space-1);\n font-size: var(--text-small);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n width: var(--size-drop);\n margin: 0;\n padding: var(--space-1) 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n list-style: none;\n text-align: left;\n text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n margin-top: var(--space-1);\n padding-top: var(--space-1);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* accordion: questions that open and close, one glossy strip each */\n.ds-accordion {\n margin: 0 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n overflow: hidden;\n}\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__item.is-first { border-top: 0; }\n.ds-accordion__title {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker { display: none; }\n.ds-accordion__title::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-ui) * 0.7);\n height: calc(var(--text-ui) * 0.7);\n margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.7));\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-ui) * 0.12)) 100% no-repeat;\n color: var(--color-link-quiet);\n}\n.ds-accordion__item[open] > .ds-accordion__title::before { background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat; }\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover { color: var(--color-link); }\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus { outline: var(--focus-ring); }\n.ds-accordion__body {\n margin: 0;\n padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n\n/* tooltip: a question mark that shows a speech-bubble hint on hover or focus */\n.ds-tooltip {\n display: inline-block;\n position: relative;\n vertical-align: baseline;\n}\n.ds-tooltip__trigger {\n display: inline-block;\n width: calc(var(--text-small) * 1.5);\n height: calc(var(--text-small) * 1.5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) * 1.5 - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus { outline: var(--focus-ring); }\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-3));\n left: calc(0px - var(--space-3));\n z-index: 30;\n width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: var(--shadow-panel);\n color: var(--color-notice-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n text-shadow: none;\n white-space: normal;\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(var(--space-3) + var(--text-small) * 0.75 - var(--space-2));\n width: calc(var(--space-2) * 2);\n height: calc(var(--space-2) * 2);\n margin-top: calc(0px - var(--space-2));\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n background: var(--color-notice);\n transform: rotate(45deg);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip { display: block; }\n\n/* progress: a glossy bar in a track, with a line saying what it measures */\n.ds-progress { margin: 0 0 var(--space-3); }\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__name { color: var(--color-text); }\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-meter);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n appearance: none;\n}\n.ds-progress__bar::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress__bar::-webkit-progress-value { background: var(--fill-button); }\n.ds-progress__bar::-moz-progress-bar { background: var(--fill-button); }\n.ds-progress__bar--success::-webkit-progress-value { background: var(--color-success); }\n.ds-progress__bar--success::-moz-progress-bar { background: var(--color-success); }\n.ds-progress__bar--warning::-webkit-progress-value { background: var(--color-warning); }\n.ds-progress__bar--warning::-moz-progress-bar { background: var(--color-warning); }\n.ds-progress__bar--danger::-moz-progress-bar { background: var(--color-danger); }\n\n/* avatar: the picture of a member who has not sent one, a head and shoulders on a small tile */\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n position: relative;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n overflow: hidden;\n vertical-align: middle;\n}\n.ds-avatar::before,\n.ds-avatar::after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n background: var(--color-text-muted);\n opacity: 0.55;\n}\n.ds-avatar::before {\n top: 16%;\n left: 32%;\n width: 36%;\n height: 36%;\n}\n.ds-avatar::after {\n top: 58%;\n left: 12%;\n width: 76%;\n height: 76%;\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--3 { background: var(--color-fill-3); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--large {\n width: calc(var(--size-avatar) * 2);\n height: calc(var(--size-avatar) * 2);\n}\n\n/* where the added pieces sit in this layout: the menu flies out to the right of the spine */\n.ds-nav__links .ds-menu__list {\n top: 0;\n left: 100%;\n border-radius: 0 var(--radius-panel) var(--radius-panel) 0;\n}\n.ds-stat .ds-tooltip { margin-left: var(--space-1); }\n.ds-panel .ds-progress { margin-bottom: var(--space-3); }\n.ds-sidebar .ds-accordion { margin: var(--space-2) 0 0; }\n.ds-list__meta .ds-avatar { margin-right: var(--space-1); }\n", "specimen.html": "\n\n\n\nchronoskin: Web 2.0 gloss developer blog specimen\n\n\n\n\n
\n\n
\n
\n chronoskin\n

for developers

\n
\n \n
\n
\n \n \n
\n
\n
\n The API today\n

All methods answering. Last trouble: 19 days ago.

\n
\n
\n Signed in\n

maren_holt, 2 keys

\n
\n
\n\n
\n
\n\n
\n\n
\n
\n

Build on your notebooks

\n

Everything chronoskin does in the browser, your own program can do with one web address and a key.

\n

\n Get a key\n Read the reference\n

\n
\n
\n
\n

Ask for the newest notes

\n 
GET /v2/notes?book=harbour&key=YOUR_KEY\n\n200 OK\n{ \"notes\": [\n  { \"id\": 412, \"title\": \"Ferry times\" },\n  { \"id\": 409, \"title\": \"Tide table\" } ] }
\n
\n
\n
\n\n
    \n
  • 1.2 millioncalls answered yesterday
    • \n
  • 840programs with a key ?A program counts once it has made a call with its key.
    • \n
  • 0.09 sfor a usual answer
    • \n
\n\n
\n
\n

Ruby

\n

Every method in one small file. Version 0.4.

\n

Get the library

\n
\n
\n

PHP

\n

One class, no extensions needed. Version 1.1.

\n

Get the library

\n
\n
\n

Python

\n

Reads and writes notes in three lines. Version 0.9.

\n

Get the library

\n
\n
\n

JavaScript

\n

For pages that show a notebook. Version 0.2.

\n

Get the script

\n
\n
\n\n
\n
\n \n
    \n
  1. \n
    12Oct
    \n
    \n

    Version 2 of the notes API is open to everyone NEW

    \n

    by Ines Varga, 14 comments

    \n

    After six weeks behind a sign-up list, version 2 is switched on for every key. Answers come back as JSON by default, paging works the same way on every list, and the old XML replies stay for a year.

    \n

    releaseapiRead on »

    \n
    \n
    2. \n
  2. \n
    3Oct
    \n
    \n

    Paging through long lists without losing your place

    \n

    by Tobias Renn, 6 comments

    \n

    Page numbers break when a notebook changes while you read it. The new after marker does not: ask for the notes after the last one you saw.

    \n

    howtopagingRead on »

    \n
    \n
    3. \n
  3. \n
    21Sep
    \n
    \n

    What we learned from a million calls a day

    \n

    by Maren Holt, 22 comments

    \n

    Most calls ask for the same forty notebooks. We now keep those answers ready, and nine calls in ten come back in under a tenth of a second.

    \n

    serversnumbersRead on »

    \n
    \n
    4. \n
  4. \n
    9Sep
    \n
    \n

    A Ruby library, written by one of you

    \n

    by Ines Varga, 3 comments

    \n

    Oskar Lind wrapped every method in forty lines of Ruby and sent it in. It is now the library we point to.

    \n

    librariesthanksRead on »

    \n
    \n
    5. \n
\n \n
\n\n
\n
\n

New here?

\n
\n

A key is free and takes a minute. The first call usually works within five.

\n
\n Get a key\n First steps\n
\n
\n
\n \n \n \n \n
\n
\n\n
\n\n
\n\n
    \n
  1. Developers
    2. \n
  2. /
    3. \n
  3. Blog
    4. \n
  4. /
    5. \n
  5. Version 2 is open to everyone
    6. \n
\n\n
\n
\n

Version 2 of the notes API is open to everyone

\n

Posted on 12 October by Ines Varga, filed under release api

\n
\n
\n See the reference\n
\n
\n\n
\n
\n
\n

What changes today

\n

After six weeks behind a sign-up list, version 2 is switched on for every key. Nothing you have written stops working: version 1 keeps answering for a year, at its old address.

\n

Answers in JSON

\n

Every method now answers in JSON unless you ask otherwise. Add format=xml to a call and you get the reply you are used to. The names of the fields are the same in both.

\n

Three things to check in your program

\n
    \n
  • Calls go to /v2/ instead of /v1/.
    • \n
  • Lists come twenty to a page, not fifty.
    • \n
  • A missing note answers 404, no longer an empty list.
    • \n
\n

The full list of methods, with their limits, is in the reference.

\n
\n
\n

The same call, old and new

\n 
before  GET /v1/notes.xml?book=harbour\nnow     GET /v2/notes?book=harbour
\n
\n\n
\n\n
\n \n
\n

Still on version 1?

\n
\n

It answers until next October. Your keys work for both.

\n
\n Check your keys\n
\n
\n
\n \n
\n
\n\n
\n
\n

Four of 14 comments

\n
    \n
  1. \n
    12Oct
    \n
    \n

    Oskar Lind wrote at 10:42

    \n

    Moved the Ruby library over in ten minutes. The 404 for a missing note is what I wanted all along.

    \n
    \n
    2. \n
  2. \n
    12Oct
    \n
    \n

    quietharbour wrote at 13:05

    \n

    Does the limit of 120 calls a minute count per key or per program?

    \n
    \n
    3. \n
  3. \n
    13Oct
    \n
    \n

    Ines Varga wrote at 9:20 Staff

    \n

    Per key. The reference says so now; thank you for asking.

    \n
    \n
    4. \n
  4. \n
    13Oct
    \n
    \n

    Annika Dorn wrote at 16:48

    \n

    Paging by marker fixed a bug we had chased for a month.

    \n
    \n
    5. \n
\n

Show all 14 comments

\n
\n\n
\n

Write a comment

\n
\n

Not posted yet. The mail address below does not look complete.

\n

First comment here? It is read by one of us before it appears, usually within the hour.

\n
\n
\n
\n
\n \n \n
\n
\n \n \n

Add the ending, such as .example.

\n
\n
\n
\n \n \n

Plain text. Lines that start with four spaces are shown as code.

\n
\n
\n
\n \n \n
\n
\n Next time\n \n
\n
\n
\n \n \n
\n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Developers
    2. \n
  2. /
    3. \n
  3. API reference
    4. \n
  4. /
    5. \n
  5. Notes
    6. \n
\n\n
\n
\n

API reference: notes

\n

Every method that reads or writes a note, with the address to call and how often you may.

\n
\n
\n Get a key\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
MethodWhat it doesStatusCalls a minute
notes.list
GET /v2/notes		The notes of one notebook, newest first, twenty to a page.Stable120
notes.get
GET /v2/notes/412		One note with its text, labels and the people who can read it.Stable120
notes.add
POST /v2/notes		Adds a note to a notebook. Needs a key that may write.Stable30
notes.remove
DELETE /v2/notes/412		Moves a note to the bin, where it stays for thirty days.Stable30
search.find
GET /v2/search		Notes that contain every word of the query.Beta20
export.all
GET /v1/export		Every note as one XML file. Use notes.list with paging instead.Going away2
\n

\n Stable will not change within version 2\n Beta may still change\n Going away switched off next October\n NEW added this month\n Staff\n 6 methods\n api\n

\n
\n\n
\n
\n

Making a call

\n
\n

Every call is a plain web address with your key on the end. Lists take page or after; everything else is named in the table above.

\n
\n
\n

notes.get

\n 
GET /v2/notes/412?key=YOUR_KEY\n\n200 OK\n{ \"id\": 412, \"title\": \"Ferry times\",\n  \"labels\": [\"harbour\", \"travel\"],\n  \"changed\": \"2008-10-12T09:20:00Z\" }
\n
\n

\n Get a key\n What changed in version 2\n Libraries\n Back to the blog\n

\n
\n
\n \n \n
\n
\n\n
\n\n
\n\n
    \n
  1. Developers
    2. \n
  2. /
    3. \n
  3. maren_holt
    4. \n
  4. /
    5. \n
  5. Keys
    6. \n
\n\n
\n
\n

Your keys

\n

One key for each program that calls the API. A key can read, or read and write.

\n
\n
\n Keys and limits\n
\n
\n\n
\n
\n\n
\n \n \n \n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ProgramMayStatusCalls today
Ferry timetable page
7f3a...c2e1		readIn use4,812
Notebook by mail
b90d...41aa		read and writeNear its limit27,440
Old desktop tool
02c7...9be4		readRevoked0
Test script
e1d4...7703		read and writeIn use36
\n\n
\n
\n
\n

Revoke the key of Notebook by mail? close

\n
\n

The program stops getting answers at once. A revoked key cannot be switched on again; you would make a new one.

\n
\n
\n \n Keep it\n
\n
\n
\n
\n\n
\n\n
\n
\n

Your limits

\n
\n

120 calls a minute and 30,000 a day for each key. One key is close to the daily limit.

\n
\n

Notebook by mail91%

\n 27,440 of 30,000\n
\n
\n

Ferry timetable page16%

\n 4,812 of 30,000\n
\n
\n How limits work\n
\n
\n
\n \n \n \n
\n
\n\n
\n

Programs you have listed for others

\n
\n

Nothing listed yet

\n

Tell other people what you built and it appears beside the blog.

\n List a program\n
\n
\n\n
\n\n
\n\n\n
\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.web-2-0-gloss.blog.s06.p02.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"web-2-0-gloss\",\n \"years\": [\n 2005,\n 2009\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w2-62bb\",\n \"short\": \"v1-w2-62bb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #faf9f7;\n --color-surface-strong: #deeaf7;\n --color-bar: #1b5790;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ccdeaf;\n --color-bar-alt-text: #393733;\n --color-inverse: #393733;\n --color-inverse-text: #ffffff;\n --color-text: #393733;\n --color-text-muted: #999999;\n --color-heading: #393733;\n --color-heading-alt: #93883f;\n --color-link: #105cb6;\n --color-link-quiet: #666666;\n --color-link-visited: #578cca;\n --color-link-hover: #2e6ab1;\n --color-link-active: #a12a2a;\n --color-border: #cccccc;\n --color-border-strong: #9aafe5;\n --color-border-muted: #ddeaf6;\n --color-accent: #fff3aa;\n --color-accent-text: #393733;\n --color-accent-alt: #e45b00;\n --color-fill-1: #d5e5f5;\n --color-fill-2: #fff9d6;\n --color-fill-3: #ccdeaf;\n --color-fill-4: #f6f8fb;\n --color-button: #2e6ab1;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #105cb6;\n --color-input: #ffffff;\n --color-input-text: #393733;\n --color-input-border: #bbcdde;\n --color-disabled: #faf9f7;\n --color-disabled-text: #999999;\n --color-danger: #a12a2a;\n --color-danger-surface: #ffe8cd;\n --color-success: #325b0a;\n --color-warning: #ffa100;\n --color-notice: #fff9d6;\n --color-notice-text: #393733;\n --color-focus: #75abea;\n --color-shadow: #393733;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Georgia, \"Times New Roman\", serif;\n --font-heading: Georgia, \"Times New Roman\", serif;\n --font-ui: \"Lucida Grande\", Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 15px;\n --text-display: 22px;\n --text-h1: 20px;\n --text-h2: 17px;\n --text-h3: 14px;\n --line-body: 1.3;\n --line-heading: 1.2;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 6px;\n --radius-pill: 3px;\n --radius-page: 6px;\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 12%) 0, var(--color-bar) 100%);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, var(--color-button) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 6%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\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" } }