{ "id": "v1-po-6654-dr", "long_id": "v1.portals-2000s.app.s06.p06.t05.u04.dr", "name": "Web mail start page, 2000 to 2004", "era": { "slug": "portals-2000s", "code": "po", "name": "Early-2000s portals", "years": [ 2000, 2004 ], "description": "Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "density": "roomy", "summary": "A signed-in mail and \"my account\" page of the kind portals and Internet providers gave their members between 2000 and 2004: a grey sheet that fills the browser window like a program, with a bar of services across the top, a row of small buttons under it, a fixed column of folders on the left and the message list, an open message or a form filling the rest. Lists have raised column heads and ruled white rows, every block is an outlined box with a title strip, and text is 11px Tahoma with 10px small print. It was replaced from about 2005 by mail pages that loaded messages without reloading, with rounded panels and soft gradients.", "url": "https://chrono.skin/s/v1-po-6654-dr", "preview_url": "https://chrono.skin/s/v1-po-6654-dr/specimen.html", "files": { "STYLE.md": "# Web mail start page, 2000 to 2004\n\n## Summary\n\nA signed-in mail and \"my account\" page of the kind portals and Internet providers gave their members between 2000 and 2004: a grey sheet that fills the browser window like a program, with a bar of services across the top, a row of small buttons under it, a fixed column of folders on the left and the message list, an open message or a form filling the rest. Lists have raised column heads and ruled white rows, every block is an outlined box with a title strip, and text is 11px Tahoma with 10px small print. It was replaced from about 2005 by mail pages that loaded messages without reloading, with rounded panels and soft gradients.\n\n## Layout\n\n- The page is fluid. `.ds-page__frame` has no fixed width: it fills the window inside the `--space-5` (8px) padding of `.ds-page`, is outlined like a window in `--color-border-strong`, and never gets narrower than `--size-page` (760px). Do not centre a fixed column and do not cap the width.\n- Order from the top: `.ds-nav`, `.ds-page__body`, `.ds-footer`. Navigation is at the top in three parts: `.ds-nav__top` (the brand on the left, the account line on the right, on the sheet), `.ds-nav__links` (the service bar on `--fill-bar`; the open service is a cell cut out of the bar in the sheet colour) and `.ds-nav__tools` (a row of small secondary buttons on the left and the search form on the right, closed by a rule).\n- `.ds-page__body` is two columns `--space-5` apart and padded `--space-5`: `--size-side` (156px) for `.ds-page__side`, and the rest of the window for the page content (in the specimen the open `.ds-view`). `.ds-page__side` is the same on every page, the home page included: the `.ds-sidebar` folder box, the space meter in a `.ds-panel--alt` and one `.ds-panel--inverse`. It is a stack of boxes, not a tinted column, and it does not run the height of the page.\n- The content column is `.ds-page__main`, a stack of full-width blocks `--space-5` apart. There is no right rail. Where two blocks stand abreast they are a `.ds-page__pair` (two equal halves that end level) or a `.ds-page__pair--aside` (the work and one `--size-aside`, 210px, box).\n- Home page: `.ds-hero` (the greeting), the `.ds-stat` line, a pair (newest messages as a `.ds-list` beside the day's `.ds-panel`), then `.ds-grid`, four service cells across.\n- Inner pages keep the header, the folder column and the footer and have no hero. The content column opens with `.ds-breadcrumb` as a plain 10px line, then `.ds-page-header` (title in the display weight, one line of text, the page's button at the right, closed by a rule), then the working block: `.ds-tabs` standing on a `.ds-buttons` toolbar, which is joined to the `.ds-table` it acts on, which is closed by `.ds-pagination`. A form sits under a `.ds-section` strip. An open message has no page header: a toolbar, the `.ds-message` head and the `.ds-prose` body, joined into one box, head the page.\n- Views. The specimen is one example site of five screens, one showing at a time; the header, folder column and footer are written once around them. `home` is the start page: greeting, status line, newest messages, calendar and service cells. `inbox` is the message list: page header, tabs, toolbar, table and pagination. `message` is one open message: toolbar, message head, the text and a row of links. `compose` is the form page: page header, notices, the form beside a box of addresses. `folders` is the management page: page header, status line, tabs and toolbar on the folder table, the empty-trash message box beside the empty Drafts block. The service bar marks Mail for `inbox` and `message`; the folder box marks Inbox for the same two.\n- Spacing scale: `--space-1` 1px is the vertical padding inside buttons, inputs and folder rows; `--space-2` 2px is the vertical padding of title strips, table cells, tabs and form rows; `--space-3` 3px is the vertical padding of toolbars, the status line, list rows and notices; `--space-4` 5px is the side padding of table cells and folder rows and the gap between buttons; `--space-5` 8px is the page margin, the gap between columns and between blocks, and the side padding of strips and boxes; `--space-6` 14px is the padding of the greeting, an open message, a dialog and an empty state, and list indent. There is no larger step.\n- Fixed sizes: `--size-mark` 24px the brand tile; `--size-search` 140px the search input; `--size-label` 84px the label column of forms, message heads and calendar rows; `--size-field` 260px a form input; `--size-area` a textarea; `--size-dialog` 310px a message box; `--size-check` 22px the checkbox column of a list; `--size-meter` 9px the height of the space meter.\n- Blocks are outlined boxes in `--color-border` under a title strip or a toolbar, and parts of one working block are joined, not spaced. Rows inside a box are ruled with `--color-border-muted`.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` is Arial for text, the hero headline, article h1 and stat figures. `--font-heading` is Verdana for the wordmark, page titles and every strip and box title, which are set in capitals (`--heading-transform: uppercase`). `--font-ui` is Tahoma for the menu, bars, tabs, buttons, inputs, table heads and figures, and all 10px text. `--font-mono` is Courier for code.\n- `--text-base` 11px is body text, table cells and rail text. `--text-small` and `--text-ui` are 10px: strips, titles of boxes, menu rows, tabs, buttons, meta lines, captions, breadcrumb and footer. `--text-large` 13px is the hero text and an article's lead paragraph. `--text-h3` 11px, `--text-h2` 13px (grid cell titles, the title of the dark box, article h2), `--text-h1` 20px (page title, stat figures), `--text-display` 24px (wordmark, hero headline, article h1). The hero headline and the article h1 are not capitalised: they take `--font-body` and `--display-tracking` and ignore `--heading-transform`.\n- `--line-body` 1.45 (16px lines for 11px text); `--line-heading` 1.2; `--line-display` 1.05. Buttons and bar labels are bold (`--weight-ui` 700). Nothing is tracked.\n- Links in text are underlined (`--link-decoration`) and lose the underline when hovered (`--link-decoration-hover: none`); menu, sidebar, breadcrumb and table team links are quiet (`--link-decoration-quiet` none).\n- `--color-page` #d0d0d0 (grey) shows on both sides of the sheet; `--color-canvas` and `--color-surface` are #ffffff. `--color-surface-alt` #f0f0e8 (stone) fills the scoreboard cells, breadcrumb, alternate table rows, form label column, button row, sidebar box and empty state. `--color-surface-strong` #d3d3d3 is the tab strip, sidebar and quiet panel titles and picture slots, whose placeholder drawing is `--color-text-muted`.\n- `--color-bar` #cc0000 with `--color-bar-text` white is the masthead, panel and dialog titles, the rule under a page header and above the open tab. `--color-bar-alt` #636363 with `--color-bar-alt-text` #dddebf (khaki) is the strip under the masthead, menu group titles, section strips, table heads and the footer strip. Text on a bar is always that bar's text token, links included.\n- `--color-inverse` #000000 with `--color-inverse-text` #dddebf is the menu column and the one dark rail box (`.ds-panel--inverse`); a link or title on the dark box takes `--color-accent`, and the open menu row is filled with `--fill-accent` and set in `--color-accent-text`.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #636363 for meta lines, captions and labels of figures; `--color-heading-alt` #990000 for article h3.\n- `--color-link` #000099, `--color-link-quiet` #000000, visited #7d7d7d, hover #cc0000, active #990000. `--color-accent` #edc508 with black text is the badge, the section marker, the open menu row and the current page number; `--color-accent-alt` #cc0000 is the status line of a score cell, promoted links and bare \"updated\" marks.\n- `--color-fill-1` #dddebf, `--color-fill-2` #f0f0e8, `--color-fill-3` #e8e8e8, `--color-fill-4` #d3d3d3 tint the four grid cells; `--color-fill-1` is also the stat band. Text on a fill is `--color-text`, `--color-heading` or a link colour.\n- `--color-border` #b0b090 outlines boxes and rules the scoreboard; `--color-border-strong` #000000 outlines pictures, the dialog and the current page number and is the left edge of a notice; `--color-border-muted` #e8e8e8 rules rows.\n- `--color-button` #d3d3d3 with black label, `--color-button-hover-text` #990000; secondary #f0f0e8. `--color-danger` #cc0000 on `--color-danger-surface` #ffffe8; `--color-success` #336633 and `--color-warning` #edc508 fill status labels and `--color-success` and `--color-danger` colour rising and falling figures. `--color-notice` #f0f0e8.\n- Surface: `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the bar colour crossed by 1px scan lines (every second pixel row slightly darker, or lighter on the dark block), the look of broadcast graphics of the period; `--fill-button` is two flat bands, the upper half lighter, reversed on hover. `--shadow-text` is a hard 1px offset under text on the primary bar; `--shadow-dialog` is a hard 4px offset block; a pressed button has a 1px inner edge. No blur anywhere, no rounding, `--border-width` 1px and `--border-width-strong` 2px, solid.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, italic for the wordmark, `underline` on hovered bar links, `color-mix()` of `--color-inverse-text` with `transparent` for the rules between menu rows and of `--color-overlay` with `transparent` for the band behind a dialog, and `calc()` sums of spacing steps for bullet indents and the form action offset.\n- Capitals in the references were typed or drawn; here they come from `--heading-transform`. Verdana and Tahoma stand in for the references' lettered images.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour, 8px margin and base type. Wrap everything in `.ds-page__frame`. `.ds-page__body` holds `.ds-page__side` and the content; `.ds-page__main` stacks the content's blocks; `.ds-page__pair` and `.ds-page__pair--aside` set two blocks abreast. `.ds-page__legal` is the centred 10px copyright line. `.ds-block` joins the parts of one working block (tabs, toolbar, table, pagination, or a section strip and its content) so they touch.\n- `.ds-brand`: the site's mark and name at the left of the top line, a link to the start page, once per page. `.ds-brand__mark` is a `--size-mark` (24px) tile dressed like the primary button: `--fill-button`, the mark in `--color-button-text`, the 2px outset bevel, `--radius-control` and `--shadow-control`. The mark is inline SVG with butt caps and a 2.6 stroke. `.ds-brand__name` is the 18px bold wordmark in `--color-heading`, because the top line sits on the sheet; `.ds-brand__product` names the service after it in regular weight and `--color-heading-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__top` holds the `.ds-brand` and `.ds-nav__account` (`.ds-nav__account-item` entries divided by 1px bars). `.ds-nav__links` is the service bar of `.ds-nav__item` cells; `.ds-nav__link` with `is-current` is cut out in the sheet colour with heading-coloured text; in the specimen the open view marks its cell through `:has()` rules, one per view. `.ds-nav__tools` holds `.ds-nav__shortcuts` (secondary buttons) and the `.ds-nav__search` form (`.ds-nav__search-label`, an input, a button).\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the start page); only the view named in the address shows. A real multi-page site does not need it, but its content takes the same grid column.\n- `.ds-breadcrumb`: inner pages only, the first line of the content column. 10px trail on the sheet, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: the folder box in the left column. `.ds-sidebar__title` strips over `.ds-sidebar__list` lists; each `.ds-sidebar__item` is a link with a `.ds-sidebar__count` at the right; `is-current` tints the open folder's row and sets it bold. Use `.ds-link--hot` for the one action row (\"Add a folder\").\n- `.ds-progress`: a sunken track with `.ds-progress__fill` in the accent, for space used; set the fill's width for the value shown.\n- `.ds-section`: title strip of a block on the strong surface, outlined with the block: `.ds-section__title` and an optional right-hand `.ds-section__more` link.\n- `.ds-hero`: the greeting, first on the start page: a raised white box with `.ds-hero__title` (18px regular), `.ds-hero__text` and `.ds-hero__actions` (one primary and one secondary button), and at the right `.ds-hero__aside`, a ruled-off note headed by `.ds-hero__date`. No picture, no colour band.\n- `.ds-page-header`: head of an inner page, once per page. `.ds-page-header__title` (18px regular, the page's only h1) over one line of `.ds-page-header__text`, with `.ds-page-header__action` at the right holding one `.ds-button`; an etched rule closes it.\n- `.ds-stat`: one outlined status line of three to five `.ds-stat__item` cells, each a muted `.ds-stat__label` on the left and a 14px bold `.ds-stat__value` on the right, divided by etched lines. No icons.\n- `.ds-message`: the head of an open message, joined under its toolbar: `.ds-message__row` lines of a right-aligned `.ds-message__label` and a `.ds-message__value`.\n- `.ds-prose`: the text of a message or a help page in a white outlined box: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for a 12px first paragraph and `.ds-prose__byline` for a 10px credit.\n- `.ds-link`: underlined blue link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is text-coloured and not underlined until hover; `.ds-link--hot` is the red action entry. `.ds-links` is a white outlined row of links joined under the box they belong to.\n- `.ds-button`: bevelled grey button, bold, for the main action. `.ds-button--secondary` is lighter and regular weight. `.ds-button--danger` is the same bevel with the label in `--color-danger`; never fill a button red. `disabled` or `is-disabled` greys it; `is-active` presses the bevel in. `.ds-buttons` is a toolbar: a tinted outlined strip joined to the table or message it acts on; `.ds-buttons__gap` pushes what follows it to the right end. A link that looks like a button is an `` with the same classes.\n- `.ds-form`: tinted outlined block under a `.ds-section` strip, of `.ds-form__row` pairs: a right-aligned bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--auto` for selects, `--wide` for a full-width line, `--area` for the monospaced textarea); `is-invalid` plus a `.ds-form__error` line marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios, set in a row; `.ds-form__actions` is the button row under the controls.\n- `.ds-table`: an outlined list: column heads dressed as raised buttons, white rows ruled apart, `.ds-table__num` right-aligned for figures, `.ds-table__check` for the checkbox column. A row takes `is-unread` (bold) or `is-selected` (tinted); `is-up` and `is-down` colour a figure. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: property-sheet tabs standing on a toolbar or box: outlined `.ds-tabs__tab` cells on the strong surface; `is-current` is taller, bold, in the toolbar's tint and open at the bottom.\n- `.ds-list`: an outlined white list under a `.ds-section` strip. Each `.ds-list__item` is one ruled line: `.ds-list__body` with a bold `.ds-list__title` and a muted `.ds-list__text`, and a `.ds-list__meta` date at the right.\n- `.ds-panel`: a small window: `.ds-panel__title` bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__row` (a `.ds-panel__when` time and a line of text, ruled), `.ds-panel__small`. `.ds-panel--alt` is tinted under the secondary bar; `.ds-panel--inverse` is the dark box with an accent title, at most one per page.\n- `.ds-grid`: four service cells across the content column, outlined and tinted with `.ds-grid__cell--1`, `--2`, `--3` or the base fill; each `.ds-grid__cell` has a 14px `.ds-grid__title`, a line of `.ds-grid__text` and one link.\n- `.ds-badge`: square yellow 10px bold label (\"New\"). `.ds-badge--alt` is bare red text; `.ds-badge--count` is muted text in parentheses. Status labels keep the block and change the fill: `.ds-badge--success` green with white text (in order, delivered), `.ds-badge--warning` amber with black text (due to be emptied, pending), `.ds-badge--danger` red with white text (large, over the limit, failed).\n- `.ds-notice`: one-line outlined message on pale yellow, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and border. Stack several in `.ds-notices`.\n- `.ds-pagination`: the tinted foot of a list, joined to it: `.ds-pagination__info` (the range shown) on the left and `.ds-pagination__item` links divided by 1px bars on the right, the current page as `.ds-pagination__current` on the accent.\n- `.ds-dialog`: the era's message box, in the page flow and drawn as a small window: a 310px tinted box with a 2px raised frame and a hard offset shadow, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and centred `.ds-dialog__actions`. `.ds-dialog__backdrop` is the dimmed outlined area it sits on.\n- `.ds-empty`: white outlined block under a `.ds-section` strip with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: an etched rule, then `.ds-footer__bar`, a centred row of `.ds-footer__item` entries with `.ds-footer__link`, followed by `.ds-page__legal`.\n- `.ds-tooltip`: a help hint beside a field: `.ds-tooltip__trigger` is a boxed question mark, `.ds-tooltip__text` shows under it on hover or focus. Everywhere else use the browser's own `title`.\n\n## Never\n\n- `row-gap <= 10px`: list, table and folder rows touch.\n- `block-gap <= 18px`: blocks are joined or sit 8px apart.\n- `content-width >= 90%`: the sheet fills the window; it is never a narrow centred column.\n- `font-size <= 24px`: the largest text is one 24px headline.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 4`: Arial, Verdana for titles, Tahoma for the interface and a monospace for code.\n- `line-height <= 1.6`: text runs on 16px lines; it is never opened further.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 15%`: capitals are for strip, box and page titles only, never for body text or links.\n- `border-radius <= 0px`: no reference has a rounded box in CSS; every block is a square rectangle.\n- `box-shadow-blur <= 0px`: shadows are hard-edged offset blocks; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: bands, strips and cells are flat colour.\n- `border-width <= 3px`: 1px outlines and rules, 3px bevels and double rules.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new box copies `.ds-panel` (title bar, etched outline, white body padded `--space-5`); a new working block copies the inbox (tabs, a `.ds-buttons` toolbar, the `.ds-table`, a tinted foot) and keeps its parts joined; a new settings page copies the `compose` or `folders` view (breadcrumb, `.ds-page-header`, then a form under a `.ds-section` strip or a toolbar on a table); a new entry in the left column is a `.ds-sidebar__item` row or a small `.ds-panel--alt`; a new control copies `.ds-button` or `.ds-form__input` with its 2px bevel. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Keep text at 10px and 11px apart from 14px figures and one 18px regular-weight title, keep corners square, let the page fill the window, and separate things with an outline, a title strip or a ruled row, never with whitespace, cards, soft shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). A fluid application page: a bar of\n services across the top, a fixed column of folders on the left and the\n work filling the rest of the window. */\n:root {\n --size-page: 760px;\n --size-side: 156px;\n --size-aside: 210px;\n --size-mark: 24px;\n --size-search: 140px;\n --size-label: 84px;\n --size-field: 260px;\n --size-area: 11em;\n --size-dialog: 310px;\n --size-check: 22px;\n --size-meter: 9px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 18px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The sheet stretches with the window and is outlined like a window. */\n.ds-page__frame {\n box-sizing: border-box;\n min-width: var(--size-page);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* Folders on the left, the open view on the right. */\n.ds-page__body {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n}\n.ds-page__side,\n.ds-page__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* Two blocks abreast; --aside gives the second a fixed narrow width. */\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-page__pair--aside {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n align-items: start;\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: center;\n}\n\n/* ---------- views ---------- */\n/* The specimen is one site of several screens; one view 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/* Every view takes the column beside the folders. */\n.ds-view {\n grid-column: 2;\n min-width: 0;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* A promoted entry inside a quiet list. */\n.ds-link--hot,\n.ds-link--hot:visited,\n.ds-link--hot.is-visited {\n color: var(--color-accent-alt);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n\n/* ---------- nav ---------- */\n.ds-nav {\n display: block;\n}\n/* Top line on the sheet: the brand on the left, the account on the right. */\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-5);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n/* The mark sits on a small tile dressed like the primary button. */\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-heading);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-brand__product {\n color: var(--color-heading-alt);\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}\n.ds-nav__account {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n/* Items in a link row are divided by a 1px bar, as typed pipes were. */\n.ds-nav__account-item,\n.ds-footer__item,\n.ds-pagination__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) solid var(--color-border);\n}\n.ds-nav__account-item:first-child,\n.ds-footer__item:first-child,\n.ds-pagination__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n/* The service bar: one cell per service; the open one is cut out of the\n bar in the sheet colour. */\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: var(--space-3) var(--space-5) 0;\n list-style: none;\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-transform: var(--ui-transform);\n}\n.ds-nav__item {\n display: block;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-6) var(--space-4);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#message:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#compose:target) .ds-nav__link[href=\"#compose\"],\n.ds-page:has(#folders:target) .ds-nav__link[href=\"#folders\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n text-shadow: none;\n}\n/* The tool strip under the bar: shortcuts on the left, search on the\n right. */\n.ds-nav__tools {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__shortcuts {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\n font-weight: var(--weight-bold);\n}\n.ds-nav__search .ds-form__input {\n width: var(--size-search);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar ---------- */\n/* The folder box: a title strip over rows with a count at the right. */\n.ds-sidebar {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-1) var(--space-4);\n}\n.ds-sidebar__item.is-current,\n.ds-page:has(#inbox:target) .ds-sidebar__item--inbox,\n.ds-page:has(#message:target) .ds-sidebar__item--inbox {\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- meter ---------- */\n/* Space used: a sunken track with an accent fill. */\n.ds-progress {\n display: block;\n box-sizing: border-box;\n height: var(--size-meter);\n margin: var(--space-3) 0;\n background: var(--fill-input);\n border: var(--border-width) inset var(--color-input-border);\n}\n.ds-progress__fill {\n display: block;\n width: 34%;\n height: 100%;\n background: var(--fill-accent);\n}\n\n/* ---------- section strip ---------- */\n/* Title strip of a block: the strong surface, outlined with the block. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__more {\n font-size: var(--text-small);\n}\n.ds-block {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-block > :last-child {\n flex: 1 1 auto;\n}\n\n/* ---------- hero ---------- */\n/* The greeting: a white box with the day's summary and the two actions,\n and the sign-in record at the right. */\n.ds-hero {\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__title {\n margin: 0;\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__text {\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__aside {\n flex: none;\n box-sizing: border-box;\n width: var(--size-aside);\n margin: 0;\n padding: 0 0 0 var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-hero__date {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n\n/* ---------- page header ---------- */\n/* Head of an inner page: the trail, the folder name in the display\n weight and a count, with the page's button at the right. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0;\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* Summary figures as one status line: label, then the figure in bold. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n}\n.ds-stat__value {\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\n/* ---------- message ---------- */\n/* The head of an open message: one labelled line per field. */\n.ds-message {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-message__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-1) 0;\n}\n.ds-message__label {\n color: var(--color-text-muted);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-message__value {\n margin: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-5) var(--space-6) var(--space-6);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { font-size: var(--text-h1); font-weight: var(--weight-display); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 calc(var(--space-6) + var(--space-4));\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n/* The browser's own bevelled button of the period: a 2px outset border. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n/* Destructive action: the same bevel, the label in the error colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n/* A toolbar: a tinted strip of buttons joined to the table or message it\n acts on. */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-buttons__gap {\n flex: 1 1 auto;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-2) 0;\n}\n.ds-form__label {\n padding-top: var(--space-3);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width-strong) inset var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--area {\n display: block;\n width: 100%;\n height: var(--size-area);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n margin-right: var(--space-6);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n}\n\n/* ---------- table ---------- */\n/* A message list: raised column heads like a desktop list, white rows\n ruled apart, unread rows in bold. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n}\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) solid var(--color-border-muted);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table th.ds-table__check,\n.ds-table td.ds-table__check {\n width: var(--size-check);\n padding-right: 0;\n text-align: center;\n}\n.ds-table tr.is-unread td {\n font-weight: var(--weight-bold);\n}\n.ds-table tr.is-selected td {\n background: var(--color-fill-2);\n}\n.ds-table td.is-up {\n color: var(--color-success);\n}\n.ds-table td.is-down {\n color: var(--color-danger);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n/* Property-sheet tabs: outlined cells on the sheet; the open one is white\n and joins the toolbar below it. */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0 0 calc(var(--border-width) * -1);\n padding: 0 var(--space-5);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n position: relative;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n border: var(--border-width) solid var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: underline;\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-4);\n background: var(--color-surface-alt);\n border-bottom-color: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- list ---------- */\n/* One line per item: the title and its sender on the left, the date on\n the right, ruled apart. */\n.ds-list {\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-list__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) solid var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n/* A small window: title bar, outlined white body. */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) solid var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__when {\n color: var(--color-text-muted);\n font-weight: var(--weight-bold);\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Quieter box: tinted body under the secondary bar. */\n.ds-panel--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Inverted box: the one dark block of a page. */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: var(--color-border-strong);\n}\n.ds-panel--inverse .ds-panel__title {\n background: transparent;\n color: var(--color-accent);\n padding-top: var(--space-4);\n padding-bottom: 0;\n}\n.ds-panel--inverse .ds-panel__small {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited {\n color: var(--color-accent);\n}\n\n/* ---------- grid ---------- */\n/* Four service cells across the view, each a tint with a title, a line of\n text and a link. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\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__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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 var(--space-3);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-accent-alt);\n padding: 0;\n}\n.ds-badge--count {\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n padding: 0;\n}\n/* Status labels: the same block, filled with the status colour. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-bar-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-bar-text);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* ---------- pagination ---------- */\n/* The foot of a list: the range on the left, the pages on the right. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: baseline;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-pagination__info {\n margin-right: auto;\n color: var(--color-text-muted);\n}\n.ds-pagination__info + .ds-pagination__item {\n padding-left: 0;\n border-left: 0;\n}\n.ds-pagination__current {\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A message box in the page flow, drawn like a small window. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--space-6);\n background: color-mix(in srgb, var(--color-overlay) 40%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-6);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-6);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-5);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: block;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- tooltip ---------- */\n/* A help hint behind a boxed question mark, shown on hover or focus. */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n}\n.ds-tooltip__trigger {\n display: inline-block;\n box-sizing: border-box;\n min-width: 2ch;\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 6;\n box-sizing: border-box;\n width: 30ch;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: web mail start page, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n Mail\n \n \n
\n \n
\n \n
\n \n \n \n
\n
\n
\n\n
\n\n
\n \n\n
\n

Space used

\n
\n \n

2.1 MB of 6 MB (34%) ?Messages in Trash and Bulk mail count towards your space until they are emptied.

\n
\n
\n\n
\n

chronoskin Plus

\n
\n

25 MB of space, larger attachments and no banners.

\n

See what you get

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

Good morning, Dana

\n

You have 3 unread messages. The newest is from the Allotment Society, sent at 8:52 this morning.

\n
\n Go to Inbox\n Write a message\n
\n
\n

\n Tuesday, March 11\n Last sign-in: Monday at 9:12 p.m. from this computer.\n Not you?\n

\n
\n\n
    \n
  • Unread3
    • \n
  • In Inbox42
    • \n
  • Bulk mail12
    • \n
  • Space used34%
    • \n
\n\n
\n
\n
\n

Newest messages

\n all 42\n
\n \n
\n
\n

Today in your calendar

\n
\n
    \n
  • 10:30 a.m.Dentist, Mill Lane
    • \n
  • 1:00 p.m.Lunch with Per
    • \n
  • 6:00 p.m.Allotment committee
    • \n
  • All dayRoad tax due reminder
    • \n
\n

Add an appointment | This week

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

Address book

\n

38 contacts and 2 mailing lists.

\n Add a contact\n
\n
\n

Notepad

\n

4 notes. Last changed on Sunday.

\n Write a note\n
\n
\n

Other mail

\n

Collect mail from another address.

\n Set it up\n
\n
\n

Away reply

\n

Off. Nobody is told you are away.

\n Turn it on\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Today
    2. \n
  2. >
    3. \n
  3. Mail
    4. \n
  4. >
    5. \n
  5. Inbox
    6. \n
\n
\n
\n

Inbox

\n

42 messages, 3 unread. Checked at 9:40 a.m.

\n
\n
\n Write a message\n
\n
\n\n
\n \n
\n Check mail\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FromSubjectReceivedSize
chronoskin Mail teamGetting more from your mailbox8:52 a.m.4k
Allotment SocietySpring plot inspection dates (1 file)8:15 a.m.86k
Per LindqvistRe: Sunday lunch?Mon 7:40 p.m.2k
Harbour BooksYour order has been postedMon 2:05 p.m.3k
Weekend travel dealsThree cities under 60.00Mon 6:00 a.m.11k
Ruth AmesPhotos from the open day (4 files)Sun 5:31 p.m.412k
Mill Lane DentalAppointment reminderFri 9:00 a.m.2k
Sam OkaforFwd: seed potato order form (1 file)Thu 8:22 p.m.38k
\n
    \n
  • Messages 1 to 8 of 42, newest first
    • \n
  • Previous
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
  • Next
    • \n
\n
\n

Two messages selected. Messages in Bulk mail and Trash are removed after seven days.

\n\n
\n
\n\n
\n
\n\n
    \n
  1. Today
    2. \n
  2. >
    3. \n
  3. Inbox
    4. \n
  4. >
    5. \n
  5. Getting more from your mailbox
    6. \n
\n\n
\n
\n Reply\n Reply to all\n Forward\n \n \n Back to Inbox\n Next message\n
\n
\n
From:
chronoskin Mail team Add to address book
\n
To:
dana.whitlow
\n
Sent:
Tuesday, March 11, 8:52 a.m.
\n
Subject:
Getting more from your mailbox
\n
\n
\n

Getting more from your mailbox

\n

A short guide from the chronoskin Mail team. You receive it once, in your first month.

\n

Three settings are worth five minutes of your time: folders, filters and your signature.

\n

Keep the Inbox short

\n

Make a folder for anything you will want again, and let a filter put new mail there as it arrives. Bulk mail and Trash empty themselves after seven days.

\n
    \n
  • Folders: up to 20 of your own
    • \n
  • Filters: up to 15, checked in order
    • \n
  • Attachments: 1 MB a message
    • \n
\n

Read your mail elsewhere

\n

A mail program can collect from this mailbox as well as the web page can.

\n

Settings for a mail program

\n

Enter pop.chronoskin.example as the incoming server and your sign-in name as the account.

\n

A signature

\n

Up to four lines of plain text, added to every message you write.

\n
\n

\n Make a folder\n Set up a filter\n Write a signature\n Mail help\n Show full headers\n

\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Today
    2. \n
  2. >
    3. \n
  3. Mail
    4. \n
  4. >
    5. \n
  5. Compose
    6. \n
\n
\n
\n

Write a message

\n

Separate several addresses with commas.

\n
\n
\n Back to Inbox\n
\n
\n\n
\n

Not sent: One address could not be understood. Check the field marked below.

\n

Draft saved: A copy of this message was saved in Drafts at 9:41 a.m.

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

New message

\n check spelling\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n \"ruth@ames\" is not a complete address.\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n \n Cancel\n
\n
\n
\n
\n

Quick addresses

\n
\n

Choose a name to add it to the To line.

\n \n

Open the address book

\n

Attachments: none. Attach a file of up to 1 MB.

\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. Today
    2. \n
  2. >
    3. \n
  3. Mail
    4. \n
  4. >
    5. \n
  5. Folders
    6. \n
\n
\n
\n

Folders

\n

Five standard folders and three of your own.

\n
\n
\n New folder\n
\n
\n\n
    \n
  • Messages251
    • \n
  • Unread3
    • \n
  • Space used2.1 MB
    • \n
  • Space left3.9 MB
    • \n
\n\n
\n \n
\n New folder\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
FolderMessagesUnreadSizeStatus 
Inbox423640kIn order 
Drafts000kIn order 
Sent580310kIn orderEmpty
Bulk mail121295kEmptied FridayEmpty
Trash750880kLargeEmpty
Allotment240120kIn orderRename
\n
\n\n
\n
\n
\n

Empty Trash

\n
\n

Remove all 75 messages in Trash? They cannot be brought back.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n
\n

Drafts

\n open folder\n
\n
\n

This folder is empty. Messages you save while writing are kept here.

\n Write a message\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.app.s06.p06.t05.u04.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"portals-2000s\",\n \"years\": [\n 2000,\n 2004\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-po-6654-dr\",\n \"short\": \"v1-po-6654-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #d0d0d0;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #a8a8a8;\n --color-bar: #000099;\n --color-bar-text: #ffffff;\n --color-bar-alt: #686868;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #082058;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #484848;\n --color-heading: #000000;\n --color-heading-alt: #000099;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #686898;\n --color-link-hover: #0033cc;\n --color-link-active: #ff0000;\n --color-border: #989898;\n --color-border-strong: #303030;\n --color-border-muted: #e0e0e0;\n --color-accent: #ffd000;\n --color-accent-text: #000000;\n --color-accent-alt: #d00000;\n --color-fill-1: #f0f8ff;\n --color-fill-2: #ffffd0;\n --color-fill-3: #d0d0ff;\n --color-fill-4: #e8e8e8;\n --color-button: #d0d0d0;\n --color-button-text: #000000;\n --color-button-hover-text: #000099;\n --color-button-secondary: #e8e8e8;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #686868;\n --color-disabled: #d8d8d8;\n --color-disabled-text: #707070;\n --color-danger: #d00000;\n --color-danger-surface: #fff0e0;\n --color-success: #3f8640;\n --color-warning: #ffd000;\n --color-notice: #ffffd0;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #303030;\n --color-overlay: #989898;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, Geneva, sans-serif;\n --font-heading: Verdana, Arial, Helvetica, Geneva, sans-serif;\n --font-ui: Tahoma, Arial, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: double;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 2px 2px 0 var(--color-border-muted);\n --shadow-control: none;\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.09'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white' fill-opacity='.12'/%3E%3C/svg%3E\");\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface-alt);\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" } }