{ "id": "v1-nb-2222", "long_id": "v1.neubrutalism.landing.s02.p02.t02.u02", "name": "Neubrutalism landing page, ruled split layout (2021 to 2026)", "era": { "slug": "neubrutalism", "code": "nb", "name": "Neubrutalism", "years": [ 2021, 2026 ], "description": "Loud and flat, 2021 to 2026: thick black outlines, hard offset shadows with no blur, saturated colour blocks and bold type." }, "archetype": "landing", "mode": "pure", "viewport": { "width": 1440, "fluid": true }, "summary": "A fluid marketing page in the flat, hairline strand of neubrutalism: the whole page is a sheet of ruled cells that touch each other and the viewport edges, filled either white or with one flat saturated colour, with black text and black 1px rules. It was common from about 2021 to 2026 on landing pages for creator tools, small shops' software and component kits. Nothing floats on a centred column; the page reads like a printed form, and the few boxed things (a staircase of small cards in the hero, a panel, a dialog) stand out because everything else is flush.", "url": "https://chrono.skin/s/v1-nb-2222", "preview_url": "https://chrono.skin/s/v1-nb-2222/specimen.html", "files": { "STYLE.md": "# Neubrutalism landing page, ruled split layout (2021 to 2026)\n\n## Summary\n\nA fluid marketing page in the flat, hairline strand of neubrutalism: the whole page is a sheet of ruled cells that touch each other and the viewport edges, filled either white or with one flat saturated colour, with black text and black 1px rules. It was common from about 2021 to 2026 on landing pages for creator tools, small shops' software and component kits. Nothing floats on a centred column; the page reads like a printed form, and the few boxed things (a staircase of small cards in the hero, a panel, a dialog) stand out because everything else is flush.\n\n## Layout\n\n- The page is fluid: `--size-page` is 100% and there is no centred content column. Every section spans the viewport and is cut into cells by `--border-width` rules; text starts `--space-gutter` (40px) from a cell's edge. Designed at a 1440px viewport.\n- Order of a page: the navigation row, a two-half hero, a one-line tag strip, a row of four stat cells, then section after section of ruled cells (`.ds-head`, `.ds-grid`, `.ds-cells`), a two-half call to action and a two-half inverted footer.\n- Navigation is one `--size-nav` (72px) row of cells closed by a `--border-width-strong` rule: the brand in a cell at the left edge with a rule on its right, the links in the open middle, and the two actions as full-height cells at the right edge, each with a rule on its left; the last one is filled like the primary button. There is no announcement line and no centred bar.\n- The hero is two equal halves divided by a vertical rule. The left half holds the claim, left-aligned and vertically centred: a small tag, the display title (at most 13ch wide), a lead capped at `--size-measure` (560px) and one or two large buttons, with `--space-9` (96px) above and below. The right half is a flat `--color-surface-alt` stage holding three small cards (`--size-card`, 380px) stepped down and to the right by `--space-8` each and overlapping by `--space-3`.\n- Columns: `.ds-head` and `.ds-cells--2` are two equal halves; `.ds-grid` and `.ds-stat` are four equal cells; `.ds-cells--rail` is a `--size-rail` (300px) cell on the left, a fluid middle cell and a `--size-sidebar` (420px) cell on the right; `.ds-cells--side` is a fluid cell plus a `--size-sidebar` cell on the right. Text is left-aligned everywhere; only the empty state centres its text.\n- Sections and cells touch. They are separated by a rule and a change of flat fill, never by a vertical gap; the only gaps on the page are inside a cell.\n- Inner pages keep the navigation row and the footer and drop the hero, the tag strip and the stat row. They start with the `.ds-breadcrumb` as a thin white strip across the page, then a `.ds-page-header`: a white ruled row whose wide cell holds the 48px title and one line of description and whose right cell, filled `--color-surface-alt` and as wide as its buttons, holds the actions. Below it one `.ds-cells--side` row: the fluid cell is flush (`.ds-cell--flush`) and stacks the `.ds-tabs` row, the `.ds-table` and the `.ds-pagination` strip edge to edge with no outline of their own; the `--size-sidebar` cell on the right holds a form or a panel with normal cell padding.\n- Spacing scale: `--space-1` 4px (inline code padding, underline offset), `--space-2` 8px (badge padding, label to control, stat label to figure, gaps between pagination squares), `--space-3` 12px (table and list row padding, breadcrumb strip, tag strip, overlap of the hero cards), `--space-4` 16px (panel and card padding, gap between buttons, pagination strip), `--space-5` 24px (gap between stacked blocks in a cell and between hero elements, table cell side padding, gaps in the tag strip), `--space-6` 32px (stat and grid cell padding top and bottom, footer column gap), `--space-7` 48px (cell, head and page header padding top and bottom, gap between groups in a cell), `--space-8` 64px (hero stage and footer padding, step of the hero cards), `--space-9` 96px (hero claim padding top and bottom). `--space-gutter` 40px is the side padding of every cell.\n- Movement tokens: `--space-nudge` 2px (hover offset, focus outline offset) and `--space-press` 4px (pressed offset, inset focus outline of cells that cannot show one outside). Hover and press move a control straight down, never sideways, and the red shadow of an invalid field falls straight down, so the movement is right whichever way the surface set throws its shadows (lower right, lower left or straight down).\n- Fixed sizes: `--size-control` 48px (buttons, inputs, tab row), `--size-control-large` 56px (hero buttons), `--size-control-small` 36px (card buttons, pagination squares), `--size-logo` 32px (the brand tile), `--size-check` 20px, `--size-icon` 48px, `--size-cell` 248px (least height of a grid cell), `--size-dialog` 480px.\n- Below 900px halves and side cells stack and the rules between them turn from vertical to horizontal, the grid and the stat row drop to two columns, and the navigation links move to a ruled second row under the brand and the action cells. Below 600px cell padding shrinks to `--space-4`, the grid is one column, the secondary navigation action is hidden, the hero cards step by `--space-5`, display and h1 text step down to `--text-h2`, the tab row scrolls sideways, notices stack, and table columns marked `.ds-table__extra` are hidden.\n- Views: the specimen is one example site with four views, switched by plain `#name` links. `home` is the product page (hero, tag strip, stat row, the eight ruled cells, the field notes list beside the free-boxes panel, the call to action). `shipments` is the week's list: breadcrumb strip, page header, then the flush cell with tabs, table and pagination beside a cell with the empty state and the status key. `pickup` is one booking: page header, the address form in the left half, notices, the slot's buttons and the parcel list in the right half, and the confirmation dialog in an overlay cell across the page. `guide` is an article: the chapter sidebar in the rail, the prose in the middle and a panel with further links in the right cell. The navigation marks the current view through `:has()` rules in `components.css`, one per view; `is-current` on a link does the same by hand.\n\n## Typography and colour roles\n\n- The page, the canvas and every surface are one white (`--color-page`, `--color-canvas`, `--color-surface` #ffffff); cells are told apart by black rules and by flat saturated fills, not by tints. Table rows do not alternate.\n- `--color-surface-strong` and `--color-accent` are pink #ff90e8 with black text: panel, dialog and hero card title strips, the current navigation item, tab and page, the default badge, the highlight behind a hovered link. `--color-surface-alt` is yellow #ffc900: the hero stage, the actions cell of the page header, the empty state, the current table row, inline code, a hovered tab. `--color-accent-alt` is lemon #f1f333: the marked words of the hero title and \"new\" badges.\n- `--color-fill-1` to `--color-fill-4` are pink #ff90e8, yellow #ffc900, teal #23a094 and periwinkle #90a8ed, always with black text: every second cell of the grid and the left half of the call to action. Use each once before repeating.\n- The primary button is black with white text (`--color-button` #000000, `--color-button-text` #ffffff), and so is the last navigation cell; the secondary button is white. The tag strip (`--color-bar-alt`) and the footer (`--color-inverse`) are the same black with white text; the navigation row and the table head (`--color-bar`) are white.\n- Text, headings, every link colour, borders, focus and shadow are #000000. `--color-text-muted` is #666666 (dates, hints, the count beside the tabs), `--color-border-muted` #b3b3b3 (dividers of the sidebar list), disabled is #aeaeae with #303030 text.\n- Status: `--color-success` teal #23a094, `--color-warning` yellow #ffc900, `--color-danger` red #dc341e (error text, the destructive button, the danger badge), `--color-danger-surface` #e2442f behind an error notice, `--color-notice` periwinkle #90a8ed. All carry black text.\n- One geometric sans for body, headings and controls (`--font-body`, `--font-heading`, `--font-ui`: Google Sans Flex, Albert Sans, then Avenir Next); `--font-mono` only for inline code.\n- Nothing is bold. `--weight-body`, `--weight-heading`, `--weight-display` and `--weight-ui` are 400; `--weight-bold` is 500 and is the only emphasis (buttons, labels, badges, strong text, the tag strip). Size carries the hierarchy.\n- `--text-base` 18px at `--line-body` 1.55; `--text-small` 14px for labels, meta, table heads, grid cell text and the footer; `--text-ui` 16px for navigation, buttons, inputs, tabs and the tag strip; `--text-large` 24px for leads, large buttons and the brand.\n- `--text-display` 60px at `--line-display` 1.1 for the hero title; `--text-h1` 48px (prose h1, the inner page title, stat figures, the call to action, the footer brand), `--text-h2` 36px (section heads, prose h2) and `--text-h3` 24px (grid cell, cell label, panel, sidebar, dialog and empty-state titles) at `--line-heading` 1.25. No tracking, no uppercase headings.\n- Uppercase is used only for 12px labels: `.ds-badge` and `.ds-footer__title`. That size is `calc(var(--text-small) * 0.857)`; the vocabulary has no token for it.\n- Links in running text are underlined (`--link-decoration`); navigation, titles and breadcrumbs are not (`--link-decoration-quiet`). Visited links are not marked.\n- `--border-width` is a 1px black hairline on every box and rule; `--border-width-strong` 2px only under the navigation.\n- Corners: `--radius-control` 4px on buttons, inputs and icon boxes; `--radius-panel` and `--radius-page` 0, so cards, panels and dialogs are square; `--radius-pill` 9999px, so badges and the current navigation item are full pills.\n- Nothing has a shadow at rest: `--shadow-panel` and `--shadow-control` are `none`, so the hero cards are told apart by their overlap and outline. A hard shadow appears with interaction only: `--shadow-control-hover` is `2px 2px 0 0` black (also the pagination squares and icon boxes), `--shadow-control-pressed` is `none`, and the dialog alone floats on `--shadow-dialog` `4px 4px 0 0`.\n- All fills are flat (`--fill-page` is the plain page colour, no grid); `--fill-button-hover` equals `--fill-button`, hover moves the button and gives it its shadow.\n- `--focus-ring` is `2px solid` black; `--transition` animates only `transform` and `box-shadow` over 0.14s.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, the base font and colour. Sections are its direct children (inside `
`); there is no wrapper column.\n- `.ds-brand`: the site's mark and name, the first thing in the header and a link to the home page. `.ds-brand__mark` is a `--size-logo` (32px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, a `--border-width` `--color-border` outline, `--radius-control` corners and the `--shadow-control` hard shadow, so every palette and surface set reskins it. The mark is inline SVG with square line caps and a 2.8 stroke. `.ds-brand__name` is the name in the heading font at `--text-large`, weight `--weight-heading`, with the heading tracking and transform, in `--color-bar-text`. One per page. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the navigation row. the `.ds-brand` is the first cell, with a rule on its right, `.ds-nav__links` holds `.ds-nav__link` items (the current one has `is-current`: an outlined accent pill), then one or two `.ds-nav__action` cells; `.ds-nav__action--primary` fills the cell like the primary button. States `is-hover`, `is-focus`.\n- `.ds-hero`: the two-half introduction, one per page. `.ds-hero__claim` holds an optional `.ds-badge`, `.ds-hero__title` with one phrase in `.ds-hero__mark` (outlined `--color-accent-alt` highlight), `.ds-hero__lead` and `.ds-hero__actions`. `.ds-hero__stage` holds three `.ds-hero__card` (`.ds-hero__card--2` and `.ds-hero__card--3` step right), each with an optional `.ds-hero__card-title` strip and a `.ds-hero__card-body` of one `.ds-hero__card-text` line and a badge or small button. The cards are decoration; do not put real controls in them. The marked phrase is an inline block with `--space-1` above and below, so its outline never touches the neighbouring lines whatever the display line height of the type set; keep it short enough to fit one line.\n- `.ds-ticker`: one line of `.ds-ticker__item` tags on the secondary bar, separated by a four-pointed star, clipped at the right edge. It does not move. Use once, directly under the hero.\n- `.ds-stat`: the row of summary figures: four `.ds-stat__cell` divided by vertical rules, left-aligned, each a small bold `.ds-stat__label` over a 48px `.ds-stat__value`. `.ds-stat` is the row; the single figure is `.ds-stat__cell`.\n- `.ds-head`: opens a section: `.ds-head__title` (36px) in the left half, `.ds-head__lead` in the right half behind a rule.\n- `.ds-grid`: four columns of `.ds-grid__cell` that touch, divided by rules, no gaps and no outline. Each cell has a white outlined `.ds-grid__icon` with an inline SVG at the top and `.ds-grid__title` and `.ds-grid__text` at the bottom. `.ds-grid__cell--1` to `--4` fill a cell with a `--color-fill-*`; alternate filled and plain cells like a chessboard.\n- `.ds-cells`: a row of ruled cells: one cell by default, `.ds-cells--2` two halves, `.ds-cells--rail` rail, middle and side, `.ds-cells--side` fluid plus side. Each child is a `.ds-cell`; variants `.ds-cell--surface`, `.ds-cell--fill-1` to `--fill-4`, `.ds-cell--overlay` (dialog backdrop), `.ds-cell--flush` (no padding, for a table) and `.ds-cell--middle` (content centred vertically). `.ds-cell--centre` with it centres the content across as well, for a dialog on its own row; `.ds-cell__text` is a paragraph in a cell, capped at `--size-measure`. `.ds-cell__label` is a 24px heading over a block, `.ds-cell__title` a 48px statement and `.ds-cell__lead` a lead line. `.ds-stack` stacks blocks 24px apart (`.ds-stack--wide` 48px).\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, strong, inline code (outlined, `--color-surface-alt`) and links inside it are styled. At most 68ch wide.\n- `.ds-link`: any link in content: underlined. `.ds-link--quiet` removes the underline for titles, breadcrumbs and sidebar lists. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary button, 48px tall. `.ds-button--secondary` is the white one. `.ds-button--danger` is the destructive action: flat `--color-danger` with `--color-text`; use it once per view, as the confirming button of a dialog or beside a secondary button. `.ds-button--large` (56px) for the hero and call to action, `.ds-button--small` (36px) inside cards. `is-hover` moves it 2px, `is-active` 4px, `is-disabled` is flat grey, `is-focus` adds an outline 2px away. `.ds-buttons` is a row of them.\n- `.ds-badge`: 12px uppercase label in an outlined box, accent by default. `.ds-badge--alt` (`--color-accent-alt`, \"new\"), `.ds-badge--strong` (`--color-surface-strong`), `.ds-badge--plain` (surface; counts, neutral tags). Status labels: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, all with `--color-text` and the same outline. `.ds-badges` is a row of them. The alt and strong variants carry `--color-text`, like every other filled block; only the default badge uses `--color-accent-text`.\n- `.ds-form`: stacked fields: `.ds-form__field` with a `.ds-form__label` above a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea), then `.ds-form__hint` or `.ds-form__error`. `is-focus` adds the control shadow and an outline, `is-invalid` turns the border and shadow to `--color-danger`, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` and its text. A form sits in the side cell of an inner page under a `.ds-cell__label`.\n- `.ds-table`: flush in a `.ds-cell--flush` cell: no outline, radius or shadow of its own. The head row is the primary bar; rows are divided by rules; the first and last columns are inset by `--space-gutter`; `is-current` on a row fills it `--color-surface-alt`. A status column holds one badge per row. `.ds-table__num` right-aligns numbers. A cell with `.ds-table__extra` is dropped below 600px.\n- `.ds-list`: ruled rows without a box, closed by a rule above and below. Each `.ds-list__item` is three columns: a muted `.ds-list__meta` date first (11ch), then `.ds-list__title` over a `.ds-list__text` line, then an optional badge.\n- `.ds-panel`: the one outlined box of a section: a `.ds-panel__title` strip on `--color-surface-strong` over a rule and a `.ds-panel__body`. Use it in a side cell, never in a row of several.\n- `.ds-tabs`: a full-width ruled row at the top of a flush cell. Each `.ds-tabs__item` holds a `.ds-tabs__tab` cell with a rule on its right; the current one (`is-current`) is filled with the accent, `is-hover` with `--color-surface-alt`. `.ds-tabs__note` is a muted count pushed to the right end.\n- `.ds-sidebar`: a white cell at the left edge of a `.ds-cells--rail` row with a rule on its right: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by `--color-border-muted` rules; an item may end with a plain badge.\n- `.ds-notice`: one message in an outlined box on `--color-notice` with a `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is on `--color-danger-surface`.\n- `.ds-pagination`: a padded strip under the table: `.ds-pagination__link` squares of 36px, the current page (`is-current`) on the accent, `is-disabled` grey and flat, `is-hover` moved into its shadow. Put `.ds-pagination__item--end` on the last item to push \"next\" to the far end.\n- `.ds-breadcrumb`: a thin white strip across the page, closed by a rule: 14px `.ds-breadcrumb__item` separated by a muted slash; the last has `is-current`. It is the first thing on an inner page, above the page header.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds `.ds-page-header__title` (48px) and one `.ds-page-header__lead` line; `.ds-page-header__actions` is the cell on the right with one primary and at most one secondary button. One per page.\n- `.ds-dialog`: a 480px outlined box on `--shadow-dialog`, with a `.ds-dialog__bar` (holding `.ds-dialog__title` and a square `.ds-dialog__close`), `.ds-dialog__body`, and a `.ds-dialog__actions` strip over a rule with the buttons right-aligned. It sits in a `.ds-cell--overlay`.\n- `.ds-empty`: outlined box on `--color-surface-alt`, centred: `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one inverted block. `.ds-footer__inner` is two halves: `.ds-footer__lead` with a 48px `.ds-footer__brand` and `.ds-footer__text`, and `.ds-footer__cols` with three columns of an uppercase `.ds-footer__title` in `--color-inverse-text` and a `.ds-footer__list` of `.ds-footer__link`. `.ds-footer__legal` is a last line over a faint rule.\n\n## Never\n\n- `row-gap <= 8px`: table and list rows touch and are divided by rules; plain link lists sit at most 8px apart.\n- `block-gap <= 24px`: sections and cells touch; inside a cell stacked blocks are 24px apart.\n- `content-width >= 90%`: cells run to both viewport edges with a 40px inset; never a centred column with empty margins.\n- `palette-colours <= 14`: black, white, pink, two yellows, teal, periwinkle, two reds and the greys.\n- `font-weight <= 500`: nothing is bold; 500 is the strongest weight.\n- `font-weight >= 400`: no light weights.\n- `font-size <= 60px`: the hero title is the largest text.\n- `font-size >= 12px`: badge and footer labels are the smallest text.\n- `font-families <= 2`: one sans and a monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `letter-spacing = 0px`: nothing is tracked.\n- `uppercase-text <= 5%`: only 12px badges and footer labels are uppercase.\n- `underlined-links <= 20%`: only links in running text are underlined.\n- `border-width <= 2px`: rules are 1px hairlines, 2px only under the navigation; heavy outlines belong to other variants.\n- `border-radius <= 4px`: controls have 4px corners and every larger box is square; badges are pills, which are shapes.\n- `box-shadow-blur <= 0px`: the few shadows are hard offset blocks.\n- `text-shadow = none`: no text shadow.\n- `gradient-fills <= 0%`: every fill is flat, including the page.\n- `animation = none`: nothing moves on its own; the tag strip stands still.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide whether it is a cell or a box. A new section is a `.ds-cells` row (or a `.ds-head` plus a row) that touches its neighbours: give each cell one flat surface or `--color-fill-*` fill, `--space-gutter` side padding and rules from `--border-width` and `--color-border`; never add a margin between sections, a centred wrapper or a card around a cell. A box (something that sits inside a cell, like the panel or the dialog) gets the outline, `--radius-panel` and `--shadow-panel`; keep to one box per cell and divide inside it with rules. Anything clickable that is a box moves `--space-nudge` on hover and `--space-press` when pressed; anything clickable that is a cell (a tab, a navigation action) changes fill instead and shows focus with an inset outline. Text on a fill keeps `--color-text` and `--color-heading`; never tint, fade or blur. For a size the vocabulary lacks, use `calc()` over an existing token, as the 12px badge text does.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 100%;\n --size-measure: 560px;\n --size-nav: 72px;\n --size-control: 48px;\n --size-control-large: 56px;\n --size-control-small: 36px;\n --size-logo: 32px;\n --size-check: 20px;\n --size-icon: 48px;\n --size-card: 380px;\n --size-cell: 248px;\n --size-rail: 300px;\n --size-sidebar: 420px;\n --size-dialog: 480px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-9: 96px;\n --space-gutter: 40px;\n --space-nudge: 2px;\n --space-press: 4px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n width: var(--size-page);\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 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/* typography */\n.ds-prose {\n max-width: 68ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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 color: var(--color-heading);\n}\n.ds-prose h1 {\n margin: 0 0 var(--space-5);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-4);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-prose a {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n text-underline-offset: var(--space-1);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n background: var(--color-surface-strong);\n}\n\n/* links: black on everything; hover is a flat highlight behind the text */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n text-decoration-thickness: var(--border-width);\n text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\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 text-decoration-thickness: var(--border-width);\n background: var(--color-surface-strong);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n background: var(--fill-accent);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* buttons: flat fill, black outline, hard shadow; the button moves into its shadow */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n color: var(--color-button-text);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-button--secondary {\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n}\n.ds-button--danger {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button--small {\n min-height: var(--size-control-small);\n padding: 0 var(--space-4);\n font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n color: var(--color-button-hover-text);\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n transform: translateY(var(--space-nudge));\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: translateY(var(--space-press));\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n box-shadow: var(--shadow-control-pressed);\n transform: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* badge: small bold uppercase label in an outlined box */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n padding: 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1.5;\n text-transform: uppercase;\n white-space: nowrap;\n vertical-align: middle;\n color: var(--color-accent-text);\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n color: var(--color-text);\n background: var(--color-accent-alt);\n}\n.ds-badge--strong {\n color: var(--color-text);\n background: var(--color-surface-strong);\n}\n.ds-badge--plain {\n color: var(--color-text);\n background: var(--color-surface);\n}\n.ds-badge--success {\n color: var(--color-text);\n background: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-text);\n background: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-text);\n background: var(--color-danger);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: grid;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n gap: var(--space-2);\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: var(--space-2) var(--space-3);\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 color: var(--color-input-text);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: calc(var(--size-control) * 2);\n resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n box-shadow: var(--shadow-control);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n box-shadow: 0 var(--space-press) 0 0 var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-base);\n font-weight: var(--weight-ui);\n}\n.ds-form__checkbox {\n appearance: none;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--color-text);\n box-shadow: inset 0 0 0 var(--space-nudge) var(--color-surface-strong);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-notice-text);\n background: var(--color-notice);\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-notice__title {\n flex: none;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n}\n.ds-notice--error {\n color: var(--color-text);\n background: var(--color-danger-surface);\n}\n\n/* dialog: an outlined box with a title strip, on a flat dark backdrop */\n.ds-dialog {\n max-width: var(--size-dialog);\n margin: 0 auto;\n color: var(--color-text);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading-alt);\n}\n.ds-dialog__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n cursor: pointer;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-dialog__body {\n padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n padding: var(--space-4);\n background: var(--color-canvas);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n text-align: center;\n background: var(--color-surface-alt);\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-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n}\n\n/* nav: one row of ruled cells that touch the viewport edges; the actions are full-height cells */\n.ds-nav {\n display: flex;\n align-items: stretch;\n min-height: var(--size-nav);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n padding: 0 var(--space-gutter);\n text-decoration: none;\n border-right: var(--border-width) var(--border-style) var(--color-border);\n gap: var(--space-3);\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-logo);\n height: var(--size-logo);\n padding: var(--space-nudge);\n color: var(--color-button-text);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-4);\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-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n text-underline-offset: var(--space-1);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#shipments:target) .ds-nav__link[href=\"#shipments\"],\n.ds-page:has(#pickup:target) .ds-nav__link[href=\"#pickup\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-nudge);\n}\n.ds-nav__action {\n display: flex;\n align-items: center;\n padding: 0 var(--space-gutter);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n color: var(--color-bar-text);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__action--primary {\n color: var(--color-button-text);\n background: var(--fill-button);\n}\n.ds-nav__action:hover,\n.ds-nav__action.is-hover {\n text-decoration: var(--link-decoration-hover);\n text-underline-offset: var(--space-1);\n}\n.ds-nav__action--primary:hover,\n.ds-nav__action--primary.is-hover {\n color: var(--color-button-hover-text);\n background: var(--fill-button-hover);\n}\n.ds-nav__action:focus-visible,\n.ds-nav__action.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-press) * -1);\n}\n\n/* hero: two halves divided by a rule; the claim on the left, a staircase of small cards on the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__claim {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: var(--space-5);\n padding: var(--space-9) var(--space-gutter);\n}\n.ds-hero__title {\n max-width: 13ch;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__mark {\n display: inline-block;\n max-width: 100%;\n margin: var(--space-1) 0;\n padding: 0 var(--space-2);\n color: var(--color-text);\n background: var(--color-accent-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-hero__lead {\n max-width: var(--size-measure);\n margin: 0;\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-3);\n}\n.ds-hero__stage {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: var(--space-8) var(--space-gutter) var(--space-8) var(--space-9);\n background: var(--color-surface-alt);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__card {\n width: var(--size-card);\n max-width: 100%;\n color: var(--color-text);\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 overflow: hidden;\n}\n.ds-hero__card + .ds-hero__card {\n margin-top: calc(var(--space-3) * -1);\n}\n.ds-hero__card--2 {\n margin-left: var(--space-8);\n}\n.ds-hero__card--3 {\n margin-left: calc(var(--space-8) * 2);\n}\n.ds-hero__card-title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-heading-alt);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__card-body {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-5);\n}\n.ds-hero__card-text {\n margin: 0;\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n\n/* ticker: a still strip of tags on the secondary bar */\n.ds-ticker {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-3) var(--space-gutter);\n list-style: none;\n overflow: hidden;\n white-space: nowrap;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n color: var(--color-bar-alt-text);\n background: var(--fill-bar-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-ticker__item {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-ticker__item + .ds-ticker__item::before {\n content: \"\\2726\";\n}\n\n/* stats: four left-aligned cells divided by rules, label over figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-gutter);\n}\n.ds-stat__cell + .ds-stat__cell {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__label {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n}\n.ds-stat__value {\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 color: var(--color-heading);\n}\n\n/* head: a ruled row that opens a section, title in the left half, lead in the right */\n.ds-head {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-head__title {\n margin: 0;\n padding: var(--space-7) var(--space-gutter);\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 color: var(--color-heading);\n}\n.ds-head__lead {\n display: flex;\n align-items: center;\n margin: 0;\n padding: var(--space-7) var(--space-gutter);\n font-size: var(--text-large);\n line-height: 1.4;\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* grid: cells that touch, divided by rules; colour blocks alternate with plain cells */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-height: var(--size-cell);\n padding: var(--space-6) var(--space-gutter);\n color: var(--color-text);\n background: var(--color-surface);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell:nth-child(4n) {\n border-right: 0;\n}\n.ds-grid__cell:nth-last-child(-n + 4) {\n border-bottom: 0;\n}\n.ds-grid__cell--1 {\n background: var(--color-fill-1);\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__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: auto;\n padding: var(--space-2);\n color: var(--color-text);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-grid__title {\n margin: var(--space-5) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n\n/* cells: the page below the hero is rows of ruled cells, never floating cards on a column */\n.ds-cells {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-cells--2 {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-cells--rail {\n grid-template-columns: var(--size-rail) minmax(0, 1fr) var(--size-sidebar);\n}\n.ds-cells--side {\n grid-template-columns: minmax(0, 1fr) var(--size-sidebar);\n}\n.ds-cell {\n min-width: 0;\n padding: var(--space-7) var(--space-gutter);\n}\n.ds-cell + .ds-cell {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-cell--flush {\n padding: 0;\n}\n.ds-cell--surface {\n background: var(--color-surface);\n}\n.ds-cell--fill-1 {\n background: var(--color-fill-1);\n}\n.ds-cell--fill-2 {\n background: var(--color-fill-2);\n}\n.ds-cell--fill-3 {\n background: var(--color-fill-3);\n}\n.ds-cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-cell--overlay {\n background: var(--color-overlay);\n}\n.ds-cell--middle {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: var(--space-5);\n}\n.ds-cell--centre {\n align-items: center;\n}\n.ds-cell__text {\n max-width: var(--size-measure);\n margin: 0;\n}\n.ds-cell__label {\n margin: 0 0 var(--space-4);\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 color: var(--color-heading-alt);\n}\n.ds-cell__title {\n max-width: 16ch;\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 color: var(--color-heading);\n}\n.ds-cell__lead {\n max-width: var(--size-measure);\n margin: 0;\n font-size: var(--text-large);\n line-height: 1.4;\n}\n.ds-stack {\n display: grid;\n gap: var(--space-5);\n align-content: start;\n min-width: 0;\n}\n.ds-stack--wide {\n gap: var(--space-7);\n}\n\n/* page header: a ruled row; title and description in the wide cell, actions in a cell of their own */\n.ds-page-header {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n color: var(--color-text);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__main {\n padding: var(--space-7) var(--space-gutter);\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 color: var(--color-heading);\n}\n.ds-page-header__lead {\n max-width: var(--size-measure);\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n}\n.ds-page-header__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-5) var(--space-gutter);\n background: var(--color-surface-alt);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* table: flush in its cell, no outline of its own; rows divided by rules */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--text-base);\n color: var(--color-text);\n background: var(--color-surface);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-5);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table th:first-child,\n.ds-table td:first-child {\n padding-left: var(--space-gutter);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n padding-right: var(--space-gutter);\n}\n.ds-table th {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-bar-text);\n background: var(--fill-bar);\n}\n.ds-table tbody tr:nth-child(even) td {\n background: var(--color-canvas);\n}\n.ds-table tbody tr.is-current td {\n background: var(--color-surface-alt);\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\n/* list: ruled rows without a box; the date leads each row */\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 border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: 11ch minmax(0, 1fr) auto;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__title {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1.4;\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n.ds-list__meta {\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* panel: the one boxed block of a section, with a coloured title strip */\n.ds-panel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\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 color: var(--color-heading-alt);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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\n/* tabs: a full-width ruled row of cells; the current cell is filled */\n.ds-tabs {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-gutter);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n color: var(--color-text);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-tabs__tab.is-current {\n font-weight: var(--weight-bold);\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-press) * -1);\n}\n.ds-tabs__note {\n display: flex;\n align-items: center;\n margin-left: auto;\n padding: 0 var(--space-gutter);\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n/* sidebar: a cell of its own at the left edge, links as ruled rows */\n.ds-sidebar {\n min-width: 0;\n padding: var(--space-7) var(--space-5) var(--space-7) var(--space-gutter);\n background: var(--color-surface);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar + .ds-cell + .ds-cell {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-4);\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 color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* pagination: a ruled strip under the table; small outlined squares, next at the far end */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-4) var(--space-gutter);\n list-style: none;\n}\n.ds-pagination__item--end {\n margin-left: auto;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control-small);\n min-height: var(--size-control-small);\n padding: 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n color: var(--color-button-secondary-text);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-pressed);\n transform: translateY(var(--space-nudge));\n}\n.ds-pagination__link.is-current {\n color: var(--color-accent-text);\n background: var(--fill-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n background: var(--color-disabled);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* breadcrumb: a thin ruled strip across the page, above the page header */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-gutter);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.4;\n color: var(--color-text);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item.is-current {\n font-weight: var(--weight-bold);\n}\n\n/* footer: one inverted block in two halves, a large brand line left, link columns right */\n.ds-footer {\n color: var(--color-inverse-text);\n background: var(--fill-inverse);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-footer__lead {\n padding: var(--space-8) var(--space-gutter);\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 35%, transparent);\n}\n.ds-footer__brand {\n margin: 0 0 var(--space-4);\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-footer__text {\n max-width: 36ch;\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.45;\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n padding: var(--space-8) var(--space-gutter);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1.5;\n text-transform: uppercase;\n color: var(--color-inverse-text);\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.45;\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n margin: 0;\n padding: var(--space-4) var(--space-gutter);\n font-size: var(--text-small);\n line-height: 1.45;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 35%, transparent);\n}\n\n@media (max-width: 900px) {\n .ds-hero,\n .ds-head,\n .ds-cells--2,\n .ds-cells--rail,\n .ds-cells--side,\n .ds-page-header,\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-nav {\n flex-wrap: wrap;\n }\n .ds-grid {\n border-bottom: 0;\n }\n .ds-grid__cell:nth-last-child(-n + 4) {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-grid__cell:nth-child(2n) {\n border-right: 0;\n }\n .ds-brand {\n flex: 1;\n min-height: var(--size-nav);\n }\n .ds-nav__links {\n order: 3;\n flex: 0 0 100%;\n flex-wrap: wrap;\n padding: var(--space-2) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-hero__stage,\n .ds-cell + .ds-cell,\n .ds-sidebar + .ds-cell + .ds-cell,\n .ds-page-header__actions {\n border-left: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-sidebar {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-sidebar + .ds-cell {\n border-top: 0;\n }\n .ds-stat__cell:nth-child(odd) {\n border-left: 0;\n }\n .ds-stat__cell:nth-child(n + 3) {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-footer__lead {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 35%, transparent);\n }\n}\n\n@media (max-width: 600px) {\n .ds-brand,\n .ds-nav__action {\n padding: 0 var(--space-4);\n }\n .ds-nav__action:not(.ds-nav__action--primary) {\n display: none;\n }\n .ds-nav__links {\n gap: var(--space-1);\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__link {\n padding: var(--space-1) var(--space-2);\n font-size: var(--text-small);\n }\n .ds-hero__claim {\n padding: var(--space-7) var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h2);\n }\n .ds-hero__actions,\n .ds-hero__actions .ds-button {\n width: 100%;\n }\n .ds-hero__stage {\n padding: var(--space-6) var(--space-4);\n }\n .ds-hero__card {\n width: calc(100% - 2 * var(--space-5));\n }\n .ds-hero__card--2 {\n margin-left: var(--space-5);\n }\n .ds-hero__card--3 {\n margin-left: calc(var(--space-5) * 2);\n }\n .ds-ticker {\n padding: var(--space-3) var(--space-4);\n }\n .ds-stat__cell {\n padding: var(--space-5) var(--space-4);\n }\n .ds-stat__value,\n .ds-page-header__title,\n .ds-cell__title,\n .ds-prose h1,\n .ds-footer__brand {\n font-size: var(--text-h2);\n }\n .ds-head__title,\n .ds-prose h2 {\n font-size: calc(var(--text-h2) * 0.78);\n }\n .ds-head__title,\n .ds-head__lead,\n .ds-cell,\n .ds-sidebar,\n .ds-page-header__main {\n padding: var(--space-6) var(--space-4);\n }\n .ds-head__lead {\n padding-top: 0;\n border-left: 0;\n }\n .ds-cell--flush {\n padding: 0;\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell {\n border-right: 0;\n min-height: 0;\n padding: var(--space-5) var(--space-4);\n }\n .ds-page-header__actions {\n flex-wrap: wrap;\n padding: var(--space-4);\n }\n .ds-page-header__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-breadcrumb {\n padding: var(--space-3) var(--space-4);\n }\n .ds-tabs {\n overflow-x: auto;\n }\n .ds-tabs__tab {\n padding: 0 var(--space-4);\n white-space: nowrap;\n }\n .ds-tabs__note,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-table {\n font-size: var(--text-small);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table th:first-child,\n .ds-table td:first-child {\n padding-left: var(--space-4);\n }\n .ds-table th:last-child,\n .ds-table td:last-child {\n padding-right: var(--space-4);\n }\n .ds-pagination {\n padding: var(--space-4);\n }\n .ds-notice {\n flex-direction: column;\n gap: var(--space-1);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-footer__lead,\n .ds-footer__cols {\n padding: var(--space-7) var(--space-4);\n }\n .ds-footer__cols {\n gap: var(--space-4);\n }\n .ds-footer__legal {\n padding: var(--space-4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: neubrutalism landing specimen, ruled split layout\n\n\n\n\n\n
\n \n \n chronoskin\n \n \n Log in\n Book a pickup\n
\n\n
\n
\n
\n
\n For shops that pack their own boxes\n

Pack it, label it, gone by four.

\n

chronoskin reads the order, picks the cheapest carrier and prints the label while the tape gun is still in your hand.

\n
\n Print a label →\n Compare rates\n
\n
\n
\n
\n

Label 0418

\n
\n

Two mugs to Porto, 1.4 kg

\n Printed\n
\n
\n
\n

Next pickup

\n
\n

Thursday at 14:00

\n Book it\n
\n
\n
\n
\n

Three parcels on the road

\n Live\n
\n
\n
\n
\n\n
    \n
  • Ceramics
    • \n
  • Vinyl records
    • \n
  • Seed packets
    • \n
  • Zines
    • \n
  • Candles
    • \n
  • Bike parts
    • \n
  • Tea tins
    • \n
  • Board games
    • \n
  • Hand-dyed yarn
    • \n
  • Posters
    • \n
  • Hot sauce
    • \n
  • Enamel pins
    • \n
\n\n
\n
\n
Labels printed this year
\n
318,400
\n
\n
\n
Carriers compared per parcel
\n
11
\n
\n
\n
Average saved on postage
\n
23%
\n
\n
\n
Seconds from order to label
\n
40
\n
\n
\n\n
\n

From the order to the doorstep

\n

Eight small jobs you used to do by hand, lined up in the order a parcel meets them.

\n
\n
    \n
  • \n \n

    Order inbox

    \n

    Orders arrive from your shop with the address already checked.

    \n
    • \n
  • \n \n

    Weigh once

    \n

    Save the weight of each product and never weigh that box again.

    \n
    • \n
  • \n \n

    Rate table

    \n

    Every carrier's price for this parcel, cheapest at the top.

    \n
    • \n
  • \n \n

    Label printer

    \n

    Thermal or plain paper, four to a sheet if you like.

    \n
    • \n
  • \n \n

    Customs forms

    \n

    Filled in from the order lines and printed with the label.

    \n
    • \n
  • \n \n

    Pickup slots

    \n

    Book the van for the afternoon and see who is coming.

    \n
    • \n
  • \n \n

    Tracking page

    \n

    One plain page per parcel that your customer can read.

    \n
    • \n
  • \n \n

    Returns

    \n

    A prepaid label by email, charged only when it is scanned.

    \n
    • \n
\n\n
\n
\n

Field notes

\n \n
\n
\n

Before the first parcel

\n
\n
\n

Order free boxes

\n
\n

Two of our carriers send flat-packed boxes at no charge. Ask for a starter bundle of thirty.

\n See the three sizes\n
\n
\n

New to posting things? The packing guide starts with the box and ends with what to do when a parcel is late.

\n
\n Read the guide\n See this week\n
\n
\n
\n
\n\n
\n
\n

The first fifty labels are on us

\n
\n
\n

No card, no contract, no minimum. Connect a shop and print before the kettle boils.

\n Print a label →\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Packing guide
    3. \n
  3. Choosing a box
    4. \n
\n
\n
\n

Packing guide

\n

Five short chapters, written at the packing table.

\n
\n
\n Print a label\n
\n
\n\n
\n \n
\n
\n

Choosing a box

\n

A box is the right size when the thing inside cannot move and you did not pay to post air. Most shops need three sizes and use one of them nine times in ten.

\n

Measure the product, not the shelf

\n

Add two fingers of padding on every side, then round up to the nearest stock size. Store the result in box_code so the rate table can use it.

\n
    \n
  • Heavy things go in small boxes
    • \n
  • Fragile things get a box inside a box
    • \n
  • Flat things travel in card envelopes, never in bags
    • \n
\n

When to reuse a box

\n

Reuse any box that still stands square. Cover every old label before the new one goes on.

\n
\n
\n
\n
\n

Three stock sizes

\n
\n

Small is 20 by 15 by 10, medium 30 by 20 by 15, large 40 by 30 by 25. Sizes are in centimetres.

\n Set your usual box\n
\n
\n \n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Shipments
    3. \n
  3. Week 24
    4. \n
\n
\n
\n

Shipments, week 24

\n

Every parcel that left the shop from Monday to Sunday.

\n
\n
\n Download sheet\n Book a pickup\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
LabelGoing toCarrierStatusWeight, kgPostage
0418PortoNorthlineIn transit1.48.20
0417GhentHollow PostIn transit0.33.95
0416TartuNorthlineReturned2.111.40
0415GrazKestrelDelivered0.85.10
0414CorkHollow PostDelivered0.54.60
0413AarhusKestrelDelivered3.012.75
\n \n
\n
\n
\n

Waiting for a label

\n
\n

No parcels today

\n

New orders show up here the moment they are paid.

\n Add a parcel by hand\n
\n
\n
\n

Status key

\n
\n Express\n New\n Fragile\n Delivered\n In transit\n Returned\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Shipments
    3. \n
  3. Pickup on Thursday
    4. \n
\n
\n
\n

Pickup on Thursday

\n

Four parcels, one van, between 14:00 and 16:00.

\n
\n
\n Back to shipments\n
\n
\n\n
\n
\n

Pickup address

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

A postcode here has five digits, such as 40210.

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

Printed on the pickup sheet.

\n
\n \n
\n \n Discard\n
\n
\n
\n
\n
\n

Before the van comes

\n
\n
\n Van booked\n

The driver collects between 14:00 and 16:00. Have the parcels by the door.

\n
\n
\n Address rejected\n

The carrier does not know this postcode. Check it with the customer.

\n
\n
\n
\n
\n

This slot

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

On this pickup

\n
    \n
  • \n 0418\n
    \n

    Two mugs to Porto

    \n

    Northline, 1.4 kg

    \n
    \n Printed\n
    • \n
  • \n 0419\n
    \n

    Tea tin to Ghent

    \n

    Hollow Post, 0.3 kg

    \n
    \n No label\n
    • \n
\n
\n
\n
\n\n
\n
\n
\n
\n

Cancel this pickup?

\n ×\n
\n
\n

The van will not come on Thursday. Four printed labels stay valid for seven days.

\n
\n
\n Keep the slot\n \n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neubrutalism.landing.s02.p02.t02.u02\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"neubrutalism\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nb-2222\",\n \"short\": \"v1-nb-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: #ffc900;\n --color-surface-strong: #ff90e8;\n --color-bar: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #000000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #000000;\n --color-link: #000000;\n --color-link-quiet: #000000;\n --color-link-visited: #000000;\n --color-link-hover: #000000;\n --color-link-active: #000000;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #b3b3b3;\n --color-accent: #ff90e8;\n --color-accent-text: #000000;\n --color-accent-alt: #f1f333;\n --color-fill-1: #ff90e8;\n --color-fill-2: #ffc900;\n --color-fill-3: #23a094;\n --color-fill-4: #90a8ed;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #aeaeae;\n --color-disabled-text: #303030;\n --color-danger: #dc341e;\n --color-danger-surface: #e2442f;\n --color-success: #23a094;\n --color-warning: #ffc900;\n --color-notice: #90a8ed;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: rgb(0 0 0 / 0.75);\n}\n\n/* @part type */\n:root {\n --font-body: \"Google Sans Flex\", \"Albert Sans\", \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-heading: \"Google Sans Flex\", \"Albert Sans\", \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-ui: \"Google Sans Flex\", \"Albert Sans\", \"Avenir Next\", Avenir, \"Century Gothic\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n --text-base: 18px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 24px;\n --text-display: 60px;\n --text-h1: 48px;\n --text-h2: 36px;\n --text-h3: 24px;\n --line-body: 1.55;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 500;\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: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 0;\n --radius-pill: 9999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 2px 2px 0 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 4px 4px 0 0 var(--color-shadow);\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: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;\n --backdrop-blur: 0px;\n}\n" } }