{
  "id": "v1-w2-82bb",
  "long_id": "v1.web-2-0-gloss.shop.s08.p02.t11.u11",
  "name": "Web 2.0 gloss shop",
  "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": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": false
  },
  "summary": "A small community shop in the Web 2.0 look: the brand large on a candy-striped page with tabs hanging from the top edge of the window, a striped bar of departments, then a white band with a column of rounded link boxes on the left and, beside it, the item of the week with a price star, a strip of figures and a grid of product tiles. It was common from about 2005 to 2009 on shops for printed shirts, stickers, gadget skins and other things designed and voted on by members. Corners are big (8 to 18px), boxes cast a hard offset shadow like a sticker, buttons are jelly pills of colour with a darker lower lip, and headlines are set in a rounded sans.",
  "url": "https://chrono.skin/s/v1-w2-82bb",
  "preview_url": "https://chrono.skin/s/v1-w2-82bb/specimen.html",
  "files": {
    "STYLE.md": "# Web 2.0 gloss shop\n\n## Summary\n\nA small community shop in the Web 2.0 look: the brand large on a candy-striped page with tabs hanging from the top edge of the window, a striped bar of departments, then a white band with a column of rounded link boxes on the left and, beside it, the item of the week with a price star, a strip of figures and a grid of product tiles. It was common from about 2005 to 2009 on shops for printed shirts, stickers, gadget skins and other things designed and voted on by members. Corners are big (8 to 18px), boxes cast a hard offset shadow like a sticker, buttons are jelly pills of colour with a darker lower lip, and headlines are set in a rounded sans.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px viewport. It does not stretch.\n- Three zones stacked across the viewport. The header sits on the patterned page (`--fill-page`): `.ds-nav__head`, a `--size-page` box at least `--size-head` (88px) tall with the brand and a tagline at the left and, at the right, the tabs hanging from the top edge over the basket pill. `.ds-nav__bar` (`--size-bar` 38px, `--fill-bar`) closes the header with the departments and the search field. Then `.ds-page__band`, a band in `--color-canvas` across the viewport that holds `.ds-page__wrap` (960px) with all content. Then the footer, on the patterned page again, ending in an inverted strip.\n- Text on the bare page (tagline, footer) uses `--color-text` and `--color-heading` only; links there are underlined in the text colour.\n- Every page has two columns in `.ds-page__columns`: `.ds-page__aside` of `--size-aside` (190px) on the left and `.ds-page__main` (746px), `--size-gutter` (24px) apart. The aside is always on the left and holds `.ds-sidebar` boxes and at most one `.ds-panel`.\n- Home page: the columns start at the top of the band. Main column, top to bottom: the hero (picture with the price star at the left, claim and buttons at the right), the `.ds-stats` strip, the `.ds-tabs`, the `.ds-grid` of tiles four across in two rows, the pagination centred under it.\n- Spacing scale: `--space-1` 2px (inside badges, between a title and its meta line), `--space-2` 5px (gaps between tabs, sidebar row padding), `--space-3` 8px (table cell and tile padding, gaps between buttons, notice padding), `--space-4` 12px (gap between tiles, panel padding, control side padding, under the tabs), `--space-5` 18px (hero padding, gap between stacked blocks and between aside boxes, band padding), `--space-6` 26px (gap above a headed section, between picture and text, under the content; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 26px tall, large buttons `--size-control-large` 38px, the search field `--size-search` 170px, a tile picture `--size-art` 112px tall, the hero picture `--size-hero-art` 240px and the product picture `--size-product-art` 300px wide, the price star `--size-burst` 84px, a review score `--size-score` 40px, the form's label column `--size-label` 130px and fields `--size-field` 330px, the dialog `--size-dialog` 400px.\n- Views: the specimen is one example site of six screens, each a `.ds-view` section inside `.ds-page__wrap`, with the header and the footer written once around them. `home` is the shop front (link boxes and a panel in the aside; hero, figures, tabs, tiles, pagination). `skin` is one product, where every tile leads (picture and buy box, figures, buyers' reviews as a list; more by the same artist in the aside). `basket` is the basket (the table with stock badges and their key, the toolbar, the confirming dialog). `checkout` is the till (notices, the address form; the order summary in the aside). `orders` is the buyer's orders (the empty state, then saved skins as tiles). `help` is a help article (prose and onward links beside the help menu). Links are plain `href=\"#name\"`. The hanging tab of the showing view is marked by a `.ds-page:has(#name:target)` rule, Shop also when no view is named and for `skin`, Basket also for `checkout`.\n- Inner pages drop the hero, the figures strip above the tabs and the tabs. In `.ds-page__wrap`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` across the full 960px in the hero's place (title and one line on the left, one button on the right, a rule under it), then `.ds-page__columns` with the same two columns. The main column starts with the notices above a form, the table (its key and its `.ds-buttons--bar` toolbar under it), the product block or the empty state; further blocks follow as `.ds-section` blocks 26px apart under a `.ds-section__label` (`.ds-section--tight`, 18px, when they belong to the block above); an open dialog is such a section, after the table that opened it. Blocks that would leave the aside far shorter go in the main column only; the aside gets enough boxes about the same subject to end near it.\n- Tiles, link boxes, panels and the hero are cards with the hard shadow; reviews and table rows are rows divided by 1px rules.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- A serif set: `--font-body` and `--font-heading` are Georgia, \"Times New Roman\", serif. `--font-ui` is \"Lucida Grande\", Arial, Helvetica, sans-serif for buttons, tabs, fields and table text. `--font-mono` (\"Courier New\") for inline code only.\n- `--text-base` 13px at `--line-body` 1.3; `--text-small` 11px for meta lines and the footer; `--text-ui` 11px bold (`--weight-ui` 700).\n- Headings are Georgia in regular weight (`--weight-heading` and `--weight-display` 400): `--text-display` 22px (the name in the header, hero title), `--text-h1` 20px, `--text-h2` 17px, `--text-h3` 14px, at `--line-heading` 1.2. `--text-large` 15px for the hero lead and the large button. Emphasis inside text is `--weight-bold` 700.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are none, `--link-decoration-hover` underline.\n\n- Matte, not glossy: `--fill-bar-alt`, `--fill-inverse`, `--fill-accent`, `--fill-panel` and `--fill-button-secondary` are flat colours. Only `--fill-bar` (12% lighter at the top) and `--fill-button` (18% lighter at the top) carry a soft sheen with no hard break.\n- Softly rounded boxes, nearly square controls: `--radius-panel` and `--radius-page` 6px, `--radius-control` and `--radius-pill` 3px.\n- No shadows of any kind: `--shadow-panel`, `--shadow-control*`, `--shadow-dialog` and `--shadow-text` are none.\n- `--border-width` and `--border-width-strong` are 1px solid. `--focus-ring` is a 1px dotted outline in `--color-focus`. `--transition` none.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, base font and colour. `.ds-page__band` is the white band, `.ds-page__wrap` (960px) the content box in it, `.ds-page__columns` the row of `.ds-page__aside` and `.ds-page__main`. `.ds-section` with a `.ds-section__label` separates blocks in the main column (`.ds-section--tight` for 18px). `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first).\n- `.ds-nav`: the header. `.ds-nav__head` holds the `.ds-brand`, `.ds-nav__tagline` and `.ds-nav__right` with `.ds-nav__tabs` (each a hanging `.ds-nav__tab`; the current one `is-current` is in the button colour and hangs lower) over `.ds-nav__basket`, the accent pill with the basket's count and sum. `.ds-nav__bar` with `.ds-nav__inner` holds `.ds-nav__cats` of `.ds-nav__cat` department links (hovered or `is-current`: a darker pill) and `.ds-nav__search` (`.ds-nav__input` and a secondary button).\n- `.ds-brand`: the site's mark and name at the left of the header, linking home; one per page. `.ds-brand__mark` is a tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark in `--color-button-text`, 1.3 times the size of the name. `.ds-brand__name` is the name in `--font-heading` at `--text-display`, in `--color-heading` because it sits on the page. 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 item of the week, at the top of the home page's main column: `.ds-hero__art` (a tinted picture box, with a `.ds-burst` on its corner) and `.ds-hero__main` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (two large buttons) and `.ds-hero__note`. One per site.\n- `.ds-burst`: the price star, a sixteen-pointed shape in the accent gloss, tilted, with a `.ds-burst__big` figure between two `.ds-burst__small` words. At most one per picture, for a price or a rank, never for decoration alone.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` and one `.ds-page-header__text` line, `.ds-page-header__actions` on the right, a rule under it. Never together with a hero.\n- `.ds-stat`: one figure; three sit in `.ds-stats`, a tinted rounded strip, centred and divided by hairlines (first one `is-first`): `.ds-stat__number` over `.ds-stat__label`.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, code, strong, mark and links are styled. For help pages.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` for titles and rows, `.ds-link--quiet` for minor tools. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action, an orange jelly with bold white text. Variants `.ds-button--secondary` (pale; the usual button and the Add button of a tile), `.ds-button--danger` (red; only for what cannot be undone), `.ds-button--large` (hero and buy box). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` the toolbar under a table, where `.ds-buttons__gap` pushes the destructive button to the right end.\n- `.ds-form`: a ruled sheet in one rounded frame. Each `.ds-form__row` has a `.ds-form__label` at the left, a `.ds-form__field` of fixed width with a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` (and a `.ds-form__error` under it), and an optional `.ds-form__hint` to the right of the field; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` is the tinted strip at the foot, aligned with the fields.\n- `.ds-table`: one rounded frame, a glossy `.ds-table__head` row, `.ds-table__row` (`is-alt`, and `is-total` for the sum) of `.ds-table__cell` with hairlines between; `is-numeric` right-aligns and bolds; `.ds-table__meta` is a small second line in a cell.\n- `.ds-list`: reviews or other dated remarks. Each `.ds-list__item` (first: `is-first`) has a round `.ds-list__score` in the accent gloss and a `.ds-list__body` with `.ds-list__title`, `.ds-list__meta` and `.ds-list__text`.\n- `.ds-panel`: a box that explains or invites, in the aside: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and `.ds-panel__actions` (`.ds-panel__more` for a small link).\n- `.ds-grid`: product tiles, four across. Each `.ds-grid__cell` (`--1` to `--4` for the picture's fill) has `.ds-grid__art` (the drawing, with an optional `.ds-grid__flag` badge in its corner) and `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__foot` (a `.ds-price` and a secondary button). `.ds-price--large` is the price on a product page.\n- `.ds-product`: the product block: `.ds-product__art` (the large picture, with a `.ds-burst`) beside `.ds-product__buy` with the price, `.ds-product__text`, a button row and `.ds-product__note`.\n- `.ds-tabs`: rounded tops standing on a thick rule: `.ds-tabs__tab`, the current one `is-current` (bar gloss, a little taller), `.ds-tabs__count`, and `.ds-tabs__more` for a line of words at the right end. For two to four views of the grid under it.\n- `.ds-badge`: small bold pill in the accent gloss. `.ds-badge--new` (orange flag) and the states `.ds-badge--success` (in stock), `.ds-badge--warning` (nearly gone) and `.ds-badge--danger` (sold out). `.ds-badges` is a key of several with words.\n- `.ds-sidebar`: a rounded link box in the aside: a tinted `.ds-sidebar__title` strip and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (first: `is-first`, current: `is-current`), each a link with an optional right-aligned `.ds-sidebar__count`.\n- `.ds-notice`: one message with a thick accent stripe at the left and a bold `.ds-notice__title`. Variant `.ds-notice--error`.\n- `.ds-pagination`: centred small boxes: `.ds-pagination__link`, `is-current` (bar colour), `is-disabled`, `.ds-pagination__gap`.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` (a right guillemet) and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a box in a thick `--color-border-strong` frame with `--shadow-dialog` and no title bar: `.ds-dialog__title` (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons at the left. It sits on `.ds-dialog__backdrop`, a dimmed rounded field.\n- `.ds-empty`: a tinted rounded box with a round `.ds-empty__art` drawing, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: on the patterned page: `.ds-footer__inner` with `.ds-footer__col` columns (`--wide` for the first), each a `.ds-footer__title` over `.ds-footer__text` or a `.ds-footer__list` of underlined `.ds-footer__link`; then `.ds-footer__legal`, the inverted strip holding a centred `.ds-footer__legal-text` line.\n- `.ds-menu`: a drop-down under a department of the bar, for its sizes and lists. The `li` carries `.ds-menu`, its link gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last row. A white hairline box with rounded lower corners that hangs just under the bar 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, each with a `.ds-carousel__title`, a `.ds-carousel__text` and a `.ds-carousel__meta` line, and `.ds-carousel__dots` under it with one `.ds-carousel__dot` per slide, the showing one `is-current` (glossy button orange). A rounded panel-like box; in the left column it holds what buyers said. Three to five slides, each complete on its own; prices and the buy button never go into one.\n- `.ds-progress`: how far a basket is from a threshold: a `.ds-progress__label` line (the sum in `.ds-progress__name`, what is missing on the right) over `progress.ds-progress__bar`, a pill-shaped track filled with the glossy button fill. Variants of the bar: `.ds-progress__bar--success` (reached), `--warning`, `--danger`. In a `.ds-panel` above its text.\n- `.ds-avatar`: the picture of a buyer or a member who draws: a 24px rounded tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4` (the four block fills). It opens a `.ds-carousel__meta` line or a row of names; `.ds-avatar--large` doubles it for a member's page. Decorative: the name always follows it.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a pale glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For the three or four questions buyers ask most, in the left column of the help page.\n\n## Never\n\n- `row-gap <= 26px`: rows touch, divided by a rule.\n- `block-gap <= 26px`: sections are at most 26px apart.\n- `content-width <= 960px`: all text stays inside the 960px column.\n- `palette-colours <= 32`: one blue family, lime, yellow, orange, olive, dark red and warm greys; no further hues.\n- `font-size <= 22px`: the name in the header and the hero title are the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Georgia, Lucida Grande and a monospace for inline code.\n- `line-height <= 1.3`: body text is 13px on 17px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 6px`: corners are 3 or 6px.\n- `border-width <= 1px`: every border and rule is a 1px hairline.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 10%`: only the bar, the table head and the primary button carry a sheen.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Something for sale is a `.ds-grid__cell` tile; a list of places to go is a `.ds-sidebar` box in the aside and a short invitation a `.ds-panel`; anything with prices in columns is a `.ds-table`. A new bar or tab takes `--fill-bar` with `--color-bar-text`, a new highlight `--fill-accent` with `--color-accent-text`, a new tinted picture one `--color-fill-*`. Keep the aside on the left of every page, keep text off the bare page except in the header and footer, and make any extra shade with `color-mix()` over existing tokens rather than adding a colour.\n",
    "components.css": ":root {\n  --size-page: 960px;\n  --size-aside: 190px;\n  --size-gutter: 24px;\n  --size-head: 88px;\n  --size-bar: 38px;\n  --size-control: 26px;\n  --size-control-large: 38px;\n  --size-search: 170px;\n  --size-art: 112px;\n  --size-hero-art: 240px;\n  --size-product-art: 300px;\n  --size-burst: 84px;\n  --size-score: 40px;\n  --size-label: 130px;\n  --size-field: 330px;\n  --size-textarea: 70px;\n  --size-dialog: 400px;\n  --space-1: 2px;\n  --space-2: 5px;\n  --space-3: 8px;\n  --space-4: 12px;\n  --space-5: 18px;\n  --space-6: 26px;\n  --size-drop: 180px;\n  --size-meter: 12px;\n  --size-avatar: 24px;\n}\n\n/* shell: a patterned page; the header and footer sit on it, the content on a white band between */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  background-color: var(--color-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__band {\n  min-width: var(--size-page);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-canvas);\n}\n.ds-page__wrap {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page__columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--size-gutter);\n}\n.ds-page__aside {\n  flex: 0 0 var(--size-aside);\n  width: var(--size-aside);\n}\n.ds-page__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-5); }\n.ds-section__label {\n  margin: 0 0 var(--space-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/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: brand on the page, tabs hanging from the top edge, then the bar of departments */\n.ds-nav { margin: 0; }\n.ds-nav__head {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-5);\n  width: var(--size-page);\n  min-height: var(--size-head);\n  margin: 0 auto;\n}\n.ds-brand {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  align-self: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-display) * 1.3);\n  height: calc(var(--text-display) * 1.3);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 72%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 70%;\n  height: 70%;\n}\n.ds-brand__name {\n  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  text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n  flex: 1 1 0;\n  align-self: center;\n  min-width: 0;\n  margin: 0;\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-nav__right {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: 0 0 var(--space-3);\n}\n.ds-nav__tabs {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4) var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-top: 0;\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--fill-button-secondary);\n  background-color: var(--color-button-secondary);\n  color: var(--color-button-secondary-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: none;\n  text-transform: var(--ui-transform);\n}\n.ds-nav__tab:hover,\n.ds-nav__tab.is-hover { padding-top: var(--space-3); }\n.ds-nav__tab.is-current {\n  padding-top: var(--space-4);\n  border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow));\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#skin:target) .ds-nav__tab[href=\"#home\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#basket:target) .ds-nav__tab[href=\"#basket\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#checkout:target) .ds-nav__tab[href=\"#basket\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#orders:target) .ds-nav__tab[href=\"#orders\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-page:has(#help:target) .ds-nav__tab[href=\"#help\"] { padding-top: var(--space-4); border-color: color-mix(in srgb, var(--color-button) 72%, var(--color-shadow)); background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-nav__basket {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 70%, var(--color-shadow));\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  background-color: var(--color-accent);\n  color: var(--color-accent-text);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-nav__bar {\n  min-width: var(--size-page);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  background: var(--fill-bar);\n  background-color: var(--color-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  width: var(--size-page);\n  height: var(--size-bar);\n  margin: 0 auto;\n}\n.ds-nav__cats {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0 0 0 calc(0px - var(--space-4));\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__cat {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  border-radius: var(--radius-pill);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n}\n.ds-nav__cat:hover,\n.ds-nav__cat.is-hover,\n.ds-nav__cat.is-current { background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow)); outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent); outline-offset: calc(0px - var(--border-width)); }\n.ds-nav__search {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 0 auto;\n  text-shadow: none;\n}\n.ds-nav__input {\n  width: var(--size-search);\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  border-radius: var(--radius-pill);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus { outline: var(--focus-ring); }\n\n/* hero: the skin of the week; a picture with a price star, the claim and the button */\n.ds-hero {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  margin: 0 0 var(--space-5);\n  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  background: var(--color-surface-alt);\n  box-shadow: var(--shadow-panel);\n}\n.ds-hero__art,\n.ds-product__art {\n  position: relative;\n  display: flex;\n  flex: 0 0 var(--size-hero-art);\n  align-items: center;\n  justify-content: center;\n  width: var(--size-hero-art);\n  height: calc(var(--size-hero-art) * 0.72);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-fill-2);\n  color: color-mix(in srgb, var(--color-text) 50%, transparent);\n}\n.ds-hero__art svg,\n.ds-product__art svg {\n  display: block;\n  height: 78%;\n}\n.ds-product__art {\n  flex-basis: var(--size-product-art);\n  width: var(--size-product-art);\n  height: calc(var(--size-product-art) * 0.8);\n  background: var(--color-fill-3);\n}\n.ds-hero__art .ds-burst,\n.ds-product__art .ds-burst {\n  position: absolute;\n  top: calc(0px - var(--space-4));\n  right: calc(0px - var(--space-5));\n}\n.ds-hero__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-hero__kicker {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-hero__action {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-hero__note {\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* burst: the price star, cut from the accent colour */\n.ds-burst {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-burst);\n  height: var(--size-burst);\n  background: var(--fill-accent);\n  background-color: var(--color-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-heading);\n  line-height: 1;\n  text-align: center;\n  transform: rotate(-12deg);\n  clip-path: polygon(50.0% 0.0%, 58.7% 12.0%, 71.7% 5.0%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89.0% 50.0%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95.0%, 58.7% 88.0%, 50.0% 100.0%, 41.3% 88.0%, 28.3% 95.0%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11.0% 50.0%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5.0%, 41.3% 12.0%);\n}\n.ds-burst__big {\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n}\n.ds-burst__small {\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n\n/* page header: head of an inner page */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: var(--space-3) 0 var(--space-5);\n  padding: 0 0 var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-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-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* stats: one tinted strip of centred figures */\n.ds-stats {\n  display: flex;\n  margin: 0 0 var(--space-5);\n  padding: var(--space-3) 0;\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-strong);\n  list-style: none;\n}\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) color-mix(in srgb, var(--color-text) 18%, transparent);\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-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n\n/* grid: product tiles, four across */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-grid__art {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-art);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface-alt);\n  color: color-mix(in srgb, var(--color-text) 50%, transparent);\n}\n.ds-grid__art svg {\n  display: block;\n  height: 72%;\n}\n.ds-grid__cell--1 .ds-grid__art { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__art { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__art { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__art { background: var(--color-fill-4); }\n.ds-grid__flag {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n}\n.ds-grid__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-grid__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: auto 0 0;\n}\n.ds-price {\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  white-space: nowrap;\n}\n.ds-price--large { font-size: var(--text-display); line-height: var(--line-display); }\n\n/* tabs: rounded tops standing on a thick rule in the bar colour */\n.ds-tabs {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-1);\n  margin: 0 0 var(--space-4);\n  padding: 0 var(--space-3);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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) var(--color-border);\n  border-bottom: 0;\n  border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n  background: var(--color-surface-strong);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-heading); }\n.ds-tabs__tab.is-current {\n  padding-top: var(--space-3);\n  border-color: var(--color-bar);\n  background: var(--fill-bar);\n  background-color: var(--color-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n.ds-tabs__more {\n  align-self: center;\n  margin-left: auto;\n  color: var(--color-text-muted);\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 h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding: 0 0 0 var(--space-6);\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-2);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\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-5);\n  margin: 0;\n}\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title { text-decoration: var(--link-decoration-quiet); }\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link); }\n\n/* buttons: jelly */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n}\n.ds-buttons--bar { margin: var(--space-4) 0 0; }\n.ds-buttons .ds-buttons__gap { margin-left: auto; }\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) 72%, 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-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--color-button);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n  height: var(--size-control-large);\n  padding: 0 var(--space-6);\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  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-link-quiet);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n  border-color: color-mix(in srgb, var(--color-danger) 72%, var(--color-shadow));\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 38%) 0, var(--color-danger) 65%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 50%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 12%) 65%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n\n/* form: a ruled sheet; label on the left, field of a fixed width beside it */\n.ds-form {\n  margin: 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n}\n.ds-form__row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n  flex: 0 0 var(--size-label);\n  padding-top: var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__field {\n  flex: 0 0 var(--size-field);\n  width: var(--size-field);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  background-color: var(--color-input);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; }\n.ds-form__textarea {\n  height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\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  flex: 1 1 0;\n  min-width: 0;\n  margin: 0;\n  padding-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding-top: var(--space-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  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--size-label) + var(--space-4) + var(--space-5));\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n\n/* table: glossy head, hairline rows, a total row */\n.ds-table {\n  width: 100%;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n}\n.ds-table__head {\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar);\n  background-color: var(--color-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__head:first-child { border-top-left-radius: calc(var(--radius-panel) - var(--border-width)); }\n.ds-table__head:last-child { border-top-right-radius: calc(var(--radius-panel) - var(--border-width)); }\n.ds-table__cell {\n  padding: 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  vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__row.is-total .ds-table__cell {\n  border-top-color: var(--color-border);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-table__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* list: what buyers say; a round score, a title, who and when, the words */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { border-top: 0; padding-top: 0; }\n.ds-list__score {\n  display: flex;\n  flex: 0 0 var(--size-score);\n  align-items: center;\n  justify-content: center;\n  width: var(--size-score);\n  height: var(--size-score);\n  border-radius: 50%;\n  background: var(--fill-accent);\n  background-color: var(--color-accent);\n  color: var(--color-accent-text);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  font-family: var(--font-heading);\n  padding-bottom: calc(var(--figure-shift) * 2);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-list__meta {\n  margin: var(--space-1) 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__text { margin: 0; }\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  background-color: var(--color-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--new {\n  background: var(--color-accent-alt);\n  color: var(--color-button-text);\n}\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-button-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-accent-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-5);\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel */\n.ds-panel {\n  margin: 0 0 var(--space-5);\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  background-color: var(--color-surface);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin: 0;\n}\n.ds-panel__more { font-size: var(--text-small); }\n\n/* sidebar block: a rounded box with a tinted title strip and ruled rows */\n.ds-sidebar {\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-sidebar__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  background-color: var(--color-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-1) var(--space-4) var(--space-2);\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__count {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  white-space: nowrap;\n}\n\n/* product: picture and buy box side by side */\n.ds-product {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-6);\n  margin: 0 0 var(--space-5);\n}\n.ds-product__buy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-product__text { margin: var(--space-3) 0 var(--space-4); }\n.ds-product__note {\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* notice: a stripe down the left edge */\n.ds-notice {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-accent);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-control);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\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 */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: var(--space-5) 0 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--color-surface);\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link); }\n.ds-pagination__link.is-current {\n  border-color: var(--color-bar);\n  background: var(--color-bar);\n  color: var(--color-bar-text);\n}\n.ds-pagination__link.is-disabled {\n  border-color: var(--color-border-muted);\n  color: var(--color-disabled-text);\n  font-weight: var(--weight-body);\n}\n.ds-pagination__gap { 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-heading);\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: a thick-framed box, no title bar */\n.ds-dialog__backdrop {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-6) var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-overlay);\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  padding: var(--space-5);\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-4);\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}\n.ds-dialog__close {\n  color: var(--color-link-quiet);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-decoration: underline;\n}\n.ds-dialog__body { margin: 0 0 var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  gap: var(--space-3);\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  border-radius: var(--radius-page);\n  background: var(--color-surface-alt);\n  text-align: center;\n}\n.ds-empty__art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-score) * 1.6);\n  height: calc(var(--size-score) * 1.6);\n  margin: 0 auto var(--space-4);\n  border-radius: 50%;\n  background: var(--color-fill-2);\n  color: color-mix(in srgb, var(--color-text) 55%, transparent);\n}\n.ds-empty__art svg {\n  display: block;\n  width: 56%;\n  height: 56%;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-4);\n  color: var(--color-text-muted);\n}\n\n/* footer: link columns on the patterned page, then an inverted strip */\n.ds-footer { margin: 0; }\n.ds-footer__inner {\n  display: flex;\n  gap: var(--size-gutter);\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0;\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-footer__col {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-footer__col--wide { flex-grow: 2; }\n.ds-footer__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-footer__text { margin: 0; }\n.ds-footer__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-text);\n  text-decoration: underline;\n}\n.ds-footer__legal {\n  min-width: var(--size-page);\n  margin: 0;\n  padding: var(--space-4) 0;\n  background: var(--fill-inverse);\n  background-color: var(--color-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-footer__legal-text {\n  width: var(--size-page);\n  margin: 0 auto;\n  font-size: var(--text-small);\n  text-align: center;\n}\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n  display: inline-block;\n  width: calc(var(--text-small) * 0.6);\n  height: calc(var(--text-small) * 0.36);\n  background: currentColor;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n  margin-left: var(--space-1);\n  font-size: var(--text-small);\n  vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  width: var(--size-drop);\n  margin: 0;\n  padding: var(--space-1) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n  text-align: left;\n  text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* accordion: questions that open and close, one glossy strip each */\n.ds-accordion {\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  overflow: hidden;\n}\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__item.is-first { border-top: 0; }\n.ds-accordion__title {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker { display: none; }\n.ds-accordion__title::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-ui) * 0.7);\n  height: calc(var(--text-ui) * 0.7);\n  margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.7));\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-ui) * 0.12)) 100% no-repeat;\n  color: var(--color-link-quiet);\n}\n.ds-accordion__item[open] > .ds-accordion__title::before { background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat; }\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover { color: var(--color-link); }\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus { outline: var(--focus-ring); }\n.ds-accordion__body {\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n}\n\n/* 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__cats .ds-menu__list {\n  left: var(--space-2);\n  margin-top: var(--space-2);\n}\n.ds-nav__cats .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-page__aside .ds-carousel { margin: 0 0 var(--space-5); }\n.ds-page__aside .ds-carousel__slide { padding: var(--space-4); }\n.ds-carousel__meta {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-panel .ds-progress { margin-bottom: var(--space-3); }\n.ds-page__aside .ds-accordion { margin-bottom: var(--space-5); }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Web 2.0 gloss shop 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\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__head\">\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    <p class=\"ds-nav__tagline\">Skins for the things in your pocket, drawn by the people who carry them.</p>\n    <div class=\"ds-nav__right\">\n      <ul class=\"ds-nav__tabs\">\n        <li><a class=\"ds-nav__tab\" href=\"#home\">Shop</a></li>\n        <li><a class=\"ds-nav__tab\" href=\"#basket\">Basket</a></li>\n        <li><a class=\"ds-nav__tab\" href=\"#orders\">Your orders</a></li>\n        <li><a class=\"ds-nav__tab\" href=\"#help\">Help</a></li>\n      </ul>\n      <a class=\"ds-nav__basket\" href=\"#basket\">3 things in your basket, 27.00</a>\n    </div>\n  </div>\n  <div class=\"ds-nav__bar\">\n    <div class=\"ds-nav__inner\">\n      <ul class=\"ds-nav__cats\">\n        <li class=\"ds-menu\" data-component=\"menu\"><a class=\"ds-nav__cat\" href=\"#home\">Music players <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=\"#home\">For 30 GB players</a></li>\n            <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#home\">For 2 GB players</a></li>\n            <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#home\">New this week</a></li>\n            <li class=\"ds-menu__item is-ruled\"><a class=\"ds-menu__link\" href=\"#help\">Which size fits</a></li>\n          </ul>\n        </li>\n        <li><a class=\"ds-nav__cat\" href=\"#home\">Phones</a></li>\n        <li><a class=\"ds-nav__cat\" href=\"#home\">Laptops</a></li>\n        <li><a class=\"ds-nav__cat\" href=\"#home\">Handhelds</a></li>\n        <li><a class=\"ds-nav__cat\" href=\"#home\">Gift cards</a></li>\n      </ul>\n      <form class=\"ds-nav__search\" action=\"#\">\n        <input class=\"ds-nav__input\" type=\"text\" placeholder=\"Find a skin\" aria-label=\"Find a skin\">\n        <button class=\"ds-button ds-button--secondary\" type=\"button\">Find</button>\n      </form>\n    </div>\n  </div>\n</header>\n\n<div class=\"ds-page__band\">\n<div class=\"ds-page__wrap\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Shop by gadget</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link ds-link--title\" href=\"#home\">Music players</a><span class=\"ds-sidebar__count\">214</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Phones</a><span class=\"ds-sidebar__count\">386</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Laptops</a><span class=\"ds-sidebar__count\">402</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Handhelds</a><span class=\"ds-sidebar__count\">171</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Gift cards</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Shop by mood</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link ds-link--title\" href=\"#home\">Loud</a><span class=\"ds-sidebar__count\">118</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Quiet</a><span class=\"ds-sidebar__count\">204</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Stripes and dots</a><span class=\"ds-sidebar__count\">96</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Animals</a><span class=\"ds-sidebar__count\">143</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Maps and type</a><span class=\"ds-sidebar__count\">77</span></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Free post over 30</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Three skins or more travel free, anywhere we post to. Printed and sent within three days.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#basket\">See your basket</a><a class=\"ds-link ds-panel__more\" href=\"#help\">Post and returns</a></p>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\">\n          <ul class=\"ds-carousel__track\">\n            <li class=\"ds-carousel__slide\">\n              <h2 class=\"ds-carousel__title\">Buyers say</h2>\n              <p class=\"ds-carousel__text\">Went on straight at the first try. No bubbles, and the wheel still turns as it should.</p>\n              <p class=\"ds-carousel__meta\"><span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"></span>Halvard, on a 30 GB player</p>\n            </li>\n            <li class=\"ds-carousel__slide\">\n              <h2 class=\"ds-carousel__title\">Buyers say</h2>\n              <p class=\"ds-carousel__text\">Lovely, a little tight at the corners. A week on, it has not lifted.</p>\n              <p class=\"ds-carousel__meta\"><span class=\"ds-avatar ds-avatar--2\"></span>Imke, on a 2 GB player</p>\n            </li>\n            <li class=\"ds-carousel__slide\">\n              <h2 class=\"ds-carousel__title\">Buyers say</h2>\n              <p class=\"ds-carousel__text\">Bought one for each of us. Ordered Monday, here Thursday.</p>\n              <p class=\"ds-carousel__meta\"><span class=\"ds-avatar ds-avatar--3\"></span>Tomas, on two phones</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      <div class=\"ds-page__main\">\n        <div class=\"ds-hero\" data-component=\"hero\">\n          <div class=\"ds-hero__art\"><svg viewBox=\"0 0 48 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"42\" height=\"66\" rx=\"7\"/><rect x=\"10\" y=\"10\" width=\"28\" height=\"20\" rx=\"2\"/><circle cx=\"24\" cy=\"49\" r=\"11\"/><circle cx=\"24\" cy=\"49\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"/></svg><span class=\"ds-burst\"><span class=\"ds-burst__small\">only</span><span class=\"ds-burst__big\">8.50</span><span class=\"ds-burst__small\">this week</span></span></div>\n          <div class=\"ds-hero__main\">\n            <p class=\"ds-hero__kicker\">Skin of the week, voted by 1,204 members</p>\n            <h1 class=\"ds-hero__title\">Tidepool</h1>\n            <p class=\"ds-hero__lead\">Rock pools in six inks, by Oda Lindqvist. It goes on in a minute and peels off clean.</p>\n            <p class=\"ds-hero__action\"><a class=\"ds-button ds-button--large\" href=\"#basket\">Add to basket</a><a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#skin\">Look closer</a></p>\n            <p class=\"ds-hero__note\">Fits four music players and two phones. Printed to order.</p>\n          </div>\n        </div>\n\n        <ul class=\"ds-stats\" data-component=\"stats\">\n          <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">1,173</span><span class=\"ds-stat__label\">skins in the shop</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">312</span><span class=\"ds-stat__label\">members who draw them</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">41</span><span class=\"ds-stat__label\">countries we post to</span></li>\n        </ul>\n\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">New this week</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#home\">Best sellers</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#home\">Last chance <span class=\"ds-tabs__count\">(9)</span></a></li>\n          <li class=\"ds-tabs__more\">Showing 8 of 46</li>\n        </ul>\n        <ul class=\"ds-grid\" data-component=\"grid\">\n          <li class=\"ds-grid__cell ds-grid__cell--1\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 48 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"42\" height=\"66\" rx=\"7\"/><rect x=\"10\" y=\"10\" width=\"28\" height=\"20\" rx=\"2\"/><circle cx=\"24\" cy=\"49\" r=\"11\"/><circle cx=\"24\" cy=\"49\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"/></svg><span class=\"ds-grid__flag ds-badge ds-badge--new\">new</span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Tidepool</a></h3>\n              <p class=\"ds-grid__text\">by Oda Lindqvist</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--2\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 44 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"38\" height=\"66\" rx=\"6\"/><rect x=\"9\" y=\"12\" width=\"26\" height=\"38\" rx=\"1.5\"/><circle cx=\"22\" cy=\"60\" r=\"3.5\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Night ferry</a></h3>\n              <p class=\"ds-grid__text\">by Kemal Arda</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">9.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--3\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"12\" y=\"4\" width=\"64\" height=\"42\" rx=\"4\"/><path d=\"M4 58h80l-7-12H11z\"/><path d=\"M30 26c6-9 12 9 18 0s8-5 10 0\"/></svg><span class=\"ds-grid__flag ds-badge ds-badge--new\">new</span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Allotment</a></h3>\n              <p class=\"ds-grid__text\">by Ruth Okafor</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">14.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--4\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"82\" height=\"42\" rx=\"12\"/><rect x=\"28\" y=\"10\" width=\"32\" height=\"28\" rx=\"2\"/><circle cx=\"15\" cy=\"24\" r=\"5\"/><circle cx=\"73\" cy=\"18\" r=\"3\"/><circle cx=\"73\" cy=\"30\" r=\"3\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Paper planes</a></h3>\n              <p class=\"ds-grid__text\">by Jonas Weld</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--3\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 44 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"38\" height=\"66\" rx=\"6\"/><rect x=\"9\" y=\"12\" width=\"26\" height=\"38\" rx=\"1.5\"/><circle cx=\"22\" cy=\"60\" r=\"3.5\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Moss</a></h3>\n              <p class=\"ds-grid__text\">by Oda Lindqvist</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">9.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--4\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"12\" y=\"4\" width=\"64\" height=\"42\" rx=\"4\"/><path d=\"M4 58h80l-7-12H11z\"/><path d=\"M30 26c6-9 12 9 18 0s8-5 10 0\"/></svg><span class=\"ds-grid__flag ds-badge\">last 3</span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Tram lines</a></h3>\n              <p class=\"ds-grid__text\">by Petra Sandoval</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">14.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--1\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"82\" height=\"42\" rx=\"12\"/><rect x=\"28\" y=\"10\" width=\"32\" height=\"28\" rx=\"2\"/><circle cx=\"15\" cy=\"24\" r=\"5\"/><circle cx=\"73\" cy=\"18\" r=\"3\"/><circle cx=\"73\" cy=\"30\" r=\"3\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Marmalade</a></h3>\n              <p class=\"ds-grid__text\">by Kemal Arda</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--2\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 48 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"42\" height=\"66\" rx=\"7\"/><rect x=\"10\" y=\"10\" width=\"28\" height=\"20\" rx=\"2\"/><circle cx=\"24\" cy=\"49\" r=\"11\"/><circle cx=\"24\" cy=\"49\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"/></svg><span class=\"ds-grid__flag ds-badge ds-badge--new\">new</span></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Cloud atlas</a></h3>\n              <p class=\"ds-grid__text\">by Ruth Okafor</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n        </ul>\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#home\">Previous</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#home\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">3</a></li>\n          <li class=\"ds-pagination__gap\">...</li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">6</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">Next</a></li>\n        </ul>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"skin\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#home\">Music players</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Tidepool</li>\n    </ol>\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Tidepool</h1>\n        <p class=\"ds-page-header__text\">A skin for music players, drawn by Oda Lindqvist. In the shop since March.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Back to music players</a>\n      </div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">More by Oda</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Moss</a><span class=\"ds-sidebar__count\">9.00</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Low tide</a><span class=\"ds-sidebar__count\">8.50</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Lichen</a><span class=\"ds-sidebar__count\">14.00</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">All 11 skins</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Shop by gadget</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first is-current\"><a class=\"ds-link ds-link--title\" href=\"#home\">Music players</a><span class=\"ds-sidebar__count\">214</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Phones</a><span class=\"ds-sidebar__count\">386</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Laptops</a><span class=\"ds-sidebar__count\">402</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Handhelds</a><span class=\"ds-sidebar__count\">171</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Gift cards</a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Draw one yourself</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Oda began as a buyer. Send a drawing in, members vote each week and the winner is printed.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-link ds-panel__more\" href=\"#help\">Drawing for us</a></p>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-page__main\">\n        <div class=\"ds-product\">\n          <div class=\"ds-product__art\"><svg viewBox=\"0 0 48 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"42\" height=\"66\" rx=\"7\"/><rect x=\"10\" y=\"10\" width=\"28\" height=\"20\" rx=\"2\"/><circle cx=\"24\" cy=\"49\" r=\"11\"/><circle cx=\"24\" cy=\"49\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"/></svg><span class=\"ds-burst\"><span class=\"ds-burst__small\">voted</span><span class=\"ds-burst__big\">no. 1</span><span class=\"ds-burst__small\">this week</span></span></div>\n          <div class=\"ds-product__buy\">\n            <p class=\"ds-price ds-price--large\">8.50</p>\n            <p class=\"ds-product__text\">Rock pools in six inks on matt vinyl. Front, back and wheel. It goes on in a minute, slides until you press it down and peels off without a mark.</p>\n            <p class=\"ds-buttons\"><a class=\"ds-button ds-button--large\" href=\"#basket\">Add to basket</a><span class=\"ds-badge ds-badge--success\">printed to order</span></p>\n            <p class=\"ds-product__note\">Sent within three days. Free post when the basket passes 30.</p>\n          </div>\n        </div>\n        <ul class=\"ds-stats\">\n          <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">482</span><span class=\"ds-stat__label\">printed so far</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">4.6</span><span class=\"ds-stat__label\">out of 5, from 58 buyers</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">6</span><span class=\"ds-stat__label\">gadgets it fits</span></li>\n        </ul>\n        <section class=\"ds-section ds-section--tight\">\n          <h2 class=\"ds-section__label\">What buyers say</h2>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item is-first\">\n              <span class=\"ds-list__score\">5</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Went on straight at the first try</a></h3>\n                <p class=\"ds-list__meta\">Halvard, on a 30 GB player, 2 October</p>\n                <p class=\"ds-list__text\">The colours are softer than on screen, which I prefer. No bubbles, and the wheel still turns as it should.</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__score\">4</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Lovely, a little tight at the corners</a></h3>\n                <p class=\"ds-list__meta\">Imke, on a 2 GB player, 27 September</p>\n                <p class=\"ds-list__text\">It needed a warm thumb to sit flat round the corners. A week on, it has not lifted.</p>\n              </div>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__score\">5</span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Bought one for each of us</a></h3>\n                <p class=\"ds-list__meta\">Tomas, on two phones, 19 September</p>\n                <p class=\"ds-list__text\">Ordered Monday, here Thursday. The second skin came off a year-old phone and left nothing behind.</p>\n              </div>\n            </li>\n          </ul>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"basket\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Basket</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Your basket</h1>\n        <p class=\"ds-page-header__text\">Two skins and a card, printed and posted within three days.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Keep shopping</a>\n      </div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Nearly there</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress\" data-component=\"progress\">\n              <p class=\"ds-progress__label\"><span class=\"ds-progress__name\">23.50 of 30</span><span>6.50 to go</span></p>\n              <progress class=\"ds-progress__bar\" value=\"235\" max=\"300\">23.50 of 30</progress>\n            </div>\n            <p class=\"ds-panel__text\">Add 6.50 more and the post is free. A second skin for the phone would do it.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-link ds-panel__more\" href=\"#home\">Skins for phones</a></p>\n          </div>\n        </section>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Good to know</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link ds-link--title\" href=\"#help\">Fitting a skin</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Which size fits</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Post and returns</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Drawing for us</a></li>\n          </ul>\n        </nav>\n      </div>\n      <div class=\"ds-page__main\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\">Skin</th>\n              <th class=\"ds-table__head\">Stock</th>\n              <th class=\"ds-table__head is-numeric\">How many</th>\n              <th class=\"ds-table__head is-numeric\">Each</th>\n              <th class=\"ds-table__head is-numeric\">Sum</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Tidepool</a><span class=\"ds-table__meta\">for a 30 GB music player</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">printed to order</span></td><td class=\"ds-table__cell is-numeric\">1</td><td class=\"ds-table__cell is-numeric\">8.50</td><td class=\"ds-table__cell is-numeric\">8.50</td></tr>\n            <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Moss</a><span class=\"ds-table__meta\">for a slide phone</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">last 3</span></td><td class=\"ds-table__cell is-numeric\">1</td><td class=\"ds-table__cell is-numeric\">9.00</td><td class=\"ds-table__cell is-numeric\">9.00</td></tr>\n            <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Tram lines</a><span class=\"ds-table__meta\">for a 13 inch laptop</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">sold out</span></td><td class=\"ds-table__cell is-numeric\">0</td><td class=\"ds-table__cell is-numeric\">14.00</td><td class=\"ds-table__cell is-numeric\">0.00</td></tr>\n            <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#home\">Gift card</a><span class=\"ds-table__meta\">sent by mail to a friend</span></td><td class=\"ds-table__cell\"><span class=\"ds-badge\">always</span></td><td class=\"ds-table__cell is-numeric\">1</td><td class=\"ds-table__cell is-numeric\">6.00</td><td class=\"ds-table__cell is-numeric\">6.00</td></tr>\n            <tr class=\"ds-table__row\"><td class=\"ds-table__cell\">Post to Norway</td><td class=\"ds-table__cell\"></td><td class=\"ds-table__cell is-numeric\"></td><td class=\"ds-table__cell is-numeric\"></td><td class=\"ds-table__cell is-numeric\">3.50</td></tr>\n            <tr class=\"ds-table__row is-total\"><td class=\"ds-table__cell\">To pay</td><td class=\"ds-table__cell\"></td><td class=\"ds-table__cell is-numeric\">3</td><td class=\"ds-table__cell is-numeric\"></td><td class=\"ds-table__cell is-numeric\">27.00</td></tr>\n          </tbody>\n        </table>\n        <p class=\"ds-badges\" data-component=\"badge\">\n          <span><span class=\"ds-badge ds-badge--success\">printed to order</span> never runs out</span>\n          <span><span class=\"ds-badge ds-badge--warning\">last 3</span> a numbered run, nearly gone</span>\n          <span><span class=\"ds-badge ds-badge--danger\">sold out</span> not charged</span>\n          <span><span class=\"ds-badge\">always</span> cards and extras</span>\n        </p>\n        <div class=\"ds-buttons ds-buttons--bar\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#checkout\">Go to the till</a>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Work it out again</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Use a gift card</button>\n          <button class=\"ds-button ds-button--danger ds-buttons__gap\" type=\"button\">Empty the basket</button>\n        </div>\n\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">You asked to empty the basket</h2>\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\">Empty the basket? <a class=\"ds-dialog__close\" href=\"#basket\">close</a></h2>\n              <div class=\"ds-dialog__body\">\n                <p class=\"ds-dialog__text\">Both skins and the gift card go back on the shelf. One of them is from a numbered run and may be gone when you return.</p>\n              </div>\n              <div class=\"ds-dialog__actions\">\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Empty it</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Keep everything</a>\n              </div>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"checkout\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#basket\">Basket</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">The till</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The till</h1>\n        <p class=\"ds-page-header__text\">Where it goes and who it is for. Paying comes on the next page.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back to the basket</a>\n      </div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">In this order</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Tidepool</a><span class=\"ds-sidebar__count\">8.50</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Moss</a><span class=\"ds-sidebar__count\">9.00</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Gift card</a><span class=\"ds-sidebar__count\">6.00</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Post</a><span class=\"ds-sidebar__count\">3.50</span></li>\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--title\" href=\"#basket\">To pay</a><span class=\"ds-sidebar__count\">27.00</span></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Free post over 30</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Three skins or more travel free, anywhere we post to. Printed and sent within three days.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-link ds-panel__more\" href=\"#help\">Post and returns</a></p>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-page__main\">\n        <div data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Tram lines sold out</span> while you were shopping and has left the basket. You are not charged for it.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">One field needs another look.</span> We could not read the mail address.</p>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-name\">Name</label>\n            <div class=\"ds-form__field\"><input class=\"ds-form__input\" id=\"f-name\" type=\"text\" value=\"Halvard Moen\"></div>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-mail\">Mail address</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input is-error\" id=\"f-mail\" type=\"text\" value=\"halvard at fjordpost\">\n              <p class=\"ds-form__error\">This needs an @ and a full stop to reach you.</p>\n            </div>\n            <p class=\"ds-form__hint\">For the receipt and one message when it is posted.</p>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-street\">Street and town</label>\n            <div class=\"ds-form__field\"><textarea class=\"ds-form__textarea\" id=\"f-street\">Sjogata 14\n8006 Bodo</textarea></div>\n            <p class=\"ds-form__hint\">As you would write it on an envelope.</p>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__label\" for=\"f-land\">Country</label>\n            <div class=\"ds-form__field\"><select class=\"ds-form__select\" id=\"f-land\"><option>Norway</option><option>Sweden</option><option>Denmark</option><option>Somewhere else</option></select></div>\n            <p class=\"ds-form__hint\">Post to Norway is 3.50 and takes four days.</p>\n          </div>\n          <div class=\"ds-form__row\">\n            <span class=\"ds-form__label\">Wrapping</span>\n            <div class=\"ds-form__field\"><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> It is a present: leave the prices out</label></div>\n          </div>\n          <div class=\"ds-form__actions\">\n            <button class=\"ds-button\" type=\"button\">On to paying</button>\n            <a class=\"ds-link\" href=\"#basket\">Change the basket</a>\n          </div>\n        </form>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"orders\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Your orders</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Your orders</h1>\n        <p class=\"ds-page-header__text\">Everything you have bought, and where each parcel is.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#home\">Go shopping</a>\n      </div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Your corner</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first is-current\"><a class=\"ds-link ds-link--title\" href=\"#orders\">Orders</a><span class=\"ds-sidebar__count\">0</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Saved skins</a><span class=\"ds-sidebar__count\">3</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#checkout\">Address</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#home\">Sign out</a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Free post over 30</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Three skins or more travel free, anywhere we post to. Printed and sent within three days.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-link ds-panel__more\" href=\"#help\">Post and returns</a></p>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-page__main\">\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 9h18l-2 10H5z\"/><path d=\"M8 9l3-5M16 9l-3-5\"/></svg></div>\n          <h2 class=\"ds-empty__title\">No orders yet</h2>\n          <p class=\"ds-empty__text\">Your basket has two skins waiting. Once you pay, the parcel shows here with its day of posting.</p>\n          <a class=\"ds-button\" href=\"#basket\">Open the basket</a>\n        </div>\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">The three you saved</h2>\n          <ul class=\"ds-grid\">\n          <li class=\"ds-grid__cell ds-grid__cell--2\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 44 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"38\" height=\"66\" rx=\"6\"/><rect x=\"9\" y=\"12\" width=\"26\" height=\"38\" rx=\"1.5\"/><circle cx=\"22\" cy=\"60\" r=\"3.5\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Night ferry</a></h3>\n              <p class=\"ds-grid__text\">by Kemal Arda</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">9.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--3\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"12\" y=\"4\" width=\"64\" height=\"42\" rx=\"4\"/><path d=\"M4 58h80l-7-12H11z\"/><path d=\"M30 26c6-9 12 9 18 0s8-5 10 0\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Allotment</a></h3>\n              <p class=\"ds-grid__text\">by Ruth Okafor</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">14.00</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--4\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 88 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"82\" height=\"42\" rx=\"12\"/><rect x=\"28\" y=\"10\" width=\"32\" height=\"28\" rx=\"2\"/><circle cx=\"15\" cy=\"24\" r=\"5\"/><circle cx=\"73\" cy=\"18\" r=\"3\"/><circle cx=\"73\" cy=\"30\" r=\"3\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Paper planes</a></h3>\n              <p class=\"ds-grid__text\">by Jonas Weld</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          <li class=\"ds-grid__cell ds-grid__cell--1\">\n            <div class=\"ds-grid__art\"><svg viewBox=\"0 0 48 72\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"42\" height=\"66\" rx=\"7\"/><rect x=\"10\" y=\"10\" width=\"28\" height=\"20\" rx=\"2\"/><circle cx=\"24\" cy=\"49\" r=\"11\"/><circle cx=\"24\" cy=\"49\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\"/></svg></div>\n            <div class=\"ds-grid__body\">\n              <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--title\" href=\"#skin\">Cloud atlas</a></h3>\n              <p class=\"ds-grid__text\">by Ruth Okafor</p>\n              <p class=\"ds-grid__foot\"><span class=\"ds-price\">8.50</span><a class=\"ds-button ds-button--secondary\" href=\"#basket\">Add</a></p>\n            </div>\n          </li>\n          </ul>\n        </section>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"help\">\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li><a class=\"ds-link\" href=\"#help\">Help</a></li>\n      <li class=\"ds-breadcrumb__sep\">&raquo;</li>\n      <li class=\"ds-breadcrumb__current\">Fitting a skin</li>\n    </ol>\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <p class=\"ds-page-header__title\">Help</p>\n        <p class=\"ds-page-header__text\">Short answers from the people who print and post the skins.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Back to the shop</a>\n      </div>\n    </div>\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__aside\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Help</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-first is-current\"><a class=\"ds-link ds-link--title\" href=\"#help\">Fitting a skin</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Which size fits</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Post and returns</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Drawing for us</a></li>\n          </ul>\n        </nav>\n        <div class=\"ds-accordion\" data-component=\"accordion\">\n          <details class=\"ds-accordion__item is-first\" open>\n            <summary class=\"ds-accordion__title\">Does it leave glue behind?</summary>\n            <p class=\"ds-accordion__body\">No. A trace rubs away with a dry thumb.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__title\">Can I send one back?</summary>\n            <p class=\"ds-accordion__body\">Within a month, unopened, and we pay the post.</p>\n          </details>\n          <details class=\"ds-accordion__item\">\n            <summary class=\"ds-accordion__title\">How long does post take?</summary>\n            <p class=\"ds-accordion__body\">Three days to print and send, then two to five on the road.</p>\n          </details>\n        </div>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Still stuck?</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Write to us with the name of the skin and the gadget. A person answers within a day.</p>\n            <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#help\">Write to us</a></p>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-page__main\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>Fitting a skin</h1>\n          <p>A chronoskin is a sheet of matt vinyl with a glue that <strong>slides until you press it</strong>. You have about a minute to move it, which is longer than it sounds.</p>\n          <h2>Before you start</h2>\n          <p>Wipe the gadget with the cloth from the envelope and let it dry. <mark>Dust is the only thing that makes a bubble.</mark> Wash your hands; warm fingers help the corners.</p>\n          <ul>\n            <li>Find the piece marked front and peel half of the backing away.</li>\n            <li>Line it up with the screen first, then the edges.</li>\n            <li>Press from the middle outwards with the side of a thumb.</li>\n          </ul>\n          <h3>If it sits crooked</h3>\n          <p>Lift a corner slowly and lay it again. A skin can be lifted three or four times before the glue tires. Each sheet carries its size code on the backing, such as <code>MP-30</code> for a 30 GB player; quote it if you write to us.</p>\n          <h2>Taking it off</h2>\n          <ol>\n            <li>Warm it in your hands for a moment.</li>\n            <li>Peel from a corner, flat and slow.</li>\n            <li>Rub away any trace with a dry thumb. There is rarely any.</li>\n          </ol>\n        </div>\n        <section class=\"ds-section\">\n          <h2 class=\"ds-section__label\">Read next</h2>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#help\">Which size fits</a>\n            <a class=\"ds-link is-visited\" href=\"#help\">Post and returns</a>\n            <a class=\"ds-link is-hover\" href=\"#help\">Drawing for us</a>\n            <a class=\"ds-link is-active\" href=\"#home\">Back to the shop</a>\n          </p>\n        </section>\n      </div>\n    </div>\n  </section>\n\n</div>\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__col ds-footer__col--wide\">\n      <h2 class=\"ds-footer__title\">chronoskin</h2>\n      <p class=\"ds-footer__text\">A small shop of skins for players, phones and laptops. Members send in drawings, everyone votes, and the winners are printed.</p>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Shop</h2>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">New this week</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Best sellers</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">Gift cards</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Help</h2>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#help\">Fitting a skin</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#help\">Post and returns</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#help\">Write to us</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-footer__col\">\n      <h2 class=\"ds-footer__title\">Members</h2>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#help\">Drawing for us</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#home\">This week's vote</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#orders\">Your orders</a></li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"ds-footer__legal\">\n    <p class=\"ds-footer__legal-text\">chronoskin prints to order. Prices include tax. Gadget names belong to their makers.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.web-2-0-gloss.shop.s08.p02.t11.u11\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"web-2-0-gloss\",\n    \"years\": [\n      2005,\n      2009\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w2-82bb\",\n  \"short\": \"v1-w2-82bb\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #faf9f7;\n  --color-surface-strong: #deeaf7;\n  --color-bar: #1b5790;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #ccdeaf;\n  --color-bar-alt-text: #393733;\n  --color-inverse: #393733;\n  --color-inverse-text: #ffffff;\n  --color-text: #393733;\n  --color-text-muted: #999999;\n  --color-heading: #393733;\n  --color-heading-alt: #93883f;\n  --color-link: #105cb6;\n  --color-link-quiet: #666666;\n  --color-link-visited: #578cca;\n  --color-link-hover: #2e6ab1;\n  --color-link-active: #a12a2a;\n  --color-border: #cccccc;\n  --color-border-strong: #9aafe5;\n  --color-border-muted: #ddeaf6;\n  --color-accent: #fff3aa;\n  --color-accent-text: #393733;\n  --color-accent-alt: #e45b00;\n  --color-fill-1: #d5e5f5;\n  --color-fill-2: #fff9d6;\n  --color-fill-3: #ccdeaf;\n  --color-fill-4: #f6f8fb;\n  --color-button: #2e6ab1;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #105cb6;\n  --color-input: #ffffff;\n  --color-input-text: #393733;\n  --color-input-border: #bbcdde;\n  --color-disabled: #faf9f7;\n  --color-disabled-text: #999999;\n  --color-danger: #a12a2a;\n  --color-danger-surface: #ffe8cd;\n  --color-success: #325b0a;\n  --color-warning: #ffa100;\n  --color-notice: #fff9d6;\n  --color-notice-text: #393733;\n  --color-focus: #75abea;\n  --color-shadow: #393733;\n  --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Georgia, \"Times New Roman\", serif;\n  --font-heading: Georgia, \"Times New Roman\", serif;\n  --font-ui: \"Lucida Grande\", Arial, Helvetica, sans-serif;\n  --font-mono: \"Courier New\", Courier, monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 11px;\n  --text-large: 15px;\n  --text-display: 22px;\n  --text-h1: 20px;\n  --text-h2: 17px;\n  --text-h3: 14px;\n  --line-body: 1.3;\n  --line-heading: 1.2;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0.1em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 3px;\n  --radius-panel: 6px;\n  --radius-pill: 3px;\n  --radius-page: 6px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 12%) 0, var(--color-bar) 100%);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, var(--color-button) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 6%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
