{
  "id": "v1-fl-2222",
  "long_id": "v1.flat-design.landing.s02.p02.t02.u02",
  "name": "Flat design showcase",
  "era": {
    "slug": "flat-design",
    "code": "fl",
    "name": "Flat design",
    "years": [
      2013,
      2016
    ],
    "description": "Product marketing, 2013 to 2016: full-width bands of solid colour, light sans-serif headings, thin one-pixel rules, and no gloss, bevel or drop shadow anywhere."
  },
  "archetype": "landing",
  "mode": "pure",
  "viewport": {
    "width": 1280,
    "fluid": true
  },
  "summary": "This is the centred showcase page of flat design, common from 2013 to 2016 for consumer products and site builders: one tall screen of solid colour with the navigation laid transparently over it, a single centred headline and exactly one button. Below it the page is a quiet white scroll of alternating left-right feature rows with very large gaps, centred headings, one outlined box cut into cells by 1px rules, and a single light footer line. Nothing has gloss, gradient or drop shadow; colour appears as a few flat fills and everything else is thin type on white.",
  "url": "https://chrono.skin/s/v1-fl-2222",
  "preview_url": "https://chrono.skin/s/v1-fl-2222/specimen.html",
  "files": {
    "STYLE.md": "# Flat design showcase\n\n## Summary\n\nThis is the centred showcase page of flat design, common from 2013 to 2016 for consumer products and site builders: one tall screen of solid colour with the navigation laid transparently over it, a single centred headline and exactly one button. Below it the page is a quiet white scroll of alternating left-right feature rows with very large gaps, centred headings, one outlined box cut into cells by 1px rules, and a single light footer line. Nothing has gloss, gradient or drop shadow; colour appears as a few flat fills and everything else is thin type on white.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. Sections (`.ds-hero`, `.ds-section`, `.ds-footer`) span the viewport; content sits in a centred column of `--size-page` (1000px), and running text in a narrower centred measure of `--size-measure` (640px). There is no sidebar on the home page and no boxed page frame.\n- Navigation on the home page is `.ds-nav--overlay`: transparent, laid over the top of the hero, `--size-nav` (88px) tall, wordmark at the far left and three or four links at the far right, 64px from the viewport edges rather than in the centred column. It has no button; the only button on the first screen is the hero's.\n- The hero is one flat `--color-fill-1` screen at least `--size-hero` (660px) tall. Everything in it is centred: the title, then one row holding the lead line and one white button, then a flat device (`.ds-hero__art`, `--size-screen` 520px wide) standing on the hero's bottom edge. Under the hero comes one centred announcement line, `.ds-strip`, closed by a 1px rule.\n- The home page continues as `.ds-section` blocks, white and `--color-surface-alt` in turn, each headed by a centred title and lead. Feature rows (`.ds-feature`) put text on one side and a flat colour picture on the other and flip sides on every second row; rows are `--space-7` (112px) apart and never share a box or a rule. The page closes with one `.ds-section--fill` call to action (centred title, one button) and the footer line.\n- Inner pages have no hero and no overlay: `.ds-nav` becomes a solid `--fill-bar` bar with a 1px bottom rule and the same left and right placement. Under it `.ds-page-header` sits in the centred column: the `.ds-breadcrumb` first, then the page title at display size with one line of description, actions bottom right, all closed by a 1px rule as wide as the column. Below, `.ds-columns` gives a `--size-sidebar` (200px) column on the left for `.ds-sidebar` section links and a main column on the right. In the main column the `.ds-tabs` segmented control comes first, centred, then `.ds-stat`, then the table with centred pagination, then forms with labels in a left column of `--size-label` (150px). The footer line is unchanged.\n- Views. The specimen is a walking-route service with five views. `home` is the tour: the hero under the overlay navigation, the announcement line, three feature rows, the grid box, the journal list and the closing call to action. `journal` is an article page: route labels, the running text in the 640px measure and links to read next. `plans` holds the three plan cards and a table of what each includes. `trips` is the list page: season links at the left, then tabs, figures, the trip table with pagination and the empty state for a season with no trips. `trip` is one trip in two equal columns: its details form with notices at the left, the action row, the walkers and the open cancel dialog at the right. Below 760px the columns stack, the navigation wraps under the brand, grids fold to two columns or one, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. Form labels move above their fields.\n- Spacing scale: `--space-1` 4px (between a control and its hint, sidebar row padding), `--space-2` 8px (button vertical padding, gaps between buttons in a dialog, between badges), `--space-3` 16px (paragraph gap, table cell padding, between form rows, between buttons), `--space-4` 24px (button horizontal padding, panel padding, list row padding, page side padding, between panels), `--space-5` 40px (between navigation links, grid cell padding, page header padding, footer padding), `--space-6` 64px (navigation side padding, between stacked blocks and columns, under a section lead, compact section padding), `--space-7` 112px (section padding, between feature rows and between a feature's two sides).\n- Other sizes: `--size-art` 260px (height of a feature picture), `--size-disc` 88px (colour disc in a grid cell and in the empty state), `--size-icon` 40px, `--size-dialog` 400px.\n\n## Typography and colour roles\n\n- Colour family: the 2015 music landing page (coral, yellow, plum, green and magenta on white with a near-black inverse); the red of `--color-danger` `#e81020` is borrowed from the 2014 corporate home page, because the family has no error colour.\n- `--color-page`, `--color-canvas`, `--color-surface` and `--color-bar` are white `#ffffff`; `--color-surface-alt` `#f8f8f8` is the alternate section, `--color-surface-strong` `#efefef` the code background, the quiet badge and the empty-state disc.\n- Text is near-black `--color-text` `#2e2f33`, not grey; headings are plum `--color-heading` `#503750`; small titles (panel, sidebar, h3) are magenta `--color-heading-alt` `#f037a5`; meta text and table heads are `--color-text-muted` `#919496`.\n- `--color-fill-1` `#d65a3e` (coral) is the hero; `--color-fill-4` `#2ebd59` (green) is the closing call to action. Text on either is `--color-inverse-text`. `--color-fill-2` `#f8c433` (yellow) and `--color-fill-3` `#503750` (plum) fill feature pictures, hero blocks and grid discs and carry an icon only, never running text. An icon on a fill never lies on the fill itself: `.ds-grid__icon` and `.ds-feature__icon` carries a round plate, `--color-inverse` mixed in at 40%, so the `--color-inverse-text` icon stays legible when a token set makes the fill pale (yellow, beige).\n- `--color-button` `#2ebd59` (green, white text) is the only action colour and also the current tab segment, the current page number, the current sidebar marker and `--color-focus`. The secondary button is `--color-button-secondary-text` `#2e2f33` on white. On a fill the button is `.ds-button--inverse`: `--color-inverse-text` with `--color-fill-1` text.\n- Links are coral `--color-link` `#d65a3e`, visited the same; hover goes dark `--color-link-hover` `#2e2f33`, active `#000000`. Quiet links are `#919496`. The solid navigation bar uses `--color-bar-text` with `--color-link` for the current item; the overlay navigation uses `--color-inverse-text` only.\n- `--color-accent` `#f037a5` (magenta, white text) is the default badge; `--color-accent-alt` and `--color-notice` are yellow `#f8c433`: the `--alt` badge is a 30% tint of it over `--color-surface` with a yellow outline and `--color-heading` text, the notice is solid yellow with `--color-notice-text` `#2e2f33`. Status badges are `--color-success`, `--color-warning` and `--color-danger` with `--color-accent-text`.\n- Borders: `--color-border` `#d9dadc`, `--color-border-strong` and `--color-input-border` `#c1c3c6`, `--color-border-muted` `#efefef` (table rows, panel title rule). The footer is a light line on `--color-canvas` in `--color-text-muted` with `--color-link-quiet` links; `--color-inverse` is not used as a block in this layout, only mixed at 16% for the hero device.\n- One light geometric sans for everything, after the 2014 site-builder page: `--font-body`, `--font-heading` and `--font-ui` are Raleway, Montserrat, Avenir (the references used commercial geometric faces). `--font-mono` is Menlo.\n- Small and airy: `--text-base` 13px at `--line-body` 1.6, `--weight-body` 300; `--text-small` 10px for meta, badges, table heads and the footer; `--text-ui` 12px.\n- Headings are light and tracked, never bold: `--weight-heading` and `--weight-display` 300, `--heading-tracking` 0.5px, `--display-tracking` 1px; `--text-display` 44px (hero title, inner page title, figures), `--text-h1` 32px (section and feature titles), `--text-h2` 22px, `--text-h3` and `--text-large` 16px.\n- `--ui-transform` is `uppercase` at `--weight-ui` 500: navigation, tab segments, buttons and table heads are small capitals-by-transform. `--weight-bold` 500 is the heaviest weight. All three link decorations are `none`.\n- Buttons and inputs are pills: `--radius-control` 20px rounds a control of ordinary height completely; `--radius-pill` 500px makes badges, grid discs and the circled plus fully round. Panels, notices, dialogs and the top of the hero's device take `--radius-panel` 8px; `--radius-page` 12px rounds feature pictures and the grid box. The hero itself runs edge to edge and has no corners.\n- The secondary button is a ghost: `--fill-button-secondary` is `transparent`, drawn by its 1px outline only. The primary button is the flat `--color-button`; hovered it is the same colour mixed 20% with white.\n- `--border-width` 1px for every rule and outline; `--border-width-strong` 3px for the current navigation item and the current sidebar marker. `--focus-ring` is `2px solid` in `--color-focus`.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the hero device and its blocks (`--color-inverse` at 16%), the ghost button border (`--color-inverse-text` at 50%), the icon plate (`--color-inverse` at 40%), the `--alt` badge tint (`--color-accent-alt` at 30% over `--color-surface`), the hovered and pressed destructive button (`--color-danger` at 85% over `--color-inverse-text` and over `--color-inverse`). The hero lead and a hovered overlay link use `opacity: 0.8`.\n- Nothing casts a shadow at rest: the panel, control, hover, dialog and text shadows are `none`; only a pressed button darkens, with `--shadow-control-pressed`, an inset 2px ring in `--color-shadow`. Every fill is a flat colour. `--transition` fades colour, background and border colour in 0.2s.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the font, text colour and white page, and anchors the overlay navigation. It has no width of its own.\n- `.ds-brand`: the site's mark and name, at the left edge of the navigation. `.ds-brand__mark` is a 24px tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h3` and `--weight-bold` (not the heading weight: the light headings of several token sets are too weak beside the tile) in `--color-heading`, or `--color-inverse-text` on the overlay, where the tile is dressed like the hero's `.ds-button--inverse` instead (`--color-inverse-text` with a `--color-fill-1` drawing) so that it never disappears into the hero; the inner page bar repeats it. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the `.ds-brand` at the left edge, `.ds-nav__links` of `.ds-nav__link` at the right edge; the current item (`is-current`) has a 3px underline. Plain, it is the solid bar of inner pages; `--overlay` makes it transparent with white text over the hero, on the home page only. The specimen has one header for all views: `:has()` rules give it the overlay form while the home view shows and mark the current item, one rule per view.\n- `.ds-hero`: the tall single-colour first screen. `.ds-hero__title` (44px, weight 300, centred), `.ds-hero__row` holding `.ds-hero__lead` and exactly one `.ds-button--inverse`, then `.ds-hero__art`: a flat device made of `.ds-hero__bar` and a `.ds-hero__screen` of `.ds-hero__block` rectangles (`--2`, `--3` for fills, `--tall` to span two rows). Never a second button, never left-aligned.\n- `.ds-strip`: one centred announcement line under the hero with a bold `.ds-strip__title` and one link.\n- `.ds-section`: full-width block with a `.ds-section__inner` column (`--narrow` for the 640px measure). Variants `--alt` (off-white), `--fill` (`--color-fill-4`, white centred text, for the closing call to action), `--compact` (64px padding). `.ds-section__title` and `.ds-section__lead` are the centred head. `.ds-stack` stacks blocks 64px apart (`--tight`: 24px); `.ds-columns` makes columns from `.ds-columns__side`, `.ds-columns__main` and `.ds-columns__half`.\n- `.ds-feature`: a feature row: `.ds-feature__copy` (`.ds-feature__title`, `.ds-feature__text`, one `.ds-link--plus`) beside `.ds-feature__art`, a flat colour rectangle (`--3`, `--4` for the other fills) with a large line icon `.ds-feature__icon` on a darker round plate. Add `--flip` to every second row.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` is the column with the bottom rule; `.ds-page-header__copy` holds the breadcrumb, `.ds-page-header__title` (44px, weight 300) and one `.ds-page-header__text` line; `.ds-page-header__actions` sits bottom right with at most one primary and one `--secondary` button.\n- `.ds-prose`: running text in the narrow measure: h1 (centred), h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` is the centred first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta, breadcrumb and sidebar links; `--plus` puts a circled plus before a \"Learn more\" link. `.ds-linkrow` centres links in a row.\n- `.ds-button`: flat pill button, 12px uppercase. Variants: `--secondary` (1px outline, no fill), `--danger` (flat `--color-danger` with white text, for destructive actions only), `--inverse` (white, on a fill), `--ghost` (1px white outline, on a fill only), `--large`, `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` centres buttons 16px apart.\n- `.ds-form`: horizontal form. Each `.ds-form__field` is a two-column row: `.ds-form__label` right-aligned in the 150px label column, then one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`; `.ds-form__error` and `.ds-form__hint` sit under the control. Error: `is-error` on the input. `.ds-form__check` with `.ds-form__checkbox` and `.ds-form__actions` are indented to the control column.\n- `.ds-table`: open table: small grey uppercase head on a 1px `--color-border-strong` rule, rows on faint 1px rules, no fills, no stripes, no outer border. Row heads are `--color-heading`; a row head that opens a detail page holds a `.ds-table__link`. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small centred note below. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window.\n- `.ds-list`: journal list between 1px rules. Each `.ds-list__item` has `.ds-list__meta` (date and category) in a narrow left column and `.ds-list__body` with `.ds-list__title` and `.ds-list__text` beside it.\n- `.ds-panel`: centred plan card with a 1px outline and `--radius-panel` corners: `.ds-panel__title` on a faint rule (no title strip), `.ds-panel__body` with a large light `.ds-panel__figure`, a line of text and one button. `.ds-panelrow` sets three side by side.\n- `.ds-stat`: the row of summary figures; `.ds-stat` is the row, each figure is a `.ds-stat__item` with a `.ds-stat__figure` (44px, weight 300) over a `.ds-stat__label`. Centred, between a rule above and a rule below, with no dividers, boxes or fills.\n- `.ds-grid`: one outlined box cut into four cells (`--3` for three) by 1px rules, no gaps. Each `.ds-grid__cell` is centred: a round `.ds-grid__tile` disc (`--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` on a darker plate inside it, then `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-tabs`: a centred segmented control: joined outlined `.ds-tabs__tab` segments, the ends rounded with `--first` and `--last`, the current one (`is-current`) filled with `--color-button`.\n- `.ds-badge`: fully rounded pill, 10px weight 500. Magenta by default, `--alt` a 30% tint of `--color-accent-alt` over `--color-surface` with a `--border-width` outline in the full colour and `--color-heading` text (the text never lies on the accent itself, so the second accent may be light or dark), `--quiet` grey for counts. Status variants: `--success` (confirmed, open), `--warning` (waiting), `--danger` (cancelled, closed), all with white text. `.ds-badgerow` for several.\n- `.ds-sidebar`: left column block on inner pages: `.ds-sidebar__title`, then a `.ds-sidebar__list` hanging on a 1px vertical rule; `.ds-sidebar__item` rows with optional `.ds-sidebar__count`; the current row (`is-current`) is plain text with a 3px `--color-button` marker on the rule.\n- `.ds-notice`: flat centred message strip in `--color-notice`; `--error` is pale red with a 1px red border. `.ds-notice__title` for the lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: centred row of `.ds-pagination__link` pills; `is-current` is filled with `--color-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: 10px grey trail of `.ds-breadcrumb__item` separated by slashes, placed above the page title; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: dimmed block (`--color-overlay`) centring a small `.ds-dialog__box` alert: centred `.ds-dialog__title`, `.ds-dialog__body`, and `.ds-dialog__actions` with two equal `.ds-dialog__action` buttons filling the width. No title bar, no close mark, no shadow.\n- `.ds-empty`: unboxed centred message: a grey `.ds-empty__disc` holding `.ds-empty__icon`, then `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one light row on a 1px rule in the centred column: `.ds-footer__brand`, a `.ds-footer__links` row of `.ds-footer__link`, and the copyright at the right. Never a dark block or link columns.\n\n## Never\n\n- `block-gap <= 112px`: feature rows are 112px apart; nothing is further from its neighbour.\n- `content-width <= 1000px`: content stays in the centred 1000px column; only the navigation reaches toward the edges.\n- `font-weight <= 500`: this type set is light; 500 is its heaviest weight.\n- `font-size >= 10px`: the 10px small print of the site-builder page is the smallest text.\n- `font-size <= 44px`: the hero title is the largest text.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 1px`: only headings are tracked, by 0.5px and 1px.\n- `underlined-links <= 0%`: no reference underlines links.\n- `box-shadow = none`: the music and site-builder references have no box shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 0%`: every background is one solid colour.\n- `border-radius <= 20px`: 20px is the control radius; anything rounder is a true pill or disc.\n- `border-width <= 3px`: rules are 1px; the 3px current-item marker is the widest border.\n- `animation = none`: no reference has a CSS animation.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new home-page section is a `.ds-section` with a centred `.ds-section__title`; a new product point is another `.ds-feature` row on the opposite side to the one above it, not a card. A new box is a 1px outline (`.ds-panel`) or a flat fill without a border, never a shadow. Controls take `--radius-control`, boxes `--radius-panel`, discs and badges `--radius-pill`, and large fills `--radius-page`. Text on a fill is `--color-inverse-text` and only on `--color-fill-1` and `--color-fill-4`; the other fills take icons. New actions are always `--color-button`, and there is one primary button per screen. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n",
    "components.css": ":root {\n  --size-page: 1000px;\n  --size-measure: 640px;\n  --size-nav: 88px;\n  --size-hero: 660px;\n  --size-screen: 520px;\n  --size-art: 260px;\n  --size-disc: 88px;\n  --size-icon: 40px;\n  --size-sidebar: 200px;\n  --size-label: 150px;\n  --size-dialog: 400px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 16px;\n  --space-4: 24px;\n  --space-5: 40px;\n  --space-6: 64px;\n  --space-7: 112px;\n}\n\n/* shell */\n.ds-page {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\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: a solid bar on inner pages; laid transparent over the hero on the home page */\n.ds-nav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  padding: 0 var(--space-6);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  min-height: var(--size-nav);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n}\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--space-4);\n  height: var(--space-4);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 80%;\n  height: 80%;\n}\n.ds-brand__name {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) 0;\n  color: var(--color-bar-text);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-link);\n}\n.ds-nav__link.is-current {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n/* the current view marks its navigation item; a single trip marks Trips */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#plans:target) .ds-nav__link[href=\"#plans\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#trips:target) .ds-nav__link[href=\"#trips\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#trip:target) .ds-nav__link[href=\"#trips\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n/* on the home view the bar is the overlay: the class for a project's own home page, the two selectors after it for the specimen */\n.ds-nav--overlay,\n.ds-page:not(:has(.ds-view:target)) .ds-nav,\n.ds-page:has(#home:target) .ds-nav {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  background: transparent;\n  color: var(--color-inverse-text);\n  border-bottom-color: transparent;\n}\n.ds-nav--overlay .ds-brand__name,\n.ds-nav--overlay .ds-nav__link,\n.ds-page:not(:has(.ds-view:target)) .ds-nav .ds-brand__name,\n.ds-page:has(#home:target) .ds-nav .ds-brand__name,\n.ds-page:not(:has(.ds-view:target)) .ds-nav .ds-nav__link,\n.ds-page:has(#home:target) .ds-nav .ds-nav__link {\n  color: var(--color-inverse-text);\n}\n.ds-nav--overlay .ds-brand__mark,\n.ds-page:not(:has(.ds-view:target)) .ds-nav .ds-brand__mark,\n.ds-page:has(#home:target) .ds-nav .ds-brand__mark {\n  background: var(--color-inverse-text);\n  color: var(--color-fill-1);\n}\n.ds-nav--overlay .ds-nav__link:hover,\n.ds-nav--overlay .ds-nav__link.is-hover,\n.ds-page:not(:has(.ds-view:target)) .ds-nav .ds-nav__link:hover,\n.ds-page:has(#home:target) .ds-nav .ds-nav__link:hover {\n  color: var(--color-inverse-text);\n  opacity: 0.8;\n}\n.ds-nav--overlay .ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-inverse-text);\n}\n\n/* hero: one tall single-colour screen, everything centred, one button, a flat device at the bottom edge */\n.ds-hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  min-height: var(--size-hero);\n  padding: calc(var(--size-nav) + var(--space-5)) var(--space-4) 0;\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  text-align: center;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\n  max-width: var(--size-page);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n.ds-hero__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-3) var(--space-4);\n  margin-bottom: var(--space-6);\n}\n.ds-hero__lead {\n  margin: 0;\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  opacity: 0.8;\n}\n.ds-hero__art {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  width: 100%;\n  max-width: var(--size-screen);\n  padding: var(--space-4) var(--space-4) 0;\n  background: color-mix(in srgb, var(--color-inverse) 16%, transparent);\n  border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n}\n.ds-hero__bar {\n  height: var(--space-3);\n  width: 40%;\n  background: color-mix(in srgb, var(--color-inverse) 16%, transparent);\n}\n.ds-hero__screen {\n  flex: 1 1 auto;\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  gap: var(--space-2);\n}\n.ds-hero__block {\n  background: color-mix(in srgb, var(--color-inverse) 16%, transparent);\n}\n.ds-hero__block--2 {\n  background: var(--color-fill-2);\n}\n.ds-hero__block--3 {\n  background: var(--color-fill-3);\n}\n.ds-hero__block--tall {\n  grid-row: span 2;\n}\n\n/* strip: one centred announcement line under the hero */\n.ds-strip {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-canvas);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-strip__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* section: a full-width block with a centred column; most content is centred in it */\n.ds-section {\n  padding: var(--space-7) var(--space-4);\n  background: var(--color-canvas);\n}\n.ds-section--alt {\n  background: var(--color-surface-alt);\n}\n.ds-section--fill {\n  background: var(--color-fill-4);\n  color: var(--color-inverse-text);\n  text-align: center;\n}\n.ds-section--compact {\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\n}\n.ds-section__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-section__inner--narrow {\n  max-width: var(--size-measure);\n}\n.ds-section__title {\n  margin: 0 0 var(--space-2);\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  text-align: center;\n}\n.ds-section__lead {\n  margin: 0 0 var(--space-6);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  text-align: center;\n}\n.ds-section--fill .ds-section__title,\n.ds-section--fill .ds-section__lead {\n  color: inherit;\n}\n.ds-section--fill .ds-section__lead {\n  margin-bottom: var(--space-4);\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n}\n.ds-stack--tight {\n  gap: var(--space-4);\n}\n.ds-columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-6);\n}\n.ds-columns__side {\n  flex: 0 0 var(--size-sidebar);\n}\n.ds-columns__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-columns__half {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n/* feature: text on one side, a flat picture on the other; every second row is flipped */\n.ds-feature {\n  display: flex;\n  align-items: center;\n  gap: var(--space-7);\n}\n.ds-feature + .ds-feature {\n  margin-top: var(--space-7);\n}\n.ds-feature--flip {\n  flex-direction: row-reverse;\n}\n.ds-feature__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-feature__title {\n  margin: 0 0 var(--space-3);\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-feature__text {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n}\n.ds-feature__art {\n  flex: 1 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-art);\n  background: var(--color-fill-2);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-feature__art--3 {\n  background: var(--color-fill-3);\n}\n.ds-feature__art--4 {\n  background: var(--color-fill-4);\n}\n.ds-feature__icon {\n  width: var(--size-disc);\n  height: var(--size-disc);\n  box-sizing: content-box;\n  padding: var(--space-4);\n  background: color-mix(in srgb, var(--color-inverse) 40%, transparent);\n  border-radius: 50%;\n}\n\n/* page header: the head of an inner page, in the centred column, closed by a rule as wide as the column */\n.ds-page-header {\n  padding: var(--space-5) var(--space-4) 0;\n  background: var(--color-canvas);\n}\n.ds-page-header__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding-bottom: var(--space-5);\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-6);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: var(--space-3) 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n.ds-page-header__text {\n  margin: 0;\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* typography */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h1);\n  text-align: center;\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n  margin-top: var(--space-5);\n}\n.ds-prose > :first-child {\n  margin-top: 0;\n}\n.ds-prose > :last-child {\n  margin-bottom: 0;\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n  margin-top: var(--space-4);\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-body);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\n  padding-left: var(--space-4);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  text-align: center;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link);\n}\n.ds-link--plus {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-link--plus::before {\n  content: \"+\";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-5);\n  height: var(--space-5);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: var(--radius-pill);\n  font-size: var(--text-large);\n  line-height: 1;\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-4);\n  margin: 0;\n}\n\n/* buttons */\n.ds-button {\n  display: inline-block;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\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  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--color-link-active);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: currentColor;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--color-notice);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n  background: var(--color-notice);\n  color: var(--color-link-active);\n}\n.ds-button--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 85%, var(--color-inverse-text));\n  color: var(--color-button-hover-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n  background: color-mix(in srgb, var(--color-danger) 85%, var(--color-inverse));\n}\n.ds-button--inverse {\n  background: var(--color-inverse-text);\n  color: var(--color-fill-1);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: var(--color-notice);\n  color: var(--color-fill-1);\n}\n.ds-button--ghost {\n  background: transparent;\n  color: var(--color-inverse-text);\n  border-color: color-mix(in srgb, var(--color-inverse-text) 50%, transparent);\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: transparent;\n  color: var(--color-inverse-text);\n  border-color: var(--color-inverse-text);\n}\n.ds-button--large {\n  padding: var(--space-3) var(--space-5);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-button--small {\n  padding: var(--space-1) var(--space-3);\n  font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: transparent;\n  cursor: default;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-3);\n}\n\n/* form: labels in a column on the left, controls on the right */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__field {\n  display: grid;\n  grid-template-columns: var(--size-label) 1fr;\n  column-gap: var(--space-4);\n  row-gap: var(--space-1);\n  align-items: baseline;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-align: right;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: var(--space-7);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  grid-column: 2;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  grid-column: 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  margin-left: calc(var(--size-label) + var(--space-4));\n}\n.ds-form__checkbox {\n  margin: 0;\n  accent-color: var(--color-button);\n}\n.ds-form__actions {\n  display: flex;\n  gap: var(--space-3);\n  margin-left: calc(var(--size-label) + var(--space-4));\n  padding-top: var(--space-2);\n}\n\n/* table: open rows on faint rules, no fills, no outer box */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: var(--radius-panel);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-2);\n  text-align: left;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n  padding-top: var(--space-2);\n  padding-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n.ds-table tbody th {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: center;\n}\n\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table__link {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-table__link:hover,\n.ds-table__link.is-hover {\n  color: var(--color-link);\n}\n\n/* list: the date in a narrow left column, title and text beside it */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__meta {\n  flex: 0 0 var(--size-label);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link);\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n}\n\n/* panel: a centred plan card with an outline; the title sits on a rule, not a strip */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  text-align: center;\n}\n.ds-panel__title {\n  margin: 0 var(--space-4);\n  padding: var(--space-4) 0 var(--space-3);\n  color: var(--color-heading-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__body p {\n  margin: 0 0 var(--space-4);\n}\n.ds-panel__figure {\n  display: block;\n  margin-bottom: 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}\n.ds-panelrow {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-4);\n}\n\n/* stats: centred figures between two rules */\n.ds-stat {\n  display: flex;\n  margin: 0;\n  padding: var(--space-4) 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-stat__item {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-stat__figure {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* grid: one outlined box cut into cells by rules; a colour disc with an icon heads each cell */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  background: var(--color-surface);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n  text-align: center;\n}\n.ds-grid--3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n.ds-grid__cell {\n  min-width: 0;\n  padding: var(--space-5) var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell:first-child {\n  border-left: 0;\n}\n.ds-grid__tile {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-disc);\n  height: var(--size-disc);\n  margin: 0 auto var(--space-4);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-pill);\n}\n.ds-grid__tile--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  box-sizing: content-box;\n  padding: var(--space-3);\n  background: color-mix(in srgb, var(--color-inverse) 40%, transparent);\n  border-radius: 50%;\n}\n.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n}\n.ds-grid__text {\n  margin: 0 0 var(--space-2);\n}\n\n/* tabs: a segmented control, joined outlined segments with the current one filled */\n.ds-tabs {\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  margin-left: calc(0 - var(--border-width));\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-tabs__tab--first {\n  border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-tabs__tab--last {\n  border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border-color: transparent;\n  font-weight: var(--weight-ui);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.ds-badge--alt {\n  background: color-mix(in srgb, var(--color-accent-alt) 30%, var(--color-surface));\n  color: var(--color-heading);\n  outline: var(--border-width) var(--border-style) var(--color-accent-alt);\n  outline-offset: calc(var(--border-width) * -1);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-accent-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-accent-text);\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--space-2);\n}\n\n/* sidebar: a left column of section links hanging on a vertical rule */\n.ds-sidebar {\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item {\n  margin-left: calc(0 - var(--border-width));\n  padding: var(--space-1) 0 var(--space-1) var(--space-3);\n  border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n  border-left-color: var(--color-button);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  float: right;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-ui);\n  text-align: center;\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border: var(--border-width) var(--border-style) var(--color-danger);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n\n/* pagination: centred round page numbers */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: var(--space-4) 0 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__link {\n  display: block;\n  min-width: var(--space-5);\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  text-align: center;\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-weight: var(--weight-ui);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\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}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin-right: var(--space-2);\n  color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n  color: var(--color-heading);\n}\n\n/* dialog: a small centred alert; two equal buttons fill its foot */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-6) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  padding: var(--space-5) var(--space-4) var(--space-4);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n  text-align: center;\n}\n.ds-dialog__title {\n  margin: 0 0 var(--space-2);\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__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  gap: var(--space-2);\n  margin-top: var(--space-4);\n}\n.ds-dialog__action {\n  flex: 1 1 0;\n  min-width: 0;\n  padding-left: var(--space-2);\n  padding-right: var(--space-2);\n}\n\n/* empty state: no box, a grey disc and a centred message */\n.ds-empty {\n  padding: var(--space-5) var(--space-4);\n  text-align: center;\n}\n.ds-empty__disc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-disc);\n  height: var(--size-disc);\n  margin: 0 auto var(--space-4);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  border-radius: var(--radius-pill);\n}\n.ds-empty__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\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}\n\n/* footer: one light row on a rule, not a dark block */\n.ds-footer {\n  padding: 0 var(--space-4);\n  background: var(--color-canvas);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-footer__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__brand {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n}\n.ds-footer__links {\n  display: flex;\n  flex: 1 1 auto;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  color: var(--color-link);\n}\n\n/* narrow windows: columns stack, the navigation wraps under the brand, labels sit above their fields, wide tables scroll inside their own box */\n@media (max-width: 760px) {\n  .ds-nav {\n    padding: 0 var(--space-3);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: var(--space-1) var(--space-4);\n    padding: var(--space-3) 0 var(--space-2);\n  }\n  .ds-nav__links {\n    gap: var(--space-4);\n  }\n  .ds-hero {\n    min-height: 0;\n    padding-left: var(--space-3);\n    padding-right: var(--space-3);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n  }\n  .ds-hero__row {\n    margin-bottom: var(--space-5);\n  }\n  .ds-hero__art {\n    min-height: var(--size-art);\n  }\n  .ds-section,\n  .ds-section--compact {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-section__lead {\n    margin-bottom: var(--space-5);\n  }\n  .ds-feature,\n  .ds-feature--flip {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--space-4);\n  }\n  .ds-feature + .ds-feature {\n    margin-top: var(--space-6);\n  }\n  .ds-feature__copy,\n  .ds-feature__art {\n    flex: 0 0 auto;\n  }\n  .ds-feature__art {\n    height: calc(var(--size-art) / 1.5);\n  }\n  .ds-feature__title {\n    font-size: var(--text-h2);\n  }\n  .ds-columns {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--space-5);\n  }\n  .ds-columns__side,\n  .ds-columns__main,\n  .ds-columns__half {\n    flex: 0 0 auto;\n  }\n  .ds-stack {\n    gap: var(--space-5);\n  }\n  .ds-stack--tight {\n    gap: var(--space-4);\n  }\n  .ds-page-header {\n    padding: var(--space-4) var(--space-3) 0;\n  }\n  .ds-page-header__inner {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding-bottom: var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-page-header__title {\n    font-size: var(--text-h1);\n  }\n  .ds-grid,\n  .ds-grid--3 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .ds-grid__cell {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-grid__cell:nth-child(odd) {\n    border-left: 0;\n  }\n  .ds-grid__cell:nth-child(n + 3) {\n    border-top: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-panelrow {\n    grid-template-columns: 1fr;\n  }\n  .ds-list__item {\n    flex-direction: column;\n    gap: var(--space-1);\n  }\n  .ds-list__meta {\n    flex: 0 0 auto;\n  }\n  .ds-stat {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--space-4) 0;\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h1);\n  }\n  .ds-tabs {\n    justify-content: flex-start;\n    overflow-x: auto;\n    padding-left: var(--border-width);\n  }\n  .ds-tabs__tab {\n    padding: var(--space-2) var(--space-2);\n    white-space: nowrap;\n  }\n  .ds-table {\n    min-width: 60ch;\n  }\n  .ds-form__field {\n    grid-template-columns: 1fr;\n  }\n  .ds-form__label {\n    text-align: left;\n  }\n  .ds-form__error,\n  .ds-form__hint {\n    grid-column: 1;\n  }\n  .ds-form__check,\n  .ds-form__actions {\n    margin-left: 0;\n  }\n  .ds-dialog {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-footer {\n    padding: 0 var(--space-3);\n  }\n  .ds-footer__inner {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-2);\n    padding: var(--space-4) 0;\n  }\n  .ds-footer__links {\n    flex-wrap: wrap;\n    gap: var(--space-1) var(--space-3);\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: flat design showcase 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__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Tour</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#journal\">Journal</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#plans\">Plans</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#trips\">Trips</a></li>\n    </ul>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <h1 class=\"ds-hero__title\">Every good walk starts with a plan</h1>\n    <div class=\"ds-hero__row\">\n      <p class=\"ds-hero__lead\">Routes, maps and weather for the weekend ahead.</p>\n      <a class=\"ds-button ds-button--inverse\" href=\"#plans\">Get started</a>\n    </div>\n    <div class=\"ds-hero__art\" aria-hidden=\"true\">\n      <div class=\"ds-hero__bar\"></div>\n      <div class=\"ds-hero__screen\">\n        <div class=\"ds-hero__block ds-hero__block--3 ds-hero__block--tall\"></div>\n        <div class=\"ds-hero__block ds-hero__block--2\"></div>\n        <div class=\"ds-hero__block\"></div>\n      </div>\n    </div>\n  </div>\n\n  <p class=\"ds-strip\"><span class=\"ds-strip__title\">New this spring.</span> Forty coastal routes with tide times built in. <a class=\"ds-link\" href=\"#journal\">Read more</a></p>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-section__inner\">\n      <div class=\"ds-feature\">\n        <div class=\"ds-feature__copy\">\n          <h2 class=\"ds-feature__title\">Draw a route in a minute</h2>\n          <p class=\"ds-feature__text\">Tap the start, tap the summit, and chronoskin follows the paths between them. Distance and climb update as you go.</p>\n          <a class=\"ds-link ds-link--plus\" href=\"#trip\">Plan a trip</a>\n        </div>\n        <div class=\"ds-feature__art\">\n          <svg class=\"ds-feature__icon\" viewBox=\"0 0 48 48\" width=\"88\" height=\"88\" aria-hidden=\"true\"><path d=\"M8 38c8-2 6-12 14-14s8-10 18-14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><circle cx=\"8\" cy=\"38\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><circle cx=\"40\" cy=\"10\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n        </div>\n      </div>\n      <div class=\"ds-feature ds-feature--flip\">\n        <div class=\"ds-feature__copy\">\n          <h2 class=\"ds-feature__title\">Maps that work without signal</h2>\n          <p class=\"ds-feature__text\">Save a region before you leave and the whole map travels in your pocket, contours and all.</p>\n          <a class=\"ds-link ds-link--plus\" href=\"#plans\">Compare plans</a>\n        </div>\n        <div class=\"ds-feature__art ds-feature__art--3\">\n          <svg class=\"ds-feature__icon\" viewBox=\"0 0 48 48\" width=\"88\" height=\"88\" aria-hidden=\"true\"><path d=\"M6 12l12-4 12 4 12-4v28l-12 4-12-4-12 4z M18 8v28 M30 12v28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n        </div>\n      </div>\n      <div class=\"ds-feature\">\n        <div class=\"ds-feature__copy\">\n          <h2 class=\"ds-feature__title\">Walk it together</h2>\n          <p class=\"ds-feature__text\">Share a trip with the group, agree a meeting point, and see who has packed the stove.</p>\n          <a class=\"ds-link ds-link--plus\" href=\"#trips\">See the trips</a>\n        </div>\n        <div class=\"ds-feature__art ds-feature__art--4\">\n          <svg class=\"ds-feature__icon\" viewBox=\"0 0 48 48\" width=\"88\" height=\"88\" aria-hidden=\"true\"><circle cx=\"17\" cy=\"16\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><circle cx=\"33\" cy=\"18\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M5 40c0-8 5-12 12-12s12 4 12 12 M31 28c6 0 12 3 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--alt\">\n    <div class=\"ds-section__inner\">\n      <h2 class=\"ds-section__title\">Packed for any weather</h2>\n      <p class=\"ds-section__lead\">Four things every trip gets, on every plan.</p>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile\">\n            <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\"><path d=\"M24 6l14 30H10z M24 6v30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          </div>\n          <h3 class=\"ds-grid__title\">Elevation</h3>\n          <p class=\"ds-grid__text\">A profile of every climb before you set off.</p>\n          <a class=\"ds-link\" href=\"#trip\">See a profile</a>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--2\">\n            <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\"><circle cx=\"24\" cy=\"24\" r=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M24 6v6 M24 36v6 M6 24h6 M36 24h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          </div>\n          <h3 class=\"ds-grid__title\">Forecast</h3>\n          <p class=\"ds-grid__text\">Hour by hour, for the hill and not the town.</p>\n          <a class=\"ds-link\" href=\"#plans\">Check a summit</a>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--3\">\n            <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\"><path d=\"M12 10h24v30H12z M18 18h12 M18 25h12 M18 32h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          </div>\n          <h3 class=\"ds-grid__title\">Kit lists</h3>\n          <p class=\"ds-grid__text\">A checklist that knows the season and the distance.</p>\n          <a class=\"ds-link\" href=\"#journal\">Read the list</a>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--4\">\n            <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\"><path d=\"M24 42s-12-12-12-21a12 12 0 0 1 24 0c0 9-12 21-12 21z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><circle cx=\"24\" cy=\"21\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          </div>\n          <h3 class=\"ds-grid__title\">Check-ins</h3>\n          <p class=\"ds-grid__text\">Let someone at home know you are down safely.</p>\n          <a class=\"ds-link\" href=\"#trips\">How it works</a>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-section__inner\">\n      <h2 class=\"ds-section__title\">From the trail journal</h2>\n      <p class=\"ds-section__lead\">Notes from recent walks and what changed in the maps.</p>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">9 May 2015 · Journal</span>\n          <div class=\"ds-list__body\">\n            <a class=\"ds-list__title\" href=\"#journal\">Made by people who get lost</a>\n            <p class=\"ds-list__text\">How a spreadsheet of walks between four friends became six hundred routes.</p>\n          </div>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">28 April 2015 · Maps</span>\n          <div class=\"ds-list__body\">\n            <a class=\"ds-list__title\" href=\"#journal\">Footbridges and fords are now marked on every map</a>\n            <p class=\"ds-list__text\">River crossings show their own symbol, with a note after heavy rain.</p>\n          </div>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">14 April 2015 · Journal</span>\n          <div class=\"ds-list__body\">\n            <a class=\"ds-list__title\" href=\"#journal\">What we carry on a winter day out</a>\n            <p class=\"ds-list__text\">A short kit list, argued over by the whole team.</p>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--fill ds-section--compact\">\n    <div class=\"ds-section__inner\">\n      <h2 class=\"ds-section__title\">The hills are not going anywhere</h2>\n      <p class=\"ds-section__lead\">But Saturday is. Plan the first walk now.</p>\n      <a class=\"ds-button ds-button--inverse ds-button--large\" href=\"#plans\">Get started</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"journal\">\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__inner\">\n      <div class=\"ds-page-header__copy\">\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Journal</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">9 May 2015</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Trail journal</h1>\n        <p class=\"ds-page-header__text\">Notes from recent walks and what changed in the maps.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#trip\">Plan a walk</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-section ds-section--compact\">\n    <div class=\"ds-section__inner ds-section__inner--narrow ds-stack ds-stack--tight\">\n      <div class=\"ds-badgerow\" data-component=\"badge\">\n        <span class=\"ds-badge\">New</span>\n        <span class=\"ds-badge ds-badge--alt\">Beta</span>\n        <span class=\"ds-badge ds-badge--quiet\">27</span>\n        <span class=\"ds-badge ds-badge--success\">Open</span>\n        <span class=\"ds-badge ds-badge--warning\">Muddy</span>\n        <span class=\"ds-badge ds-badge--danger\">Closed</span>\n      </div>\n      <article class=\"ds-prose\" data-component=\"typography\">\n        <h1>Made by people who get lost</h1>\n        <p class=\"ds-prose__lead\">chronoskin began as a spreadsheet of walks shared between four friends.</p>\n        <p>It is still built the same way: one route at a time, checked on foot. We would rather list <strong>six hundred good walks</strong> than six thousand untested ones.</p>\n        <h2>What a route includes</h2>\n        <ul>\n          <li>A line you can follow on the map</li>\n          <li>Start point, parking and the nearest bus stop</li>\n          <li>Notes from the last person who walked it</li>\n        </ul>\n        <p>Each route also carries one of the labels above. Green means the path was open when it was last walked, amber that it was passable but wet, red that a bridge or a gate was shut.</p>\n        <h3>Bring your own tracks</h3>\n        <p>Drop a file from your watch onto the map, or send it to <code>import@chronoskin.example</code>, and it becomes a route you can share.</p>\n      </article>\n      <p class=\"ds-linkrow\" data-component=\"links\">\n        <a class=\"ds-link\" href=\"#journal\">Fords and footbridges</a>\n        <a class=\"ds-link is-visited\" href=\"#journal\">A winter kit list</a>\n        <a class=\"ds-link is-hover\" href=\"#trips\">Three ridge walks</a>\n        <a class=\"ds-link is-active\" href=\"#plans\">Go offline</a>\n        <a class=\"ds-link ds-link--quiet\" href=\"#home\">Back to the tour</a>\n      </p>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"plans\">\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__inner\">\n      <div class=\"ds-page-header__copy\">\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Plans</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Pick a plan</h1>\n        <p class=\"ds-page-header__text\">Start free. Upgrade when the walks get longer.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#trips\">Start free</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-section ds-section--compact\">\n    <div class=\"ds-section__inner ds-stack\">\n      <div class=\"ds-panelrow\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Day walker</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-panel__figure\">$0</span>\n            <p>Ten saved routes and one offline region.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#trips\">Start free</a>\n          </div>\n        </section>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Rambler</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-panel__figure\">$4</span>\n            <p>Unlimited routes, every region, summit forecasts.</p>\n            <a class=\"ds-button\" href=\"#trips\">Choose Rambler</a>\n          </div>\n        </section>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Club</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-panel__figure\">$15</span>\n            <p>Shared trips and kit lists for up to forty members.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#trips\">Choose Club</a>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-table__wrap\">\n        <table class=\"ds-table\">\n          <caption class=\"ds-table__caption\">Prices per month. Every plan can be cancelled at any time.</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">What you get</th>\n              <th scope=\"col\">Day walker</th>\n              <th scope=\"col\">Rambler</th>\n              <th scope=\"col\">Club</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr><th scope=\"row\">Saved routes</th><td>10</td><td>Unlimited</td><td>Unlimited</td></tr>\n            <tr><th scope=\"row\">Offline regions</th><td>1</td><td>All</td><td>All</td></tr>\n            <tr><th scope=\"row\">Summit forecasts</th><td>No</td><td>Yes</td><td>Yes</td></tr>\n            <tr><th scope=\"row\">Shared trips</th><td>No</td><td>Up to 6 walkers</td><td>Up to 40 members</td></tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--fill ds-section--compact\">\n    <div class=\"ds-section__inner\">\n      <h2 class=\"ds-section__title\">Not sure yet?</h2>\n      <p class=\"ds-section__lead\">Take the tour first. It is one page long.</p>\n      <a class=\"ds-button ds-button--inverse ds-button--large\" href=\"#home\">See the tour</a>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"trips\">\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-page-header__inner\">\n      <div class=\"ds-page-header__copy\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Trips</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Summer 2015</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Trips</h1>\n        <p class=\"ds-page-header__text\">Everything planned between June and August.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#trips\">Print</a>\n        <a class=\"ds-button\" href=\"#trip\">New trip</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-section ds-section--compact\">\n    <div class=\"ds-section__inner ds-columns\">\n      <div class=\"ds-columns__side\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Seasons</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">4</span><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Spring 2015</a></li>\n            <li class=\"ds-sidebar__item is-current\"><span class=\"ds-sidebar__count\">11</span>Summer 2015</li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">6</span><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Autumn 2015</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">0</span><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Winter 2015</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">19</span><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Archive</a></li>\n          </ul>\n        </aside>\n      </div>\n      <div class=\"ds-columns__main ds-stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab ds-tabs__tab--first is-current\" href=\"#trips\">All trips</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#trips\">Confirmed</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#trips\">Waiting</a></li>\n          <li><a class=\"ds-tabs__tab ds-tabs__tab--last\" href=\"#trips\">Cancelled</a></li>\n        </ul>\n\n        <ul class=\"ds-stat\" data-component=\"stats\">\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">11</span><span class=\"ds-stat__label\">Trips planned</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">164</span><span class=\"ds-stat__label\">Kilometres</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">7,930</span><span class=\"ds-stat__label\">Metres of climb</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">23</span><span class=\"ds-stat__label\">Walkers</span></li>\n        </ul>\n\n        <div>\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <caption class=\"ds-table__caption\">Distances in kilometres. Showing 5 of 11 trips.</caption>\n              <thead>\n                <tr>\n                  <th scope=\"col\">Trip</th>\n                  <th scope=\"col\">Region</th>\n                  <th scope=\"col\">Date</th>\n                  <th scope=\"col\">Status</th>\n                  <th scope=\"col\" class=\"ds-table__num\">Distance</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\"><a class=\"ds-table__link\" href=\"#trip\">Saddle and two tarns</a></th><td>Northern fells</td><td>6 June 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">14.5</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-table__link\" href=\"#trip\">Estuary at low tide</a></th><td>West coast</td><td>20 June 2015</td><td><span class=\"ds-badge ds-badge--warning\">Waiting</span></td><td class=\"ds-table__num\">9.0</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-table__link\" href=\"#trip\">Old drove road</a></th><td>Border hills</td><td>4 July 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">22.5</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-table__link\" href=\"#trip\">Quarry loop</a></th><td>Slate valleys</td><td>18 July 2015</td><td><span class=\"ds-badge ds-badge--danger\">Cancelled</span></td><td class=\"ds-table__num\">11.0</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-table__link\" href=\"#trip\">Lighthouse and back</a></th><td>West coast</td><td>1 August 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">17.5</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#trips\">‹ Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#trips\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#trips\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#trips\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#trips\">Next ›</a></li>\n          </ul>\n        </div>\n\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__disc\">\n            <svg class=\"ds-empty__icon\" viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\"><path d=\"M6 38l12-22 8 14 5-8 11 16z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          </div>\n          <h2 class=\"ds-empty__title\">No trips this winter</h2>\n          <p class=\"ds-empty__text\">Trips you plan for the cold months will appear here.</p>\n          <a class=\"ds-button\" href=\"#trip\">Plan a winter walk</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"trip\">\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__inner\">\n      <div class=\"ds-page-header__copy\">\n        <ol class=\"ds-breadcrumb\">\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n          <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#trips\">Trips</a></li>\n          <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Estuary at low tide</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Estuary at low tide</h1>\n        <p class=\"ds-page-header__text\">West coast, 20 June 2015, 9.0 km. Waiting for two walkers.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#trips\">All trips</a>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"ds-section ds-section--compact\">\n    <div class=\"ds-section__inner ds-columns\">\n      <div class=\"ds-columns__half ds-stack ds-stack--tight\">\n        <div class=\"ds-prose\">\n          <h2>Trip details</h2>\n          <p>These details are sent to everyone on the trip. Changes go out with the next reminder.</p>\n        </div>\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Heads up.</span> Walkers who have already confirmed will be asked again if the date changes.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">We could not save the trip.</span> Check the highlighted field and try again.</p>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#trip\">\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Trip name</span><input class=\"ds-form__input\" type=\"text\" value=\"Estuary at low tide\"></label>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Meeting point</span><input class=\"ds-form__input is-focus\" type=\"text\" placeholder=\"Car park or station\"></label>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Leader's email</span><input class=\"ds-form__input is-error\" type=\"text\" value=\"imogen@walkers\"><span class=\"ds-form__error\">Enter a complete email address.</span></label>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Pace</span>\n            <select class=\"ds-form__select\"><option>Steady, with stops</option><option>Brisk</option><option>Slow and sociable</option></select>\n          </label>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Notes</span><textarea class=\"ds-form__textarea\" rows=\"3\" placeholder=\"Bring waterproofs and a packed lunch\"></textarea><span class=\"ds-form__hint\">Optional. Shown at the top of the trip page.</span></label>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Email a reminder two days before. <a class=\"ds-link\" href=\"#trip\">Edit the reminder</a></span></label>\n          <div class=\"ds-form__actions\">\n            <button class=\"ds-button\" type=\"submit\">Save trip</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#trips\">Cancel</a>\n          </div>\n        </form>\n      </div>\n\n      <div class=\"ds-columns__half ds-stack ds-stack--tight\">\n        <div class=\"ds-buttonrow\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#trip\">Invite walkers</a>\n          <a class=\"ds-button is-hover\" href=\"#trip\">Share</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#trip\">Print map</a>\n          <a class=\"ds-button ds-button--danger\" href=\"#trip\">Cancel trip</a>\n          <button class=\"ds-button\" type=\"button\" disabled>Start walk</button>\n        </div>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\">\n            <caption class=\"ds-table__caption\">Four of six places taken.</caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">Walker</th>\n                <th scope=\"col\">Bringing</th>\n                <th scope=\"col\">Reply</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr><th scope=\"row\">Imogen Vale</th><td>Map, first aid kit</td><td><span class=\"ds-badge ds-badge--success\">Coming</span></td></tr>\n              <tr><th scope=\"row\">Tomas Brandt</th><td>Stove and tea</td><td><span class=\"ds-badge ds-badge--success\">Coming</span></td></tr>\n              <tr><th scope=\"row\">Dalia Wren</th><td>Not said yet</td><td><span class=\"ds-badge ds-badge--warning\">Waiting</span></td></tr>\n              <tr><th scope=\"row\">Ansel Rowe</th><td>Not said yet</td><td><span class=\"ds-badge ds-badge--warning\">Waiting</span></td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n            <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Cancel this trip?</h2>\n            <div class=\"ds-dialog__body\">\n              <p>Four walkers will be told that Estuary at low tide is off.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary ds-dialog__action\" href=\"#trip\">Keep it</a>\n              <a class=\"ds-button ds-button--danger ds-dialog__action\" href=\"#trips\">Cancel trip</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <span class=\"ds-footer__brand\">chronoskin</span>\n    <ul class=\"ds-footer__links\">\n      <li><a class=\"ds-footer__link\" href=\"#home\">Tour</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#journal\">Journal</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#plans\">Plans</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#trips\">Trips</a></li>\n      <li><a class=\"ds-footer__link\" href=\"#home\">Privacy and terms</a></li>\n    </ul>\n    <span>© 2015 chronoskin</span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.flat-design.landing.s02.p02.t02.u02\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"flat-design\",\n    \"years\": [\n      2013,\n      2016\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-fl-2222\",\n  \"short\": \"v1-fl-2222\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f8f8f8;\n  --color-surface-strong: #efefef;\n  --color-bar: #ffffff;\n  --color-bar-text: #2e2f33;\n  --color-bar-alt: #262626;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #262626;\n  --color-inverse-text: #ffffff;\n  --color-text: #2e2f33;\n  --color-text-muted: #919496;\n  --color-heading: #503750;\n  --color-heading-alt: #f037a5;\n  --color-link: #d65a3e;\n  --color-link-quiet: #919496;\n  --color-link-visited: #d65a3e;\n  --color-link-hover: #2e2f33;\n  --color-link-active: #000000;\n  --color-border: #d9dadc;\n  --color-border-strong: #c1c3c6;\n  --color-border-muted: #efefef;\n  --color-accent: #f037a5;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #f8c433;\n  --color-fill-1: #d65a3e;\n  --color-fill-2: #f8c433;\n  --color-fill-3: #503750;\n  --color-fill-4: #2ebd59;\n  --color-button: #2ebd59;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #2e2f33;\n  --color-input: #ffffff;\n  --color-input-text: #2e2f33;\n  --color-input-border: #c1c3c6;\n  --color-disabled: #efefef;\n  --color-disabled-text: #919496;\n  --color-danger: #e81020;\n  --color-danger-surface: #fff8f8;\n  --color-success: #2ebd59;\n  --color-warning: #f59b23;\n  --color-notice: #f8c433;\n  --color-notice-text: #2e2f33;\n  --color-focus: #2ebd59;\n  --color-shadow: rgb(0 0 0 / 0.15);\n  --color-overlay: rgb(0 0 0 / 0.35);\n}\n\n/* @part type */\n:root {\n  --font-body: Raleway, Montserrat, Avenir, \"Avenir Next\", \"Century Gothic\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Raleway, Montserrat, Avenir, \"Avenir Next\", \"Century Gothic\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-ui: Raleway, Montserrat, Avenir, \"Avenir Next\", \"Century Gothic\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 13px;\n  --text-small: 10px;\n  --text-ui: 12px;\n  --text-large: 16px;\n  --text-display: 44px;\n  --text-h1: 32px;\n  --text-h2: 22px;\n  --text-h3: 16px;\n  --line-body: 1.6;\n  --line-heading: 1.3;\n  --line-display: 1.05;\n  --weight-body: 300;\n  --weight-bold: 500;\n  --weight-heading: 300;\n  --weight-display: 300;\n  --weight-ui: 500;\n  --heading-transform: none;\n  --heading-tracking: 0.5px;\n  --display-tracking: 1px;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 20px;\n  --radius-panel: 8px;\n  --radius-pill: 500px;\n  --radius-page: 12px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, white);\n  --fill-button-secondary: transparent;\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}
