{ "id": "v1-fa-2111-dc", "long_id": "v1.frutiger-aero.portal.s02.p01.t01.u01.dc", "name": "Frutiger Aero start page", "era": { "slug": "frutiger-aero", "code": "fa", "name": "Frutiger Aero", "years": [ 2004, 2010 ], "description": "The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "compact", "summary": "A fixed-width personal start page in the dark-glass variety of the Frutiger Aero look: a night-blue page lit by cyan and violet aurora glows, a black glass bar, a search band with one glowing field, and three columns of glass gadgets for news, mail, weather and markets. Portals and start pages of this kind were common from about 2005 to 2010, when every provider let visitors arrange small windows of content. The gadgets are translucent panels with a lit top edge and a deep soft shadow, buttons are capsule-shaped gels with a halo, and the type pairs a small Lucida body with heavier Gill Sans headings.", "url": "https://chrono.skin/s/v1-fa-2111-dc", "preview_url": "https://chrono.skin/s/v1-fa-2111-dc/specimen.html", "files": { "STYLE.md": "# Frutiger Aero start page\n\n## Summary\n\nA fixed-width personal start page in the dark-glass variety of the Frutiger Aero look: a night-blue page lit by cyan and violet aurora glows, a black glass bar, a search band with one glowing field, and three columns of glass gadgets for news, mail, weather and markets. Portals and start pages of this kind were common from about 2005 to 2010, when every provider let visitors arrange small windows of content. The gadgets are translucent panels with a lit top edge and a deep soft shadow, buttons are capsule-shaped gels with a halo, and the type pairs a small Lucida body with heavier Gill Sans headings.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 980px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- The header and the footer span the window; their content sits in a centred `--size-page` box (`.ds-nav__inner`, `.ds-footer__legal-text`). The header is two strips: a small-print strip of `--size-top` (24px) and the glass bar of `--size-nav` (36px).\n- Everything else sits in `.ds-page__wrap`, one translucent sheet (90% `--color-canvas`) that hangs from the bar: no top border, `--radius-page` on the two lower corners, 14px padding. Inside it the content is 950px wide.\n- The home page is the search band (`.ds-hero`) and under it `.ds-page__gadgets`, three columns in the proportion 1.3 to 1 to 1 with `--space-5` (14px) between columns and between the gadgets of a column. Each `.ds-page__column` is a stack of `.ds-panel` gadgets; the last block of a column may be a `.ds-sidebar`.\n- Spacing scale (dense): `--space-1` 2px (hairline gaps), `--space-2` 4px (list row padding, gadget head padding), `--space-3` 6px (gaps between buttons, between grid tiles and forecast tiles), `--space-4` 10px (gadget body padding, control padding, cell padding), `--space-5` 14px (gutter, sheet padding, gap between stacked blocks), `--space-6` 20px (hero padding, gap between main and side column, gap between sections; the largest gap).\n- Fixed sizes: controls `--size-control` 22px tall, the search field and its button `--size-control-large` 32px, the search form `--size-search` 420px, channel orbs `--size-orb` 26px, rank chips `--size-rank` 18px, form labels `--size-label` 140px, the dialog `--size-dialog` 400px.\n- Inner pages drop the search band and the three columns. In the sheet, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` as a glass strip across the full width (title and one line on the left, buttons on the right), then `.ds-page__columns`: a main column (630px) and a right column of `--size-sidebar` (300px), 20px apart. `.ds-tabs` sit at the top of the main column above the list or table they switch; notices sit above the form; a dialog follows its table on a dimmed strip; the side column holds `.ds-sidebar` blocks, gadgets and at most one empty state.\n- Views: the specimen is one start page of five screens, each a `.ds-view` inside the sheet, with header and footer written once around them. `home` is the start page (search band, the News, Channels, Mail, Today, Weather and Markets gadgets, a block of gadgets to add). `news` is the news front (tabs, a roomy list, pagination, most read). `story` is one story (long text, onward links, a traffic gadget with status badges). `mail` is the inbox (the button row in the page header, folder tabs, the table, the deleting dialog, folders, the key to the states, an empty state for drafts). `settings` changes the start page (notices, the form, gadgets to add). Links are plain `href=\"#name\"`; the bar link of the showing view is lit by a `.ds-page:has(#name:target)` rule, the Start link also when no view is named, and the News link also on a story.\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- One family: `--font-body`, `--font-heading` and `--font-ui` are \"Segoe UI\", Tahoma, \"Lucida Grande\", sans-serif: system faces only, the humanist sans of the period's desktops, with Tahoma and Lucida Grande where Segoe UI is not installed. `--font-mono` (Consolas) is for inline code.\n- `--text-base` 12px at `--line-body` 1.45. `--text-small` 11px for meta lines, hints, stat labels, footer. `--text-ui` 12px for buttons and fields; buttons are bold, navigation is regular (`--weight-ui` 400).\n- Headings are regular weight (`--weight-heading`, `--weight-display` 400) and get their weight from size and colour: `--text-display` 28px hero title, `--text-h1` 22px page titles and stat figures, `--text-h2` 17px section, panel and cell titles and the brand name, `--text-h3` 13px (bold) list titles, sidebar titles, navigation, tabs. `--text-large` 15px hero lead and the large button. Nothing is uppercased or tracked.\n- Links are not underlined at rest (`--link-decoration` none) and underline on hover; titles are bold (`.ds-link--title`).\n- `--color-page` #3a8ccb with `--fill-page`: a sky that is darker at the top, with a white and a green glow behind the bar, fading to pale blue below.\n- `--color-bar` #2d6fa3 with `--fill-bar` (two-step glass: a light upper half, a hard break at 50%, a darker lower half) and white `--color-bar-text` under `--shadow-text`: the navigation bar, the dialog frame, the blue orb.\n- `--color-bar-alt` #cfe3f3 with `--fill-bar-alt` (pale glass with the same break): the stats strip, table head, sidebar titles, the hero window's caption, date tile heads.\n- `--color-inverse` #256f95 with `--fill-inverse` (deep at the top, lighter towards the horizon, a soft glow at the upper right): the hero sky and the footer band, white text.\n- `--color-heading` #0b4f86 page, section and cell titles and figures; `--color-heading-alt` #549c00 (grass green) panel titles, prose h2, breadcrumb marks. `--color-text` #333333, `--color-text-muted` #636363.\n- `--color-link` #07519a, `--color-link-quiet` #006699, visited #5a4fa3, hover #2198c4, active #549c00.\n- `--color-button` #36b701 with `--fill-button` (green gel: bright top, a break just under the middle, light again at the foot): the primary button, the brand tile, the arrow button, the current step and page number, the first orb. `--color-button-secondary` #d8e0e8 with `--fill-button-secondary` (silver-blue glass): every other button, tabs at rest, pagination keys.\n- `--color-accent` #6eab26 with `--fill-accent`: pill badges, meter bars, list bullets, the edge of the current tab, the hills of the hero. `--color-accent-alt` #ff9c00: the New marker and the fourth orb.\n- `--color-fill-1` to `--color-fill-4` (sky, mist, leaf, sun): the lower end of each feature cell's fade; never text or borders.\n- Borders are 1px solid: `--color-border` #aaccee for boxes, `--color-border-muted` #d6e3e7 for rules inside a box, `--color-border-strong` #3274a4 for the sheet and the dialog, `--color-input-border` #7fb1d8 for fields.\n- `--color-notice` #fff8c9 for notices; `--color-danger` #c3271b on `--color-danger-surface` #fde9e4 for errors; `--color-success` #3f9a0b and `--color-warning` #f0a000 fill the status badges and signs.\n- Surface: `--radius-control` 4px, `--radius-panel` 7px, `--radius-pill` 10px, `--radius-page` 10px. `--shadow-panel` is a white inner top edge plus a soft 6px drop; `--shadow-control` the same on a button; a hovered button gains a halo in `--color-focus`; `--shadow-dialog` is the deep 24px shadow of a floating window. `--fill-panel` is translucent white glass and `--backdrop-blur` 6px blurs what lies behind it. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills (the fill's colour mixed with `--color-shadow`), dividers on the bar (`--color-bar-text` with transparent), the sheet (88% `--color-canvas`), bubbles (`--color-inverse-text` with transparent), the hills (`--color-accent` with transparent), gloss on danger, success and warning fills (mixed with `--color-button-text`).\n- The era's conventions for which text sits on which fill, kept by every layout and every token set of the era:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours sit on `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong`, `--fill-panel` and the four `--color-fill-*` tints. A palette keeps page, canvas, surfaces and fills on one side (all light or all dark) so that these stay readable on every one of them.\n - `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`. Links on a bar take the bar's text colour, never `--color-link`.\n - `--color-button-text` on `--fill-button` and on any fill made from `--color-danger`, `--color-success` or `--color-accent-alt`; it is always the light colour and also supplies the gloss on those fills (mixed in with `color-mix()`).\n - `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`; `--color-danger` as text on `--color-danger-surface` and on the surfaces.\n - Nothing but decoration sits on `--fill-page`: no text is set directly on the page.\n - `--color-focus` is the glow colour: the focus ring, the halo of the search field and of a hovered button. `--color-inverse-text` draws the bubbles on the sky band. `--color-shadow` tints every shadow and darkens the outline of every glossy fill.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, base font and colour. `.ds-page__wrap` is the sheet; `.ds-page__gadgets` the three-column grid of the start page with `.ds-page__column` stacks; `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside` on inner pages. `.ds-section` with a cyan `.ds-section__title` separates blocks by 20px. `.ds-view` is one screen of the example site (`.ds-view--home` the first).\n- `.ds-nav`: the header, full window width. `.ds-nav__top` is the small-print strip (`.ds-nav__date`, right-aligned `.ds-nav__tools` of bold `.ds-nav__tool` links); `.ds-nav__bar` the glass bar; each wraps a `.ds-nav__inner`. The bar holds the `.ds-brand`, `.ds-nav__links` of bold `.ds-nav__link` pills (current: `is-current`, a lit translucent pill; hover: `is-hover`) and a right-aligned `.ds-nav__more` line with a `.ds-nav__more-link`.\n- `.ds-brand`: the site's mark and name at the left end of the bar, linking home; one per page. `.ds-brand__mark` is a round tile dressed like the primary button (`--fill-button`, a darker outline, `--shadow-control`) with the mark in `--color-button-text`; `.ds-brand__name` is the name at `--text-h2` in `--color-bar-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the search band at the top of the start page: a rounded block in `--fill-inverse`. `.ds-hero__main` holds the greeting as `.ds-hero__title` (40px) and one `.ds-hero__lead` line; `.ds-hero__search` on the right holds `.ds-hero__scopes` (links `.ds-hero__scope`, current `is-current`), `.ds-hero__action` (the glowing `.ds-hero__field` and a `.ds-button--large`), and a `.ds-hero__note` of suggestions (`.ds-hero__note-link`). One per site, on the start page only.\n- `.ds-page-header`: the head of an inner page instead of the hero: a glass strip with `.ds-page-header__main` (`.ds-page-header__title`, 26px, the page's h1, and a grey `.ds-page-header__text` line) and `.ds-page-header__actions` at the right. One per inner page.\n- `.ds-panel`: the gadget (`is-last` on the last of a column): `.ds-panel__head` is a glass strip with `.ds-panel__title`, an optional badge and right-aligned `.ds-panel__tools` (small `.ds-panel__tool` links such as Edit and x); `.ds-panel__body` holds the content, `.ds-panel__text`, a `.ds-panel__actions` row of buttons, a `.ds-panel__go` row (a field and its button) or a `.ds-panel__more` link.\n- `.ds-stat`: one forecast tile; four sit in a `.ds-stats` row inside the Weather gadget. Each has a small `.ds-stat__label` (the day) over a 26px `.ds-stat__number` and a `.ds-stat__note`. `.ds-stats__place` above the row names the place, with `.ds-stats__now` for the current reading. Use the row for any three to five figures of one kind inside a gadget.\n- `.ds-grid`: channel tiles, four to a row (`.ds-grid--wide` for a single row in a side column). Each `.ds-grid__cell` is a link (`--1` to `--4` choose the tint it fades into; hover: `is-hover`) with a `.ds-orb` over its name. `.ds-orb` is a 26px glossy ball with a line icon: `--fill-bar` by default, `.ds-orb--accent`, `.ds-orb--button`.\n- `.ds-tabs`: a row of small pills over a hairline: `.ds-tabs__tab`, the current one `is-current` (a piece of the glass bar), `.ds-tabs__count` for a number. Inside a gadget or at the top of the main column.\n- `.ds-list`: tight headline list. Each `.ds-list__item` (first: `is-first`) starts with a round bullet, then `.ds-list__body` with `.ds-list__title` and an optional `.ds-list__text`, then a right-aligned `.ds-list__meta` (a time or a badge). `is-lead` makes the first headline a heading; `.ds-list--roomy` is the full-page form with heading-size titles and 10px rows.\n- `.ds-button`: the primary action: a blue gel capsule with a halo, white bold 12px, 22px tall. Variants: `.ds-button--secondary` (dark glass, the usual button), `.ds-button--danger` (red gel, only for deleting), `.ds-button--large` (32px, the search button), `.ds-button--arrow` (a round button holding only a `.ds-button__icon` arrow, before the link or after the field it belongs to). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` a toolbar. One primary button per gadget, form or dialog.\n- `.ds-sidebar`: a link block (`is-last` on the last of a column): `.ds-sidebar__title` on a glass strip, `.ds-sidebar__list` of `.ds-sidebar__item` rows (first: `is-first`) divided by hairlines, each with an optional `.ds-sidebar__rank` chip before the link and a right-aligned `.ds-sidebar__count`.\n- `.ds-prose`: long text: h1, h2 (in `--color-heading-alt` over a hairline), h3 (bold), p, ul, ol, code, strong and links inside it are styled. For articles and guides.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` is bold, for titles; `.ds-link--quiet` for minor links. `.ds-links` lays several out in a row.\n- `.ds-form`: label-left form: `.ds-form__row` with a right-aligned bold `.ds-form__label` and a `.ds-form__field` holding `.ds-form__input` (`--short` for half width), `.ds-form__select` or `.ds-form__textarea`; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus` (a glow in `--color-focus`), `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` for the buttons, under a hairline and aligned with the fields.\n- `.ds-table`: data table in a rounded 1px border with the panel shadow: `.ds-table__head` cells form a strip in `--fill-bar-alt`; `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns; `.ds-table__note` is a second grey line in a cell.\n- `.ds-badge`: a small gel pill in `--fill-accent`. `.ds-badge--count` (flat, a number), `.ds-badge--new` (`--color-accent-alt`). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, one per row. `.ds-badges` lays several out in a row.\n- `.ds-notice`: a rounded one-line message with a round `.ds-notice__sign`, `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`. Notices sit above the form or list they report on.\n- `.ds-pagination`: a row of small glass keys: `.ds-pagination__link`, `is-current` (the primary button's gel), `is-disabled`, `.ds-pagination__gap` for an ellipsis.\n- `.ds-breadcrumb`: a small trail of `.ds-link` items with `.ds-breadcrumb__sep` guillemets in `--color-heading-alt` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a window: a glass frame in `--fill-bar` holding `.ds-dialog__title` (with a red `.ds-dialog__close`), a `.ds-dialog__body` in `--color-surface` with `.ds-dialog__text`, and a `.ds-dialog__actions` strip with the buttons at the right. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed rounded strip in the page flow, directly under the table or form that opened it.\n- `.ds-empty`: a pale well with a round glass `.ds-empty__orb` icon, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: full window width: `.ds-footer__links`, a glass strip of centred small links (`.ds-footer__item`, first `is-first`, hairlines between, `.ds-footer__link`), then `.ds-footer__legal`, an aurora strip holding `.ds-footer__legal-text`, one centred page-width line of small print.\n- `.ds-menu`: a glass drop-down under a navigation item (`.ds-menu__list` of `.ds-menu__link`), opened on hover or focus, never forced open.\n- `.ds-progress`: the glossy accent progress bar, a native `` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-carousel`: a picture viewer with previous and next orbs and dots (`.ds-carousel__stage`, `__track`, `__slide`, `__dots`); static, dots are not links.\n- `.ds-avatar`: the framed account picture drawn as initials, beside a name in `.ds-person`; `--small` for tight places.\n\n## Never\n\n- `row-gap <= 20px`: list rows are divided by a hairline, not by space.\n- `block-gap <= 20px`: gadgets are 14px apart, sections at most 20px.\n- `content-width <= 980px`: text stays inside the fixed column.\n- `palette-colours <= 44`: sky blues, one grass green, orange, amber, red, four pale tints and greys.\n- `font-size <= 28px`: the hero title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight; headings are regular.\n- `font-families <= 2`: one humanist sans, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on about 17px.\n- `underlined-links <= 10%`: links underline on hover only.\n- `letter-spacing = 0px`: no tracking.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 10px`: corners are 4, 7 or 10px; only orbs, bullets and pills are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 24px`: shadows are soft but short; only the floating window reaches 24px.\n- `gradient-fills <= 25%`: gloss belongs to bars, buttons, orbs, pills and cells; text areas stay plain.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything that shows live content is a gadget: a `.ds-panel` with a head strip, tools and a body, placed in a column. A new bar is `--fill-bar`, a strip `--fill-bar-alt`, a band `--fill-inverse`; anything round and pressable is dressed like `.ds-orb` or `.ds-button--arrow`. Keep to the conventions above for which text token sits on which fill, give glossy fills an outline mixed from their colour and `--color-shadow`, take glows from `--color-focus`, and make any extra shade with `color-mix()` over existing tokens.\n", "components.css": ":root {\n --size-page: 980px;\n --size-sidebar: 300px;\n --size-top: 24px;\n --size-nav: 36px;\n --size-search: 420px;\n --size-mark: 22px;\n --size-control: 22px;\n --size-control-large: 32px;\n --size-icon: 14px;\n --size-orb: 26px;\n --size-rank: 18px;\n --size-glow: 10px;\n --size-label: 140px;\n --size-textarea: 64px;\n --size-dialog: 400px;\n --space-1: 2px;\n --space-2: 3px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 11px;\n --space-6: 16px;\n}\n\n/* shell: two full-width strips, then one sheet hanging from them, three columns of gadgets */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto var(--space-6);\n padding: var(--space-5) var(--space-5) var(--space-6);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 70%, transparent);\n border-top: 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n background: color-mix(in srgb, var(--color-canvas) 90%, transparent);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n box-shadow: var(--shadow-panel);\n}\n.ds-page__gadgets {\n display: grid;\n grid-template-columns: 1.3fr 1fr 1fr;\n align-items: start;\n gap: var(--space-5);\n}\n.ds-page__column { min-width: 0; }\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--space-6);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-sidebar);\n width: var(--size-sidebar);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section__title {\n margin: 0 0 var(--space-4);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: a pale strip of small print, then the glass bar with the brand and the channels */\n.ds-nav { margin: 0; }\n.ds-nav__top {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-nav__bar {\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__top .ds-nav__inner { height: var(--size-top); }\n.ds-nav__bar .ds-nav__inner { height: var(--size-nav); }\n.ds-nav__date { margin: 0; }\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__tool {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { border-color: color-mix(in srgb, var(--color-bar-text) 45%, transparent); }\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(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#story:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#mail:target) .ds-nav__link[href=\"#mail\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n border-color: color-mix(in srgb, var(--color-bar-text) 45%, transparent);\n background: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n box-shadow: var(--shadow-control);\n}\n.ds-nav__more {\n margin: 0 0 0 auto;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__more-link {\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* hero: the search band; a greeting on the left, scopes and one glowing field on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n padding: var(--space-5) var(--space-6);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\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 margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__search {\n flex: 0 0 var(--size-search);\n width: var(--size-search);\n margin: 0;\n}\n.ds-hero__scopes {\n display: flex;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n padding: 0 var(--space-4);\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-hero__scope {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-hero__scope:hover,\n.ds-hero__scope.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-hero__scope.is-current { font-weight: var(--weight-bold); text-decoration: underline; }\n.ds-hero__action {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-hero__field {\n flex: 1 1 0;\n min-width: 0;\n height: var(--size-control-large);\n margin: 0;\n padding: 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-focus);\n border-radius: var(--radius-pill);\n background: var(--fill-input);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 90%, transparent), 0 0 calc(var(--size-glow) * 3) color-mix(in srgb, var(--color-focus) 45%, transparent);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-large);\n}\n.ds-hero__field:focus,\n.ds-hero__field.is-focus { outline: var(--focus-ring); }\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n padding: 0 var(--space-4);\n font-size: var(--text-small);\n opacity: 0.9;\n}\n.ds-hero__note-link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n\n/* page header: head of an inner page, a glass strip across the sheet */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-page-header__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* panel: the gadget; a glass title strip with small tools, then the body */\n.ds-panel {\n margin: 0 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-panel.is-last { margin-bottom: 0; }\n.ds-panel__head {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__tools {\n display: flex;\n gap: var(--space-3);\n margin: 0 0 0 auto;\n font-size: var(--text-small);\n}\n.ds-panel__tool {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-panel__tool:hover,\n.ds-panel__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-panel__body { padding: var(--space-4); }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__text.is-last { margin-bottom: 0; }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n}\n.ds-panel__go {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n}\n.ds-panel__go .ds-form__input { flex: 1 1 0; min-width: 0; }\n.ds-panel__more { margin-left: auto; font-size: var(--text-small); }\n\n/* stats: the forecast; a row of small glass tiles, the day over a large figure */\n.ds-stats {\n display: flex;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: linear-gradient(to bottom, var(--color-fill-1) 0, var(--color-surface) 100%);\n text-align: center;\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-stat__number {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__note {\n display: block;\n font-size: var(--text-small);\n}\n.ds-stats__place {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-stats__now { font-weight: var(--weight-body); color: var(--color-text); }\n\n/* grid: channel tiles, two rows of four, a small orb beside each name */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-3);\n margin: 0;\n}\n.ds-grid--wide { gap: var(--space-4); }\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: var(--color-surface-alt);\n color: var(--color-link);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover { border-color: var(--color-focus); text-decoration: var(--link-decoration-hover); }\n.ds-grid__cell--1 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%); }\n.ds-grid__cell--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-grid__cell--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-grid__cell--4 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-4) 100%); }\n.ds-orb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 68%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-text);\n}\n.ds-orb svg {\n display: block;\n width: 54%;\n height: 54%;\n}\n.ds-orb--accent {\n border-color: color-mix(in srgb, var(--color-accent) 68%, var(--color-shadow));\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-orb--button {\n border-color: color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* tabs: a row of small pills; the current one is a piece of the glass bar */\n.ds-tabs {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { border-color: var(--color-border); color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* list: tight headlines after a small round bullet; the first may carry a line of text */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: baseline;\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.ds-list__item.is-first { border-top: 0; padding-top: 0; }\n.ds-list__item::before {\n content: \"\";\n flex: 0 0 auto;\n width: var(--space-3);\n height: var(--space-3);\n border-radius: 50%;\n background: var(--fill-accent);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\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-list__item.is-lead .ds-list__title {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-list__text { margin: var(--space-1) 0 0; }\n.ds-list__meta {\n flex: 0 0 auto;\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-list--roomy .ds-list__item { padding: var(--space-4) 0; }\n.ds-list--roomy .ds-list__title {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n\n/* sidebar: a ranked link block; a number chip, the link, a count */\n.ds-sidebar {\n margin: 0 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\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.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__rank {\n flex: 0 0 var(--size-rank);\n width: var(--size-rank);\n border-radius: var(--radius-control);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n\n/* footer: a pale strip of links across the window, then the sky band of small print */\n.ds-footer { margin: 0; }\n.ds-footer__links {\n display: flex;\n justify-content: center;\n margin: 0;\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n list-style: none;\n}\n.ds-footer__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 40%, transparent);\n line-height: 1;\n}\n.ds-footer__item.is-first { border-left: 0; }\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 { text-decoration: var(--link-decoration-hover); }\n.ds-footer__legal {\n margin: 0;\n padding: var(--space-5) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-footer__legal-text {\n width: var(--size-page);\n margin: 0 auto;\n font-size: var(--text-small);\n text-align: center;\n}\n\n/* brand: the mark on a glossy tile dressed like the primary button, the name on the glass bar */\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 68%;\n height: 68%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 {\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link-hover); }\n\n/* buttons: gel buttons with a bright upper half; the arrow button is a round one */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-buttons--bar { margin: var(--space-4) 0; }\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--arrow {\n flex: 0 0 auto;\n width: var(--size-control);\n padding: 0;\n border-radius: 50%;\n}\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 55%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 18%) 48%, var(--color-danger) 52%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 20%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 66%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 28%) 48%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 8%) 52%, color-mix(in srgb, var(--color-danger), var(--color-button-text) 32%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* form */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: 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-bold);\n text-align: right;\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; padding: 0 var(--space-2); }\n.ds-form__input--short { width: 50%; }\n.ds-form__textarea {\n display: block;\n height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\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-3);\n padding-top: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: pale glass head, hairlines between rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* badge: a small gel pill */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-3));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 35%) 0, var(--color-success) 55%);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 45%) 0, var(--color-warning) 55%);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 35%) 0, var(--color-danger) 55%);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* notice: a rounded bar with a round sign */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-warning) 55%, var(--color-notice));\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__sign {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: 50%;\n background: var(--color-warning);\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 align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__sign {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n\n/* pagination: small glass keys */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n.ds-pagination__gap { padding: 0 var(--space-2); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a glass window with a title bar, set in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n margin: var(--space-5) 0 0;\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n padding: var(--space-2);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-bar);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3) var(--space-3);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-icon) * 2);\n height: var(--size-icon);\n border-radius: var(--radius-control);\n background: var(--color-danger);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-small) * 0.9);\n height: calc(var(--text-small) * 0.9);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) calc(50% - var(--space-3) / 8), 100% calc(50% - var(--space-3) / 8), 100% calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) calc(50% + var(--space-3) / 8), 0 calc(50% + var(--space-3) / 8), 0 calc(50% - var(--space-3) / 8), calc(50% - var(--space-3) / 8) calc(50% - var(--space-3) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--color-surface);\n}\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top-color: var(--color-border-muted);\n border-radius: 0 0 var(--radius-control) var(--radius-control);\n background: var(--color-surface-strong);\n}\n\n/* empty state: a pale well with a glass bubble */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__orb {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 auto var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__orb svg {\n display: block;\n width: 55%;\n height: 55%;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n --size-progress: 14px;\n --size-orb: 24px;\n --size-slide: 96px;\n --size-avatar: 44px;\n --size-avatar-small: 28px;\n --size-menu: 200px;\n --size-tip: 220px;\n --size-dot: 8px;\n}\n.ds-nav:has(.ds-menu),\n.ds-nav:has(.ds-menu) .ds-nav__bar { overflow: visible; }\n.ds-menu { position: relative; }\n.ds-menu > .ds-nav__link::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-2) solid transparent;\n border-right: var(--space-2) solid transparent;\n border-top: var(--space-2) solid currentColor;\n vertical-align: calc(var(--space-2) / 2);\n margin-left: var(--space-2);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list { display: block; }\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link);\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-shadow: none;\n text-transform: none;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-progress__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-progress__label { flex: 0 0 auto; color: var(--color-text); }\n.ds-progress__value { flex: 0 0 auto; color: var(--color-text-muted); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n display: block;\n flex: 1 1 0;\n width: 100%;\n height: var(--size-progress);\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-progress::-moz-progress-bar { background: var(--fill-accent); border-radius: var(--radius-pill); }\n\n.ds-carousel { margin: 0 0 var(--space-3); }\n.ds-carousel__stage { display: flex; align-items: center; gap: var(--space-2); }\n.ds-carousel__orb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-large);\n line-height: 1;\n}\n.ds-carousel__orb::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-large) * 0.4);\n height: calc(var(--text-large) * 0.4);\n border-left: calc(var(--space-3) / 4) solid currentColor;\n border-bottom: calc(var(--space-3) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__orb ~ .ds-carousel__orb::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1 1 0;\n min-width: 0;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: var(--size-slide);\n margin: 0;\n padding: var(--space-3);\n scroll-snap-align: start;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-carousel__slide--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-carousel__slide--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-carousel__title { margin: 0; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot {\n display: block;\n width: var(--size-dot);\n height: var(--size-dot);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface);\n}\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n\n.ds-avatar {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width-strong) var(--border-style) var(--color-surface);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control), 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-person { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }\n.ds-person__name { margin: 0; color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-person__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero start page specimen\n\n\n\n\n
\n
\n
\n

Tuesday, 18 March

\n \n
\n
\n
\n
\n chronoskin\n \n

Signed in as odalys.brandt

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

Good morning, Odalys

\n

Two new messages, light rain until noon, and the headlines you follow.

\n
\n
\n \n

\n \n \n

\n

Popular now: harbour bridge, spring timetable, cup draw

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

News

Editx

\n
\n \n \n

All of today's news

\n
\n
\n
\n

Channels

Edit

\n
\n
\n News\n Sport\n Money\n Travel\n Music\n Video\n Shopping\n Maps\n
\n
\n
\n
\n\n
\n
\n

Mail

2 new

Editx

\n
\n \n

Open the inboxWrite

\n
\n
\n
\n

Today

Edit

\n
\n
    \n

  • Dentist, Quay Street

    11:30

    • \n

  • Lunch with Tilde

    13:00

    • \n

  • Return library books

    Due today

    • \n

  • Rowing club committee

    19:00

    • \n
\n

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

Photo of the day

\n
\n
\n
Harbour at dawn
Quay Street market
The north ferry
\n
\n
\n
\n
\n\n
\n

Weather

Editx

\n
\n

Port Ansel light rain, 9 degrees

\n
    \n
  • Today11°Rain
    • \n
  • Wed14°Cloud
    • \n
  • Thu16°Sun
    • \n
  • Fri15°Sun
    • \n
\n

\n
\n
\n
\n

Markets

Edit

\n
\n
    \n

  • Harbour 100

    5,412.30 +0.8%

    • \n

  • Northern Tech

    2,315.63 -1.2%

    • \n

  • Small Caps

    1,278.38 +0.1%

    • \n
\n
\n
\n
\n

Add to this page

\n \n
\n
\n
\n
\n\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. News
    4. \n
  4. »
    5. \n
  5. Top stories
    6. \n
\n
\n
\n

News

\n

Top stories this morning, chosen by chronoskin editors and updated through the day.

\n
\n
Choose my topics
\n
\n
\n
\n \n \n \n
\n \n
\n
\n\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. News
    4. \n
  4. »
    5. \n
  5. Local
    6. \n
\n
\n
\n

Local news

\n

Tuesday, 18 March, 9:40. By the chronoskin news desk.

\n
\n
Mail this storyPrint
\n
\n
\n
\n
\n

Harbour bridge to reopen a month early

\n

The harbour bridge will carry traffic again from Monday, four weeks sooner than planned, after engineers finished replacing the deck during a run of dry weather. Buses cross first; cars and lorries follow on 31 March.

\n

What changes on Monday

\n

Routes 4, 11 and 19 return to their usual stops on both banks. The temporary shuttle from Quay Street ends on Sunday night, and the footbridge stays open as before.

\n
    \n
  • Buses only from Monday 24 March
    • \n
  • All traffic from Monday 31 March
    • \n
  • A limit of 20 miles an hour until the summer
    • \n
\n

Why it took less time

\n

The old deck came away in larger sections than expected, the council said, which saved nineteen working days. Readers can follow the remaining work under the tag harbour-bridge.

\n

What is still to do

\n
    \n
  1. Lighting on the north approach
    2. \n
  2. Repainting the railings, one side at a time
    3. \n
\n
\n
\n

More on this story

\n

\n Where the new buses will stop\n A year of the closure in pictures\n What the shops on Quay Street say\n All local news\n

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

Mail

\n

odalys.brandt, 2 unread of 148 messages, 12% of your space used.

\n
\n
\n Write a message\n Reply\n Delete\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
FromSubjectStateSizeReceived
Tilde MarchettiSaturday at the allotmentNew4 KB9:02
Rowing clubSpring fixtures and the boat rotaNew212 KB8:47
Parcel depotYour parcel is at the depotReply by Friday9 KBMon
Bram OyelaranPhotos from the coastAnswered1,840 KBSun
Mail systemNot delivered: allotment rotaReturned3 KBSat
\n
\n
\n

Delete 1 message?

\n
\n

\"Saturday at the allotment\" will move to Deleted and be removed for good after 30 days.

\n
\n
\n Delete\n Keep it\n
\n
\n
\n
\n \n
\n
\n\n
\n
    \n
  1. Start
    2. \n
  2. »
    3. \n
  3. My page
    4. \n
\n
\n
\n

Change this page

\n

Choose what your start page shows and where it thinks you are.

\n
\n
Back to the start page
\n
\n
\n
\n
\n
i

Changes show at once. Other people who use this computer keep their own page.

\n
!

The page was not saved. We could not find the town you typed.

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

No town of that name. Did you mean Port Ansel?

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

Decides which local stories the News gadget shows first.

\n
\n
\n
\n \n
\n
\n
\n Gadgets\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n \n
\n
\n\n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.portal.s02.p01.t01.u01.dc\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-2111-dc\",\n \"short\": \"v1-fa-2111-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #3a8ccb;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #ebf3fb;\n --color-surface-strong: #d3e2e9;\n --color-bar: #2d6fa3;\n --color-bar-text: #ffffff;\n --color-bar-alt: #cfe3f3;\n --color-bar-alt-text: #0b4a7a;\n --color-inverse: #256f95;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #636363;\n --color-heading: #0b4f86;\n --color-heading-alt: #549c00;\n --color-link: #07519a;\n --color-link-quiet: #006699;\n --color-link-visited: #5a4fa3;\n --color-link-hover: #2198c4;\n --color-link-active: #549c00;\n --color-border: #aaccee;\n --color-border-strong: #3274a4;\n --color-border-muted: #d6e3e7;\n --color-accent: #6eab26;\n --color-accent-text: #ffffff;\n --color-accent-alt: #ff9c00;\n --color-fill-1: #d0e8f8;\n --color-fill-2: #e8f0f0;\n --color-fill-3: #dff1c8;\n --color-fill-4: #fff6c4;\n --color-button: #36b701;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #d8e0e8;\n --color-button-secondary-text: #0b4a7a;\n --color-input: #ffffff;\n --color-input-text: #222222;\n --color-input-border: #7fb1d8;\n --color-disabled: #e8e8e8;\n --color-disabled-text: #989898;\n --color-danger: #c3271b;\n --color-danger-surface: #fde9e4;\n --color-success: #3f9a0b;\n --color-warning: #f0a000;\n --color-notice: #fff8c9;\n --color-notice-text: #5a4a00;\n --color-focus: #7fd4ff;\n --color-shadow: #0d3f66;\n --color-overlay: rgba(13, 63, 102, 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: \"Segoe UI\", Tahoma, \"Lucida Grande\", sans-serif;\n --font-heading: \"Segoe UI\", Tahoma, \"Lucida Grande\", sans-serif;\n --font-ui: \"Segoe UI\", Tahoma, \"Lucida Grande\", sans-serif;\n --font-mono: Consolas, \"Lucida Console\", monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 15px;\n --text-display: 28px;\n --text-h1: 22px;\n --text-h2: 17px;\n --text-h3: 13px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 7px;\n --radius-pill: 10px;\n --radius-page: 10px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 22%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 0 6px color-mix(in srgb, var(--color-focus) 90%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 35%, transparent);\n --shadow-control-pressed: inset 0 2px 4px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 0 0 1px color-mix(in srgb, white 35%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --fill-page: radial-gradient(ellipse 55% 220px at 50% 0, color-mix(in srgb, white 60%, transparent) 0, transparent 100%) 0 0 / 100% 220px no-repeat, radial-gradient(ellipse 60% 260px at 62% 0, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 100%) 0 0 / 100% 260px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 22%) 0, var(--color-page) 300px, color-mix(in srgb, var(--color-page), white 62%) 900px) 0 0 / 100% 900px no-repeat, color-mix(in srgb, var(--color-page), white 62%);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 48%) 0, color-mix(in srgb, var(--color-bar), white 18%) 49%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 20%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 88%) 0, color-mix(in srgb, var(--color-bar-alt), white 45%) 49%, var(--color-bar-alt) 50%, color-mix(in srgb, var(--color-bar-alt), white 35%) 100%);\n --fill-inverse: radial-gradient(ellipse 60% 90% at 72% 0, color-mix(in srgb, white 38%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 20%) 0, var(--color-inverse) 42%, color-mix(in srgb, var(--color-inverse), white 42%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 50%) 0, color-mix(in srgb, var(--color-accent), white 15%) 49%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 10%) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 90%, transparent) 0, color-mix(in srgb, var(--color-surface-alt) 82%, transparent) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 60%) 0, color-mix(in srgb, var(--color-button), white 22%) 48%, var(--color-button) 52%, color-mix(in srgb, var(--color-button), white 24%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 72%) 0, color-mix(in srgb, var(--color-button), white 34%) 48%, color-mix(in srgb, var(--color-button), white 10%) 52%, color-mix(in srgb, var(--color-button), white 38%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 90%) 0, color-mix(in srgb, var(--color-button-secondary), white 45%) 49%, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), white 40%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 8%) 0, var(--color-input) 5px);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 6px;\n}\n" } }