{ "id": "v1-po-5655-dc", "long_id": "v1.portals-2000s.portal.s05.p06.t05.u05.dc", "name": "Sports portal, 2000 to 2004", "era": { "slug": "portals-2000s", "code": "po", "name": "Early-2000s portals", "years": [ 2000, 2004 ], "description": "Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "compact", "summary": "A scores-and-tables front page of the kind sports broadcasters and news networks ran between 2000 and 2004: a 770px sheet centred on a 1024px screen, with a dark menu column running its full height, a band of result cells across the top of the work and, below it, a column of stories beside a rail of small tables. Headings are short capitals on solid bars, figures sit in tight ruled rows, and everything is set in 10px and 11px type under one 24px headline. It gave way from about 2005 to wider pages with horizontal navigation, gradients and large photographs.", "url": "https://chrono.skin/s/v1-po-5655-dc", "preview_url": "https://chrono.skin/s/v1-po-5655-dc/specimen.html", "files": { "STYLE.md": "# Sports portal, 2000 to 2004\n\n## Summary\n\nA scores-and-tables front page of the kind sports broadcasters and news networks ran between 2000 and 2004: a 770px sheet centred on a 1024px screen, with a dark menu column running its full height, a band of result cells across the top of the work and, below it, a column of stories beside a rail of small tables. Headings are short capitals on solid bars, figures sit in tight ruled rows, and everything is set in 10px and 11px type under one 24px headline. It gave way from about 2005 to wider pages with horizontal navigation, gradients and large photographs.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 770px; `.ds-page__frame` is a sheet of that width centred horizontally in the window (`margin: 0 auto`), and `.ds-page` pads the window by `--space-4` (6px), so `--color-page` shows equally on both sides and below. Do not pin it to the left edge and do not stretch it. The dark menu column is inside the sheet, at its left.\n- The frame is a grid of two columns, `--size-menu` (126px) and the work column (644px), and four rows: masthead, strip, body, footer. `.ds-nav` spans the first three rows and both columns as a subgrid, so that its `.ds-nav__menu` runs down the left column beside the page content; the content (in the specimen each `.ds-view`) is placed in the second column of the third row; `.ds-footer` spans both columns.\n- Navigation is the left column, not a bar across the top. Above it `.ds-nav__masthead` (wordmark and tagline on the left, a row of utility links on the right, on `--fill-bar`) and `.ds-nav__strip` (competition links and the date, on `--fill-bar-alt`) cross the whole sheet.\n- Home page, in the work column from the top: `.ds-scores` (a title strip over five result cells) touching the strip above it, then `.ds-page__columns`: a main column (398px) and `--size-rail` (226px), `--space-5` (10px) apart and padded `--space-5` from the edges. The main column holds the `.ds-hero`, then blocks under `.ds-section` strips (`.ds-grid`, `.ds-list`); the rail is a stack of `.ds-panel` boxes, the first a league table. Blocks in both columns are `--space-5` apart.\n- Inner pages keep the masthead, strip, menu and footer and have no scoreboard and no hero. The work column opens with `.ds-breadcrumb` as a tinted line touching the strip, then `.ds-page-header` across the full column, closed by a 2px rule in the bar colour. Below it is either `.ds-page__columns` (main column and rail, the rail starting with the section's `.ds-sidebar` box) for lists, forms and articles, or `.ds-page__columns--wide` (one column, no rail) for a page that is mostly one wide table. A wide page puts `.ds-stat` first, then `.ds-tabs` touching the `.ds-table` they switch, then smaller blocks two abreast in `.ds-page__pair`. An article page leaves the page header out: a `.ds-section` strip and the article's own h1 head it.\n- Views. The specimen is one example site of six screens, one showing at a time; the header, menu and footer are written once around them. `home` is the front page: scoreboard, lead story, feature cells, columns and the rail. `results` is a match day: page header, tabs on the scores table, pagination by match day, next fixtures, and a rail with the section menu. `standings` is the league table: page header, stat band, tabs on the full-width table with form labels, a note, and two small blocks abreast. `report` is one match report: the article, related links and replies beside match facts. `squad` is the signed-in fantasy team: page header, stat band, tabs on the squad table, the button row, the drop-player message box and the empty transfers block. `join` is the form page: page header, notices, the form and a rail of rules. The menu marks Scores for `results`, Tables for `standings`, Match reports for `report` and Fantasy for `squad` and `join`.\n- Spacing scale: `--space-1` 1px is the vertical padding inside buttons, inputs, compact table cells and rail rows; `--space-2` 2px is the vertical padding of every bar, title strip, menu row and table cell; `--space-3` 4px is the vertical padding of tabs, breadcrumb, notices and stat cells; `--space-4` 6px is the page margin, the side padding of every strip, cell and box and the gap between grid cells and between buttons; `--space-5` 10px is the gap between columns, between blocks and between paragraphs and the outer padding of the work column; `--space-6` 16px is list indent, the padding around a dialog and an empty state, and the space under the columns. There is no larger step.\n- Fixed sizes: `--size-figure-height` 150px is the lead picture; `--size-thumb` 60px by `--size-thumb-height` 45px a list picture; `--size-mark` 30px the brand tile; `--size-marker` 8px the square before a section title; `--size-label` 110px the label column of a form; `--size-field` 200px a form input; `--size-area` a textarea; `--size-dialog` 300px a message box.\n- Boxes are outlined with a 1px line in `--color-border` and rows are ruled with `--color-border-muted`; blocks open with a solid strip. Whitespace is never the separator.\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` is Arial for text, the hero headline, article h1 and stat figures. `--font-heading` is Verdana for the wordmark, page titles and every strip and box title, which are set in capitals (`--heading-transform: uppercase`). `--font-ui` is Tahoma for the menu, bars, tabs, buttons, inputs, table heads and figures, and all 10px text. `--font-mono` is Courier for code.\n- `--text-base` 11px is body text, table cells and rail text. `--text-small` and `--text-ui` are 10px: strips, titles of boxes, menu rows, tabs, buttons, meta lines, captions, breadcrumb and footer. `--text-large` 13px is the hero text and an article's lead paragraph. `--text-h3` 11px, `--text-h2` 13px (grid cell titles, the title of the dark box, article h2), `--text-h1` 20px (page title, stat figures), `--text-display` 24px (wordmark, hero headline, article h1). The hero headline and the article h1 are not capitalised: they take `--font-body` and `--display-tracking` and ignore `--heading-transform`.\n- `--line-body` 1.45 (16px lines for 11px text); `--line-heading` 1.2; `--line-display` 1.05. Buttons and bar labels are bold (`--weight-ui` 700). Nothing is tracked.\n- Links in text are underlined (`--link-decoration`) and lose the underline when hovered (`--link-decoration-hover: none`); menu, sidebar, breadcrumb and table team links are quiet (`--link-decoration-quiet` none).\n- `--color-page` #d0d0d0 (grey) shows on both sides of the sheet; `--color-canvas` and `--color-surface` are #ffffff. `--color-surface-alt` #f0f0e8 (stone) fills the scoreboard cells, breadcrumb, alternate table rows, form label column, button row, sidebar box and empty state. `--color-surface-strong` #d3d3d3 is the tab strip, sidebar and quiet panel titles and picture slots, whose placeholder drawing is `--color-text-muted`.\n- `--color-bar` #cc0000 with `--color-bar-text` white is the masthead, panel and dialog titles, the rule under a page header and above the open tab. `--color-bar-alt` #636363 with `--color-bar-alt-text` #dddebf (khaki) is the strip under the masthead, menu group titles, section strips, table heads and the footer strip. Text on a bar is always that bar's text token, links included.\n- `--color-inverse` #000000 with `--color-inverse-text` #dddebf is the menu column and the one dark rail box (`.ds-panel--inverse`); a link or title on the dark box takes `--color-accent`, and the open menu row is filled with `--fill-accent` and set in `--color-accent-text`.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #636363 for meta lines, captions and labels of figures; `--color-heading-alt` #990000 for article h3.\n- `--color-link` #000099, `--color-link-quiet` #000000, visited #7d7d7d, hover #cc0000, active #990000. `--color-accent` #edc508 with black text is the badge, the section marker, the open menu row and the current page number; `--color-accent-alt` #cc0000 is the status line of a score cell, promoted links and bare \"updated\" marks.\n- `--color-fill-1` #dddebf, `--color-fill-2` #f0f0e8, `--color-fill-3` #e8e8e8, `--color-fill-4` #d3d3d3 tint the four grid cells; `--color-fill-1` is also the stat band. Text on a fill is `--color-text`, `--color-heading` or a link colour.\n- `--color-border` #b0b090 outlines boxes and rules the scoreboard; `--color-border-strong` #000000 outlines pictures, the dialog and the current page number and is the left edge of a notice; `--color-border-muted` #e8e8e8 rules rows.\n- `--color-button` #d3d3d3 with black label, `--color-button-hover-text` #990000; secondary #f0f0e8. `--color-danger` #cc0000 on `--color-danger-surface` #ffffe8; `--color-success` #336633 and `--color-warning` #edc508 fill status labels and `--color-success` and `--color-danger` colour rising and falling figures. `--color-notice` #f0f0e8.\n- Surface: `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the bar colour crossed by 1px scan lines (every second pixel row slightly darker, or lighter on the dark block), the look of broadcast graphics of the period; `--fill-button` is two flat bands, the upper half lighter, reversed on hover. `--shadow-text` is a hard 1px offset under text on the primary bar; `--shadow-dialog` is a hard 4px offset block; a pressed button has a 1px inner edge. No blur anywhere, no rounding, `--border-width` 1px and `--border-width-strong` 2px, solid.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, italic for the wordmark, `underline` on hovered bar links, `color-mix()` of `--color-inverse-text` with `transparent` for the rules between menu rows and of `--color-overlay` with `transparent` for the band behind a dialog, and `calc()` sums of spacing steps for bullet indents and the form action offset.\n- Capitals in the references were typed or drawn; here they come from `--heading-transform`. Verdana and Tahoma stand in for the references' lettered images.\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 ``: page colour, 6px margin and base type. Wrap everything in `.ds-page__frame`. `.ds-page__columns` holds `.ds-page__main` and `.ds-page__rail`; `.ds-page__columns--wide` holds `.ds-page__main` alone; `.ds-page__pair` sets two blocks abreast. `.ds-page__legal` is the 10px copyright line. `.ds-block` groups a section strip with the block it heads so they touch.\n- `.ds-brand`: the site's mark and name at the left of the masthead, a link to the home page, once per page. `.ds-brand__mark` is a `--size-mark` (30px) tile dressed like the primary button: `--fill-button`, the mark in `--color-button-text`, the 2px outset bevel, `--radius-control` and `--shadow-control`. The mark is inline SVG with square caps and a 3 stroke. `.ds-brand__name` is the 24px bold italic wordmark in `--font-heading` and `--color-bar-text`, because the masthead is a bar. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header and menu. `.ds-nav__masthead` holds `.ds-nav__brand` (the `.ds-brand` over `.ds-nav__tagline`) and `.ds-nav__utility` (`.ds-nav__utility-item`, `.ds-nav__utility-link`). `.ds-nav__strip` holds `.ds-nav__strip-links` (`.ds-nav__strip-item`, `.ds-nav__strip-link`) and `.ds-nav__date`. `.ds-nav__menu` is the dark column: `.ds-nav__search` (`.ds-nav__search-label`, `.ds-nav__search-row` with an input and a button), then `.ds-nav__links` lists of `.ds-nav__item` rows under `.ds-nav__group` titles. `.ds-nav__link` is a row; `.ds-nav__link--sub` an indented, lighter row; `is-current` fills the row with the accent. In the specimen the open view marks its row through `:has()` rules, one per view.\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the front page); only the view named in the address shows. A real multi-page site does not need it, but its content takes the same grid cell.\n- `.ds-scores`: the scoreboard, home page only. A `.ds-section` strip over `.ds-scores__row`, five `.ds-scores__game` cells divided by 1px lines. Each has a `.ds-scores__status` line, two `.ds-scores__team` rows (name left, score right, `is-winner` in bold) and a `.ds-scores__link`.\n- `.ds-breadcrumb`: inner pages only, the first thing in the work column. 10px trail on a tinted line, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: an outlined box of links at the top of an inner page's rail. `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` links; use `.ds-link--quiet` for entries and `.ds-link--hot` for the open one.\n- `.ds-section`: heading strip of a block on the secondary bar: `.ds-section__title` (10px capitals after a square accent marker outlined in the strip's text colour) and an optional right-hand `.ds-section__more` link in the bar's text colour.\n- `.ds-hero`: the lead story, first in the home page's main column. `.ds-hero__figure` (a full-width picture slot), `.ds-hero__caption`, `.ds-hero__title` (24px, a link in the heading colour), `.ds-hero__text`, the bold `.ds-hero__action` link, then `.ds-hero__more`, a two-column square-bullet list of bold links above a rule. No background, no button.\n- `.ds-page-header`: head of an inner page, once per page. `.ds-page-header__title` (20px capitals, the page's only h1) over one line of `.ds-page-header__text`, with `.ds-page-header__action` at the right holding one `.ds-button`; a 2px rule in the bar colour closes it.\n- `.ds-stat`: one outlined band of three to five figures on a wide page. Each `.ds-stat__item` holds a 20px bold `.ds-stat__value` over a 10px bold `.ds-stat__label`; cells are divided by 1px lines. No icons, no arrows.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the 13px first paragraph and `.ds-prose__byline` for the 10px credit.\n- `.ds-link`: underlined blue link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is text-coloured and not underlined; `.ds-link--hot` is the bold red promoted entry. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled two-band button, bold, for the main action. `.ds-button--secondary` is flat and lighter. `.ds-button--danger` is the same bevel with the label in `--color-danger`; never fill a button red. `disabled` or `is-disabled` greys it; `is-active` presses the bevel in. Group with `.ds-buttons`, a tinted outlined row that closes the table above it. A link that looks like a button is an `` with the same classes.\n- `.ds-form`: an outlined box of ruled `.ds-form__row` pairs: bold `.ds-form__label` in a tinted column (optional `.ds-form__hint`) and `.ds-form__field` holding the control. Controls take `.ds-form__input` (`--auto` for selects and short inputs, `--area` for textareas); `is-invalid` plus a `.ds-form__error` line marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the tinted button row under the controls.\n- `.ds-table`: ruled data table: head on the secondary bar, rows alternating white and stone, `.ds-table__num` right-aligned figures in the interface face, `.ds-table__key` for the bold cell of a row (team, winner), `is-up` and `is-down` to colour a change. `.ds-table--compact` is the tight version inside a rail panel. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: a grey strip of `.ds-tabs__tab` cells directly above the table they switch; `is-current` takes the sheet colour under a 2px rule in the bar colour.\n- `.ds-list`: feature list. Each `.ds-list__item` has a `.ds-list__figure` picture slot and a `.ds-list__body` with a bold `.ds-list__title`, a `.ds-list__text` summary and a 10px `.ds-list__meta` line; items are ruled apart. `.ds-list--bullets` is the one-line square-bullet variant.\n- `.ds-panel`: outlined rail box: `.ds-panel__title` bar over `.ds-panel__body`, or over a `.ds-table--compact`. Body helpers: `.ds-panel__text`, `.ds-panel__list` of `.ds-panel__row` lines (text left, `.ds-panel__when` figure or time right), `.ds-panel__small`, `.ds-panel__actions`. `.ds-panel--alt` is stone with a grey title; `.ds-panel--inverse` is the dark box with a 13px accent title, at most one per page.\n- `.ds-grid`: two by two feature cells `--space-4` apart, outlined and tinted with `.ds-grid__cell--1`, `--2`, `--3` or the base fill; each `.ds-grid__cell` has a 13px capital `.ds-grid__title` and a `.ds-grid__list` of bulleted links.\n- `.ds-badge`: square yellow 10px bold label. `.ds-badge--alt` is bare red text; `.ds-badge--count` is muted text in parentheses. Status labels keep the block and change the fill: `.ds-badge--success` green with white text (fit, won), `.ds-badge--warning` amber with black text (doubtful, drawn), `.ds-badge--danger` red with white text (injured, lost). A single letter is enough in a form column.\n- `.ds-notice`: one-line message on a tint with a 1px outline and a 2px dark left edge, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and border. Stack several in `.ds-notices`.\n- `.ds-pagination`: a left-aligned row of small outlined cells: `.ds-pagination__item` links on stone, the current page as `.ds-pagination__current` filled with the accent.\n- `.ds-dialog`: the era's message box, in the page flow: a 300px white box with a 1px dark outline and a hard offset shadow, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the dimmed band it sits on.\n- `.ds-empty`: stone outlined block with a centred muted `.ds-empty__text` and one button, under a `.ds-section` strip.\n- `.ds-footer`: `.ds-footer__bar`, a strip of `.ds-footer__item` entries with `.ds-footer__link` on the secondary bar, followed by `.ds-page__legal`.\n- `.ds-carousel`: marks the lead block as a rotator; `.ds-carousel__dots` is its row of numbered `.ds-carousel__dot` buttons, the showing one `.is-current`. Static: one slide is in the page.\n- `.ds-progress`: a poll result, quota or elapsed-time bar: `.ds-progress__label` above, `.ds-progress__track` holding `.ds-progress__fill` (width by a `--NN` percent class), `.ds-progress__value` at the right.\n- `.ds-menu`: a jump menu, the period's drop-down: a `.ds-menu__label`, a select (`.ds-form__input ds-menu__select`) of destinations and a Go button. Use it where a long list of sections would not fit as links.\n\n## Never\n\n- `row-gap <= 10px`: table, menu and list rows touch.\n- `block-gap <= 16px`: neighbouring blocks touch or sit 10px apart.\n- `content-width <= 770px`: the sheet is fixed at 770px, centred on a 1024px screen, and does not stretch.\n- `font-size <= 24px`: the largest text is one 24px headline.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 4`: Arial, Verdana for titles, Tahoma for the interface and a monospace for code.\n- `line-height <= 1.6`: text runs on 16px lines; it is never opened further.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 15%`: capitals are for strip, box and page titles only, never for body text or links.\n- `border-radius <= 0px`: no reference has a rounded box in CSS; every block is a square rectangle.\n- `box-shadow-blur <= 0px`: the only shadows are hard offset blocks and 1px inner edges.\n- `gradient-fills <= 20%`: scan lines and two-band buttons only, on bars and controls; panels, cells and the page are flat.\n- `border-width <= 2px`: 1px outlines and rules, 2px bevels and the rule under a page header.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail box copies `.ds-panel` (title bar, 1px outline, body padded `--space-4`, rows ruled with `--color-border-muted`); a new main-column block starts with a `.ds-section` strip and puts ruled or outlined content under it; a new band of figures copies `.ds-scores` or `.ds-stat` (cells divided by 1px lines on a tint); a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, then columns or one wide column); a new menu entry is a `.ds-nav__item` row. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Keep text at 10px and 11px apart from one 24px headline and 20px page titles, keep corners square, put titles on bars in capitals, and separate things with a strip, an outline or a rule, never with whitespace, cards, soft shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). A sheet centred in the window: a dark\n menu column, then a column of work split into stories and\n a rail of tables. Widths and gaps are the references' own. */\n:root {\n --size-page: 770px;\n --size-menu: 126px;\n --size-rail: 226px;\n --size-figure-height: 150px;\n --size-thumb: 60px;\n --size-thumb-height: 45px;\n --size-mark: 30px;\n --size-search: 160px;\n --size-label: 110px;\n --size-field: 200px;\n --size-area: 6em;\n --size-dialog: 300px;\n --size-marker: 8px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 3px;\n --space-4: 5px;\n --space-5: 8px;\n --space-6: 13px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-4);\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/* The fixed sheet, centred in the window; the page colour shows on both\n sides. Two columns: the menu and the work. */\n.ds-page__frame {\n display: grid;\n grid-template-columns: var(--size-menu) minmax(0, 1fr);\n grid-template-rows: auto auto 1fr auto;\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5) var(--space-5) var(--space-6);\n}\n.ds-page__columns--wide {\n grid-template-columns: minmax(0, 1fr);\n}\n.ds-page__main,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* Two equal blocks side by side inside a wide page. */\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- views ---------- */\n/* The specimen is one site of several screens; one view 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/* Every view sits in the work column, beside the menu. */\n.ds-view {\n grid-column: 2;\n grid-row: 3;\n min-width: 0;\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}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* A promoted entry: the second accent, bold. */\n.ds-link--hot,\n.ds-link--hot:visited,\n.ds-link--hot.is-visited {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: var(--space-4) 0;\n}\n\n/* ---------- nav ---------- */\n/* The header spans the sheet and reaches down the menu column: masthead,\n strip, then the menu beside the open view. */\n.ds-nav {\n display: grid;\n grid-column: 1 / -1;\n grid-row: 1 / 4;\n grid-template-columns: subgrid;\n grid-template-rows: subgrid;\n}\n.ds-nav__masthead {\n grid-column: 1 / -1;\n grid-row: 1;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-5) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__brand {\n display: block;\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n/* The mark sits on a small tile dressed like the primary button. */\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n font-style: italic;\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__tagline {\n display: block;\n margin-top: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__utility {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n/* Items in every link row are divided by a 1px bar, as typed pipes were. */\n.ds-nav__utility-item,\n.ds-nav__strip-item,\n.ds-footer__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) currentColor;\n}\n.ds-nav__utility-item:first-child,\n.ds-nav__strip-item:first-child,\n.ds-footer__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__utility-link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__utility-link:hover,\n.ds-nav__utility-link.is-hover {\n text-decoration: underline;\n}\n/* The strip under the masthead: competitions on the left, the date on the\n right. */\n.ds-nav__strip {\n grid-column: 1 / -1;\n grid-row: 2;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__strip-links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__strip-link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__strip-link:hover,\n.ds-nav__strip-link.is-hover {\n text-decoration: underline;\n}\n.ds-nav__date {\n flex: none;\n}\n/* The menu column: the one dark block of the page, running its full\n height. Rows are ruled; group titles sit on the secondary bar. */\n.ds-nav__menu {\n grid-column: 1;\n grid-row: 3;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__search {\n display: block;\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-5);\n}\n.ds-nav__search-label {\n display: block;\n padding-bottom: var(--space-2);\n font-size: var(--text-small);\n}\n.ds-nav__search-row {\n display: flex;\n gap: var(--space-3);\n}\n.ds-nav__search-row .ds-form__input {\n flex: 1 1 0;\n min-width: 0;\n width: auto;\n}\n.ds-nav__group {\n margin: 0;\n padding: var(--space-2) 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-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-nav__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__item {\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-accent);\n}\n.ds-nav__link--sub {\n padding-left: var(--space-6);\n font-weight: var(--weight-body);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#results:target) .ds-nav__link[href=\"#results\"]:not(.ds-nav__link--topic),\n.ds-page:has(#standings:target) .ds-nav__link[href=\"#standings\"],\n.ds-page:has(#report:target) .ds-nav__link[href=\"#report\"],\n.ds-page:has(#squad:target) .ds-nav__link[href=\"#squad\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#squad\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- scoreboard ---------- */\n/* A band of result cells across the work column, under a title strip. */\n.ds-scores {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-scores__row {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n}\n.ds-scores__game {\n padding: var(--space-3) var(--space-4) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-scores__game:first-child {\n border-left: 0;\n}\n.ds-scores__status {\n display: block;\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-scores__team {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n}\n.ds-scores__team.is-winner {\n font-weight: var(--weight-bold);\n}\n.ds-scores__link {\n display: block;\n padding-top: var(--space-2);\n}\n\n/* ---------- sidebar ---------- */\n/* A boxed link list in the rail. */\n.ds-sidebar {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: 0;\n}\n\n/* ---------- section strip ---------- */\n/* Heading strip of a block: the secondary bar with a square marker. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-section__title {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__title::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: var(--size-marker);\n height: var(--size-marker);\n background: var(--fill-accent);\n border: var(--border-width) solid currentColor;\n}\n.ds-section__more {\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: underline;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- hero ---------- */\n/* The lead story: a wide picture with its caption, then the headline. */\n.ds-hero {\n border-radius: var(--radius-page);\n}\n.ds-hero__figure {\n display: block;\n box-sizing: border-box;\n width: 100%;\n height: var(--size-figure-height);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__caption {\n margin: 0;\n padding: var(--space-2) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text-muted);\n}\n.ds-hero__title {\n margin: var(--space-4) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-body);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__title .ds-link {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-hero__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__action {\n font-weight: var(--weight-bold);\n}\n.ds-hero__more {\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: var(--space-6);\n margin: var(--space-4) 0 0;\n padding: var(--space-4) 0 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n list-style: square;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header ---------- */\n/* Head of an inner page: the title over a heavy rule in the bar colour. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-5) var(--space-5) var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* Summary figures as one ruled band: a large figure over a small label. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-body);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-4) 0 0;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 {\n font-family: var(--font-body);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: none;\n}\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n/* The browser's own bevelled button of the period: a 2px outset border. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\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/* Destructive action: the same bevel, the label in the error colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n\n/* ---------- form ---------- */\n/* A ruled box: one row per field, the label in a tinted column. */\n.ds-form {\n margin: 0;\n padding: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n align-items: stretch;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n padding: var(--space-3) var(--space-4);\n min-width: 0;\n}\n.ds-form__hint {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width-strong) inset var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n display: block;\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--size-label) + var(--space-4));\n background: var(--color-surface-alt);\n}\n\n/* ---------- table ---------- */\n/* Ruled rows under a head on the secondary bar; figures in the interface\n face. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) 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-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.ds-table__num {\n font-family: var(--font-ui);\n}\n.ds-table td.ds-table__key {\n font-weight: var(--weight-bold);\n}\n.ds-table td.is-up {\n color: var(--color-success);\n}\n.ds-table td.is-down {\n color: var(--color-danger);\n}\n/* A table in a rail panel: tighter cells. */\n.ds-table--compact th,\n.ds-table--compact td {\n padding: var(--space-1) var(--space-3);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n/* A strip of cells; the open one takes the sheet colour under a heavy\n rule in the bar colour. */\n.ds-tabs {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-5);\n border-top: var(--border-width-strong) var(--border-style) transparent;\n border-right: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface);\n border-top-color: var(--color-bar);\n color: var(--color-heading);\n}\n\n/* ---------- list ---------- */\n/* Feature list: a small picture, a bold title, a summary and a meta line,\n ruled apart. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n gap: var(--space-5);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__figure {\n flex: none;\n box-sizing: border-box;\n width: var(--size-thumb);\n height: var(--size-thumb-height);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__meta {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* One-line square-bulleted variant for rails and headline lists. */\n.ds-list--bullets {\n padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-6) + var(--space-4));\n list-style: square;\n}\n.ds-list--bullets .ds-list__item {\n display: list-item;\n padding: 0;\n border: 0;\n}\n.ds-list--bullets .ds-list__title {\n font-weight: var(--weight-body);\n}\n.ds-list--bullets .ds-list__meta {\n display: inline;\n}\n\n/* ---------- panel ---------- */\n/* Rail box: a title on the primary bar over an outlined body. */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-1) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__when {\n flex: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text-muted);\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Quieter box: the strong surface as the title strip. */\n.ds-panel--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n text-shadow: none;\n}\n/* Inverted panel: the one dark box of the rail. */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: var(--color-border-strong);\n}\n.ds-panel--inverse .ds-panel__title {\n background: transparent;\n color: var(--color-accent);\n font-size: var(--text-h2);\n padding-top: var(--space-4);\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited {\n color: var(--color-accent);\n}\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n\n/* ---------- grid ---------- */\n/* Two by two feature cells: a tinted head over bulleted links. */\n.ds-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-grid__cell {\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__title {\n margin: 0;\n padding: var(--space-3) 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-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__title .ds-link {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__list {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-4) calc(var(--space-6) + var(--space-4));\n list-style: square;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-accent-alt);\n padding: 0;\n}\n.ds-badge--count {\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n padding: 0;\n}\n/* Status labels: the same square block, filled with the status colour. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-bar-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-bar-text);\n}\n\n/* ---------- notice ---------- */\n/* A message with a heavy left edge. */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n/* A row of outlined cells; the current one filled with the accent. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__item .ds-link,\n.ds-pagination__current {\n display: block;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-pagination__item .ds-link {\n background: var(--color-surface-alt);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n\n/* ---------- dialog ---------- */\n/* A message box in the page flow: square, outlined, on a dimmed band. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-5);\n background: color-mix(in srgb, var(--color-overlay) 35%, transparent);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface);\n color: var(--color-text);\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}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n grid-column: 1 / -1;\n grid-row: 4;\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\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/* ---------- carousel ---------- */\n/* The lead block as a rotator: numbered buttons name its slides, the one\n showing in the bar colours. Static; the buttons are not links. */\n.ds-carousel {\n position: relative;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n}\n.ds-carousel__dot {\n box-sizing: border-box;\n min-width: 3ch;\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- progress ---------- */\n/* A result or quota bar: label above, an outlined track with the fill in\n the bar colour, the figure at its right end. */\n.ds-progress {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: center;\n margin: 0;\n padding: var(--space-1) 0 var(--space-3);\n}\n.ds-progress__label {\n grid-column: 1 / -1;\n}\n.ds-progress__track {\n display: block;\n box-sizing: border-box;\n height: var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-progress__fill {\n display: block;\n height: 100%;\n background: var(--fill-bar);\n}\n.ds-progress__fill--12 { width: 12%; }\n.ds-progress__fill--26 { width: 26%; }\n.ds-progress__fill--62 { width: 62%; }\n.ds-progress__value {\n min-width: 4ch;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- menu ---------- */\n/* Jump menu: a select of destinations with its Go button. */\n.ds-menu {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-menu__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-menu__select {\n min-width: 0;\n max-width: 100%;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: sports portal, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n Scores, tables and reports from every ground\n
\n \n
\n
\n \n Tuesday, March 11\n
\n \n
\n\n
\n\n
\n
\n

Scoreboard: Premier division, Monday

\n all results\n
\n
    \n
  • \n Full time\n Harbour Rovers2\n Northgate1\n Report\n
    • \n
  • \n Full time\n Eastfield0\n Mill Lane0\n Report\n
    • \n
  • \n Full time\n Old Town1\n Quayside3\n Report\n
    • \n
  • \n Postponed\n WestbankP\n Ferry RoadP\n New date\n
    • \n
  • \n Tonight, 7:45\n Castle Park-\n Southmoor-\n Preview\n
    • \n
\n
\n\n
\n
\n\n
\n \n \n \n \n \n
  1. 1
  2. 2
  3. 3
\n

Rovers scored twice in the last ten minutes at the harbour ground.

\n

Rovers leave it late

\n

A goal down with ten minutes to play, Harbour Rovers turned the match round and went three points clear at the top of the Premier division.

\n Read the match report\n \n
\n\n
\n
\n

Today's best

\n more features\n
\n
\n
\n

Run-in

\n \n
\n
\n

Cup week

\n \n
\n
\n

Cricket

\n \n
\n
\n

Fantasy

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

Columns

\n all writers\n
\n \n
\n\n
\n\n
\n\n
\n

Premier division

\n \n \n \n \n \n \n \n \n \n \n \n \n
 TeamPPts
1Harbour Rovers2961
2Quayside2958
3Castle Park2855
4Northgate2949
5Mill Lane2944
6Eastfield2941
\n

Full table | Results

\n
\n\n
\n

Fantasy football

\n
\n

Pick eleven players for 50.0 and score points every match day. Entry is free until Friday.

\n
\n Enter a team\n My team\n
\n
\n
\n\n
\n

On air tonight

\n
\n \n

Radio commentary on every Premier match.

\n
\n
\n\n
\n

Top scorers

\n
\n \n

All scorers

\n
\n
\n\n
\n

Today's vote

\n
\n

Who wins the Premier division?

\n \n \n \n
\n \n Results\n
\n
\n
\n\n
\n

Yesterday's vote

\n
\n

Should the cup replay go to penalties?

\n
Yes, on the night62%
\n
No, play it again26%
\n
Toss a coin12%
\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Football
    4. \n
  4. >
    5. \n
  5. Scores
    6. \n
\n
\n
\n

Scores

\n

Premier division, match day 29. Updated at the final whistle.

\n
\n
\n See the table\n
\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
HomeScoreAwayCrowd 
Harbour Rovers2 - 1Northgate18,204Report
Eastfield0 - 0Mill Lane9,870Report
Old Town1 - 3Quayside11,412Report
WestbankP - PFerry Road0Postponed
Castle Park7:45Southmoor-Tonight
Lowfield2 - 2Abbey United7,655Report
Pier End1 - 0Marsh Lane6,930Report
\n

Winning side in bold. Crowd figures are those announced at the ground.

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

Next match day: Saturday

\n all fixtures\n
\n \n
\n\n
\n
\n\n \n\n
\n

Top of the table

\n \n \n \n \n \n \n \n \n \n
 TeamPPts
1Harbour Rovers2961
2Quayside2958
3Castle Park2855
\n

Full table

\n
\n\n
\n

Postponed

\n
\n

Westbank v Ferry Road was called off at noon with the pitch under water. A new date is expected this week.

\n The winter pitch problem\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Football
    4. \n
  4. >
    5. \n
  5. Premier division table
    6. \n
\n
\n
\n

Premier division

\n

The table after Monday's matches, with each side's last three results.

\n
\n
\n Latest scores\n
\n
\n
\n
\n\n
    \n
  • 287Matches played
    • \n
  • 731Goals
    • \n
  • 2.55Goals a match
    • \n
  • 46%Home wins
    • \n
  • 12,940Average crowd
    • \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
 TeamPWDLFAGDPtsLast three
1Harbour Rovers2918745224+2861W W D
2Quayside2917754927+2258W L W
3Castle Park2816754425+1955D W W
4Northgate2914784031+949L W D
5Mill Lane2912893330+344D D W
6Eastfield29118103133-241D L L
7Old Town2999113038-836L D W
8Westbank2868142241-1926L L D
\n

Three points for a win, one for a draw. Sides level on points are placed by goal difference, then goals scored.

\n
\n\n

Note: Castle Park and Westbank have a match in hand. Castle Park play Southmoor tonight at 7:45.

\n\n
\n
\n
\n

What the positions mean

\n
\n
    \n
  • 1st: champions
    • \n
  • 2nd and 3rd: Harbour Cup places
    • \n
  • Bottom two: relegated to the First division
    • \n
\n
\n
\n
\n

More tables

\n
\n

\n First division\n Second division\n Reserve league\n Fantasy league\n Scores\n

\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Scores
    4. \n
  4. >
    5. \n
  5. Harbour Rovers 2, Northgate 1
    6. \n
\n
\n
\n\n
\n
\n

Match report

\n back to scores\n
\n
\n

Rovers leave it late

\n

By the football desk at the harbour ground, March 10 | 42 replies

\n

A goal down with ten minutes to play, Harbour Rovers scored twice to beat Northgate and go three points clear.

\n

First half

\n

Northgate had the better of a scrappy opening and led from the 31st minute, when a corner was half cleared and driven back through a crowd of players. Rovers did not manage a shot on target before the interval.

\n

Second half

\n

The change came with two substitutions on the hour. Whitlow levelled from close range in the 81st minute and headed the winner from a free kick four minutes later.

\n
    \n
  • 31 min: Hale, Northgate (0-1)
    • \n
  • 81 min: Whitlow, Rovers (1-1)
    • \n
  • 85 min: Whitlow, Rovers (2-1)
    • \n
\n

What it means

\n

Rovers are three points ahead of Quayside, whom they visit on Saturday. Northgate stay fourth.

\n

Goal alerts

\n

To have Rovers goals sent to your phone, text GOAL ROVERS to the chronoskin alert number.

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

Related

\n
\n

\n The table tonight\n Monday's other scores\n Manager's reaction\n Player ratings\n More reports...\n

\n
\n\n
\n
\n

Your replies

\n all 42\n
\n
    \n
  • Worst sixty minutes of the season followed by the best thirty. a reader in Eastfield, 10:12 p.m.
    • \n
  • Northgate will wonder how they lost that. a reader in Northgate, 10:40 p.m.
    • \n
\n
\n\n
\n
\n\n
\n

Match facts

\n
\n
    \n
  • Shots on target6 - 4
    • \n
  • Corners7 - 5
    • \n
  • Fouls11 - 14
    • \n
  • Bookings1 - 3
    • \n
  • Crowd18,204
    • \n
\n
\n
\n\n \n\n
\n

Next up

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

Line-ups

\n
\n

Rovers: Okafor; Ames, Lund, Petrie, Voss; Hart, Lindqvist, Doyle; Whitlow, Brandt, Sato.

\n

Northgate: Reyes; Cole, Ibsen, Marr, Dunn; Hale, Farrow, Nash; Price, Okoro, Wren.

\n

Referee: appointed by the county association.

\n
\n
\n\n
\n

Fantasy points

\n
\n

Whitlow earned 13 points on Monday. Is he in your eleven?

\n Check my team\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Fantasy football
    4. \n
  4. >
    5. \n
  5. My team
    6. \n
\n
\n
\n

My team

\n

Pier End Wanderers, managed by Dana Whitlow. Changes close Friday at 6 p.m.

\n
\n
\n Enter another team\n
\n
\n
\n
\n\n
    \n
  • 1,204Points
    • \n
  • 3,417Overall rank
    • \n
  • 49.5Team value
    • \n
  • 2Transfers left
    • \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
PlayerClubPositionValueWeekPointsStatus
D. WhitlowHarbour RoversForward7.5+13188Fit
A. MarshQuaysideForward7.0+8171Fit
P. LindqvistCastle ParkMidfield5.50122Doubtful
R. AmesWestbankDefender3.5-264Injured
S. OkaforMill LaneGoalkeeper4.0+6109Fit
\n
\n \n \n \n \n
\n
\n\n
\n
\n
\n

Drop this player?

\n
\n

R. Ames leaves your squad and 3.5 returns to your budget. This uses one of your two transfers.

\n
\n \n Keep him\n
\n
\n
\n
\n
\n
\n

Transfers this week

\n
\n
\n

You have made no transfers this week. Two are free until Friday.

\n Find a player\n
\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Fantasy football
    4. \n
  4. >
    5. \n
  5. Enter a team
    6. \n
\n
\n
\n

Enter a team

\n

Free to play. Name your side now and pick the eleven on the next page.

\n
\n
\n Back to my team\n
\n
\n
\n
\n\n
\n

Error: Your team was not entered. Check the field marked below.

\n

Note: Teams entered after Friday score from match day 31.

\n
\n\n
\n
\n

Your team

\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Please enter a complete e-mail address.\n
\n
\n
\n \n
\n \n
\n
\n
\n Send me\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n
\n\n
\n
\n\n \n\n
\n

How points are scored

\n
\n
    \n
  • Goal+5
    • \n
  • Clean sheet+4
    • \n
  • Appearance+2
    • \n
  • Booking-1
    • \n
  • Sent off-3
    • \n
\n

Points are added by 10 a.m. the day after a match.

\n
\n
\n\n
\n

Deadline

\n
\n

Entries for match day 30 close on Friday at 6 p.m.

\n
\n
\n\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s05.p06.t05.u05.dc\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"portals-2000s\",\n \"years\": [\n 2000,\n 2004\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-po-5655-dc\",\n \"short\": \"v1-po-5655-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #d0d0d0;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #a8a8a8;\n --color-bar: #000099;\n --color-bar-text: #ffffff;\n --color-bar-alt: #686868;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #082058;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #484848;\n --color-heading: #000000;\n --color-heading-alt: #000099;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #686898;\n --color-link-hover: #0033cc;\n --color-link-active: #ff0000;\n --color-border: #989898;\n --color-border-strong: #303030;\n --color-border-muted: #e0e0e0;\n --color-accent: #ffd000;\n --color-accent-text: #000000;\n --color-accent-alt: #d00000;\n --color-fill-1: #f0f8ff;\n --color-fill-2: #ffffd0;\n --color-fill-3: #d0d0ff;\n --color-fill-4: #e8e8e8;\n --color-button: #d0d0d0;\n --color-button-text: #000000;\n --color-button-hover-text: #000099;\n --color-button-secondary: #e8e8e8;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #686868;\n --color-disabled: #d8d8d8;\n --color-disabled-text: #707070;\n --color-danger: #d00000;\n --color-danger-surface: #fff0e0;\n --color-success: #3f8640;\n --color-warning: #ffd000;\n --color-notice: #ffffd0;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #303030;\n --color-overlay: #989898;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, Geneva, sans-serif;\n --font-heading: Verdana, Arial, Helvetica, Geneva, sans-serif;\n --font-ui: Tahoma, Arial, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 4px 4px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-text: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: repeating-linear-gradient(to bottom, var(--color-bar) 0 1px, color-mix(in srgb, var(--color-bar) 84%, black) 1px 2px);\n --fill-bar-alt: repeating-linear-gradient(to bottom, var(--color-bar-alt) 0 1px, color-mix(in srgb, var(--color-bar-alt) 88%, black) 1px 2px);\n --fill-inverse: repeating-linear-gradient(to bottom, var(--color-inverse) 0 1px, color-mix(in srgb, var(--color-inverse) 86%, white) 1px 2px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 45%, white) 0 50%, var(--color-button) 50% 100%);\n --fill-button-hover: linear-gradient(to bottom, var(--color-button) 0 50%, color-mix(in srgb, var(--color-button) 45%, white) 50% 100%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }