{
  "id": "v1-fl-3333",
  "long_id": "v1.flat-design.landing.s03.p03.t03.u03",
  "name": "Flat design mosaic",
  "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 tile mosaic of flat design, common from 2013 to 2016 on corporate home pages, media services and anything touched by the \"modern UI\" of the period: under a compact two-row header the first screens are a wall of touching colour rectangles of unequal size, the largest holding the headline and a sign-up form. There is no centred hero, no illustration band and no white space between tiles; below the mosaic the page turns into dense, left-aligned columns of text on white and grey. Everything is square and flat, with no gloss, gradient, shadow or rounding, and colour is used as whole blocks rather than as accents.",
  "url": "https://chrono.skin/s/v1-fl-3333",
  "preview_url": "https://chrono.skin/s/v1-fl-3333/specimen.html",
  "files": {
    "STYLE.md": "# Flat design mosaic\n\n## Summary\n\nThis is the tile mosaic of flat design, common from 2013 to 2016 on corporate home pages, media services and anything touched by the \"modern UI\" of the period: under a compact two-row header the first screens are a wall of touching colour rectangles of unequal size, the largest holding the headline and a sign-up form. There is no centred hero, no illustration band and no white space between tiles; below the mosaic the page turns into dense, left-aligned columns of text on white and grey. Everything is square and flat, with no gloss, gradient, shadow or rounding, and colour is used as whole blocks rather than as accents.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. The header, the content bands and the footer keep their content within `--size-page` (1216px) with `--space-5` (32px) at each side; the mosaic, the page header and the workspace of an inner page run edge to edge with no outer margin.\n- Navigation is a compact two-row header on `--fill-bar` with a 1px bottom rule: the first row (`--size-head`, 56px) has the wordmark at the left and a search box (`--size-search`, 320px) at the right; the second row has the section links at the left and one or two utility links at the right. There is no button in the header.\n- The home page opens with the mosaic: `.ds-hero` and `.ds-grid` are both four-column grids of touching tiles, rows at least `--size-tile` (220px) high, gap 0. The first tile spans two columns and two rows, is filled with `--color-fill-1` and holds the title, a lead line and the sign-up form; beside it are two icon tiles and one two-column `--color-fill-4` tile with a quotation. `.ds-grid` continues directly underneath with a tall tile, a wide tile and single tiles. Text in a tile sits at the bottom left; an icon sits in the centre.\n- Under the mosaic come `.ds-band` blocks on white and `--color-surface-alt`. Inside, `.ds-cols` is a four-column grid with a 32px gutter: a narrow column with the section title and a panel, a double column of running text, a narrow column of links and actions. News is a three-column `.ds-list`. Text is left-aligned everywhere; nothing is centred.\n- Inner pages have no mosaic and no hero. Directly under the header comes `.ds-toolbar`, a thin `--fill-bar-alt` strip holding the `.ds-breadcrumb`; then `.ds-page-header`, whose title stands on a `--color-fill-1` tile exactly as wide as the sidebar (`--size-sidebar`, 280px), with the one-line description on a grey strip beside it and the actions at the right end. Below, `.ds-workspace` keeps that left column as a full-height grey rail with the `.ds-sidebar` links, and puts the work to its right: the `.ds-stat` tiles first, then `.ds-tabs` standing directly on the table, the pagination at the right under the table, then the form in a panel beside its notices. The grey link-column footer is unchanged.\n- Views. The specimen is an evening-course school with five views. `home` is the mosaic: the sign-up tile, the subject tiles and the noticeboard list. `about` is a text page: two price panels at the left, the running text in the double column, and the timetable labels with further links at the right. `enrolments` is the list page: the term rail, the figure tiles, tabs standing on the course table with its pagination, and an empty strip for a term with no bookings. `course` is one booked course: what to expect and the action row beside the session table, with the withdraw dialog open below. `details` is the student details form in a panel beside its notices. 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. The mosaic folds to two columns and the rail lies above the work.\n- Spacing scale: `--space-1` 4px (between a label and its control, between tabs, footer rows), `--space-2` 8px (table cell and button vertical padding, between adjacent buttons, sidebar rows), `--space-3` 12px (paragraph gap, control and cell horizontal padding, between form rows), `--space-4` 20px (panel and stat tile padding, button horizontal padding, between form columns), `--space-5` 32px (page side padding, tile padding, column gutter, between stacked blocks), `--space-6` 48px (band padding, hero tile padding, around the dialog band).\n- Other sizes: `--size-icon` 64px (tile and empty-state icons), `--size-dialog` 640px (measure of the dialog text).\n\n## Typography and colour roles\n\n- Colour family: the 2014 corporate home page (one blue, black text, grey bands and saturated product tiles); the purple and yellow are read from its screenshot.\n- `--color-page`, `--color-canvas` and `--color-surface` are white `#ffffff`; `--color-surface-alt` `#f0f0f0` is the alternate band and row, the plain tile, the page-header strip, the rail and the footer; `--color-surface-strong` `#e0e0e0` is the table head, the panel title strip, the idle tabs and the second plain tile. `--color-bar` `#eeeeee` with `--color-bar-text` `#1a1a1a` is the header. `--color-bar-alt` `#1570a6` with `--color-bar-alt-text` `#ffffff` is the breadcrumb toolbar; nothing else is put on it and its text takes no other colour.\n- Text and headings are near-black `#1a1a1a` (`--color-text`, `--color-heading`); `--color-heading-alt` is `#000000` (panel and sidebar titles, h3); meta text is `--color-text-muted` `#969696`.\n- `--color-button`, `--color-link`, `--color-link-visited` and `--color-focus` are the one blue `#1570a6`; hover is the darker `--color-link-hover` `#106088`, active `#1a1a1a`. Quiet links are `#1a1a1a`. The secondary button is blue text and outline on a grey block. The current tab, the current page number, the line under the tabs and the current rail marker are `--color-button`.\n- `--color-fill-1` `#108010` (green) is the first tile and the title tile of an inner page; `--color-fill-4` `#5133ab` (purple) is the other fill that carries text. Text on either, and on `--color-inverse` `#1a1a1a`, is `--color-inverse-text`. `--color-fill-2` `#e04000` (orange) and `--color-fill-3` `#1570a6` (blue) are icon tiles: an icon only, never running text, and the icon (`.ds-grid__icon`) sits on a round plate, `--color-inverse` mixed in at 40%, so that the layout stays readable when the palette is exchanged for one whose second or third fill is pale. On a fill the button is `.ds-button--inverse`: `--color-inverse-text` with `--color-fill-1` text.\n- `--color-accent` `#5133ab` (purple, white text) is the default tag, `--color-accent-alt` `#ffbb00` (yellow) the second: a 30% tint of it over `--color-surface` with a yellow outline and `--color-heading` text. Status: `--color-success` `#108010`, `--color-warning` `#e04000`, `--color-danger` `#e81020`, all with `--color-accent-text`.\n- `--color-notice` `#e8f0f0` with `--color-notice-text` `#106088`; the error notice is red on `--color-danger-surface` `#f8f8f8` with a red border.\n- Borders: `--color-border` `#d8e0e0` (table grid, panel outline, rail edge), `--color-border-muted` `#e0e0e0`; `--color-border-strong` and `--color-input-border` are the mid grey `#969696` (control outlines, the rule above a news item). The footer is light: `--color-surface-alt` with `--color-link` links and `--color-heading` titles; `--color-inverse` appears only as a tile (one mosaic tile and one stat).\n- One plain humanist sans at regular weight, after the 2014 payments page with the sizes of the corporate home page: `--font-body`, `--font-heading` and `--font-ui` are Source Sans Pro, Lucida Grande, Segoe UI (the references used Segoe UI and commercial faces). `--font-mono` is Consolas.\n- Dense: `--text-base` and `--text-ui` 14px at `--line-body` 1.5, `--text-small` 12px (meta, tags, breadcrumb, footer base), `--text-large` 16px (lead lines, news titles, footer titles).\n- Headings are regular weight and modest: `--weight-heading` and `--weight-display` 400; `--text-display` 38px (the first tile's title and the stat figures), `--text-h1` 26px (band titles, the inner page title, the dialog title), `--text-h2` 20px (tile titles, the quotation, the wordmark), `--text-h3` 16px. Hierarchy is size only.\n- `--weight-ui` is 400: buttons, tabs and navigation are not bold. `--weight-bold` 600 is for labels, table heads and row heads, news titles, panel and sidebar titles and the \"more\" link in a tile.\n- Sentence case, no tracking: `--ui-transform` and `--heading-transform` are `none`, both tracking tokens 0. All three link decorations are `none`.\n- Everything is square: `--radius-control`, `--radius-panel`, `--radius-page` and also `--radius-pill` are 0, so badges are rectangular tags. The mosaic parts its tiles by half of `--radius-page`, which is nothing here: with a rounder surface set the tiles separate just enough for their corners to read.\n- Buttons are solid: `--fill-button` is the flat `--color-button`, hovered 15% darker and ringed by `--shadow-control-hover`, a hard 1px line in `--color-border-strong`. The secondary button is a grey block: `--fill-button-secondary` is `--color-button-secondary` darkened 12%, inside a 2px outline. Panels and the dialog band are `--fill-panel`, the grey `--color-surface-alt`.\n- Lines are heavy: `--border-width` 2px for rules, the table grid and control outlines; `--border-width-strong` 4px for the current navigation item, the line under the tabs, the rule above a news item and the current rail marker.\n- One-off shades made with `color-mix()` because the vocabulary has no token: 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 lead in the first tile, the source line under the quotation and idle breadcrumb links use `opacity: 0.8`.\n- Nothing is blurred and nothing casts a shadow at rest: apart from the hover ring every shadow is `none`, every fill a flat colour. `--focus-ring` is `1px dotted` in `--color-focus`. `--transition` is `none`.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the font, text colour and white page. It has no width of its own.\n- `.ds-brand`: the site's mark and name, at the left of the header's first row. `.ds-brand__mark` is a 28px 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-h2` and `--weight-bold` (not the heading weight: the light headings of several token sets are too weak beside the tile) in `--color-heading`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the two-row header. `.ds-nav__top` holds the `.ds-brand` and the `.ds-nav__search` box; `.ds-nav__row` holds `.ds-nav__links` of `.ds-nav__link` (current item: `is-current`, link colour with a `--border-width-strong` underline; the specimen marks it by the view that is showing, one `:has()` rule per view) and `.ds-nav__aside` for utility links.\n- `.ds-hero`: the first row of the mosaic. `.ds-hero__main` is the two-by-two `--color-fill-1` tile with `.ds-hero__title` (38px), `.ds-hero__lead` and a compact `.ds-form` without labels whose submit is a `.ds-button--inverse`. `.ds-hero__tile` is an icon tile (`--3` for the third fill); `.ds-hero__tile--quote` is the two-column `--color-fill-4` tile with `.ds-hero__quote` and `.ds-hero__source`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__tile` is the colour tile over the rail holding `.ds-page-header__title` (26px, white); `.ds-page-header__copy` holds one `.ds-page-header__text` line on the grey strip; `.ds-page-header__actions` sits at the right with at most one primary and one `--secondary` button. Place it directly after `.ds-toolbar`.\n- `.ds-toolbar`: thin secondary bar under the header of an inner page; holds only the breadcrumb.\n- `.ds-workspace`: body of an inner page: `.ds-workspace__rail` (grey, 280px, full height, 1px right edge) and `.ds-workspace__main`.\n- `.ds-band`: block of ordinary content under the mosaic with a `.ds-band__inner` column; `--alt` is grey. `.ds-band__title` heads it, left-aligned. `.ds-cols` is the four-column grid; `.ds-cols__wide` spans two columns. `.ds-stack` stacks blocks 32px apart (`--tight`: 20px).\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small chevron. `.ds-linkrow` lays links in a row. Never on a colour tile: there use `.ds-grid__more`.\n- `.ds-button`: flat square button, 14px regular. Variants: `--secondary` (a grey block with a 2px outline), `--danger` (flat `--color-danger` with white text, 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` spaces buttons 12px apart.\n- `.ds-form`: two-column form grid. `.ds-form__field` stacks `.ds-form__label` over one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`; `--wide` spans both columns. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions` span both columns. On an inner page the form sits inside a `.ds-panel`.\n- `.ds-table`: ruled grid: every cell has a `--border-width` border, the head is a grey `--color-surface-strong` strip with bold text, alternate rows are grey, row heads are bold. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note above. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window. `.ds-tablefoot` is the row under the table with a count at the left and the pagination at the right.\n- `.ds-list`: three columns of news. Each `.ds-list__item` hangs from a `--border-width-strong` rule: `.ds-list__meta` first, then a bold `.ds-list__title` and `.ds-list__text`.\n- `.ds-panel`: square box on `--fill-panel` with a `--border-width` border, a grey `.ds-panel__title` strip and `.ds-panel__body`. `.ds-panel__figure` is a large numeral.\n- `.ds-stat`: the row of summary figures; `.ds-stat` is the row of four touching tiles and each figure is a `.ds-stat__item` with a `.ds-stat__figure` (38px) over a `.ds-stat__label`. Items are grey by default; `--1`, `--4` and `--inverse` fill them with `--color-fill-1`, `--color-fill-4` and the inverse colour with white text. Never use the second or third fill for a stat.\n- `.ds-grid`: the mosaic. Each `.ds-grid__cell` is a tile filled with `--color-fill-1` (`--2`, `--3`, `--4` for the other fills, `--inverse` for the dark tile, `--plain` and `--strong` for grey tiles with dark text), sized with `--wide` (two columns) and `--tall` (two rows). A text tile holds `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__more` link; an `--icon` tile holds only a centred `.ds-grid__icon`. Tiles touch; never add a gap, border or radius.\n- `.ds-tabs`: square `.ds-tabs__tab` blocks 4px apart standing on a `--border-width-strong` line in `--color-button`; the current one (`is-current`) is filled with `--color-button`. Place it directly on top of the table or view it switches.\n- `.ds-badge`: rectangular tag, 12px. Purple 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, places left), `--warning` (waiting, nearly full), `--danger` (withdrawn, full), all with white text. `.ds-badgerow` for several.\n- `.ds-sidebar`: the rail navigation of an inner page: `.ds-sidebar__title`, then a `.ds-sidebar__list` of full-width `.ds-sidebar__item` rows with optional `.ds-sidebar__count`; the current row (`is-current`) is white with a `--border-width-strong` `--color-button` marker at its left edge.\n- `.ds-notice`: flat message strip in `--color-notice`; `--error` has a `--border-width` red border. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined outlined cells of `.ds-pagination__link`; `is-current` is filled with `--color-button`, `is-disabled` is grey. It sits at the right of `.ds-tablefoot`.\n- `.ds-breadcrumb`: 12px trail of `.ds-breadcrumb__item` separated by chevrons, inside `.ds-toolbar`; links are `.ds-breadcrumb__link` and inherit the toolbar's text colour, the last item is the bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: dimmed block (`--color-overlay`) crossed by a full-width `--fill-panel` band, `.ds-dialog__box`; its content is `.ds-dialog__inner`, a 640px measure with `.ds-dialog__title` (26px), `.ds-dialog__body` and right-aligned `.ds-dialog__actions`. Never a small floating box.\n- `.ds-empty`: a grey strip with `.ds-empty__icon` at the left, `.ds-empty__copy` (`.ds-empty__title`, `.ds-empty__text`) beside it and one button at the right.\n- `.ds-footer`: light grey block with `.ds-footer__cols` (four columns of `.ds-footer__title` and `.ds-footer__list` / `.ds-footer__item` / `.ds-footer__link`) and a right-aligned `.ds-footer__base` row with legal links and the copyright.\n\n## Never\n\n- `block-gap <= 48px`: tiles and bands touch; 48px is the largest space between two blocks.\n- `content-width >= 85%`: the page fills the viewport; there is no narrow centred column.\n- `font-weight <= 600`: headings are regular; 600 is only for labels and small titles.\n- `font-size >= 12px`: meta text and tags are the smallest text.\n- `font-size <= 38px`: the first tile's title is the largest text.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing = 0`: text is not tracked.\n- `uppercase-text <= 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 0%`: no reference underlines links.\n- `border-radius <= 0px`: the corporate reference has no rounded corner at all, and tiles must meet exactly.\n- `box-shadow-blur <= 0px`: the only shadow is the hard 1px ring of a hovered button; nothing is blurred.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 0%`: every background is one solid colour.\n- `border-width <= 4px`: rules are 2px; 4px marks the current item, the tab line and a news item.\n- `transition = none`: states change without a fade.\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 promotion is another `.ds-grid__cell` in the mosaic, sized with `--wide` or `--tall` so that rows still close without a hole; a new block of content is a `.ds-band` with `.ds-cols`. Text goes only on `--color-fill-1`, `--color-fill-4`, the inverse colour or the grey surfaces; the second and third fills take icons. A new box is a `.ds-panel` (1px border, grey title strip) or a flat grey strip, never a shadow, and every corner stays square through the radius tokens. On an inner page, new sections go in the rail's `.ds-sidebar` list and new views behind a tab. New actions are always `--color-button`. 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: 1216px;\n  --size-head: 56px;\n  --size-search: 320px;\n  --size-tile: 220px;\n  --size-sidebar: 280px;\n  --size-icon: 64px;\n  --size-dialog: 640px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 20px;\n  --space-5: 32px;\n  --space-6: 48px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\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 compact two-row header: wordmark and search above, links below */\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-5);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-nav__top {\n  min-height: var(--size-head);\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: calc(var(--space-4) + var(--space-2));\n  height: calc(var(--space-4) + var(--space-2));\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-h2);\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__search {\n  width: var(--size-search);\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) 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  line-height: var(--line-body);\n}\n.ds-nav__search::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-nav__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n}\n.ds-nav__links {\n  display: flex;\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-2) 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 course marks My courses */\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(#about:target) .ds-nav__link[href=\"#about\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#enrolments:target) .ds-nav__link[href=\"#enrolments\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#course:target) .ds-nav__link[href=\"#enrolments\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-page:has(#details:target) .ds-nav__link[href=\"#details\"] {\n  color: var(--color-link);\n  border-bottom-color: var(--color-link);\n}\n.ds-nav__aside {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* mosaic: colour tiles of unequal size, edge to edge; shared by the hero and the grid.\n   Square tiles touch; a surface set with a page radius parts them by half that radius so the corners read. */\n.ds-hero,\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: minmax(var(--size-tile), auto);\n  gap: calc(var(--radius-page) / 2);\n}\n.ds-grid {\n  margin-top: calc(var(--radius-page) / 2);\n}\n\n/* hero: the first tiles of the mosaic; the big one holds the title and the sign-up form */\n.ds-hero__main {\n  grid-column: span 2;\n  grid-row: span 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-5);\n  max-width: 46ch;\n  font-size: var(--text-large);\n  opacity: 0.8;\n}\n.ds-hero__main .ds-form {\n  max-width: 56ch;\n  color: inherit;\n}\n.ds-hero__tile {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-fill-2);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-hero__tile--3 {\n  background: var(--color-fill-3);\n}\n.ds-hero__tile--quote {\n  grid-column: span 2;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: var(--space-5) var(--space-6);\n  background: var(--color-fill-4);\n}\n.ds-hero__quote {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-hero__source {\n  margin: 0;\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n\n/* grid: the rest of the mosaic */\n.ds-grid__cell {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__cell--inverse {\n  background: var(--fill-inverse);\n}\n.ds-grid__cell--plain {\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n}\n.ds-grid__cell--strong {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-grid__cell--icon {\n  align-items: center;\n  justify-content: center;\n}\n.ds-grid__cell--wide {\n  grid-column: span 2;\n}\n.ds-grid__cell--tall {\n  grid-row: span 2;\n}\n.ds-grid__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\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.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__cell--plain .ds-grid__title,\n.ds-grid__cell--strong .ds-grid__title {\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0 0 var(--space-2);\n}\n.ds-grid__more {\n  color: inherit;\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more::after {\n  content: \" \\203A\";\n}\n\n/* band: a block of ordinary content under the mosaic, as wide as the header */\n.ds-band {\n  padding: var(--space-6) var(--space-5);\n  background: var(--color-canvas);\n}\n.ds-band--alt {\n  background: var(--color-surface-alt);\n}\n.ds-band__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-band__title {\n  margin: 0 0 var(--space-4);\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-cols {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-5);\n  align-items: start;\n}\n.ds-cols__wide {\n  grid-column: span 2;\n  min-width: 0;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n.ds-stack--tight {\n  gap: var(--space-4);\n}\n\n/* toolbar: the secondary bar under the header of an inner page; holds the breadcrumb */\n.ds-toolbar {\n  padding: var(--space-2) var(--space-5);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n\n/* page header: a colour title tile in the sidebar column, description and action on a grey strip beside it */\n.ds-page-header {\n  display: flex;\n  align-items: stretch;\n  background: var(--color-surface-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__tile {\n  flex: 0 0 var(--size-sidebar);\n  display: flex;\n  align-items: flex-end;\n  padding: var(--space-5) var(--space-4) var(--space-4) var(--space-5);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n}\n.ds-page-header__title {\n  margin: 0;\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__copy {\n  flex: 1 1 0;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-page-header__text {\n  margin: 0;\n  font-size: var(--text-large);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-5) var(--space-5) var(--space-4) 0;\n}\n\n/* workspace: the body of an inner page: a grey rail on the left, the work on the right */\n.ds-workspace {\n  display: flex;\n  align-items: stretch;\n  background: var(--color-canvas);\n}\n.ds-workspace__rail {\n  flex: 0 0 var(--size-sidebar);\n  padding: var(--space-4) 0 var(--space-6);\n  background: var(--color-surface-alt);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-workspace__main {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: var(--space-5) var(--space-5) var(--space-6);\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}\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}\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--more::after {\n  content: \" \\203A\";\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-3);\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  gap: var(--space-3);\n}\n\n/* form: fields in two columns, label above the control */\n.ds-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-3) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 0;\n}\n.ds-form__field--wide,\n.ds-form__check,\n.ds-form__actions {\n  grid-column: span 2;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\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-6);\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  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\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}\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-2);\n}\n\n/* table: a ruled grid with a grey head, every cell boxed */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-2) var(--space-3);\n  text-align: left;\n  border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-table tbody th {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-table tbody tr:nth-child(even) td,\n.ds-table tbody tr:nth-child(even) th {\n  background: var(--color-surface-alt);\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: top;\n  padding-bottom: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: left;\n}\n.ds-tablefoot {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  align-items: center;\n  justify-content: space-between;\n  margin-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n.ds-table__wrap {\n  overflow-x: auto;\n}\n\n/* list: three columns of news items, each hung from a strong rule */\n.ds-list {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  min-width: 0;\n  padding-top: var(--space-3);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-list__meta {\n  display: block;\n  margin-bottom: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\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 square outlined box with a grey title 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}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n  background: var(--color-surface-strong);\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-panel__body {\n  padding: var(--space-4);\n}\n.ds-panel__body p {\n  margin: 0 0 var(--space-3);\n}\n.ds-panel__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}\n\n/* stats: a row of touching tiles, one figure in each */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-radius: var(--radius-page);\n  overflow: hidden;\n}\n.ds-stat__item {\n  min-width: 0;\n  padding: var(--space-4);\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\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  font-size: var(--text-ui);\n}\n.ds-stat__item--1,\n.ds-stat__item--4,\n.ds-stat__item--inverse {\n  color: var(--color-inverse-text);\n}\n.ds-stat__item--1 {\n  background: var(--color-fill-1);\n}\n.ds-stat__item--4 {\n  background: var(--color-fill-4);\n}\n.ds-stat__item--inverse {\n  background: var(--fill-inverse);\n}\n.ds-stat__item--1 .ds-stat__figure,\n.ds-stat__item--4 .ds-stat__figure,\n.ds-stat__item--inverse .ds-stat__figure {\n  color: inherit;\n}\n\n/* tabs: square blocks standing on a strong line, the current one filled */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-button);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\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  gap: var(--space-2);\n}\n\n/* sidebar: the left rail of an inner page: full-width rows, the current one white with a marker */\n.ds-sidebar {\n  font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);\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}\n.ds-sidebar__item {\n  padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-5) - var(--border-width-strong));\n  border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-canvas);\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-2) 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}\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: joined outlined cells */\n.ds-pagination {\n  display: flex;\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-pagination__link {\n  display: block;\n  min-width: var(--space-5);\n  margin-left: calc(0 - var(--border-width));\n  padding: var(--space-1) var(--space-3);\n  background: var(--color-surface);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\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  background: var(--color-surface-alt);\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: sits in the toolbar and takes its text colour */\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  font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\\203A\";\n  margin-right: var(--space-2);\n}\n.ds-breadcrumb__link {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n  opacity: 0.8;\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n  opacity: 1;\n}\n.ds-breadcrumb__current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog: a white band across the full width of the dimmed area, its content in a centred measure */\n.ds-dialog {\n  padding: var(--space-6) 0;\n  background: var(--color-overlay);\n}\n.ds-dialog__box {\n  padding: var(--space-5) var(--space-5);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__inner {\n  max-width: var(--size-dialog);\n  margin: 0 auto;\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-h1);\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  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-top: var(--space-4);\n}\n\n/* empty state: a grey strip with the icon left, the message beside it and the action on the right */\n.ds-empty {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__icon {\n  flex: 0 0 auto;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  color: var(--color-text-muted);\n}\n.ds-empty__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-empty__title {\n  margin: 0;\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-empty__text {\n  margin: 0;\n}\n\n/* footer: a light grey block of link columns, not a dark one */\n.ds-footer {\n  padding: var(--space-5) var(--space-5) var(--space-4);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-ui);\n}\n.ds-footer__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-5);\n}\n.ds-footer__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-footer__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__item {\n  padding: var(--space-1) 0;\n}\n.ds-footer__link {\n  color: var(--color-link);\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-hover);\n}\n.ds-footer__base {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  margin-top: var(--space-5);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* narrow windows: the mosaic folds to two columns, the rail lies above the work, 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__top {\n    gap: var(--space-3);\n  }\n  .ds-nav__search {\n    flex: 1 1 0;\n    width: auto;\n    min-width: 0;\n  }\n  .ds-nav__row {\n    flex-wrap: wrap;\n    gap: 0 var(--space-4);\n  }\n  .ds-nav__links {\n    gap: var(--space-4);\n  }\n  .ds-nav__aside {\n    padding: var(--space-1) 0 var(--space-2);\n  }\n  .ds-hero,\n  .ds-grid {\n    grid-template-columns: 1fr 1fr;\n    grid-auto-rows: minmax(calc(var(--size-tile) / 1.5), auto);\n    grid-auto-flow: dense;\n  }\n  .ds-hero__main {\n    grid-row: auto;\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n  }\n  .ds-hero__tile--quote {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-grid__cell {\n    padding: var(--space-3);\n  }\n  .ds-grid__icon {\n    width: var(--space-6);\n    height: var(--space-6);\n    padding: var(--space-3);\n  }\n  .ds-band {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-cols,\n  .ds-list {\n    grid-template-columns: 1fr;\n  }\n  .ds-cols__wide {\n    grid-column: auto;\n  }\n  .ds-toolbar {\n    padding: var(--space-2) var(--space-3);\n  }\n  .ds-page-header {\n    flex-direction: column;\n  }\n  .ds-page-header__tile {\n    flex: 0 0 auto;\n    padding: var(--space-4) var(--space-3) var(--space-3);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n    padding: var(--space-3) var(--space-3) 0;\n  }\n  .ds-page-header__actions {\n    padding: var(--space-3);\n  }\n  .ds-workspace {\n    flex-direction: column;\n  }\n  .ds-workspace__rail {\n    flex: 0 0 auto;\n    padding: var(--space-2) 0;\n    border-right: 0;\n    border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  }\n  .ds-workspace__main {\n    flex: 0 0 auto;\n    padding: var(--space-4) var(--space-3) var(--space-5);\n  }\n  .ds-sidebar__title {\n    padding-left: var(--space-3);\n  }\n  .ds-sidebar__item {\n    padding-left: calc(var(--space-3) - var(--border-width-strong));\n    padding-right: var(--space-3);\n  }\n  .ds-stat {\n    grid-template-columns: 1fr 1fr;\n  }\n  .ds-stat__item {\n    padding: var(--space-3);\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h1);\n  }\n  .ds-tabs {\n    overflow-x: auto;\n  }\n  .ds-tabs__tab {\n    padding: var(--space-2) var(--space-3);\n    white-space: nowrap;\n  }\n  .ds-table {\n    min-width: 76ch;\n  }\n  .ds-form {\n    grid-template-columns: 1fr;\n  }\n  .ds-form__field--wide,\n  .ds-form__check,\n  .ds-form__actions {\n    grid-column: auto;\n  }\n  .ds-panel__body {\n    padding: var(--space-3);\n  }\n  .ds-empty {\n    flex-wrap: wrap;\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-empty__copy {\n    flex: 1 1 60%;\n  }\n  .ds-dialog {\n    padding: var(--space-4) 0;\n  }\n  .ds-dialog__box {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-dialog__title {\n    font-size: var(--text-h2);\n  }\n  .ds-footer {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-footer__cols {\n    grid-template-columns: 1fr 1fr;\n    gap: var(--space-4);\n  }\n  .ds-footer__base {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    gap: var(--space-2) var(--space-4);\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 mosaic 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    <div class=\"ds-nav__top\">\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      <input class=\"ds-nav__search\" type=\"text\" placeholder=\"Search courses\" aria-label=\"Search courses\">\n    </div>\n    <div class=\"ds-nav__row\">\n      <ul class=\"ds-nav__links\">\n        <li><a class=\"ds-nav__link\" href=\"#home\">Courses</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#about\">About</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#enrolments\">My courses</a></li>\n        <li><a class=\"ds-nav__link\" href=\"#details\">My details</a></li>\n      </ul>\n      <div class=\"ds-nav__aside\">\n        <a class=\"ds-link\" href=\"#about\">How a course works</a>\n        <a class=\"ds-link\" href=\"#enrolments\">Sign in</a>\n      </div>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__main\">\n      <h1 class=\"ds-hero__title\">Learn something by Thursday</h1>\n      <p class=\"ds-hero__lead\">Short evening courses taught live by people who do the work. Join free and take your first class this week.</p>\n      <form class=\"ds-form\" action=\"#enrolments\">\n        <label class=\"ds-form__field\"><input class=\"ds-form__input\" type=\"text\" placeholder=\"First name\" aria-label=\"First name\"></label>\n        <label class=\"ds-form__field\"><input class=\"ds-form__input\" type=\"text\" placeholder=\"Last name\" aria-label=\"Last name\"></label>\n        <label class=\"ds-form__field ds-form__field--wide\"><input class=\"ds-form__input\" type=\"text\" placeholder=\"Email\" aria-label=\"Email\"></label>\n        <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>Send me the weekly timetable.</span></label>\n        <div class=\"ds-form__actions\">\n          <a class=\"ds-button ds-button--inverse\" href=\"#enrolments\">Join free</a>\n        </div>\n      </form>\n    </div>\n    <div class=\"ds-hero__tile\" aria-hidden=\"true\">\n      <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"64\" height=\"64\"><path d=\"M6 12h36v24H6z M20 18l10 6-10 6z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n    </div>\n    <div class=\"ds-hero__tile ds-hero__tile--3\" aria-hidden=\"true\">\n      <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"64\" height=\"64\"><path d=\"M8 10h14v28H8z M26 10h14v28H26z M12 18h6 M12 24h6 M30 18h6 M30 24h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n    </div>\n    <div class=\"ds-hero__tile ds-hero__tile--quote\">\n      <p class=\"ds-hero__quote\">Four evenings, one finished chair, and I can finally read a joinery drawing.</p>\n      <p class=\"ds-hero__source\">A student of Woodwork basics, spring term</p>\n    </div>\n  </div>\n\n  <div class=\"ds-grid\" data-component=\"grid\">\n    <div class=\"ds-grid__cell ds-grid__cell--inverse ds-grid__cell--tall\">\n      <h2 class=\"ds-grid__title\">Make</h2>\n      <p class=\"ds-grid__text\">Woodwork, ceramics, bookbinding and print. Tools and materials are on the bench when you arrive.</p>\n      <a class=\"ds-grid__more\" href=\"#course\">38 courses</a>\n    </div>\n    <div class=\"ds-grid__cell ds-grid__cell--plain ds-grid__cell--wide\">\n      <h2 class=\"ds-grid__title\">New this term: Saturday studios</h2>\n      <p class=\"ds-grid__text\">A whole day with one tutor and six students. Lunch is included, homework is not.</p>\n      <a class=\"ds-link ds-link--more\" href=\"#course\">See a Saturday studio</a>\n    </div>\n    <div class=\"ds-grid__cell ds-grid__cell--2 ds-grid__cell--icon\">\n      <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"64\" height=\"64\" aria-hidden=\"true\"><path d=\"M10 38V10h28v28z M10 20h28 M20 20v18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n    </div>\n    <div class=\"ds-grid__cell ds-grid__cell--3 ds-grid__cell--icon\">\n      <svg class=\"ds-grid__icon\" viewBox=\"0 0 48 48\" width=\"64\" height=\"64\" aria-hidden=\"true\"><circle cx=\"24\" cy=\"24\" r=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M24 14v10l7 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n    </div>\n    <div class=\"ds-grid__cell ds-grid__cell--4\">\n      <h2 class=\"ds-grid__title\">Code</h2>\n      <p class=\"ds-grid__text\">From a first web page to a working app.</p>\n      <a class=\"ds-grid__more\" href=\"#enrolments\">21 courses</a>\n    </div>\n    <div class=\"ds-grid__cell ds-grid__cell--strong\">\n      <h2 class=\"ds-grid__title\">Gift a course</h2>\n      <p class=\"ds-grid__text\">Vouchers for any class, valid for a year.</p>\n      <a class=\"ds-link ds-link--more\" href=\"#about\">How vouchers work</a>\n    </div>\n  </div>\n\n  <div class=\"ds-band ds-band--alt\">\n    <div class=\"ds-band__inner\">\n      <h2 class=\"ds-band__title\">From the noticeboard</h2>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">11 May 2015 · Timetable</span>\n          <a class=\"ds-list__title\" href=\"#enrolments\">Summer term opens for booking on Monday</a>\n          <p class=\"ds-list__text\">Sixty-two courses, fourteen of them new, across three buildings.</p>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">30 April 2015 · Tutors</span>\n          <a class=\"ds-list__title\" href=\"#about\">Meet the letterpress printer taking over the print room</a>\n          <p class=\"ds-list__text\">She brings two presses and a strong opinion about ink.</p>\n        </li>\n        <li class=\"ds-list__item\">\n          <span class=\"ds-list__meta\">17 April 2015 · Students</span>\n          <a class=\"ds-list__title\" href=\"#about\">The spring show: what three hundred beginners made</a>\n          <p class=\"ds-list__text\">Chairs, bowls, a weather app and one very small boat.</p>\n        </li>\n      </ul>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"about\">\n  <div class=\"ds-toolbar\">\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">About</li>\n    </ol>\n  </div>\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__tile\">\n      <h1 class=\"ds-page-header__title\">About</h1>\n    </div>\n    <div class=\"ds-page-header__copy\">\n      <p class=\"ds-page-header__text\">How a course works, what it costs and what the labels mean.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button\" href=\"#enrolments\">Book a course</a>\n    </div>\n  </header>\n\n  <div class=\"ds-band\">\n    <div class=\"ds-band__inner ds-cols\">\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Term pass</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-panel__figure\">$120</span>\n            <p>Any three courses between now and the end of June.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#enrolments\">Get a pass</a>\n          </div>\n        </section>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Gift voucher</h2>\n          <div class=\"ds-panel__body\">\n            <span class=\"ds-panel__figure\">$45</span>\n            <p>One course of the holder's choice, valid for a year.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#details\">Buy a voucher</a>\n          </div>\n        </section>\n      </div>\n      <article class=\"ds-prose ds-cols__wide\" data-component=\"typography\">\n        <h1>Taught in a room, not a feed</h1>\n        <p class=\"ds-prose__lead\">Every course meets live, with a tutor who can see what your hands are doing.</p>\n        <p>Classes are capped at twelve. You get the notes the same evening and <strong>a recording for thirty days</strong>, so a missed week is not a lost one.</p>\n        <h2>What a course includes</h2>\n        <ul>\n          <li>Four to six sessions of ninety minutes</li>\n          <li>Materials, or a list of what to bring</li>\n          <li>One piece of finished work to take home</li>\n        </ul>\n        <h3>For course organisers</h3>\n        <p>Timetables are published as a plain feed. Request <code>/feeds/term.ics</code> to add every session to a shared calendar.</p>\n      </article>\n      <div class=\"ds-stack ds-stack--tight\">\n        <div class=\"ds-prose\">\n          <h3>Labels on the timetable</h3>\n          <p>Every course carries one or two of these, so you can see at a glance whether there is room.</p>\n        </div>\n        <div class=\"ds-badgerow\" data-component=\"badge\">\n          <span class=\"ds-badge\">New</span>\n          <span class=\"ds-badge ds-badge--alt\">Pilot</span>\n          <span class=\"ds-badge ds-badge--quiet\">16</span>\n          <span class=\"ds-badge ds-badge--success\">Places left</span>\n          <span class=\"ds-badge ds-badge--warning\">Nearly full</span>\n          <span class=\"ds-badge ds-badge--danger\">Full</span>\n        </div>\n        <div class=\"ds-prose\">\n          <h3>Read next</h3>\n        </div>\n        <p class=\"ds-linkrow\" data-component=\"links\">\n          <a class=\"ds-link\" href=\"#about\">Our buildings</a>\n          <a class=\"ds-link is-visited\" href=\"#about\">Meet the tutors</a>\n          <a class=\"ds-link is-hover\" href=\"#enrolments\">Refunds</a>\n          <a class=\"ds-link is-active\" href=\"#details\">Access needs</a>\n          <a class=\"ds-link ds-link--quiet\" href=\"#home\">All courses</a>\n        </p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"enrolments\">\n  <div class=\"ds-toolbar\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#enrolments\">My courses</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Summer term</li>\n    </ol>\n  </div>\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-page-header__tile\">\n      <h1 class=\"ds-page-header__title\">Enrolments</h1>\n    </div>\n    <div class=\"ds-page-header__copy\">\n      <p class=\"ds-page-header__text\">Every course you have booked for the summer term.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#details\">My details</a>\n      <a class=\"ds-button\" href=\"#home\">Book a course</a>\n    </div>\n  </header>\n\n  <div class=\"ds-workspace\">\n    <div class=\"ds-workspace__rail\">\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">My courses</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">3</span><a class=\"ds-link\" href=\"#enrolments\">Spring term</a></li>\n          <li class=\"ds-sidebar__item is-current\"><span class=\"ds-sidebar__count\">5</span>Summer term</li>\n          <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">0</span><a class=\"ds-link\" href=\"#enrolments\">Autumn term</a></li>\n          <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">2</span><a class=\"ds-link\" href=\"#enrolments\">Waiting lists</a></li>\n          <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">9</span><a class=\"ds-link\" href=\"#enrolments\">Finished</a></li>\n        </ul>\n      </aside>\n    </div>\n    <div class=\"ds-workspace__main ds-stack\">\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item ds-stat__item--1\"><span class=\"ds-stat__figure\">5</span><span class=\"ds-stat__label\">Courses booked</span></li>\n        <li class=\"ds-stat__item ds-stat__item--4\"><span class=\"ds-stat__figure\">24</span><span class=\"ds-stat__label\">Sessions to attend</span></li>\n        <li class=\"ds-stat__item ds-stat__item--inverse\"><span class=\"ds-stat__figure\">36</span><span class=\"ds-stat__label\">Hours of teaching</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">$410</span><span class=\"ds-stat__label\">Paid so far</span></li>\n      </ul>\n\n      <div>\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#enrolments\">All courses</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#enrolments\">Confirmed</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#enrolments\">Waiting</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#enrolments\">Withdrawn</a></li>\n        </ul>\n        <div class=\"ds-table__wrap\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr>\n                <th scope=\"col\">Course</th>\n                <th scope=\"col\">Tutor</th>\n                <th scope=\"col\">Starts</th>\n                <th scope=\"col\">Status</th>\n                <th scope=\"col\" class=\"ds-table__num\">Sessions</th>\n                <th scope=\"col\" class=\"ds-table__num\">Fee</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr><th scope=\"row\"><a class=\"ds-link\" href=\"#course\">Woodwork basics</a></th><td>Ansel Rowe</td><td>2 June 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num\">$110.00</td></tr>\n              <tr><th scope=\"row\"><a class=\"ds-link\" href=\"#course\">Letterpress for posters</a></th><td>Dalia Wren</td><td>4 June 2015</td><td><span class=\"ds-badge ds-badge--warning\">Waiting</span></td><td class=\"ds-table__num\">4</td><td class=\"ds-table__num\">$85.00</td></tr>\n              <tr><th scope=\"row\"><a class=\"ds-link\" href=\"#course\">A first web page</a></th><td>Tomas Keel</td><td>9 June 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">5</td><td class=\"ds-table__num\">$90.00</td></tr>\n              <tr><th scope=\"row\"><a class=\"ds-link\" href=\"#course\">Throwing on the wheel</a></th><td>Mirren Shaw</td><td>13 June 2015</td><td><span class=\"ds-badge ds-badge--success\">Confirmed</span></td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num\">$125.00</td></tr>\n              <tr><th scope=\"row\"><a class=\"ds-link\" href=\"#course\">Bookbinding by hand</a></th><td>Odile Marsh</td><td>20 June 2015</td><td><span class=\"ds-badge ds-badge--danger\">Withdrawn</span></td><td class=\"ds-table__num\">3</td><td class=\"ds-table__num\">$60.00</td></tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"ds-tablefoot\">\n          <span>Showing 5 of 5 courses in this term.</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#enrolments\">‹ Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#enrolments\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#enrolments\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#enrolments\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#enrolments\">Next ›</a></li>\n          </ul>\n        </div>\n      </div>\n\n      <div class=\"ds-empty\" data-component=\"empty\">\n        <svg class=\"ds-empty__icon\" viewBox=\"0 0 48 48\" width=\"64\" height=\"64\" aria-hidden=\"true\"><path d=\"M8 12h32v28H8z M8 20h32 M16 6v10 M32 6v10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n        <div class=\"ds-empty__copy\">\n          <h2 class=\"ds-empty__title\">Nothing booked for autumn</h2>\n          <p class=\"ds-empty__text\">Courses you book for the autumn term will appear here.</p>\n        </div>\n        <a class=\"ds-button\" href=\"#home\">Browse autumn</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"course\">\n  <div class=\"ds-toolbar\">\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#enrolments\">My courses</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Throwing on the wheel</li>\n    </ol>\n  </div>\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__tile\">\n      <h1 class=\"ds-page-header__title\">Throwing on the wheel</h1>\n    </div>\n    <div class=\"ds-page-header__copy\">\n      <p class=\"ds-page-header__text\">Six Saturday mornings with Mirren Shaw, from 13 June 2015.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#enrolments\">All my courses</a>\n    </div>\n  </header>\n\n  <div class=\"ds-workspace\">\n    <div class=\"ds-workspace__rail\">\n      <aside class=\"ds-sidebar\">\n        <h2 class=\"ds-sidebar__title\">Summer term</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#course\">Woodwork basics</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#course\">Letterpress for posters</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#course\">A first web page</a></li>\n          <li class=\"ds-sidebar__item is-current\">Throwing on the wheel</li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#course\">Bookbinding by hand</a></li>\n        </ul>\n      </aside>\n    </div>\n    <div class=\"ds-workspace__main ds-stack\">\n      <div class=\"ds-cols\">\n        <div class=\"ds-cols__wide ds-stack ds-stack--tight\">\n          <div class=\"ds-prose\">\n            <h2>Your place is confirmed</h2>\n            <p>You are one of eight students. Clay, tools and an apron are provided; wear shoes you do not mind getting splashed.</p>\n            <p>The class meets in the Old Dairy, studio 2. Doors open fifteen minutes before each session.</p>\n          </div>\n          <div class=\"ds-buttonrow\" data-component=\"buttons\">\n            <a class=\"ds-button\" href=\"#course\">Add to calendar</a>\n            <a class=\"ds-button is-hover\" href=\"#course\">Message tutor</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#details\">Edit my details</a>\n            <a class=\"ds-button ds-button--danger\" href=\"#course\">Withdraw</a>\n            <button class=\"ds-button\" type=\"button\" disabled>Rate this course</button>\n          </div>\n        </div>\n        <div class=\"ds-cols__wide\">\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\">\n              <thead>\n                <tr>\n                  <th scope=\"col\">Session</th>\n                  <th scope=\"col\">Date</th>\n                  <th scope=\"col\" class=\"ds-table__num\">Starts</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\">Centring the clay</th><td>13 June 2015</td><td class=\"ds-table__num\">10:00</td></tr>\n                <tr><th scope=\"row\">Pulling a cylinder</th><td>20 June 2015</td><td class=\"ds-table__num\">10:00</td></tr>\n                <tr><th scope=\"row\">Bowls and plates</th><td>27 June 2015</td><td class=\"ds-table__num\">10:00</td></tr>\n                <tr><th scope=\"row\">Trimming and handles</th><td>4 July 2015</td><td class=\"ds-table__num\">10:00</td></tr>\n                <tr><th scope=\"row\">Glazing</th><td>11 July 2015</td><td class=\"ds-table__num\">09:30</td></tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-dialog\" data-component=\"dialog\">\n        <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n          <div class=\"ds-dialog__inner\">\n            <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Withdraw from this course?</h2>\n            <div class=\"ds-dialog__body\">\n              <p>Your place on Throwing on the wheel will go to the next person on the waiting list. The fee of $125.00 is refunded within five days.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#enrolments\">Withdraw</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#course\">Keep my place</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"details\">\n  <div class=\"ds-toolbar\">\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#enrolments\">My courses</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">My details</li>\n    </ol>\n  </div>\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__tile\">\n      <h1 class=\"ds-page-header__title\">My details</h1>\n    </div>\n    <div class=\"ds-page-header__copy\">\n      <p class=\"ds-page-header__text\">What your tutors see before the first session.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#enrolments\">My courses</a>\n    </div>\n  </header>\n\n  <div class=\"ds-workspace\">\n    <div class=\"ds-workspace__rail\">\n      <aside class=\"ds-sidebar\">\n        <h2 class=\"ds-sidebar__title\">My account</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item is-current\">Student details</li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#details\">Reminders</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#details\">Payments and refunds</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#about\">Passes and vouchers</a></li>\n        </ul>\n      </aside>\n    </div>\n    <div class=\"ds-workspace__main\">\n      <div class=\"ds-cols\">\n        <section class=\"ds-panel ds-cols__wide\">\n          <h2 class=\"ds-panel__title\">Student details</h2>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\" action=\"#details\">\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">First name</span><input class=\"ds-form__input\" type=\"text\" value=\"Corin\"></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Last name</span><input class=\"ds-form__input is-focus\" type=\"text\" placeholder=\"Last name\"></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Email</span><input class=\"ds-form__input is-error\" type=\"text\" value=\"corin@postbox\"><span class=\"ds-form__error\">Enter a complete email address.</span></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Preferred building</span>\n                <select class=\"ds-form__select\"><option>Canal Street</option><option>The Old Dairy</option><option>Northgate</option></select>\n              </label>\n              <label class=\"ds-form__field ds-form__field--wide\"><span class=\"ds-form__label\">Anything the tutor should know</span><textarea class=\"ds-form__textarea\" rows=\"3\" placeholder=\"Access needs, experience, allergies\"></textarea><span class=\"ds-form__hint\">Optional. Only your tutors can read this.</span></label>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Remind me the day before each session. <a class=\"ds-link\" href=\"#details\">Change reminders</a></span></label>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"submit\">Save details</button>\n                <a class=\"ds-button ds-button--secondary\" href=\"#enrolments\">Cancel</a>\n              </div>\n            </form>\n          </div>\n        </section>\n        <div class=\"ds-cols__wide ds-stack ds-stack--tight\">\n          <div class=\"ds-prose\">\n            <h2>Before the first session</h2>\n            <p>Tutors see your name, your building and the note you leave here. Changes reach them the same day.</p>\n          </div>\n          <div class=\"ds-noticerow\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">Room change.</span> Woodwork basics now meets in the Canal Street workshop.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Your details were not saved.</span> Check the highlighted field and try again.</p>\n          </div>\n          <div class=\"ds-prose\">\n            <h3>Who can see this</h3>\n            <p>Only the tutors of courses you are booked on, and the office. Nothing here is shown to other students.</p>\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    <div class=\"ds-footer__cols\">\n      <div>\n        <h2 class=\"ds-footer__title\">Subjects</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Make</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Code</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Write</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Saturday studios</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Students</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#enrolments\">My courses</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#details\">My details</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#about\">Term passes</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#about\">Gift vouchers</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Support</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#about\">How a course works</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#about\">Access and buildings</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Contact the office</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">About</h2>\n        <ul class=\"ds-footer__list\">\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#about\">Our tutors</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Teach a course</a></li>\n          <li class=\"ds-footer__item\"><a class=\"ds-footer__link\" href=\"#home\">Noticeboard</a></li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"ds-footer__base\">\n      <a class=\"ds-footer__link\" href=\"#home\">Privacy and cookies</a>\n      <a class=\"ds-footer__link\" href=\"#home\">Terms of use</a>\n      <span>© 2015 chronoskin</span>\n    </div>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.flat-design.landing.s03.p03.t03.u03\",\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-3333\",\n  \"short\": \"v1-fl-3333\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f0f0f0;\n  --color-surface-strong: #e0e0e0;\n  --color-bar: #eeeeee;\n  --color-bar-text: #1a1a1a;\n  --color-bar-alt: #1570a6;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #1a1a1a;\n  --color-inverse-text: #ffffff;\n  --color-text: #1a1a1a;\n  --color-text-muted: #969696;\n  --color-heading: #1a1a1a;\n  --color-heading-alt: #000000;\n  --color-link: #1570a6;\n  --color-link-quiet: #1a1a1a;\n  --color-link-visited: #1570a6;\n  --color-link-hover: #106088;\n  --color-link-active: #1a1a1a;\n  --color-border: #d8e0e0;\n  --color-border-strong: #969696;\n  --color-border-muted: #e0e0e0;\n  --color-accent: #5133ab;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #ffbb00;\n  --color-fill-1: #108010;\n  --color-fill-2: #e04000;\n  --color-fill-3: #1570a6;\n  --color-fill-4: #5133ab;\n  --color-button: #1570a6;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #1570a6;\n  --color-input: #ffffff;\n  --color-input-text: #1a1a1a;\n  --color-input-border: #969696;\n  --color-disabled: #e0e0e0;\n  --color-disabled-text: #969696;\n  --color-danger: #e81020;\n  --color-danger-surface: #f8f8f8;\n  --color-success: #108010;\n  --color-warning: #e04000;\n  --color-notice: #e8f0f0;\n  --color-notice-text: #106088;\n  --color-focus: #1570a6;\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: \"Source Sans Pro\", \"Lucida Grande\", \"Lucida Sans Unicode\", \"Segoe UI\", Geneva, Tahoma, Arial, sans-serif;\n  --font-heading: \"Source Sans Pro\", \"Lucida Grande\", \"Lucida Sans Unicode\", \"Segoe UI\", Geneva, Tahoma, Arial, sans-serif;\n  --font-ui: \"Source Sans Pro\", \"Lucida Grande\", \"Lucida Sans Unicode\", \"Segoe UI\", Geneva, Tahoma, Arial, sans-serif;\n  --font-mono: Consolas, Menlo, \"Liberation Mono\", monospace;\n  --text-base: 14px;\n  --text-small: 12px;\n  --text-ui: 14px;\n  --text-large: 16px;\n  --text-display: 38px;\n  --text-h1: 26px;\n  --text-h2: 20px;\n  --text-h3: 16px;\n  --line-body: 1.5;\n  --line-heading: 1.25;\n  --line-display: 1.3;\n  --weight-body: 400;\n  --weight-bold: 600;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 2px;\n  --border-width-strong: 4px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 0 0 0 1px var(--color-border-strong);\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface-alt);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, black);\n  --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary) 88%, black);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}