{
  "id": "v1-w2-24b4",
  "long_id": "v1.web-2-0-gloss.portal.s02.p04.t11.u04",
  "name": "Web 2.0 gloss product front page",
  "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
  },
  "summary": "The front page of a hosted web product in the Web 2.0 look: a pale header strip with the brand and a line of text links, a tinted band with one centred claim and a large sign-up button, then a single narrow column of proof figures, short text and a band of four feature columns. It was common from about 2005 to 2009 on the sites of small web applications sold by subscription. Inside the product the same column carries a coloured header band with tabs standing on it, a frameless table and a narrow ruled column of side notes on the right.",
  "url": "https://chrono.skin/s/v1-w2-24b4",
  "preview_url": "https://chrono.skin/s/v1-w2-24b4/specimen.html",
  "files": {
    "STYLE.md": "# Web 2.0 gloss product front page\n\n## Summary\n\nThe front page of a hosted web product in the Web 2.0 look: a pale header strip with the brand and a line of text links, a tinted band with one centred claim and a large sign-up button, then a single narrow column of proof figures, short text and a band of four feature columns. It was common from about 2005 to 2009 on the sites of small web applications sold by subscription. Inside the product the same column carries a coloured header band with tabs standing on it, a frameless table and a narrow ruled column of side notes on the right.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 840px, centred in a 1024px viewport. It does not stretch.\n- The page is a stack of full-viewport bands, each holding one centred `--size-page` box: the header strip (`.ds-nav` with `.ds-nav__inner`, `--size-nav` 56px tall), the hero band (`.ds-hero` with `.ds-hero__inner`) and the footer band (`.ds-footer` with `.ds-footer__inner`). Text never sits directly in a band; it goes in the inner box.\n- Navigation is not a bar of tabs: it is the brand followed by plain text links divided by 1px vertical hairlines, on the pale strip, with one sign-in link at the far right. There is no search field and no second navigation row.\n- The hero is centred: title, a pill badge with a proof figure, a lead line no wider than `--size-claim` (560px), then the large primary button, the word \"or\" and a large secondary button, a small note and one quoted line. No sidebar and no picture beside it.\n- Below the hero everything sits in `.ds-page__wrap`, a sheet in `--color-canvas` with no frame (840px 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), top to bottom: the `.ds-stats` row of three centred figures between two rules, `.ds-page__columns` (two equal 400px columns `.ds-page__col`, 40px apart: short headed text on the left, the dated log list on the right), the `.ds-grid` band of four feature columns, one full-width `.ds-panel`, and the `.ds-cta` strip. The home page has no sidebar.\n- Spacing scale: `--space-1` 2px (inside controls, between a title and its meta line), `--space-2` 5px (control padding, gaps between buttons, under a section label), `--space-3` 10px (list and table row padding, gap between notices, gaps in the hero action), `--space-4` 15px (panel padding, tab padding, form rows, stats padding), `--space-5` 25px (grid band padding and gutter, gap above the columns and the panel, aside padding, footer padding), `--space-6` 40px (hero band padding, the gap between the two text columns, the gap between sections; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 24px tall, the hero and call-strip buttons `--size-control-large` 38px, the list date column `--size-date` 48px, the sample box in a feature column `--size-shot` 78px tall, form fields `--size-field` 360px wide, the dialog `--size-dialog` 400px.\n- Views: the specimen is one example site of six screens, each a `.ds-view` section holding its own `.ds-page__wrap` (the home view holds the hero band first), with the header strip and the footer band written once around them. `home` is the product's front page (hero band, stats, the two text columns with the notebook list, the feature band, the quotation panel, the call strip). `tour` is one page of the tour (long text, onward links, a contents block in the side column). `signup` is plans and sign-up (the plans table, the sign-up form). `client` is the page of one client inside the product (toolbar, the invoice table with status badges and their key, pagination, the confirming dialog). `hours` is the same client's hours tab (the empty state, last month's billed hours as a list). `receipt` is its receipts tab (notices, the form for adding a receipt). Links are plain `href=\"#name\"`; the tabs in the page header lead from one client view to the next. The navigation link of the showing view is marked by a `.ds-page:has(#name:target)` rule, Home also when no view is named, and Your studio for all three client views.\n- Inner pages drop the hero band, the stats row, the two text columns, the feature band and the call strip. In `.ds-page__wrap`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header`, a band in the bar colour across the full 840px that replaces the hero (title and one line on the left, one secondary button on the right) with `.ds-tabs` standing on its lower edge (a page with no tabs adds `.ds-page-header--plain`, which gives the band its lower padding back), then `.ds-page__split` 25px below. The split has a main column (605px) and `.ds-page__aside`, a right column of `--size-aside` (210px) set off by a 1px vertical rule with 25px on each side of it, not by a gap alone. The table or list the tabs switch comes first in the main column, under a `.ds-buttons` toolbar when it has one; notices sit at the very top of the main column, above the form they report on; an open dialog follows the table that opened it as a `.ds-section`; further blocks such as a form follow as `.ds-section` blocks 40px apart, each under a ruled `.ds-section__label`. A page that needs the whole width leaves out the aside. 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- Lists and tables are rows divided by 1px rules, never cards. The table has no outer frame.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- A serif set: `--font-body` and `--font-heading` are Georgia, \"Times New Roman\", serif. `--font-ui` is \"Lucida Grande\", Arial, Helvetica, sans-serif for buttons, tabs, fields and table text. `--font-mono` (\"Courier New\") for inline code only.\n- `--text-base` 13px at `--line-body` 1.3; `--text-small` 11px for meta lines and the footer; `--text-ui` 11px bold (`--weight-ui` 700).\n- Headings are Georgia in regular weight (`--weight-heading` and `--weight-display` 400): `--text-display` 22px (the name in the header, hero title), `--text-h1` 20px, `--text-h2` 17px, `--text-h3` 14px, at `--line-heading` 1.2. `--text-large` 15px for the hero lead and the large button. Emphasis inside text is `--weight-bold` 700.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are none, `--link-decoration-hover` underline.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets page fill, base font and colour. Content below the hero goes in `.ds-page__wrap` (840px). `.ds-page__columns` holds two equal `.ds-page__col`; `.ds-page__split` holds `.ds-page__main` and the ruled right `.ds-page__aside` on inner pages. `.ds-section` with a ruled `.ds-section__label` separates blocks by 40px (`.ds-section--first`, 25px, when it follows notices at the top of a column). `.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`: the header strip, full viewport width, wrapping `.ds-nav__inner`. Holds the `.ds-brand`, `.ds-nav__links` of `.ds-nav__item` (first: `is-first`) divided by hairlines, each a `.ds-nav__link` (current: `is-current`, dark and bold over a 2px rule in `--color-accent-alt`, since bold alone would not tell it from the sign-up link; the sign-up link: `is-strong`), and `.ds-nav__tools` at the right with one `.ds-nav__tool` link.\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-h1` in `--weight-display`, coloured `--color-bar-alt-text` for the pale header strip 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 tinted band under the header, wrapping `.ds-hero__inner`: `.ds-hero__title`, `.ds-hero__claim` (a `.ds-badge`), `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large`, `.ds-hero__or`, a large secondary button), `.ds-hero__note` and `.ds-hero__quote`. All centred. One per site, on the front page only.\n- `.ds-cta`: the accent-coloured call strip that closes the front page: `.ds-cta__text` and one `.ds-button--large`, centred. Once per page at most.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a band in the bar colour with `.ds-page-header__row` (`.ds-page-header__main` holding `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__actions` with one secondary button) and, under the row, the page's `.ds-tabs`; `.ds-page-header--plain` for a page without tabs. One per inner page.\n- `.ds-tabs`: the views of the object named in the page header; it sits inside `.ds-page-header` on the band's lower edge. `.ds-tabs__tab` is a darker block with white bold text; `is-current` is cut out in the page colour with dark text; `.ds-tabs__count` for a regular-weight number. Two to five tabs.\n- `.ds-stat`: one summary figure; three of them sit in a `.ds-stats` row between two rules, divided by vertical hairlines (first one `is-first`). Each is centred: a `.ds-stat__number` at display size, a `.ds-stat__label` under it and an optional small `.ds-stat__note`. On the front page as proof figures, or under a page header as totals. `.ds-stats--first` drops the top margin when the row opens the sheet.\n- `.ds-grid`: a tinted band of four feature columns. Each `.ds-grid__cell` (`.ds-grid__cell--1` to `--4` pick the tint of its sample) holds a `.ds-grid__shot`, a small framed sample of the product with a `.ds-grid__shot-title` and two `.ds-grid__shot-line`, then a centred `.ds-grid__title` and `.ds-grid__text`. For more than four features start a second band.\n- `.ds-prose`: long text: h1, h2 (second heading colour; `is-first` drops its top margin), h3, p, ul, ol, code, strong, mark and underlined links inside it are styled.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. Variant `.ds-link--title` for titles and list or sidebar entries; `.ds-link--quiet` for names. `.ds-links` lays several out in a row.\n- `.ds-button`: primary action, 24px tall. Variants `.ds-button--secondary` (the usual button), `.ds-button--danger` (flat `--color-danger`; only for an action that cannot be undone) and `.ds-button--large` (38px; hero and call strip only). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row of them. One primary button per form or dialog.\n- `.ds-form`: label-above form: each `.ds-form__row` holds a bold `.ds-form__label`, then a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` (fields 360px wide, the textarea full width), then `.ds-form__hint` or `.ds-form__error`; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule holds the one button followed by the words \"or cancel\" as a link.\n- `.ds-table`: frameless data table: `.ds-table__head` cells form a bar with white bold text; `.ds-table__row` with `is-alt` for alternate rows; `.ds-table__cell` with a hairline below; `is-numeric` right-aligns and bolds numbers. `.ds-table--first` drops the top margin when the table is the first thing in its column.\n- `.ds-list`: dated log lines under an optional `.ds-list__head`. Each `.ds-list__item` is a right-aligned `.ds-list__date` beside `.ds-list__body`: a bold `.ds-list__title` holding a `.ds-link--title`, and a small `.ds-list__meta` line. A rule above the list and under every row.\n- `.ds-panel`: a quiet full-width box for a quotation or a short pitch: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and a small `.ds-panel__source`.\n- `.ds-badge`: small bold label. Base is the accent pill. Variants `.ds-badge--count`, `.ds-badge--tag`, `.ds-badge--new`, and the status variants `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`, one per table row in a status column. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a block in the right column of an inner page: a ruled `.ds-sidebar__title`, then `.ds-sidebar__list` of `.ds-sidebar__item` lines (a link and an optional right-aligned `.ds-sidebar__count`) or `.ds-sidebar__text` paragraphs. No fill and no box.\n- `.ds-notice`: one centred line at the top of the column, with `.ds-notice__title` in bold. Variant `.ds-notice--error`.\n- `.ds-pagination`: right-aligned under a table: plain bold `.ds-pagination__link` numbers, the current page `is-current` as a filled block, unavailable `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: small trail of `.ds-link` items with `.ds-breadcrumb__sep` and a bold `.ds-breadcrumb__current`, above the page header.\n- `.ds-dialog`: framed box with a `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons left-aligned, the confirming one first. Sits on `.ds-dialog__backdrop`.\n- `.ds-empty`: tinted bordered box with a `.ds-empty__title`, a `.ds-empty__text` line and one button.\n- `.ds-footer`: one inverted band, full viewport width, wrapping `.ds-footer__inner`: `.ds-footer__links` (centred `.ds-footer__item` entries, first one `is-first`, each a `.ds-footer__link`) and a `.ds-footer__legal` line.\n- `.ds-menu`: a drop-down under a navigation link, for the pages of the section it names. The `li.ds-nav__item` also 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 a row). A square white hairline box that hangs just under the strip and opens on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-carousel`: several short pieces of which one shows: `.ds-carousel__track` of `.ds-carousel__slide` items that snap sideways, and `.ds-carousel__dots` under it with one `.ds-carousel__dot` per slide, the showing one `is-current` (solid button blue). `.ds-carousel--bare` drops the frame so that it sits inside a `.ds-panel`, as on the front page for what customers said; a slide may also hold `.ds-carousel__title`, `.ds-carousel__text` and `.ds-carousel__meta`. Three to five slides, each complete on its own; never for anything a visitor needs in order to sign up.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a flat pale `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For the three or four questions asked before signing up, in the sidebar; one item is open at the start.\n- `.ds-progress`: how far something is: a `.ds-progress__label` line (the thing in `.ds-progress__name`, what is left on the right) over `progress.ds-progress__bar`, a grey track filled with the button blue. Variants of the bar: `.ds-progress__bar--success`, `--warning`, `--danger`. For the free month, or a count toward a plan's limit; one per sidebar block.\n- `.ds-avatar`: the picture of a person: an 18px square tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4` (the block fills). It sits before a name in a sidebar row (`.ds-sidebar__item--person` centres the row); `.ds-avatar--large` doubles it. Decorative: the name is always written beside it.\n\n## Never\n\n- `row-gap <= 20px`: list and table rows touch, divided by a rule.\n- `block-gap <= 40px`: sections are at most 40px apart.\n- `content-width <= 840px`: text stays inside the fixed 840px column; the bands span the viewport but their text does not.\n- `palette-colours <= 36`: slate tints, steel blue, black, greys, one orange, one brown and the status colours.\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 <= 10px`: corners are 5, 8 or 10px.\n- `border-width <= 3px`: borders are 1px hairlines; only the dialog frame is 3px.\n- `box-shadow-blur <= 8px`: shadows are short; the dialog's 8px is the largest.\n- `gradient-fills <= 20%`: gradients stay on the header band, table head, buttons, step numerals, panels, stat tiles and the page-header strip; boxes, rows and modules are flat.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new front-page block is a full-width row of the 840px column: a tinted band like `.ds-grid` taking one `--color-fill-*`, a ruled row like `.ds-stats`, or two equal columns in `.ds-page__columns`; do not add a sidebar to the front page. A new block inside the product goes in the main column as a `.ds-section`, or in the aside as a `.ds-sidebar` if it is a short list of links or facts. Anything in the bar colour takes `--fill-bar` with `--color-bar-text`; anything on the accent takes `--color-accent-text`. Separate rows with 1px `--color-border-muted` rules, keep text at `--text-base`, `--text-ui` or `--text-small`, and make any extra shade with `color-mix()` over existing colour tokens rather than adding a colour.\n",
    "components.css": ":root {\n  --size-page: 840px;\n  --size-claim: 560px;\n  --size-aside: 210px;\n  --size-nav: 56px;\n  --size-control: 24px;\n  --size-control-large: 38px;\n  --size-date: 48px;\n  --size-shot: 78px;\n  --size-field: 360px;\n  --size-textarea: 80px;\n  --size-dialog: 400px;\n  --space-1: 2px;\n  --space-2: 5px;\n  --space-3: 10px;\n  --space-4: 15px;\n  --space-5: 25px;\n  --space-6: 40px;\n  --size-drop: 150px;\n  --size-meter: 10px;\n  --size-avatar: 18px;\n}\n\n/* shell: full-width bands, each holding one centred column */\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-5) var(--space-5) var(--space-6);\n  background: var(--color-canvas);\n}\n.ds-page__columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-6);\n  margin: var(--space-5) 0 0;\n}\n.ds-page__col {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page__split {\n  display: flex;\n  align-items: flex-start;\n  margin: var(--space-5) 0 0;\n}\n.ds-page__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page__aside {\n  flex: 0 0 var(--size-aside);\n  width: var(--size-aside);\n  margin-left: var(--space-5);\n  padding-left: var(--space-5);\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--first { margin-top: var(--space-5); }\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: 0 0 var(--space-2);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* nav: one pale strip; wordmark, then text links divided by hairlines */\n.ds-nav {\n  margin: 0;\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  height: var(--size-nav);\n  margin: 0 auto;\n}\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-5);\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-h1) * 1.25);\n  height: calc(var(--text-h1) * 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-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__item {\n  padding: 0 var(--space-3);\n  border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n  line-height: 1;\n}\n.ds-nav__item.is-first { border-left: 0; }\n.ds-nav__link,\n.ds-nav__tool {\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover,\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__link.is-current {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#tour:target) .ds-nav__link[href=\"#tour\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#signup\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#client:target) .ds-nav__link[href=\"#client\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#hours:target) .ds-nav__link[href=\"#client\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-page:has(#receipt:target) .ds-nav__link[href=\"#client\"] {\n  color: var(--color-bar-alt-text);\n  font-weight: var(--weight-bold);\n  padding-bottom: var(--space-1);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-accent-alt);\n}\n.ds-nav__link.is-strong { font-weight: var(--weight-bold); }\n.ds-nav__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin-left: auto;\n}\n\n/* hero: a tinted band with one centred claim and the sign-up action */\n.ds-hero {\n  margin: 0;\n  background: var(--color-fill-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-hero__inner {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-6) 0;\n  text-align: center;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\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__claim { margin: 0 0 var(--space-3); }\n.ds-hero__lead {\n  width: var(--size-claim);\n  max-width: 100%;\n  margin: 0 auto var(--space-5);\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  justify-content: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-hero__or {\n  color: var(--color-link-quiet);\n  font-size: var(--text-large);\n}\n.ds-hero__note {\n  margin: var(--space-3) 0 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n.ds-hero__quote {\n  width: var(--size-claim);\n  max-width: 100%;\n  margin: var(--space-5) auto 0;\n  color: var(--color-heading-alt);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n\n/* call strip: the accent colour across the column, one line and one button */\n.ds-cta {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-4);\n  margin: var(--space-6) 0 0;\n  padding: var(--space-3) var(--space-4);\n  border-radius: var(--radius-control);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-cta__text {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n\n/* page header: a bar band with the tabs standing on its lower edge */\n.ds-page-header {\n  margin: var(--space-3) 0 0;\n  padding: var(--space-4) var(--space-5) 0;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  border-radius: var(--radius-page) var(--radius-page) 0 0;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-page-header--plain { padding-bottom: var(--space-4); }\n.ds-page-header__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n  text-shadow: var(--shadow-text);\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-bar-text);\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-bar-text);\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/* tabs: square blocks on the bar; the current one is cut out in the page colour */\n.ds-tabs {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-1);\n  margin: var(--space-4) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n  border-bottom: 0;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-tabs__tab.is-current {\n  border-color: var(--color-canvas);\n  background: var(--color-canvas);\n  color: var(--color-heading);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* stats: three large centred figures between two rules */\n.ds-stats {\n  display: flex;\n  margin: var(--space-5) 0 0;\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-stats--first { margin-top: 0; }\n.ds-stat {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: center;\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-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-link-quiet);\n}\n.ds-stat__note {\n  display: block;\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n\n/* grid: one tinted band, four feature columns, each a small framed sample over a caption */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-5);\n  margin: var(--space-6) 0 0;\n  padding: var(--space-5);\n  border-radius: var(--radius-page);\n  background: var(--color-fill-2);\n}\n.ds-grid__cell { text-align: center; }\n.ds-grid__shot {\n  height: var(--size-shot);\n  margin: 0 0 var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface);\n  font-size: var(--text-small);\n  text-align: left;\n  overflow: hidden;\n}\n.ds-grid__cell--1 .ds-grid__shot { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__shot { background: var(--color-surface); }\n.ds-grid__cell--3 .ds-grid__shot { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__shot { background: var(--color-fill-4); }\n.ds-grid__shot-title {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-grid__shot-line { margin: 0 0 var(--space-1); }\n.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h2.is-first { margin-top: 0; }\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-small);\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-button {\n  display: inline-block;\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 75%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-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-5);\n  font-size: var(--text-large);\n  line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--secondary {\n  border-color: var(--color-border-strong);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-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: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 82%, var(--color-surface));\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: label above its field, fields at a fixed measure */\n.ds-form { margin: 0; }\n.ds-form__row { margin: 0 0 var(--space-4); }\n.ds-form__label {\n  display: block;\n  margin: 0 0 var(--space-1);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  display: block;\n  width: var(--size-field);\n  max-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__textarea {\n  width: 100%;\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  font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: var(--space-4) 0 0;\n  padding: var(--space-3) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: no frame; a bar for a head, hairlines under the rows */\n.ds-table {\n  width: 100%;\n  margin: var(--space-4) 0 0;\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-table--first { margin-top: 0; }\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-3);\n  border-bottom: 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/* list: dated log lines; date column, then a title line and a meta line */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: baseline;\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__date {\n  flex: 0 0 var(--size-date);\n  width: var(--size-date);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: right;\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-list__meta {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__head {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* badge */\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}\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: a quiet box for a quotation or a short pitch */\n.ds-panel {\n  margin: var(--space-5) 0 0;\n  padding: 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-2); }\n.ds-panel__source {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* sidebar block: ruled title, plain link lines, behind the column's left rule */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n  padding: var(--space-1) 0;\n}\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__text {\n  margin: 0 0 var(--space-2);\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notice {\n  margin: 0 0 var(--space-3);\n  padding: var(--space-2) var(--space-4);\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  text-align: center;\n}\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: a line of plain numbers, the current one a filled block */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  margin: var(--space-3) 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-radius: var(--radius-control);\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-pagination__link.is-current {\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  font-weight: var(--weight-body);\n}\n.ds-pagination__gap { 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: framed box, bar for a title, the choice written out as a sentence */\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  margin: 0;\n  padding: var(--space-2) var(--space-4);\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__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n  padding: var(--space-6) var(--space-5);\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}\n\n/* footer: one inverted band, links and small print centred in the column */\n.ds-footer {\n  margin: 0;\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-footer__inner {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0;\n  font-size: var(--text-small);\n  text-align: center;\n}\n.ds-footer__links {\n  display: flex;\n  justify-content: center;\n  margin: 0 0 var(--space-3);\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__item {\n  padding: 0 var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 40%, transparent);\n  line-height: 1;\n}\n.ds-footer__item.is-first { border-left: 0; }\n.ds-footer__link {\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal { margin: 0; }\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n  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: var(--color-surface-alt);\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/* carousel: a row of slides with one showing, and a dot for each under it */\n.ds-carousel {\n  margin: var(--space-5) 0 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-carousel__track {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  padding: var(--space-4) var(--space-5);\n  scroll-snap-align: start;\n}\n.ds-carousel__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}\n.ds-carousel__text { margin: 0 0 var(--space-2); }\n.ds-carousel__meta {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-carousel__dots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-2) 0 var(--space-3);\n  list-style: none;\n}\n.ds-carousel__dot {\n  display: block;\n  width: var(--space-3);\n  height: var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  background: var(--color-surface-strong);\n}\n.ds-carousel__dot.is-current {\n  border-color: var(--color-button);\n  background: var(--fill-button);\n}\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--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-nav__item .ds-menu__list { top: calc(100% + var(--space-2)); left: var(--space-1); }\n.ds-nav__item.ds-menu::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  height: var(--space-2);\n}\n.ds-carousel--bare {\n  margin: 0;\n  border: 0;\n  background: transparent;\n  box-shadow: none;\n}\n.ds-carousel--bare .ds-carousel__slide { padding: 0; }\n.ds-carousel--bare .ds-carousel__dots { justify-content: flex-start; padding-bottom: 0; }\n.ds-sidebar .ds-accordion { margin-bottom: 0; }\n.ds-sidebar__item--person { align-items: center; }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Web 2.0 gloss product front page specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#\"><span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2.5 10.5V8a5 5 0 0 1 5-5h9a5 5 0 0 1 5 5v2.5z\" opacity=\".55\"/><path d=\"M2.5 10.5h19V13a5 5 0 0 1-5 5H12l-4.5 3.8V18a5 5 0 0 1-5-5z\"/></svg></span><span class=\"ds-brand__name\">chronoskin</span></a>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-nav__item is-first\"><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#tour\">Tour</a></li>\n      <li class=\"ds-nav__item ds-menu\" data-component=\"menu\"><a class=\"ds-nav__link\" href=\"#client\">Your studio <span class=\"ds-menu__caret\"></span></a>\n        <ul class=\"ds-menu__list\">\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#client\">Invoices</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#hours\">Hours</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#receipt\">Receipts</a></li>\n        </ul>\n      </li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__link is-strong\" href=\"#signup\">Plans and sign-up</a></li>\n    </ul>\n    <div class=\"ds-nav__tools\">\n      <a class=\"ds-nav__tool\" href=\"#client\">Customer sign in</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n\n<div class=\"ds-hero\" data-component=\"hero\">\n  <div class=\"ds-hero__inner\">\n    <h1 class=\"ds-hero__title\">Send the invoice before the kettle boils</h1>\n    <p class=\"ds-hero__claim\"><span class=\"ds-badge\">Used by 21,000 small studios</span></p>\n    <p class=\"ds-hero__lead\">chronoskin keeps the hours, the expenses and the invoices of a small studio on one page that everybody can read.</p>\n    <div class=\"ds-hero__action\">\n      <a class=\"ds-button ds-button--large\" href=\"#signup\">Sign up free</a>\n      <span class=\"ds-hero__or\">or</span>\n      <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#tour\">Take the tour</a>\n    </div>\n    <p class=\"ds-hero__note\">Thirty days free, no card needed. Have an account? <a class=\"ds-link\" href=\"#client\">Sign in</a>.</p>\n    <p class=\"ds-hero__quote\">&ldquo;We stopped losing Friday afternoons to the spreadsheet.&rdquo;, a bookbinder with four employees</p>\n  </div>\n</div>\n\n  <div class=\"ds-page__wrap\">\n\n    <ul class=\"ds-stats ds-stats--first\" data-component=\"stats\">\n      <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">21,000</span><span class=\"ds-stat__label\">studios signed up</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">9 in 10</span><span class=\"ds-stat__label\">would tell a colleague</span><span class=\"ds-stat__note\">from last spring's survey</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">4 minutes</span><span class=\"ds-stat__label\">from hours to a sent invoice</span></li>\n    </ul>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__col\">\n        <div class=\"ds-prose\">\n          <h2 class=\"is-first\">Why another invoicing tool?</h2>\n          <p>Because the others were built for accountants. A studio of five does not need a chart of accounts; it needs to know <mark>who worked on what, and whether it has been billed</mark>.</p>\n          <h2>Nothing to install</h2>\n          <p>chronoskin runs in the browser you already have. Your figures are copied every night and you can <a href=\"#tour\">take them with you</a> whenever you like.</p>\n        </div>\n      </div>\n      <div class=\"ds-page__col\">\n        <h2 class=\"ds-list__head\">From the notebook</h2>\n        <ol class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\">14 Oct</span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Invoices can now carry two tax rates</a> <span class=\"ds-badge ds-badge--new\">NEW</span></h3>\n              <p class=\"ds-list__meta\">posted by Ines, 6 comments</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\">9 Oct</span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#tour\">How a pottery of three bills by the kiln load</a></h3>\n              <p class=\"ds-list__meta\">posted by Tobias, 14 comments</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\">2 Oct</span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#tour\">Printing a time sheet that fits on one page</a></h3>\n              <p class=\"ds-list__meta\">posted by Ines, 3 comments</p>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\">26 Sep</span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Planned maintenance on Sunday morning</a></h3>\n              <p class=\"ds-list__meta\">posted by Oskar, no comments</p>\n            </div>\n          </li>\n        </ol>\n      </div>\n    </div>\n\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <div class=\"ds-grid__cell ds-grid__cell--1\">\n        <div class=\"ds-grid__shot\">\n          <p class=\"ds-grid__shot-title\">Tuesday</p>\n          <p class=\"ds-grid__shot-line\">2.5 h &nbsp; Poster proofs</p>\n          <p class=\"ds-grid__shot-line\">1.0 h &nbsp; Client call</p>\n        </div>\n        <h2 class=\"ds-grid__title\">Write down hours</h2>\n        <p class=\"ds-grid__text\">One line per job, typed in when the job is done.</p>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\">\n        <div class=\"ds-grid__shot\">\n          <p class=\"ds-grid__shot-title\">Invoice 0412</p>\n          <p class=\"ds-grid__shot-line\">Design, 14 h</p>\n          <p class=\"ds-grid__shot-line\">Paper stock</p>\n        </div>\n        <h2 class=\"ds-grid__title\">Send invoices</h2>\n        <p class=\"ds-grid__text\">Hours and expenses turn into an invoice with one press.</p>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--3\">\n        <div class=\"ds-grid__shot\">\n          <p class=\"ds-grid__shot-title\">Receipts</p>\n          <p class=\"ds-grid__shot-line\">Courier, 18.40</p>\n          <p class=\"ds-grid__shot-line\">Ink, 62.00</p>\n        </div>\n        <h2 class=\"ds-grid__title\">Keep receipts</h2>\n        <p class=\"ds-grid__text\">Every expense sits beside the job that caused it.</p>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--4\">\n        <div class=\"ds-grid__shot\">\n          <p class=\"ds-grid__shot-title\">Due this month</p>\n          <p class=\"ds-grid__shot-line\">3 invoices open</p>\n          <p class=\"ds-grid__shot-line\">1 overdue</p>\n        </div>\n        <h2 class=\"ds-grid__title\">See who owes what</h2>\n        <p class=\"ds-grid__text\">Open, paid and overdue, on a single list.</p>\n      </div>\n    </div>\n\n    <section class=\"ds-panel\" data-component=\"panel\">\n      <h2 class=\"ds-panel__title\">What customers told us</h2>\n      <div class=\"ds-panel__body\">\n        <div class=\"ds-carousel ds-carousel--bare\" data-component=\"carousel\">\n          <ul class=\"ds-carousel__track\">\n            <li class=\"ds-carousel__slide\">\n              <p class=\"ds-panel__text\">The first month we used it we found eleven hours nobody had billed. It had paid for the year by the second week.</p>\n              <p class=\"ds-panel__source\">Runs a letterpress workshop of six</p>\n            </li>\n            <li class=\"ds-carousel__slide\">\n              <p class=\"ds-panel__text\">I send the invoices on the last Friday now, from the train. Before, it took the whole of Monday.</p>\n              <p class=\"ds-panel__source\">Draws maps, works alone</p>\n            </li>\n            <li class=\"ds-carousel__slide\">\n              <p class=\"ds-panel__text\">Receipts used to live in a shoe box. Now each one sits beside the job that caused it.</p>\n              <p class=\"ds-panel__source\">Runs a pottery of three</p>\n            </li>\n          </ul>\n          <ol class=\"ds-carousel__dots\" aria-hidden=\"true\">\n            <li class=\"ds-carousel__dot is-current\"></li>\n            <li class=\"ds-carousel__dot\"></li>\n            <li class=\"ds-carousel__dot\"></li>\n          </ol>\n        </div>\n      </div>\n    </section>\n\n    <div class=\"ds-cta\">\n      <p class=\"ds-cta__text\">Thirty days free for the whole studio.</p>\n      <a class=\"ds-button ds-button--large\" href=\"#signup\">Sign up free</a>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"tour\">\n  <div class=\"ds-page__wrap\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#tour\">Tour</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Billing by the hour</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__row\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">The tour</h1>\n          <p class=\"ds-page-header__text\">Three short pages on how a studio gets from hours to a paid invoice.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#signup\">Sign up free</a>\n        </div>\n      </div>\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#tour\">1. Hours</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#tour\">2. Invoices</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#tour\">3. Getting paid</a></li>\n      </ul>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__main\">\n      <div class=\"ds-prose\" data-component=\"typography\">\n        <h1>How billing by the hour works</h1>\n        <p>Each person writes down what they did and for how long. At the end of the month the hours for one client are gathered into a draft invoice, which you can <a href=\"#client\">change before it goes out</a>.</p>\n        <h2>Rates</h2>\n        <p>A rate belongs to a person, a job or a client. <strong>The most specific one wins</strong>: a rate set on the job replaces the rate of the person doing it.</p>\n        <h3>Before the first invoice</h3>\n        <ul>\n          <li>Enter the studio's address and tax number.</li>\n          <li>Give every person an hourly rate.</li>\n          <li>Decide how many days a client has to pay.</li>\n        </ul>\n        <p>Invoice numbers follow the pattern you set, for example <code>2008-0412</code>.</p>\n        <h2>Receipts</h2>\n        <p>Paper, ink and couriers bought for a client are written down as receipts. They wait beside the hours and go on the next invoice at cost, unless you <a href=\"#receipt\">say otherwise</a>.</p>\n      </div>\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">Where to go from here</h2>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#signup\">See the plans</a>\n            <a class=\"ds-link is-visited\" href=\"#home\">Back to the front page</a>\n            <a class=\"ds-link is-hover\" href=\"#client\">Look at a client page</a>\n            <a class=\"ds-link is-active\" href=\"#receipt\">Try adding a receipt</a>\n          </p>\n        </section>\n      </div>\n\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">In the tour</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Writing down hours</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Rates for people and jobs</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">From hours to an invoice</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Receipts passed on at cost</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Reminders and terms</a></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">See it with figures in</h2>\n          <p class=\"ds-sidebar__text\">The page of one client, with its invoices, hours and receipts, is open to look at.</p>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#client\">Open the example client</a></p>\n        </section>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"signup\">\n  <div class=\"ds-page__wrap\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Plans and sign-up</li>\n    </ol>\n\n    <div class=\"ds-page-header ds-page-header--plain\">\n      <div class=\"ds-page-header__row\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Plans and sign-up</h1>\n          <p class=\"ds-page-header__text\">Thirty days free on every plan. No card needed until the trial ends.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#tour\">Take the tour first</a>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__main\">\n\n        <table class=\"ds-table ds-table--first\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\">Plan</th>\n              <th class=\"ds-table__head\">People</th>\n              <th class=\"ds-table__head\">Clients</th>\n              <th class=\"ds-table__head is-numeric\">Each month</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#signup\">Bench</a></td>\n              <td class=\"ds-table__cell\">1</td>\n              <td class=\"ds-table__cell\">up to 5</td>\n              <td class=\"ds-table__cell is-numeric\">free</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#signup\">Workshop</a> <span class=\"ds-badge\">Most studios pick this</span></td>\n              <td class=\"ds-table__cell\">up to 6</td>\n              <td class=\"ds-table__cell\">up to 40</td>\n              <td class=\"ds-table__cell is-numeric\">12.00</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#signup\">Studio</a></td>\n              <td class=\"ds-table__cell\">up to 15</td>\n              <td class=\"ds-table__cell\">any number</td>\n              <td class=\"ds-table__cell is-numeric\">24.00</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#signup\">Works</a></td>\n              <td class=\"ds-table__cell\">any number</td>\n              <td class=\"ds-table__cell\">any number</td>\n              <td class=\"ds-table__cell is-numeric\">49.00</td>\n            </tr>\n          </tbody>\n        </table>\n\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">Start the free month</h2>\n          <form class=\"ds-form\" action=\"#\">\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"s-studio\">Name of the studio</label>\n              <input class=\"ds-form__input\" id=\"s-studio\" type=\"text\" value=\"Larkfield Press\">\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"s-mail\">Your e-mail address</label>\n              <input class=\"ds-form__input\" id=\"s-mail\" type=\"text\" value=\"ines@larkfield.example\">\n              <p class=\"ds-form__hint\">The sign-in link is sent here. Nothing else is.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"s-plan\">Plan</label>\n              <select class=\"ds-form__select\" id=\"s-plan\">\n                <option>Workshop, up to 6 people</option>\n                <option>Bench, 1 person</option>\n                <option>Studio, up to 15 people</option>\n              </select>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me the notebook once a month</label>\n            </div>\n            <div class=\"ds-form__actions\">\n              <a class=\"ds-button\" href=\"#client\">Create the studio</a>\n              <span>or <a class=\"ds-link\" href=\"#home\">go back</a></span>\n            </div>\n          </form>\n        </section>\n      </div>\n\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">On every plan</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\">Hours, invoices and receipts</li>\n            <li class=\"ds-sidebar__item\">A copy of your figures every night</li>\n            <li class=\"ds-sidebar__item\">Invoices in your own layout</li>\n            <li class=\"ds-sidebar__item\">Take everything with you as a file</li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Asked before signing up</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item is-first\" open>\n              <summary class=\"ds-accordion__title\">What happens after thirty days?</summary>\n              <p class=\"ds-accordion__body\">We ask which plan you want. Until you answer, nothing is charged and nothing is lost.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">Can we change plan later?</summary>\n              <p class=\"ds-accordion__body\">Any day, up or down. The price follows from the next month.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">Who can read our figures?</summary>\n              <p class=\"ds-accordion__body\">The people you invite, and nobody else.</p>\n            </details>\n          </div>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Already a customer</h2>\n          <p class=\"ds-sidebar__text\">Your studio is where you left it.</p>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#client\">Sign in</a></p>\n        </section>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"client\">\n  <div class=\"ds-page__wrap\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#client\">Your studio</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#client\">Clients</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Harrow Lane Bakery</li>\n    </ol>\n\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__row\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Harrow Lane Bakery</h1>\n          <p class=\"ds-page-header__text\">Every invoice, hour and receipt booked to this client since March.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#receipt\">Add a receipt</a>\n        </div>\n      </div>\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#client\">Invoices <span class=\"ds-tabs__count\">(18)</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#hours\">Hours <span class=\"ds-tabs__count\">(0)</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#receipt\">Receipts <span class=\"ds-tabs__count\">(11)</span></a></li>\n      </ul>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-buttons\" data-component=\"buttons\">\n          <button class=\"ds-button\" type=\"button\">Send a reminder</button>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Print the list</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Mark as paid</button>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Delete 0377</button>\n        </div>\n\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\">Invoice</th>\n              <th class=\"ds-table__head\">Sent</th>\n              <th class=\"ds-table__head\">Status</th>\n              <th class=\"ds-table__head is-numeric\">Amount</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">0412 Autumn price list</a> <span class=\"ds-badge ds-badge--new\">NEW</span></td>\n              <td class=\"ds-table__cell\">3 Oct</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">Due soon</span></td>\n              <td class=\"ds-table__cell is-numeric\">1,240.00</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">0398 Shop window lettering</a></td>\n              <td class=\"ds-table__cell\">11 Sep</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Paid</span></td>\n              <td class=\"ds-table__cell is-numeric\">860.00</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">0377 Paper bags, second run</a></td>\n              <td class=\"ds-table__cell\">20 Aug</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Overdue</span></td>\n              <td class=\"ds-table__cell is-numeric\">415.50</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">0351 Summer menu boards</a></td>\n              <td class=\"ds-table__cell\">2 Jul</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Paid</span></td>\n              <td class=\"ds-table__cell is-numeric\">2,075.00</td>\n            </tr>\n          </tbody>\n        </table>\n\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><span class=\"ds-pagination__link is-disabled\">&lsaquo; Newer</span></li>\n          <li><span class=\"ds-pagination__link is-current\">1</span></li>\n          <li><a class=\"ds-pagination__link\" href=\"#client\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#client\">3</a></li>\n          <li class=\"ds-pagination__gap\">&hellip;</li>\n          <li><a class=\"ds-pagination__link\" href=\"#client\">5</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#client\">Older &rsaquo;</a></li>\n        </ul>\n\n        <div class=\"ds-section\">\n      <div class=\"ds-dialog__backdrop\">\n        <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n          <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Delete invoice 0377?</h2>\n          <div class=\"ds-dialog__body\">\n            <p class=\"ds-dialog__text\">The hours and receipts on it go back to the unbilled list. The number 0377 will not be used again.</p>\n          </div>\n          <div class=\"ds-dialog__actions\">\n            <button class=\"ds-button ds-button--danger\" type=\"button\">Delete it</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#client\">Keep it</a>\n          </div>\n        </div>\n      </div>\n        </div>\n      </div>\n\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">This client</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Open invoices</a><span class=\"ds-sidebar__count\">2</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#hours\">Unbilled hours</a><span class=\"ds-sidebar__count\">0</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Receipts</a><span class=\"ds-sidebar__count\">11</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Address and terms</a></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Your free month</h2>\n          <div class=\"ds-progress\" data-component=\"progress\">\n            <p class=\"ds-progress__label\"><span class=\"ds-progress__name\">Day 18 of 30</span><span>12 days left</span></p>\n            <progress class=\"ds-progress__bar\" value=\"18\" max=\"30\">Day 18 of 30</progress>\n          </div>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#signup\">Pick a plan</a></p>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Reading the list</h2>\n          <ul class=\"ds-sidebar__list\" data-component=\"badge\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge ds-badge--success\">Paid</span> money has arrived</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge ds-badge--warning\">Due soon</span> a week left</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge ds-badge--danger\">Overdue</span> past its terms</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge ds-badge--new\">NEW</span> not yet opened</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge ds-badge--count\">18</span> invoices in all</li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-badge ds-badge--tag\" href=\"#client\">print</a> <a class=\"ds-badge ds-badge--tag\" href=\"#client\">signage</a> kinds of job</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-badge\">Pays on time</span></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to know</h2>\n          <p class=\"ds-sidebar__text\">This client pays within 21 days on average. Reminders go out after 30.</p>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#client\">Change the terms</a></p>\n        </section>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"hours\">\n  <div class=\"ds-page__wrap\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#client\">Your studio</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#client\">Clients</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Harrow Lane Bakery</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__row\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Harrow Lane Bakery</h1>\n          <p class=\"ds-page-header__text\">Hours written down for this client that have not been billed yet.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#client\">Back to invoices</a>\n        </div>\n      </div>\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab\" href=\"#client\">Invoices <span class=\"ds-tabs__count\">(18)</span></a></li>\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#hours\">Hours <span class=\"ds-tabs__count\">(0)</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#receipt\">Receipts <span class=\"ds-tabs__count\">(11)</span></a></li>\n      </ul>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h2 class=\"ds-empty__title\">No hours written down yet</h2>\n          <p class=\"ds-empty__text\">Hours booked to this client will be listed here, newest first.</p>\n          <a class=\"ds-button\" href=\"#receipt\">Add a receipt instead</a>\n        </div>\n\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">Billed last month</h2>\n          <ol class=\"ds-list\">\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__date\">29 Sep</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#client\">Autumn price list, proofs and corrections</a></h3>\n                <p class=\"ds-list__meta\">Ines Varga, 6.5 h, on invoice 0412</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__date\">24 Sep</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#client\">Autumn price list, layout</a></h3>\n                <p class=\"ds-list__meta\">Ines Varga, 7.5 h, on invoice 0412</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__date\">9 Sep</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#client\">Shop window lettering, fitting on site</a></h3>\n                <p class=\"ds-list__meta\">Tobias Renner, 4 h, on invoice 0398</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__date\">4 Sep</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#client\">Shop window lettering, drawing</a></h3>\n                <p class=\"ds-list__meta\">Tobias Renner, 9 h, on invoice 0398</p>\n              </div>\n            </li>\n          </ol>\n        </section>\n      </div>\n\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">This client</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Open invoices</a><span class=\"ds-sidebar__count\">2</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#hours\">Unbilled hours</a><span class=\"ds-sidebar__count\">0</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Receipts</a><span class=\"ds-sidebar__count\">11</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Address and terms</a></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">People on this client</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item ds-sidebar__item--person\"><span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"></span><a class=\"ds-link ds-link--quiet\" href=\"#hours\">Ines Varga</a><span class=\"ds-sidebar__count\">41 h</span></li>\n            <li class=\"ds-sidebar__item ds-sidebar__item--person\"><span class=\"ds-avatar ds-avatar--2\"></span><a class=\"ds-link ds-link--quiet\" href=\"#hours\">Tobias Renner</a><span class=\"ds-sidebar__count\">18 h</span></li>\n            <li class=\"ds-sidebar__item ds-sidebar__item--person\"><span class=\"ds-avatar ds-avatar--3\"></span><a class=\"ds-link ds-link--quiet\" href=\"#hours\">Oskar Lindqvist</a><span class=\"ds-sidebar__count\">6 h</span></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to know</h2>\n          <p class=\"ds-sidebar__text\">This client pays within 21 days on average. Reminders go out after 30.</p>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#client\">Change the terms</a></p>\n        </section>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"receipt\">\n  <div class=\"ds-page__wrap\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#client\">Your studio</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#client\">Clients</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Harrow Lane Bakery</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__row\">\n        <div class=\"ds-page-header__main\">\n          <h1 class=\"ds-page-header__title\">Harrow Lane Bakery</h1>\n          <p class=\"ds-page-header__text\">What the studio bought on behalf of this client, to be passed on at cost.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#client\">Back to invoices</a>\n        </div>\n      </div>\n      <ul class=\"ds-tabs\">\n        <li><a class=\"ds-tabs__tab\" href=\"#client\">Invoices <span class=\"ds-tabs__count\">(18)</span></a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#hours\">Hours <span class=\"ds-tabs__count\">(0)</span></a></li>\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#receipt\">Receipts <span class=\"ds-tabs__count\">(11)</span></a></li>\n      </ul>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-page__main\">\n\n        <div data-component=\"notice\">\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not added yet.</span> The amount has to be written in figures.</p>\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Welcome back.</span> Your trial runs for another 12 days.</p>\n        </div>\n\n        <section class=\"ds-section ds-section--first\">\n          <h2 class=\"ds-section__label\">Add a receipt</h2>\n          <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-what\">What was bought</label>\n              <input class=\"ds-form__input\" id=\"f-what\" type=\"text\" value=\"Two reams of cream stock\">\n              <p class=\"ds-form__hint\">As it should read on the invoice.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-amount\">Amount</label>\n              <input class=\"ds-form__input is-error\" id=\"f-amount\" type=\"text\" value=\"sixty-two\">\n              <p class=\"ds-form__error\">Write the amount in figures, for example 62.00.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-job\">Job</label>\n              <select class=\"ds-form__select\" id=\"f-job\">\n                <option>Autumn price list</option>\n                <option>Shop window lettering</option>\n                <option>Paper bags</option>\n              </select>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-note\">Note for the client</label>\n              <textarea class=\"ds-form__textarea\" id=\"f-note\">Stock ordered on your behalf, at cost.</textarea>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Add it to the next invoice</label>\n            </div>\n            <div class=\"ds-form__actions\">\n              <button class=\"ds-button\" type=\"button\">Add this receipt</button>\n              <span>or <a class=\"ds-link\" href=\"#client\">cancel</a></span>\n            </div>\n          </form>\n        </section>\n      </div>\n\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">This client</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Open invoices</a><span class=\"ds-sidebar__count\">2</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#hours\">Unbilled hours</a><span class=\"ds-sidebar__count\">0</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Receipts</a><span class=\"ds-sidebar__count\">11</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#client\">Address and terms</a></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Latest receipts</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Ink, two tins</a><span class=\"ds-sidebar__count\">62.00</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Courier to the shop</a><span class=\"ds-sidebar__count\">18.40</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#receipt\">Gold leaf, one book</a><span class=\"ds-sidebar__count\">37.50</span></li>\n          </ul>\n        </section>\n\n        <section class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to know</h2>\n          <p class=\"ds-sidebar__text\">This client pays within 21 days on average. Reminders go out after 30.</p>\n          <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#client\">Change the terms</a></p>\n        </section>\n      </div>\n    </div>\n\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <ul class=\"ds-footer__links\">\n      <li class=\"ds-footer__item is-first\"><a class=\"ds-footer__link\" href=\"#home\">About</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#tour\">Help</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Notebook</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#signup\">Plans</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#tour\">Privacy</a></li>\n    </ul>\n    <p class=\"ds-footer__legal\">Your figures on chronoskin are yours; take them with you whenever you like.</p>\n  </div>\n</footer>\n\n</body>\n</html>",
    "style.json": "{\n  \"id\": \"v1.web-2-0-gloss.portal.s02.p04.t11.u04\",\n  \"library\": \"2026.10.09-1346\",\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-24b4\",\n  \"short\": \"v1-w2-24b4\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #bbccd9;\n  --color-canvas: #edf2f6;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f8f8f8;\n  --color-surface-strong: #cadcea;\n  --color-bar: #133855;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #cadcea;\n  --color-bar-alt-text: #133855;\n  --color-inverse: #444444;\n  --color-inverse-text: #ffffff;\n  --color-text: #444444;\n  --color-text-muted: #888888;\n  --color-heading: #000000;\n  --color-heading-alt: #133855;\n  --color-link: #336699;\n  --color-link-quiet: #666666;\n  --color-link-visited: #5c8ab3;\n  --color-link-hover: #4183c4;\n  --color-link-active: #000000;\n  --color-border: #c6ccd3;\n  --color-border-strong: #b4b4b4;\n  --color-border-muted: #ebeef1;\n  --color-accent: #f0a030;\n  --color-accent-text: #000000;\n  --color-accent-alt: #9c4a1c;\n  --color-fill-1: #ffffff;\n  --color-fill-2: #cadcea;\n  --color-fill-3: #f0f0f8;\n  --color-fill-4: #e0e0e0;\n  --color-button: #000000;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #f0f0f0;\n  --color-button-secondary-text: #444444;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #b4b4b4;\n  --color-disabled: #f0f0f0;\n  --color-disabled-text: #888888;\n  --color-danger: #c01500;\n  --color-danger-surface: #fee5f2;\n  --color-success: #3b7a1f;\n  --color-warning: #ffe28a;\n  --color-notice: #fffbe4;\n  --color-notice-text: #444444;\n  --color-focus: #4183c4;\n  --color-shadow: #000000;\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: 3px;\n  --border-style: solid;\n  --radius-control: 5px;\n  --radius-panel: 5px;\n  --radius-pill: 10px;\n  --radius-page: 8px;\n  --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n  --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 25%, transparent);\n  --shadow-control-hover: 0 1px 3px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 0 2px 8px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n  --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, var(--color-bar) 100%);\n  --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 75%) 0, var(--color-bar-alt) 100%);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, var(--color-accent) 100%);\n  --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 45%) 0, color-mix(in srgb, var(--color-button), white 22%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), white 8%) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 55%) 0, color-mix(in srgb, var(--color-button), white 32%) 50%, color-mix(in srgb, var(--color-button), white 12%) 50%, color-mix(in srgb, var(--color-button), white 18%) 100%);\n  --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 80%) 0, var(--color-button-secondary) 100%);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
