{ "id": "v1-w2-11b2-dc", "long_id": "v1.web-2-0-gloss.portal.s01.p01.t11.u02.dc", "name": "Web 2.0 gloss portal", "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": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "compact", "summary": "A fixed-width community portal in the Web 2.0 look: a glossy saturated bar across the whole viewport, a pale strip under it, pastel blocks for the introduction and feature cells, and a dense reader-ranked list beside a right sidebar on a white page. It was common from about 2005 to 2009 on social bookmarking, link-sharing and start pages. Gloss and rounding are small and local (bar, primary button, count blocks, tabs, corners of 3 to 8px), text is small Arial, and structure comes from 1px grey hairlines and flat grey title strips rather than from cards or shadows.", "url": "https://chrono.skin/s/v1-w2-11b2-dc", "preview_url": "https://chrono.skin/s/v1-w2-11b2-dc/specimen.html", "files": { "STYLE.md": "# Web 2.0 gloss portal\n\n## Summary\n\nA fixed-width community portal in the Web 2.0 look: a glossy saturated bar across the whole viewport, a pale strip under it, pastel blocks for the introduction and feature cells, and a dense reader-ranked list beside a right sidebar on a white page. It was common from about 2005 to 2009 on social bookmarking, link-sharing and start pages. Gloss and rounding are small and local (bar, primary button, count blocks, tabs, corners of 3 to 8px), text is small Arial, and structure comes from 1px grey hairlines and flat grey title strips rather than from cards or shadows.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 950px, centred in a 1024px viewport. It does not stretch.\n- The two bars and the footer span the full viewport; their content sits in a centred `--size-page` column (`.ds-nav__inner`). The bar is `--size-nav` (50px) tall, the strip under it `--size-subnav` (26px).\n- Everything else sits in `.ds-page__wrap`, a sheet in `--color-canvas` with no frame (950px of content plus `--space-5` of padding at each side, so text stays clear of the edge when a palette gives the page another colour than the canvas). On the home page that is the hero block, a row of four grid cells, then two columns; on inner pages a breadcrumb, the page header, then two columns.\n- Two columns: main (630px) and a right sidebar of `--size-sidebar` (300px), separated by `--size-gutter` (20px). The sidebar is always on the right.\n- Spacing scale: `--space-1` 2px (inside controls, between a title and its meta line, between tags), `--space-2` 5px (control padding, gaps between buttons, sidebar row padding, title strip padding), `--space-3` 10px (list row padding, cell padding, gap between grid cells, gap between stacked blocks above the columns), `--space-4` 15px (panel padding, tab padding, footer strip), `--space-5` 20px (hero padding, gap between sidebar blocks, gap above the columns), `--space-6` 30px (gap between unrelated sections in the main column; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 22px tall, the hero input and large button `--size-control-large` 30px, count block `--size-count` 50px wide, search field `--size-search` 150px, form label column `--size-label` 120px, dialog `--size-dialog` 380px.\n- Inner pages (everything below the home page) drop the hero and the grid band. In `.ds-page__wrap`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place across the full 950px (title and one line on the left, buttons on the right, `--space-3` under the breadcrumb), then an optional `.ds-stats` row across the full width (`--space-3` below the header), then `.ds-page__columns` (`--space-5` below). The same two columns remain: `.ds-tabs` sit at the top of the 630px main column directly above the table or list they switch, further blocks such as a form follow as `.ds-section` blocks 30px apart, and the 300px right sidebar keeps `.ds-sidebar` blocks and at most one `.ds-panel` about the current object. Notices sit at the top of the main column, above the form or list they report on; a toolbar of buttons (`.ds-buttons--bar`) sits between the tabs and the table it acts on; an open dialog follows the table that opened it, as a `.ds-section` in the main column. A page that needs the whole width (a wide table) leaves out `.ds-page__aside`; the main column then fills 950px. Nothing on an inner page is wider than `--size-page`. Blocks that do not belong to the side column's subject (long help text, a full-width notice or dialog) go below the columns as `.ds-section` blocks across the full width, so the side column never ends far above the main one.\n- Views: the specimen is one example site of six screens, each a `.ds-view` section inside `.ds-page__wrap`, with the header and footer written once around them. `home` is the front page (hero, grid cells, the ranked list with its tabs and pagination, the explaining panel and link blocks). `link` is the page of one link, where every title in a list leads (stats, the description with its tools and labels, readers' comments as a list, who kept it and where it is filed in the side column; the Links tab stays marked). `label` is the page of one label (tabs, an empty state for a day without new links, the older links, related labels). `reader` is one reader's list (stats, tabs, the toolbar, the table with its status badges and their key, the confirming dialog). `add` is the form for adding a link (notices, the form, advice in the side column). `help` is a help article (prose, onward links, topic list). Links are plain `href=\"#name\"`; the navigation tab or the strip's action link of the view that is showing is marked by a `.ds-page:has(#name:target)` rule, the Links tab also when no view is named.\n- Text never sits directly in a full-viewport strip: the bars and the footer strips hold a centred `--size-page` box (`.ds-nav__inner`, `.ds-footer__legal-text`) and the text goes in that.\n- List items are rows, not cards: no background and no border around an item, a 1px `--color-border-muted` rule under each and 10px padding above and below.\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\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets page fill, base font and colour. Page content goes in `.ds-page__wrap` (950px). `.ds-page__head` holds `.ds-page__title` and a right-aligned `.ds-page__also` line; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside`. `.ds-section` with a grey `.ds-section__label` strip separates unrelated blocks in the main column by 30px. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first); only the view named in the address shows.\n- `.ds-nav`: site header, full viewport width. `.ds-nav__bar` is the glossy bar and `.ds-nav__sub` the pale strip; each wraps a `.ds-nav__inner`. The bar holds the `.ds-brand`, `.ds-nav__tabs` of bold white `.ds-nav__tab` links (current: `is-current`, a darker 3px-rounded block; in the specimen the tab of the showing view gets the same fill from a `:has(:target)` rule), and `.ds-nav__tools` with underlined `.ds-nav__tool` links and `.ds-nav__search` (`.ds-nav__input` plus a secondary button). The strip holds `.ds-nav__topics` of `.ds-nav__topic-item` (first: `is-first`) separated by hairlines, each a bold `.ds-nav__topic` (current: `is-current`, dark text), and one right-aligned `.ds-nav__action`.\n- `.ds-brand`: the site's mark and name, at the left end of the header, linking home; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` on `--color-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.25 times the size of the name, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` in `--weight-display`, coloured `--color-bar-text` for the glossy bar 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: one cream block with 6px corners. `.ds-hero__main` holds `.ds-hero__title` (24px), `.ds-hero__lead` (16px), `.ds-hero__action` (a `.ds-form__input--large` and a `.ds-button--large` side by side) and a small `.ds-hero__note`. `.ds-hero__points` on the right lists up to three bold 16px claims, each a `.ds-hero__point` starting with a guillemet (`is-link` blue, `is-quiet` grey, `is-last` on the final one). One per page, on the front page only.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds `.ds-page-header__title` (20px bold black, the page's h1) and one grey 13px `.ds-page-header__text` line; `.ds-page-header__actions` on the right holds one primary button and at most one secondary, aligned to the bottom of the text. No fill, no border and no rule: it sits on the white page like the list head. One per inner page, never together with a hero.\n- `.ds-stat`: one summary figure; three to five of them sit in a `.ds-stats` row, a single 5px-rounded hairline box with the panel fade, the figures divided by vertical hairlines (first one `is-first`). Each has a 20px bold black `.ds-stat__number`, an 11px grey `.ds-stat__label` under it and an optional green bold 11px `.ds-stat__note`. Equal widths, left-aligned, no icons, no separate cards. For the totals of an account, label or list, under the page header.\n- `.ds-prose`: long text: h1, h2 (green), h3, p, ul, ol, code, strong, mark (yellow highlight) and underlined links inside it are styled. For help and about pages.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. Variant `.ds-link--title` (no underline) for titles and list or sidebar entries; `.ds-link--quiet` (grey, no underline) for names and minor tools. `.ds-links` lays several out in a row.\n- `.ds-button`: primary action: glossy blue, white bold 12px, 22px tall, 3px corners. Variants `.ds-button--secondary` (grey gloss, black regular text; the usual button), `.ds-button--danger` (the same two-step gloss in `--color-danger` dark red with white bold text; only for an action that removes or cannot be undone, usually the confirming button of a dialog) and `.ds-button--large` (30px, 16px text; the hero action only). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row of them; `.ds-buttons--bar` gives the row 10px above and below when it is the toolbar over a table. One primary button per form, panel or dialog.\n- `.ds-form`: label-left form: `.ds-form__row` with a right-aligned bold `.ds-form__label` and a `.ds-form__field` holding `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` (1px grey border, corners of `--radius-control`); `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` for the buttons, aligned with the fields. `.ds-form__input--large` is the hero field.\n- `.ds-table`: data table in a 1px border: `.ds-table__head` cells form a glossy bar with white bold text; `.ds-table__row` with `is-alt` for alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns and bolds numbers. No vertical rules.\n- `.ds-list`: the ranked item list. Each `.ds-list__item` is a `.ds-list__count` (yellow fading block with `.ds-list__number` and a small `.ds-list__unit` in `--color-accent-text` at 70% opacity) beside `.ds-list__body`: `.ds-list__title` holding a `.ds-link--title`, an 11px grey `.ds-list__meta`, `.ds-list__text`, and `.ds-list__tools` of `.ds-list__tool` entries (first: `is-first`) separated by hairlines, with `.ds-list__tags` pushed to the right holding `.ds-badge--tag` links.\n- `.ds-panel`: sidebar box for a short explanation or call to action: rounded 1px border, white fading to light grey, green `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and `.ds-panel__actions` (buttons, then `.ds-panel__more` at the right).\n- `.ds-grid`: a row of four equal cells with 10px gaps. `.ds-grid__cell` takes `.ds-grid__cell--1` to `--4` for the four pastel fills; each has a centred `.ds-grid__title`, an 11px `.ds-grid__text` and a green bold `.ds-grid__count`. For feature or channel overviews; for more than four items start a second row and repeat the fills in order.\n- `.ds-tabs`: view switch above a list: `.ds-tabs__tab` with rounded top corners on a 1px rule, grey fade when inactive, white and joined to the page when `is-current`; `.ds-tabs__count` for a regular-weight number. For two to four views of the same list.\n- `.ds-badge`: small bold label. Base is the yellow pill (8px radius) for a claim or status. Variants: `.ds-badge--count` (square solid blue with white number, for totals beside a sidebar entry), `.ds-badge--tag` (square grey strip, a label link), `.ds-badge--new` (orange, the word NEW typed in capitals). Status variants keep the pill shape with a flat fill: `.ds-badge--success` (`--color-success` green, white text: public, paid, online), `.ds-badge--warning` (`--color-warning` amber, black text: waiting, due soon) and `.ds-badge--danger` (`--color-danger` dark red, white text: removed, failed); one per table row or list item, in a status column. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: sidebar link block: `.ds-sidebar__head` is a flat grey strip with `.ds-sidebar__title` and an optional `.ds-sidebar__more`; `.ds-sidebar__list` of `.ds-sidebar__item` rows (first: `is-first`) separated by hairlines, each a link with an optional `.ds-badge--count` or right-aligned `.ds-sidebar__count`; `.ds-sidebar__group` is a green sub-heading above a list.\n- `.ds-notice`: one-line message: pale yellow with a yellow border and `.ds-notice__title` in bold. Variant `.ds-notice--error`: dark red on peach with a red border. `is-first` on the first notice of a column removes its top margin.\n- `.ds-pagination`: row of small bordered boxes: `.ds-pagination__link`, current page `is-current` (solid blue, white), unavailable `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` (a right guillemet) and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: bordered 5px-rounded box with a glossy `.ds-dialog__title` bar (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and a grey `.ds-dialog__actions` strip with the buttons right-aligned. Sits on `.ds-dialog__backdrop`, a flat translucent dim layer. No shadow.\n- `.ds-empty`: light grey bordered box with a grey bold `.ds-empty__title`, a `.ds-empty__text` line and one button.\n- `.ds-footer`: full viewport width: `.ds-footer__links`, a pale strip of centred bold 11px links (`.ds-footer__item`, first one `is-first`, hairlines between), then `.ds-footer__legal`, a black strip holding `.ds-footer__legal-text`, a centred page-width line of white 11px small print with `.ds-footer__legal-link`.\n- `.ds-menu`: a drop-down under a navigation tab, for the three or four places a visitor goes most from that tab. The `li` carries `.ds-menu`, its link gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last, catch-all row. It is a white hairline box with square top corners that hangs from the bar and opens on hover and on keyboard focus (`is-open` shows it statically). One level only; never a menu inside a menu.\n- `.ds-tooltip`: a small round question mark (`.ds-tooltip__trigger`, a link to the help page) that shows `.ds-tooltip__tip`, a pale yellow speech bubble in the notice colours, above it on hover or focus. For one sentence explaining a word or a count; never for anything the visitor must read to go on. `.ds-tabs__hint` places one after the last tab.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a grey glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For short questions and answers in the sidebar of a help page; long explanations stay in `.ds-prose`.\n- `.ds-progress`: how far something is: a `.ds-progress__label` line (the thing in `.ds-progress__name`, the figure on the right) over `progress.ds-progress__bar`, a pill-shaped grey track filled with the glossy button fill. Variants of the bar: `.ds-progress__bar--success`, `--warning`, `--danger` for a flat status colour. For a count toward a limit, a quota or a profile; one per panel.\n- `.ds-avatar`: the picture of a reader: a 22px tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4` (the four pastel fills). It sits before a reader's name in a sidebar row (`.ds-sidebar__item--person` centres the row); `.ds-avatar--large` doubles it for a profile head. Decorative: the name beside it is always written out.\n\n## Never\n\n- `row-gap <= 20px`: list rows touch, divided by a rule.\n- `block-gap <= 30px`: sections are at most 30px apart.\n- `content-width <= 950px`: text stays inside the fixed 950px column; bars and footer strips may span the viewport but their text does not.\n- `palette-colours <= 32`: two greens, one blue family, yellow, orange, amber, dark red, four pastels and greys.\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 <= 0px`: every box is square.\n- `border-width <= 2px`: hairlines are 1px, the dialog frame 2px.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 3%`: bars, buttons, blocks and panels are flat colour.\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 box in the sidebar is a `.ds-panel` if it explains or asks for something and a `.ds-sidebar` if it lists links; anything with a number beside it reuses `.ds-list__count` or `.ds-badge--count`; a new bar is `--fill-bar`, a new strip `--fill-bar-alt` or flat `--color-surface-strong`; a new coloured block takes one `--color-fill-*` and `--radius-page`. Keep gloss to the bar, the primary button and count blocks. Keep text at `--text-base`, `--text-ui` or `--text-small`, separate rows with 1px `--color-border-muted` rules instead of cards, and make any extra shade with `color-mix()` over existing colour tokens rather than adding a colour.\n", "components.css": ":root {\n --size-page: 950px;\n --size-sidebar: 300px;\n --size-gutter: 20px;\n --size-nav: 50px;\n --size-subnav: 26px;\n --size-control: 22px;\n --size-control-large: 30px;\n --size-count: 50px;\n --size-search: 150px;\n --size-label: 120px;\n --size-textarea: 70px;\n --size-dialog: 380px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --size-drop: 170px;\n --size-tip: 190px;\n --size-meter: 12px;\n --size-avatar: 22px;\n}\n\n/* shell */\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__wrap {\n width: calc(var(--size-page) + var(--space-5) + var(--space-5));\n margin: 0 auto;\n padding: var(--space-3) var(--space-5) var(--space-6);\n background: var(--color-canvas);\n}\n.ds-page__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin: 0 0 var(--space-3);\n}\n.ds-page__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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__also {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n margin-top: var(--space-5);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-sidebar);\n width: var(--size-sidebar);\n}\n.ds-section { margin: var(--space-6) 0 0; }\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.ds-section__label {\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\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\n/* nav: full-width glossy bar, pale strip under it */\n.ds-nav { margin: 0; }\n.ds-nav__bar {\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__sub {\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}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-nav__bar .ds-nav__inner { height: var(--size-nav); }\n.ds-nav__sub .ds-nav__inner { height: var(--size-subnav); }\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n margin-right: var(--space-6);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.25);\n height: calc(var(--text-display) * 1.25);\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: 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__tabs {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__tab {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\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-nav__tab:hover,\n.ds-nav__tab.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__tab.is-current {\n background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n outline-offset: calc(0px - var(--border-width));\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-page:has(#link:target) .ds-nav__tab[href=\"#home\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-page:has(#label:target) .ds-nav__tab[href=\"#label\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-page:has(#reader:target) .ds-nav__tab[href=\"#reader\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-page:has(#help:target) .ds-nav__tab[href=\"#help\"] { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-nav__tool {\n padding: 0 var(--space-2);\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 text-decoration: var(--link-decoration);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 var(--space-2);\n text-shadow: none;\n}\n.ds-nav__input {\n width: var(--size-search);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 45%, var(--color-shadow));\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}\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__topics {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__topic-item {\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n line-height: 1;\n}\n.ds-nav__topic-item.is-first { padding-left: 0; border-left: 0; }\n.ds-nav__topic,\n.ds-nav__action {\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-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-nav__topic:hover,\n.ds-nav__topic.is-hover,\n.ds-nav__action:hover,\n.ds-nav__action.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__topic.is-current { color: var(--color-bar-alt-text); }\n.ds-page:has(#add:target) .ds-nav__action[href=\"#add\"] { color: var(--color-bar-alt-text); }\n.ds-nav__action { margin-left: auto; }\n\n/* hero: one pastel block, title, lead, the main action, three short claims */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n margin: var(--space-3) 0 0;\n padding: var(--space-5) var(--space-6);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\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-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\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-2);\n margin: 0;\n}\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-hero__points {\n flex: 0 0 var(--size-sidebar);\n margin: 0;\n padding: 0;\n list-style: none;\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-hero__point {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n}\n.ds-hero__point.is-link { color: var(--color-link); }\n.ds-hero__point.is-quiet { color: var(--color-text-muted); }\n.ds-hero__point.is-last { margin-bottom: 0; }\n\n/* page header: head of an inner page; title and one line on the left, action on the right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 0;\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-link-quiet);\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/* stats: one hairline box, figures divided by rules */\n.ds-stats {\n display: flex;\n margin: var(--space-3) 0 0;\n padding: 0;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat.is-first { border-left: 0; }\n.ds-stat__number {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-stat__note {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* grid: pastel cells in one row */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-page);\n background: var(--color-surface-alt);\n text-align: center;\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 0 var(--space-1);\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: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__count {\n margin: 0;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* tabs: rounded tops on a hairline */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-3);\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) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n color: var(--color-link-quiet);\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}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link); }\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n border-bottom-color: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-4) 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); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\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-muted);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\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\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: var(--space-3) 0; }\n.ds-button {\n display: inline-block;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-3);\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-ui);\n line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\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-4);\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-body);\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) 36%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 14%) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-inverse) 12%) 100%);\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) 46%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 24%) 50%, color-mix(in srgb, var(--color-danger), var(--color-surface) 10%) 50%, var(--color-danger) 100%);\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 color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* form */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-1);\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-1) 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 box-shadow: var(--shadow-control);\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-1); }\n.ds-form__input--large {\n width: calc(var(--size-search) * 2);\n height: var(--size-control-large);\n font-size: var(--text-large);\n}\n.ds-form__textarea {\n display: block;\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 padding-top: var(--space-1);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n gap: var(--space-2);\n margin: var(--space-3) 0 0;\n padding-left: calc(var(--size-label) + var(--space-3));\n}\n\n/* table */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-ui);\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-ui);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) 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\n/* item list: count block, bold title, meta, tool row; hairlines between rows */\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-3);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__count {\n display: flex;\n flex: 0 0 var(--size-count);\n flex-direction: column;\n align-items: center;\n width: var(--size-count);\n padding: var(--space-2) 0;\n border-radius: var(--radius-control);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-list__number {\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n}\n.ds-list__unit {\n color: var(--color-accent-text);\n opacity: 0.7;\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 0 var(--space-1);\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-list__meta {\n margin: 0 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-2); }\n.ds-list__tools {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-list__tool {\n padding: 0 var(--space-2);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__tool.is-first { padding-left: 0; border-left: 0; }\n.ds-list__tags {\n display: flex;\n gap: var(--space-1);\n margin-left: auto;\n}\n\n/* badge: pill, count block, tag strip, new marker */\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 border-radius: 0;\n background: var(--color-button);\n color: var(--color-button-text);\n font-size: var(--text-ui);\n}\n.ds-badge--tag {\n border-radius: 0;\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 padding: 0 var(--space-1);\n border-radius: var(--radius-control);\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-3);\n margin: 0;\n}\n\n/* panel: rounded hairline box with a faint fade */\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-muted);\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-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 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); }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-panel__more { margin-left: auto; font-size: var(--text-small); }\n\n/* sidebar block: flat title strip, ruled link list */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n}\n.ds-sidebar__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__more { font-size: var(--text-small); }\n.ds-sidebar__list {\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-sidebar__group {\n margin: var(--space-3) 0 0;\n padding: 0 var(--space-3);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n\n/* notice */\n.ds-notice {\n margin: var(--space-3) 0 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) 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 */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\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-link); }\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 border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\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); font-weight: var(--weight-bold); }\n\n/* dialog: bordered box with a bar for a title, no shadow */\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-strong) 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 overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n color: var(--color-bar-text);\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-3); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-strong);\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 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-text-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}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-link-quiet);\n font-size: var(--text-ui);\n}\n\n/* footer: pale link strip, then a black strip of small print */\n.ds-footer { margin: 0; }\n.ds-footer__links {\n display: flex;\n justify-content: center;\n margin: 0;\n padding: var(--space-3) 0;\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 font-weight: var(--weight-bold);\n list-style: none;\n}\n.ds-footer__item {\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n line-height: 1;\n}\n.ds-footer__item.is-first { border-left: 0; }\n.ds-footer__legal {\n margin: 0;\n padding: var(--space-4) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-footer__legal-text {\n width: var(--size-page);\n margin: 0 auto;\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__legal-link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\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 display: inline-block;\n width: calc(var(--text-small) * 0.6);\n height: calc(var(--text-small) * 0.36);\n background: currentColor;\n clip-path: polygon(0 0, 100% 0, 50% 100%);\n margin-left: var(--space-1);\n font-size: var(--text-small);\n vertical-align: calc(var(--text-small) * 0.14);\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::-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 */\n.ds-tabs__hint { margin: 0 0 var(--space-2) var(--space-2); }\n.ds-sidebar__item--person { align-items: center; }\n.ds-list__meta .ds-avatar { margin-right: var(--space-1); }\n.ds-panel .ds-progress { margin-bottom: var(--space-3); }\n", "specimen.html": "\n\n\n\nchronoskin: Web 2.0 gloss portal specimen\n\n\n\n\n
\n
\n
\n chronoskin\n \n
\n marlowe_pines\n Sign out\n
\n \n \n
\n
\n
\n
\n
\n
\n \n Add a link »\n
\n
\n
\n\n
\n\n
\n\n
\n
\n

The good parts of the web, picked by readers

\n

Save the pages you want to keep, see what everyone else is saving, and find the ones worth an afternoon.

\n
\n \n Save it\n
\n

Free, and it takes half a minute. New here? Read how it works.

\n
\n
    \n
  • » every link you keep, in one place
    • \n
  • » sorted by the words you choose
    • \n
  • » ranked by the people who read them
    • \n
\n
\n\n
\n
\n

Keep links

\n

One list for every page you mean to come back to.

\n

1,204 saved today

\n
\n
\n

Label them

\n

Your own words instead of folders, as many as you like.

\n

862 new labels

\n
\n
\n

Follow readers

\n

See what people with your taste found this week.

\n

410 readers online

\n
\n
\n

Take a feed

\n

Every label and every reader has one you can subscribe to.

\n

297 feeds added

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

Everything new

\n

see also: labels | feeds

\n
\n\n \n\n
    \n
  1. \n
    307people
    \n
    \n

    Town library puts its whole map room online

    \n

    first added by marlowe_pines 8 minutes ago, from maproom.example

    \n

    Four thousand survey sheets, some more than a century old, scanned and stitched into one atlas you can browse. The job took two winters and a borrowed flatbed scanner.

    \n \n
    \n
    2. \n
  2. \n
    118people
    \n
    \n

    A field guide to every ferry timetable on the coast NEW

    \n

    first added by quietharbour 27 minutes ago, from ferrynotes.example

    \n

    One commuter rode all nineteen routes and wrote down what the printed schedules leave out: which decks are quiet, which crossings run late, where the coffee is drinkable.

    \n \n
    \n
    3. \n
  3. \n
    94people
    \n
    \n

    Why your spreadsheet rounds differently on Tuesdays

    \n

    first added by tabstop 1 hour ago, from cellblock.example

    \n

    It does not, but the story of how the rumour started is a good tour of floating point arithmetic.

    \n \n
    \n
    4. \n
  4. \n
    76people
    \n
    \n

    Hand-built kites from newspaper and garden cane

    \n

    first added by windward_ann 1 hour ago, from stringandpaper.example

    \n

    Step by step drawings for six kites that cost nothing to make. The box kite needs a second pair of hands and a calm afternoon.

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

What is this place?

\n
\n

A front page written by its readers. Links are added and kept by everyone who visits; the more people keep one, the higher it climbs.

\n
\n Add a link\n Your links\n How it works\n
\n
\n
\n\n
\n
\n

labels to watch

\n more …\n
\n

maps

\n \n

howto

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

most kept this week

\n
\n
    \n
  1. The lighthouse keeper who logged the weather for forty years1874
    2. \n
  2. Thirty pictures of an empty fairground1622
    3. \n
  3. How a village choir ended up on the radio charts1151
    4. \n
  4. Slow trains might finally be coming back1047
    5. \n
\n
\n\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. maps
    4. \n
  4. »
    5. \n
  5. Town library puts its whole map room online
    6. \n
\n\n
\n
\n

Town library puts its whole map room online

\n

maproom.example, first added by marlowe_pines 8 minutes ago

\n
\n
\n Visit the page\n Keep this\n
\n
\n\n \n\n
\n
\n\n
\n

Four thousand survey sheets, some more than a century old, scanned and stitched into one atlas you can browse. The job took two winters and a borrowed flatbed scanner.

\n

The sheets join at the edges, so a river can be followed from one parish to the next, and every sheet keeps the surveyor's pencil notes in the margin.

\n
\n \n\n
\n

What readers say (11)

\n
    \n
  1. \n
    24agree
    \n
    \n

    quietharbour wrote 6 minutes ago

    \n

    Sheet 212 shows the ferry landing before the breakwater was built. I have looked for that drawing for years.

    \n \n
    \n
    2. \n
  2. \n
    9agree
    \n
    \n

    tabstop wrote 5 minutes ago

    \n

    The stitching is better than most paid atlases manage. Does anyone know which scanner they borrowed?

    \n \n
    \n
    3. \n
  3. \n
    3agree
    \n
    \n

    windward_ann wrote 2 minutes ago

    \n

    Kept. The margin notes alone are worth an evening.

    \n \n
    \n
    4. \n
\n
\n Show all 11 comments\n Write a comment\n
\n
\n
\n\n
\n
\n

Worth keeping?

\n
\n

Keeping puts this link in your own list and counts as one more reader for it.

\n
\n Keep this\n How keeping works\n
\n
\n
\n\n
\n
\n

filed under

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

kept it most recently

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

more from this site

\n
\n \n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Labels
    4. \n
  4. »
    5. \n
  5. lighthouses
    6. \n
\n\n
\n
\n

Links labelled lighthouses

\n

Every link a reader has filed under this word, newest first.

\n
\n
\n Take the feed\n Add a link\n
\n
\n\n
\n
\n\n \n\n
\n

nothing here yet

\n

No one has added a link with this label in the last 24 hours.

\n Add the first one\n
\n\n
\n

Kept before today

\n
    \n
  1. \n
    1874people
    \n
    \n

    The lighthouse keeper who logged the weather for forty years

    \n

    first added by marlowe_pines 4 days ago, from lampandlog.example

    \n

    Fourteen thousand daily entries in one steady hand, now typed up by volunteers and searchable by date, wind and sea state.

    \n \n
    \n
    2. \n
  2. \n
    212people
    \n
    \n

    How to read the flash pattern of any light on the chart

    \n

    first added by quietharbour 2 weeks ago, from ferrynotes.example

    \n

    Group flashing, occulting, isophase: one page of drawings that makes the abbreviations on a sea chart readable.

    \n \n
    \n
    3. \n
  3. \n
    88people
    \n
    \n

    Twelve towers you can still sleep in

    \n

    first added by windward_ann 1 month ago, from stringandpaper.example

    \n

    Prices, ferry times and how many stairs, for the keepers' cottages that take paying guests.

    \n \n
    \n
    4. \n
\n
\n
\n\n
\n
\n
\n

related labels

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

readers who use it most

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

Nearly on the front page

\n
\n
\n

214 of 300 keeps this week71%

\n 71%\n
\n
\n How labels rise\n
\n
\n
\n\n
\n

Follow this label

\n
\n

Take the feed and every new link filed under lighthouses arrives in your reader the hour it is added.

\n
\n Take the feed\n What is a feed?\n
\n
\n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Readers
    4. \n
  4. »
    5. \n
  5. marlowe_pines
    6. \n
\n\n
\n
\n

Links kept by marlowe_pines

\n

Everything this reader has saved, with the labels and the people who kept it too.

\n
\n
\n Take the feed\n Add a link\n
\n
\n\n \n\n
\n
\n\n \n\n
\n Add a link\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
LinkLabelStatusKept
Town library puts its whole map room onlinemapsPublic307
A plain guide to reading contour linesmapsPublic1,151
Hand-built kites from newspaper and garden canehowtoWaiting76
The lighthouse keeper who logged the weather for forty yearslighthousesPublic1,874
Panorama of the old rail yard at dawnphotosRemoved12
\n\n \n\n
\n
\n
\n

Remove this link? close

\n
\n

It will leave your list and your labels. Other readers who kept it still have their copy.

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

this reader

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

what the marks mean

\n
\n
    \n
  • Public every reader can see and keep it
    • \n
  • Waiting needs a second reader
    • \n
  • Removed taken down after a report
    • \n
  • NEW added in the last hour
    • \n
  • 307 readers who kept it
    • \n
  • Pick of the week chosen by most readers
    • \n
  • maps a label, opens its page
    • \n
\n
\n\n
\n
\n

readers online

\n
\n \n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Your links
    4. \n
  4. »
    5. \n
  5. Add a link
    6. \n
\n\n
\n
\n

Add a link

\n

Give the address, a plain title and a few words of your own. It goes to the waiting list at once.

\n
\n
\n Read the guide\n
\n
\n\n
\n
\n\n
\n

Not saved. That address was already added three days ago. Keep the existing link or change the address.

\n

Quicker next time. Drag the Keep button to your toolbar and save any page without coming here.

\n
\n\n
\n

The link

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

This address has already been added.

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

60 characters at most.

\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n Options\n
\n \n
\n
\n
\n \n \n Cancel\n
\n
\n
\n
\n\n
\n
\n

Before you add

\n
\n

Search first: the link may already be waiting. Point to the original page, not to one that quotes it, and write the two sentences yourself.

\n
\n How the front page works\n
\n
\n
\n\n
\n
\n

already here from this site

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

labels you use most

\n
\n \n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. »
    3. \n
  3. Help
    4. \n
  4. »
    5. \n
  5. How the front page works
    6. \n
\n\n
\n
\n

Help

\n

Short answers about adding, keeping and labelling links, written by the people who run the place.

\n
\n
\n Add a link\n
\n
\n\n
\n
\n
\n

How the front page works

\n

Anyone can add a link. Readers keep what they find useful, and links kept by enough people in a short time move to the front page. Nothing is chosen by an editor.

\n

Adding a link

\n

Give the address of the page, a plain title and two or three sentences that say what a reader will find there. Do not copy the first paragraph; write your own.

\n

Before you add

\n
    \n
  • Search first, the link may already be waiting.
    • \n
  • Point to the original page, not to a page that quotes it.
    • \n
  • Pick labels a stranger would search for.
    • \n
\n

Keeping a link

\n

Keeping puts a link in your own list and counts as one reader for it. A link needs a second reader before it leaves the waiting list, and it can be removed again from your list at any time.

\n

Feeds exist for every label: put /feed on the end of a label address to get one.

\n
\n
\n

Where to go next

\n

\n Add your first link\n Browse the labels\n See a reader's list\n Back to the front page\n

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

help topics

\n
\n \n
\n\n
\n
\n Why did my link not appear?\n

It is on the waiting list until a second reader keeps it.

\n
\n
\n Can I change a label later?\n

Yes, from your own list, as often as you like.

\n
\n
\n Who can see what I keep?\n

Everyone. A kept link is a public vote for it.

\n
\n
\n\n
\n

Still stuck?

\n
\n

Write to the two people who answer the mail. A reply usually takes a day, a little longer at weekends.

\n
\n Write to us\n
\n
\n
\n
\n
\n\n
\n\n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.web-2-0-gloss.portal.s01.p01.t11.u02.dc\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"web-2-0-gloss\",\n \"years\": [\n 2005,\n 2009\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w2-11b2-dc\",\n \"short\": \"v1-w2-11b2-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8f8;\n --color-surface-strong: #eeeeee;\n --color-bar: #38a000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #e3f1f6;\n --color-bar-alt-text: #333333;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #999999;\n --color-heading: #000000;\n --color-heading-alt: #339933;\n --color-link: #3252b2;\n --color-link-quiet: #666666;\n --color-link-visited: #708cf2;\n --color-link-hover: #4261df;\n --color-link-active: #990000;\n --color-border: #cccccc;\n --color-border-strong: #999999;\n --color-border-muted: #dddddd;\n --color-accent: #ffe640;\n --color-accent-text: #000000;\n --color-accent-alt: #ff6600;\n --color-fill-1: #fff9d8;\n --color-fill-2: #e3f1f6;\n --color-fill-3: #ffffcc;\n --color-fill-4: #f0fce2;\n --color-button: #3252b2;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #aaaaaa;\n --color-disabled: #eeeeee;\n --color-disabled-text: #999999;\n --color-danger: #990000;\n --color-danger-surface: #ffe8cd;\n --color-success: #257f03;\n --color-warning: #ffa000;\n --color-notice: #ffffcc;\n --color-notice-text: #333333;\n --color-focus: #708cf2;\n --color-shadow: #046800;\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: 2px;\n --border-style: solid;\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: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 18%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }