{ "id": "v1-gl-7665", "long_id": "v1.glassmorphism.app.s07.p06.t06.u05", "name": "Glassmorphism weather app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a thin light edge and a soft shadow, floating over a field of colour. Weather and wallet apps of those years used it in its plainest form: no bar at all, the navigation written straight on the sky, one glass card for the present reading and a column of smaller cards under it. This pack is that weather app, on a deep teal night with bands of green, violet and blue light, pale mint buttons and an amber accent.", "url": "https://chrono.skin/s/v1-gl-7665", "preview_url": "https://chrono.skin/s/v1-gl-7665/specimen.html", "files": { "STYLE.md": "# Glassmorphism weather app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent cards with a blurred backdrop, a thin light edge and a soft shadow, floating over a field of colour. Weather and wallet apps of those years used it in its plainest form: no bar at all, the navigation written straight on the sky, one glass card for the present reading and a column of smaller cards under it. This pack is that weather app, on a deep teal night with bands of green, violet and blue light, pale mint buttons and an amber accent.\n\n## Layout\n\n- Content column: `--size-page` (1080px), centred, with `--space-4` (22px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) fills the viewport; only the column is capped.\n- Navigation: there is no bar. `.ds-nav` is a three-part row on the backdrop: the brand at the left, a centred row of text links whose current item carries a 3px rule in the accent colour, and at the right a pill-shaped search field and the account avatar. One link opens a `.ds-menu`. The row and the footer are written once, around the views.\n- Home page, top to bottom: the hero (a `--size-now` (320px) glass card with the present reading at the left, title, lead and two buttons on the backdrop at the right); the hour-by-hour `.ds-carousel` across the full column; then `.ds-page__layout`, a main column with a `--size-side` (300px) column on the right. The main column holds the four reading tiles (`.ds-grid`), a `.ds-page__heading` and the list of coming days; the side column holds the saved places (`.ds-sidebar`), the inverted daylight panel and a notice. Both columns should end near each other.\n- Inner pages have no hero. Under the navigation come the `.ds-breadcrumb` and, 8px below it, the `.ds-page-header` on the backdrop: title at `--text-h1` and one muted line on the left, at most two buttons on the right. Below it either one `.ds-page__main` stack across the full column (the `.ds-stat` cards, the `.ds-tabs` pills, the table, its pagination and a `.ds-page__note`), or `.ds-page__layout--even` (two equal columns, for lists beside forms), or `.ds-page__layout--flush` (main column and the 300px side column, for reading pages).\n- Views: the specimen is one site with four screens, one showing at a time. `today` is the home view. `forecast` is the week: four figures, the tabs, the table of seven days and the pagination by week. `places` is the working screen: notices, the saved places with their status, the open dialog that removing a place raises and the empty list of sent alerts on the left; the form for a new place and the alert switches on the right. `guide` is the reading page: running text with the link states and an accordion of questions beside a contents sidebar, the author and the units. Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address.\n- Spacing scale: `--space-1` 4px (inside tiles, between pagination cells), `--space-2` 8px (label to control, between tabs, icon to text), `--space-3` 14px (row padding, tile padding and the gap between tiles and between stat cards, gaps between buttons), `--space-4` 22px (panel padding, the gap between every pair of neighbouring cards and between the columns), `--space-5` 36px (hero bottom padding, gap before an h2), `--space-6` 56px (gap between the present card and the hero text, dialog padding, gap above the footer), `--space-7` 92px (textarea height only).\n- Glass: cards use `backdrop-filter: blur(var(--backdrop-blur))` (20px in this pack's surface set); menus, dialogs and the error notice use three times that with `saturate(180%)`. Never put a blurred element inside another; hour cells, switches and inputs inside a card are plain translucent fills.\n- Below 900px the hero and every two-column layout stack, and the tiles and stat cards go two by two. Below 720px the navigation wraps: brand, search and avatar on the first row, the links spread across a second; the hero title drops to `--text-h1`, the hours show four to a row, columns marked `.ds-table__opt` are hidden and the page header's buttons move under its text. Nothing scrolls sideways at 390px except the carousel's own track.\n- On a phone (720px and below) the row of `.ds-nav__inner` wraps: the brand and `.ds-nav__tools` (the search pill, which keeps its room, and the avatar) on the first row and `.ds-nav__list` spread across the second. A `.ds-menu` among the links opens aligned to its right edge. There is no menu button. A tooltip on a form label opens at the left edge of the label, at most 26 characters wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` and `--font-ui` are the system sans; `--font-heading` is its display cut (SF Pro Display, Segoe UI Variable Display, then Helvetica Neue), used light. The references set their titles in commercial grotesques at light and medium weights; these are the closest system stacks. `--font-mono` is for code and key names.\n- Sizes: `--text-base` 15px body, `--text-ui` 14px for controls, navigation, rows and card text, `--text-small` 12px for meta text, badges and uppercase labels, `--text-large` 19px for the hero lead, the brand and prose leads, `--text-h3` 17px (card and tile titles, set bold), `--text-h2` 26px (section headings, dialog title), `--text-h1` 34px (page title, stat figures), `--text-display` 72px for the hero title only.\n- Weights: 400 body and headings, 300 for the display size and the stat figures (`--weight-display`), 500 controls (`--weight-ui`), 600 bold and small titles. Display text is tracked -0.02em and set solid (`--line-display` 1).\n- Links in running text are `--color-link` (pink) and underlined (`--link-decoration`); titles, rows and navigation are `--color-link-quiet` with no underline.\n- Uppercase is used only on small labels: `.ds-sidebar__heading`, `.ds-stat__label`, `.ds-form__group-title` and table head cells, written in the component.\n- Text is `--color-text` on glass, `--color-text-muted` for meta and card text, `--color-heading-alt` for uppercase labels.\n- Glass: `--fill-panel` for cards. `--color-surface` is chips and pagination cells, `--color-surface-alt` the current row, the current navigation and sidebar item and key caps, `--color-surface-strong` progress and slider tracks and hovered controls.\n- Bar glass: `--fill-bar` with `--color-bar-text` for the navigation card, the player bar and code blocks; `--fill-bar-alt` with `--color-bar-alt-text` for the table head, status badges and the footer.\n- `--fill-inverse` with `--color-inverse-text` is the small `.ds-page__promo` card only; a button on it is `.ds-button--inverse`, which swaps the two colours.\n- `--color-fill-1` to `--color-fill-4` (magenta, blue, orange, green) are the points of colour in the backdrop, the cover art (`.ds-hero__cover`, `.ds-page-header__art`) and, at 55% under glass, the tints of album tiles and row thumbnails.\n- `--color-button` is hot pink with near-black text: primary buttons, the brand tile, the current tab, the current page and the play button. `--color-accent` (amber) is badges, progress, the checked box and the 3px marker of the current navigation item and of a notice (`--border-width-strong`). `--color-accent-alt` (blue) marks \"new\".\n- Status colours appear as a ring and a dot on status badges, as the edge and title of an error, and at 70% as the tint of the destructive button; never as large fills.\n- Shadows: `--shadow-panel` on cards (in this surface set an inner glow and a short drop), `--shadow-dialog` on the hero, the dialog box and the player bar, `--shadow-control` on buttons and inputs. `--shadow-text` is on the brand, the hero title, page titles and stat figures (here a soft halo of the accent).\n- One-off values with no token: `saturate(180%)` and `saturate(160%)` on the strongest glass, tints and the destructive button through `color-mix()` with `transparent`, the grooves of `.ds-grid__art` (a repeating radial gradient of `--color-border-muted`), `calc(var(--radius-page) - var(--space-3))` for the inner corner of a tile, and `opacity` on the navigation note, tab counts and the player's second line.\n\n## Components\n\n- `.ds-page`: on ``; paints the backdrop and sets the base type. `.ds-page__inner` is the width container, `.ds-page__layout` the main-plus-side grid (`--even` for two equal columns, `--flush` without the top margin), `.ds-page__main` and `.ds-page__side` vertical stacks, `.ds-page__heading` a small heading on the backdrop with an optional link or badge at its right end, `.ds-page__note` a centred small line under a table. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: the row on the backdrop. `.ds-nav__list` holds `.ds-nav__link` items; the current one is `is-current` (the specimen sets it from the address). `.ds-nav__tools` holds `.ds-nav__search` (a `.ds-form__input` made a pill, with `.ds-nav__search-icon`) and the account `.ds-avatar`.\n- `.ds-brand`: the site's mark and name at the left of the navigation: `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` the name in the heading font at `--text-h3`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the home page's introduction. `.ds-hero__now` is the glass card of the present reading (`.ds-hero__place`, `.ds-hero__reading` with `.ds-hero__figure` and `.ds-hero__glyph`, `.ds-hero__caption`, and `.ds-hero__facts` with `.ds-hero__fact` and `.ds-hero__fact-label`); `.ds-hero__text` holds `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions`. Use it once, on the home page.\n- `.ds-page-header`: head of an inner page: `.ds-page-header__text` with `.ds-page-header__title` and `.ds-page-header__lead`, and `.ds-page-header__actions` at the right. No fill of its own. The breadcrumb goes directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a code block. Put it inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays several out in a row.\n- `.ds-button`: primary, a pale solid pill 40px high. `.ds-button--secondary` is glass with a light edge; `.ds-button--danger` is the destructive action, tinted with `--color-danger`, used once at the end of a group or as the confirming button of a dialog; `.ds-button--large` for the hero; `is-disabled` or `disabled` for the disabled state. `.ds-button__row` lays buttons out. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps a `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (in `.ds-form__select-wrap` with a `.ds-form__chevron`), `.ds-form__range`, `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons.\n- `.ds-table`: one sheet of glass with a `--fill-bar` head and hairline rows. `.ds-table__num` right-aligns figures, `.ds-table__opt` marks a column hidden on a phone, `.ds-table__meta` is muted text.\n- `.ds-list`: rows in one sheet of glass. `.ds-list__item` holds an optional `.ds-list__icon`, a `.ds-list__body` (`.ds-list__title`, `.ds-list__meta`), an optional badge and a `.ds-list__value` figure (with `.ds-list__value-low` for the lower of a pair). `.ds-list__dot` is a status dot.\n- `.ds-panel`: the basic sheet of glass: `.ds-panel__title` strip, `.ds-panel__body`. `.ds-panel--dark` is the bar-coloured variant, `.ds-panel--inverse` the inverted block (pale on this palette) for one fact that should stand out. `.ds-panel__pair` with `.ds-panel__pair-value` is a label and its value on one line; `.ds-panel__text` a closing paragraph.\n- `.ds-grid`: four tinted glass tiles, one reading each. `.ds-grid__cell` with `--1` to `--4` takes its tint from `--color-fill-*`; inside, `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta` and a `.ds-progress` at the foot.\n- `.ds-stat`: the row of figures on an inner page; `.ds-stat` is the row and each `.ds-stat__item` a separate small glass card with `.ds-stat__label`, `.ds-stat__value` and a `.ds-stat__meta` line under the figure. Three or four items.\n- `.ds-tabs`: a row of separate pills on `--fill-bar-alt`; `.ds-tabs__tab` with `is-current` filled with the accent. For switching what a page shows, not for site navigation.\n- `.ds-badge`: pill for counts and markers in the accent; `.ds-badge--alt` for \"new\", `.ds-badge--glass` for quiet labels, and the status labels `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`: a `--fill-bar-alt` pill with a 1px ring and a dot in the status colour.\n- `.ds-sidebar`: glass block in the side column: `.ds-sidebar__heading`, `.ds-sidebar__list`, `.ds-sidebar__link` with `is-current`, and `.ds-sidebar__value` for a figure at the right of a link.\n- `.ds-notice`: information notice on `--color-notice`; `.ds-notice--error` on `--color-danger-surface` with a danger border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several.\n- `.ds-pagination`: centred row of small glass cells, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill, `is-disabled` greys an end.\n- `.ds-breadcrumb`: small trail above the page header, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed sheet (`--color-overlay`) with a centred `.ds-dialog__box` of the strongest glass: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: empty state on a glass panel: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a floating strip of glass at the end of the column, `.ds-footer__inner` with `.ds-footer__links` and `.ds-footer__link`.\n- `.ds-menu`: a drop-down under a navigation item, shown on hover or focus (or with `is-open`): `.ds-menu__trigger` with a `.ds-menu__caret`, `.ds-menu__list` of the strongest glass, `.ds-menu__link` rows with an optional `.ds-menu__meta` at the right.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. For questions and help.\n- `.ds-tooltip`: a round hint mark beside a label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). Keep the tip to one sentence.\n- `.ds-carousel`: one slide showing in a sheet of glass: `.ds-carousel__head` (a `--fill-bar` strip with the title and `.ds-carousel__arrows` of `.ds-carousel__arrow` buttons), `.ds-carousel__track` of `.ds-carousel__slide` items that snap as they scroll, and `.ds-carousel__dots` with `.ds-carousel__dot`, the current one `is-current`. Here a slide is `.ds-carousel__hours`: eight `.ds-carousel__hour` cells with `.ds-carousel__time`, `.ds-carousel__glyph`, `.ds-carousel__temp` and `.ds-carousel__rain`; the present hour is `is-current`.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. Consecutive switches are divided by a hairline.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--90`. `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by a hairline.\n- `block-gap <= 56px`: neighbouring cards sit 22px apart; 56px is the largest gap on the page.\n- `content-width <= 1080px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 72px`: the hero title is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 600`: titles are light or regular; 600 is for small titles and bold.\n- `font-families <= 3`: the system sans, its display cut and one monospace.\n- `line-height <= 1.5`: body text is set at 1.45.\n- `letter-spacing <= 1.5px`: only the display size is tracked, tightened by 2% of its size (1.4px at 72px); nothing is spaced out.\n- `uppercase-text <= 10%`: uppercase is for small labels only.\n- `border-width <= 2px`: edges are 1px hairlines; 2px is the hero card and the featured plan.\n- `border-radius <= 40px`: cards are 24px, the hero, tiles and bands 36px; only pills go higher.\n- `box-shadow-blur <= 96px`: card shadows blur 60px, the hero, the pill and the dialog 96px.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 40%`: one soft fade per card and nothing else; controls, rows and bars are flat.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new container starts from `.ds-panel` (fill, 1px edge, radius, shadow and blur together, never one without the others), a new control from `.ds-button--secondary` or `.ds-form__input`, a new overlay from `.ds-menu__list` or `.ds-dialog__box`, a new reading from a `.ds-grid__cell`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*` and `--size-*`. Keep opaque fills to buttons, badges and the one inverted panel, keep the navigation free of any bar, and place glass only where the backdrop behind it has colour to show through.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1080px;\n --size-side: 300px;\n --size-now: 320px;\n --size-search: 200px;\n --size-dialog: 440px;\n --size-control: 40px;\n --size-glyph: 56px;\n --size-icon: 18px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 14px;\n --space-4: 22px;\n --space-5: 36px;\n --space-6: 56px;\n --space-7: 92px;\n}\n\n/* shell: the sky fills the viewport, everything sits in one centred column */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-4);\n align-items: start;\n margin-top: var(--space-4);\n}\n.ds-page__layout--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n margin-top: 0;\n}\n.ds-page__layout--flush {\n margin-top: 0;\n}\n.ds-page__main,\n.ds-page__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-2) 0 calc(-1 * var(--space-2));\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__heading .ds-link {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-page__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: center;\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.ds-page__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n flex: none;\n}\n\n/* nav: no bar; brand, a centred row of text links and the tools sit straight on the sky */\n.ds-nav {\n position: relative;\n z-index: 4;\n color: var(--color-text);\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-4);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n min-height: calc(var(--size-control) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n justify-self: start;\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control) - var(--space-2));\n height: calc(var(--size-control) - var(--space-2));\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\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 color: var(--color-button-text);\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-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n border-bottom-color: var(--color-border-strong);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#today:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#forecast:target) .ds-nav__link[href=\"#forecast\"],\n.ds-page:has(#places:target) .ds-nav__link[href=\"#places\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n border-bottom-color: var(--color-accent);\n color: var(--color-heading);\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-nav__search {\n position: relative;\n display: block;\n width: var(--size-search);\n min-width: 0;\n}\n.ds-nav__search .ds-form__input {\n padding-left: calc(var(--size-icon) + 2 * var(--space-3));\n border-radius: var(--radius-pill);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-nav__search-icon {\n position: absolute;\n top: 50%;\n left: var(--space-3);\n z-index: 1;\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n opacity: 0.7;\n pointer-events: none;\n}\n\n/* hero: a glass card with the present weather on the left, title, lead and actions on the sky beside it */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-now) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-4) 0 var(--space-5);\n}\n.ds-hero__now {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-hero__place {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__reading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-hero__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n flex: none;\n color: var(--color-accent);\n}\n.ds-hero__figure {\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 text-shadow: var(--shadow-text);\n}\n.ds-hero__caption {\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-hero__facts {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-2);\n margin: var(--space-2) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-hero__fact {\n margin: 0;\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__fact-label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-hero__text {\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: head of an inner page, set on the backdrop like the hero, one size down */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-2) 0 var(--space-4);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\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;\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 margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: 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 background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\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__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-3);\n}\n\n/* buttons */\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 padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n 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(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: not-allowed;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n\n/* panel: the basic sheet of glass */\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel--dark {\n background: var(--fill-bar);\n border-color: var(--color-border-muted);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: uppercase;\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\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 color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\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 font-weight: var(--weight-bold);\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 font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* table: glass sheet, dark glass head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border-collapse: separate;\n border-spacing: 0;\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: rows inside a sheet of glass, divided by hairlines */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background: var(--color-accent-alt);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n/* status badges: a dark glass pill with a 1px ring and a dot in the status colour, like the error notice */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: strongly blurred glass box on a dimmed sheet, shown in the page flow */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-4) var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\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-ui);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* sidebar */\n.ds-sidebar {\n padding: var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__heading + .ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n}\n.ds-sidebar__list {\n margin: 0 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n\n/* menu: a drop-down of strong glass under a navigation item, shown on hover or focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__caret {\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n margin-bottom: var(--space-1);\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\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 -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* accordion: one sheet of glass, sections that open and close */\n.ds-accordion {\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* tooltip: a round hint mark; the tip is an inverted block above it, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n\n/* carousel: one slide showing in a sheet of glass, the rest reached by scrolling sideways; dots under it */\n.ds-carousel {\n overflow: hidden;\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-carousel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-1);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-control) - var(--space-2));\n height: calc(var(--size-control) - var(--space-2));\n padding: 0;\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n color: var(--color-bar-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n opacity: 0.45;\n cursor: default;\n}\n.ds-carousel__track {\n display: flex;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n list-style: none;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__track::-webkit-scrollbar {\n display: none;\n}\n.ds-carousel__slide {\n flex: 0 0 100%;\n min-width: 0;\n padding: var(--space-4);\n scroll-snap-align: start;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n padding: 0 0 var(--space-3);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-text) 28%, transparent);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-accent);\n}\n\n/* switch: an on/off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n\n/* progress: a thin track with the accent fill */\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar--25 { width: 25%; }\n.ds-progress__bar--40 { width: 40%; }\n.ds-progress__bar--65 { width: 65%; }\n.ds-progress__bar--75 { width: 75%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* avatar: a round account picture drawn from initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar--2,\n.ds-avatar--3,\n.ds-avatar--4 {\n color: var(--color-text);\n}\n.ds-avatar--2 {\n background: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel variants and small parts of this layout */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n border-color: transparent;\n color: var(--color-inverse-text);\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-panel--inverse .ds-panel__title {\n border-bottom-color: color-mix(in srgb, var(--color-inverse-text) 18%, transparent);\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-progress {\n background: color-mix(in srgb, var(--color-inverse-text) 18%, transparent);\n}\n.ds-panel__pair {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-panel__pair-value {\n font-weight: var(--weight-bold);\n font-variant-numeric: tabular-nums;\n}\n.ds-panel__text {\n margin: var(--space-3) 0 0;\n font-size: var(--text-ui);\n}\n.ds-list__icon {\n width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-2));\n flex: none;\n color: var(--color-accent);\n}\n.ds-list__value {\n flex: none;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__value-low {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-sidebar__value {\n color: var(--color-text-muted);\n font-variant-numeric: tabular-nums;\n}\n\n/* hours: the cells of one carousel slide */\n.ds-carousel__hours {\n display: grid;\n grid-template-columns: repeat(8, minmax(0, 1fr));\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__hour {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-3) var(--space-1);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n text-align: center;\n}\n.ds-carousel__hour.is-current {\n background: var(--color-surface-alt);\n border-color: var(--color-border);\n}\n.ds-carousel__time {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-carousel__glyph {\n width: calc(var(--size-icon) + var(--space-2));\n height: calc(var(--size-icon) + var(--space-2));\n color: var(--color-accent);\n}\n.ds-carousel__temp {\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 font-variant-numeric: tabular-nums;\n}\n.ds-carousel__rain {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: four tinted glass tiles, one reading each, with its bar */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-3);\n background: linear-gradient(200deg, var(--color-surface-alt), transparent 60%), var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n color: var(--color-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-grid__value {\n margin-top: var(--space-3);\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 font-variant-numeric: tabular-nums;\n}\n.ds-grid__meta {\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-grid__cell .ds-progress {\n margin-top: auto;\n}\n\n/* stats: a row of separate small glass cards, one figure each */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-3) var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-stat__value {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__meta {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n\n/* tabs: a row of separate pills; the current one takes the accent fill */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n}\n\n/* footer: a floating strip of glass at the end of the column */\n.ds-footer {\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: var(--space-6) auto 0;\n padding: 0 var(--space-4) var(--space-4);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-page);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: underline;\n}\n\n/* adjustments to the shared parts for this layout */\n.ds-breadcrumb {\n margin-top: var(--space-2);\n}\n.ds-panel__title {\n text-transform: none;\n}\n.ds-form__label,\n.ds-table th {\n text-transform: none;\n}\n.ds-sidebar__heading {\n text-transform: none;\n}\n.ds-nav .ds-menu__list {\n left: 50%;\n transform: translateX(-50%);\n}\n.ds-notice .ds-link--quiet {\n color: inherit;\n text-decoration: underline;\n}\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n}\n\n@media (max-width: 900px) {\n .ds-page__layout,\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero {\n gap: var(--space-4);\n }\n .ds-stat,\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 720px) {\n .ds-nav__inner {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-3);\n padding-top: var(--space-3);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n justify-content: space-between;\n gap: var(--space-3);\n }\n .ds-nav__tools {\n flex: 1;\n }\n .ds-nav__search {\n flex: 1;\n width: auto;\n max-width: var(--size-search);\n }\n .ds-nav .ds-menu__list {\n left: auto;\n right: 0;\n transform: none;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-carousel__hours {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .ds-carousel__slide {\n padding: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-stat__item {\n padding: var(--space-3);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-2);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-dialog__actions,\n .ds-pagination {\n flex-wrap: wrap;\n }\n .ds-footer__inner {\n border-radius: var(--radius-panel);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: weather for Harbour Point\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n \n ME\n
\n
\n
\n\n
\n\n
\n
\n
\n
Harbour Point Now
\n
\n 14°\n \n
\n Clear sky. Feels like 12°.\n
\n
High
17°
\n
Low
8°
\n
Rain
3.1 mm
\n
\n
\n
\n

Clear until four, rain by six

\n

Thursday 7 October in Harbour Point. A dry, bright day with a west wind at 18 km/h; showers arrive in the early evening and last past midnight.

\n
\n See the week\n Change place\n
\n
\n
\n\n
\n
\n Hour by hour\n \n \n \n \n
\n
    \n
  • \n
      \n
    1. Now14°5%
      2. \n
    2. 11:0015°5%
      3. \n
    3. 12:0016°0%
      4. \n
    4. 13:0017°0%
      5. \n
    5. 14:0017°10%
      6. \n
    6. 15:0016°20%
      7. \n
    7. 16:0015°35%
      8. \n
    8. 17:0013°60%
      9. \n
    \n
    • \n
  • \n
      \n
    1. 18:0012°80%
      2. \n
    2. 19:0011°85%
      3. \n
    3. 20:0011°70%
      4. \n
    4. 21:0010°40%
      5. \n
    5. 22:009°25%
      6. \n
    6. 23:009°10%
      7. \n
    7. 00:008°5%
      8. \n
    8. 01:008°5%
      9. \n
    \n
    • \n
\n
\n
\n\n
\n
\n
\n
\n Wind\n 18 km/h\n West, gusts to 31\n \n
\n
\n Humidity\n 64%\n Dew point 7°\n \n
\n
\n UV index ?From 0 to 11. Above 3, cover up around midday.\n 3 of 11\n Moderate at noon\n \n
\n
\n Pressure\n 1016 hPa\n Falling slowly\n \n
\n
\n

The next four days Full forecast

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

Daylight

\n
\n

Sunrise 07:02

\n

Sunset 18:14

\n \n

11 h 12 min of daylight, 3 minutes less than yesterday.

\n
\n
\n
\n \n
Rain after 18:00. About 3 mm before midnight. See the hours
\n
\n
\n
\n
\n\n
\n
    \n
  1. Today
    2. \n
  2. Harbour Point
    3. \n
  3. Seven days
    4. \n
\n
\n
\n

Seven days in Harbour Point

\n

Updated at 10:40 from the harbour mast and two models.

\n
\n
\n Change place\n Set an alert\n
\n
\n
\n
\n
Warmest day
17° Monday
\n
Coldest night
6° Sunday
\n
Rain in total
23.2 mm over 5 days
\n
Strongest gust
61 km/h on Tuesday
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DaySkyOutlookHighLowRain, mmWind, km/h
Thu 7Clear, rain lateFine16°9°3.1W 18
Fri 8ShowersWet13°8°9.4W 24
Sat 9OvercastDull12°7°1.2SW 9
Sun 10Bright spellsFine15°6°0.0S 11
Mon 11ClearFine17°7°0.0SE 8
Tue 12Gale from the westStorm14°10°8.6W 61
Wed 13ClearingDull13°8°0.9NW 22
\n \n

Week 1 of 3. Beyond ten days the forecast is a range, not a figure; the guide explains why.

\n
\n
\n\n
\n
    \n
  1. Today
    2. \n
  2. Account
    3. \n
  3. Places and alerts
    4. \n
\n
\n
\n

Places and alerts

\n

Four saved places, one of them out of reach.

\n
\n
\n Add a place\n
\n
\n
\n
\n
\n
\n \n
Readings refresh every ten minutes. Alerts are sent as soon as a threshold is crossed.
\n
\n
\n \n
Wren Hill has not reported since 06:20. Its figures are from the model only.
\n
\n
\n

Saved 4

\n
    \n
  • \n
    Harbour PointMast at 12 m, read at 10:40
    \n Live\n 14°\n
    • \n
  • \n
    Port AldousGale expected on Tuesday
    \n Watch\n 11°\n
    • \n
  • \n
    Wren HillNo signal for 4 h 20 min
    \n Silent\n 9°\n
    • \n
  • \n
    Saltmarsh RowAdded yesterday by Tobias Renn
    \n New\n 13°\n
    • \n
\n
\n
\n

Remove Wren Hill?

\n

Its two alerts and 30 days of readings go with it. Tobias Renn will lose it as well.

\n
\n Keep it\n Remove\n
\n
\n
\n
\n \n

No alerts sent this week

\n

Nothing has crossed a threshold since Sunday. Alerts you receive are listed here for 30 days.

\n Check Tuesday's gale\n
\n
\n
\n
\n

Add a place

\n
\n
\n
\n \n \n
\n
\n \n \n Longitude must lie between -180 and 180.\n
\n
\n \n \n \n \n \n
\n
\n \n \n Shown under the place name.\n
\n \n
\n \n Cancel\n \n Remove place\n
\n
\n
\n
\n
\n

Alerts for Harbour Point

\n
\n \n \n \n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Today
    2. \n
  2. Guide
    3. \n
  3. Reading the forecast
    4. \n
\n
\n
\n

Reading the forecast

\n

What the figures mean and how far ahead to trust them.

\n
\n
\n Back to today\n
\n
\n
\n
\n
\n
\n
\n

Figures, ranges and chances

\n

A forecast is a set of likely outcomes. chronoskin shows the middle of that set and tells you how wide it is.

\n

Chance of rain

\n

The percentage under each hour is the share of model runs in which at least 0.2 mm fell at your place during that hour. It says nothing about how hard it rains; the amount is shown in the week table.

\n

What the temperatures are

\n
    \n
  • The large figure is the air temperature at 2 m, in the shade.
    • \n
  • Feels like adds wind and humidity to that figure.
    • \n
  • High and low run from 06:00 to 06:00, not from midnight.
    • \n
\n

Sharing a reading

\n

Every hour has an address of its own. Add ?at=17:00 to a place to open it at that hour.

\n

\n The week table\n Visited: places\n Hovered link\n Active link\n

\n
\n
\n
\n
\n
\n Why did the forecast change since this morning?\n

New model runs arrive four times a day. The evening rain moved two hours earlier in the 09:00 run.

\n
\n
\n How far ahead is a figure reliable?\n

Three days for temperature, about two for rain. After that, read the range.

\n
\n
\n Where do the readings come from?\n

From the nearest station to each place. If it falls silent, the model fills in.

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

Written by

\n
\n
\n IV\n Ines VargaForecaster, updated 2 October\n
\n

Something unclear? Tell us which place and we will look at its station.

\n
\n
\n
\n

Units

\n
\n

Temperature °C

\n

Wind km/h

\n

Rain mm

\n

Pressure hPa

\n
\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s07.p06.t06.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-7665\",\n \"short\": \"v1-gl-7665\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(32 24 40);\n --color-canvas: rgb(32 24 40);\n --color-surface: rgb(255 255 255 / 0.07);\n --color-surface-alt: rgb(255 255 255 / 0.12);\n --color-surface-strong: rgb(255 255 255 / 0.22);\n --color-bar: rgb(19 19 19 / 0.72);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(31 31 31 / 0.6);\n --color-bar-alt-text: rgb(239 237 253);\n --color-inverse: rgb(255 255 255);\n --color-inverse-text: rgb(19 19 19);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(255 255 255 / 0.65);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(239 237 253 / 0.7);\n --color-link: rgb(255 55 199);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(147 130 255);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(252 211 77);\n --color-border: rgb(255 255 255 / 0.12);\n --color-border-strong: rgb(255 255 255 / 0.26);\n --color-border-muted: rgb(255 255 255 / 0.07);\n --color-accent: rgb(252 211 77);\n --color-accent-text: rgb(19 19 19);\n --color-accent-alt: rgb(39 117 202);\n --color-fill-1: rgb(245 13 180);\n --color-fill-2: rgb(42 90 218);\n --color-fill-3: rgb(255 77 0);\n --color-fill-4: rgb(0 158 30);\n --color-button: rgb(255 55 199);\n --color-button-text: rgb(19 19 19);\n --color-button-hover-text: rgb(19 19 19);\n --color-button-secondary: rgb(255 255 255 / 0.09);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(19 19 19 / 0.6);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.24);\n --color-disabled: rgb(31 31 31);\n --color-disabled-text: rgb(255 255 255 / 0.4);\n --color-danger: rgb(255 0 26);\n --color-danger-surface: rgb(19 19 19 / 0.72);\n --color-success: rgb(0 158 30);\n --color-warning: rgb(255 77 0);\n --color-notice: rgb(255 55 199 / 0.14);\n --color-notice-text: rgb(255 255 255);\n --color-focus: rgb(255 55 199);\n --color-shadow: rgb(19 19 19 / 0.54);\n --color-overlay: rgb(19 19 19 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: \"SF Pro Display\", \"Segoe UI Variable Display\", \"Helvetica Neue\", system-ui, sans-serif;\n --font-ui: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: \"SF Mono\", ui-monospace, Menlo, \"Cascadia Mono\", Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 19px;\n --text-display: 72px;\n --text-h1: 34px;\n --text-h2: 26px;\n --text-h3: 17px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 400;\n --weight-display: 300;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.02em;\n --figure-shift: 0em;\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: 26px;\n --radius-panel: 24px;\n --radius-pill: 40px;\n --radius-page: 36px;\n --shadow-panel: 0 30px 60px -28px var(--color-shadow);\n --shadow-control: 0 10px 24px -10px color-mix(in srgb, var(--color-button) 70%, transparent);\n --shadow-control-hover: 0 14px 32px -8px color-mix(in srgb, var(--color-button) 85%, transparent);\n --shadow-control-pressed: 0 2px 6px -2px color-mix(in srgb, var(--color-button) 70%, transparent);\n --shadow-dialog: 0 48px 96px -36px var(--color-shadow);\n --shadow-text: none;\n --fill-page:\n radial-gradient(ellipse 80% 640px at 0 0, var(--color-fill-2), transparent 70%),\n radial-gradient(ellipse 70% 720px at 100% 360px, var(--color-fill-3), transparent 70%),\n radial-gradient(ellipse 80% 700px at 8% 1050px, var(--color-fill-4), transparent 70%),\n radial-gradient(ellipse 70% 720px at 96% 1700px, var(--color-fill-2), transparent 70%),\n radial-gradient(ellipse 80% 700px at 0 2400px, var(--color-fill-3), transparent 70%),\n radial-gradient(ellipse 70% 720px at 100% 3100px, var(--color-fill-4), transparent 70%),\n radial-gradient(ellipse 80% 700px at 6% 3800px, var(--color-fill-2), transparent 70%),\n linear-gradient(150deg, var(--color-fill-1), var(--color-page) 45%, var(--color-fill-1));\n --fill-bar: linear-gradient(180deg, color-mix(in srgb, white 12%, transparent), transparent), var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(135deg, var(--color-inverse), color-mix(in srgb, var(--color-inverse), black 10%));\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(180deg, var(--color-surface-alt), var(--color-surface) 45%, color-mix(in srgb, var(--color-surface) 45%, transparent));\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 25%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n --backdrop-blur: 40px;\n}\n" } }