{ "id": "v1-po-5344-dc", "long_id": "v1.portals-2000s.portal.s05.p03.t04.u04.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-5344-dc", "preview_url": "https://chrono.skin/s/v1-po-5344-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`, `--font-heading` and `--font-ui` are all Arial, Helvetica, sans-serif; `--font-mono` is Courier New for code. One family carries the whole page.\n- `--text-base` 13px is body text, links, title strips, table text and section labels. `--text-small` 10px is sub-links of the directory, meta lines, the utility line, captions, hints, stat labels and the copyright line. `--text-ui` 13px is buttons, inputs and tabs. `--text-large` 14px is defined for lead paragraphs in other layouts; this layout sets its lead in bold 13px and does not use it. `--text-h3` 13px, `--text-h2` 16px (header buttons, the search prompt, promo title, stat figures, prose h2), `--text-h1` and `--text-display` 18px (the wordmark, the page title, prose h1): 18px bold is the largest text.\n- Line heights are `normal`. Headings are bold, never uppercased, never tracked. `--weight-ui` 700: button and tab labels are bold; the secondary button is regular.\n- `--color-page`, `--color-canvas` and `--color-surface` are white: the sheet is not visible as a box in this palette, only its centring is. `--color-surface-alt` #ffffcc fills the sidebar box, the form, the stat strip, alternate table rows and the foot line of a panel. `--color-surface-strong` #ffff99 is sidebar title strips and inactive tabs.\n- `--color-bar` #336699 with white `--color-bar-text` is panel and dialog title strips, table heads, the current header button and the current tab. `--color-bar-alt` #ffcc00 with black `--color-bar-alt-text` is the search band and the title strip of `.ds-panel--alt`; links on it take the bar text colour. `--color-inverse` #000066 with white text is the promo strip, where links take `--color-accent`.\n- `--color-text` and `--color-heading` black; `--color-text-muted` #666666 for meta lines and captions; `--color-heading-alt` #003366 for h3.\n- `--color-link` #0000ee, underlined, for every link; `--color-link-quiet` is the same blue and `--link-decoration-quiet` is also underline, because the era underlined its navigation too. Visited #333366, hover #cc0000, active #ff0020.\n- `--color-border` #ffcc00 outlines every box and rules the section strips and the footer; `--color-border-strong` #336699 outlines header buttons, tabs, the dialog and the page header rule; `--color-border-muted` #eeeeee is row rules and the bevel of buttons.\n- `--color-accent` #ffcc00 with black text is the badge and the current page number; `--color-accent-alt` #cc0000 is the \"New!\" label, promoted links and bare red marks.\n- `--color-fill-1` pale lavender, `--color-fill-2` pale green, `--color-fill-3` pale orange and `--color-fill-4` pale grey fill the four grid cells; `--color-fill-3` is also every section strip.\n- Surface: heavy and ruled. `--border-width` is 1px and `--border-width-strong` 3px; `--border-style` is double, which a 1px line shows as a plain line and a 3px line as two hairlines with a gap, so the header rule, the page header rule, the tab rule, the footer rule and the dialog outline are double rules while box outlines stay single. Boxes cast a hard 2px block shadow in `--color-border-muted` (`--shadow-panel`), the dialog a 3px one in `--color-shadow` (`--shadow-dialog`); a hovered button gains a 1px block shadow and the alternate surface, a pressed one a 2px inset. No shadow is blurred. `--fill-page` lays a faint vertical pinstripe over the page colour; all other fills are flat. `--focus-ring` is 2px dotted. Radii are 0 and `--transition` none.\n- Buttons are the browser button of the period: `--fill-button` #eeeeee with a `--border-width-strong` (3px) outset bevel; the secondary one is white and regular weight. Inputs are white with a 3px inset border in `--color-input-border`. `--color-danger` #cc0000 is error text, the border of an invalid field, the label of a destructive button and the failed badge; `--color-success` #339900 and `--color-warning` #ffcc00 are badge fills only. `--color-notice` and `--color-danger-surface` are the two pale notice backgrounds.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons, the brand tile and inputs (the vocabulary has one `--border-style`); `calc()` sums of two layout tokens for the form action offset and the small input; `text-decoration: underline` on links inside the search band.\n- Visited, hover, active and focus colours cannot be measured on a static capture; they are colours measured elsewhere in the references assigned to those roles.\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- `palette-colours <= 16`: navy, periwinkle, mid blue, stone and four pale tints; no further hue.\n- `font-size <= 18px`: the largest text measured is 18px bold.\n- `font-size >= 10px`: the small print is 10px and nothing is smaller.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Arial for everything and a monospace for code.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: nothing is uppercased by CSS.\n- `underlined-links >= 90%`: links are underlined everywhere, navigation included.\n- `border-radius <= 0px`: no reference has a rounded box in CSS; every block is a square rectangle.\n- `box-shadow-blur <= 0px`: shadows are hard-edged offset blocks; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: bands, strips and cells are flat colour.\n- `border-width <= 3px`: 1px outlines and rules, 3px bevels and double rules.\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.p03.t04.u04.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-5344-dc\",\n \"short\": \"v1-po-5344-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #003366;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeee3;\n --color-surface-strong: #989acd;\n --color-bar: #666699;\n --color-bar-text: #ffffff;\n --color-bar-alt: #4d86bc;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #003366;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #666699;\n --color-link: #003366;\n --color-link-quiet: #000000;\n --color-link-visited: #666699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #989acd;\n --color-border-strong: #003366;\n --color-border-muted: #eeeee3;\n --color-accent: #fdfe96;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #f1f0ff;\n --color-fill-2: #e4f7e4;\n --color-fill-3: #fff0e0;\n --color-fill-4: #eeeee3;\n --color-button: #eeeee3;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #003366;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808080;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #fff0e0;\n --color-success: #3f8640;\n --color-warning: #fff8c0;\n --color-notice: #fffbee;\n --color-notice-text: #000000;\n --color-focus: #003366;\n --color-shadow: #000000;\n --color-overlay: #eeeee3;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 13px;\n --text-large: 14px;\n --text-display: 18px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: double;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 2px 2px 0 var(--color-border-muted);\n --shadow-control: none;\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.09'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white' fill-opacity='.12'/%3E%3C/svg%3E\");\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface-alt);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }