{ "id": "v1-po-7635", "long_id": "v1.portals-2000s.portal.s07.p06.t03.u05", "name": "Television listings, 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 }, "summary": "A what's-on page of the kind listings magazines, broadcasters and portals ran for their television guides between 2000 and 2004: a 780px outlined sheet centred on a 1024px screen, with the evening laid out as a ruled grid of channels against half hours and everything else stacked above and below it in full-width bands. Navigation is a row of small outlined keys typed beside the wordmark, over a coloured band that carries the day and the time; boxes are hairline rectangles under solid title strips, and text is 10px Verdana with Arial headings no larger than 20px. It gave way from about 2005 to wider guides that scrolled sideways without reloading and wore gradients and rounded corners.", "url": "https://chrono.skin/s/v1-po-7635", "preview_url": "https://chrono.skin/s/v1-po-7635/specimen.html", "files": { "STYLE.md": "# Television listings, 2000 to 2004\n\n## Summary\n\nA what's-on page of the kind listings magazines, broadcasters and portals ran for their television guides between 2000 and 2004: a 780px outlined sheet centred on a 1024px screen, with the evening laid out as a ruled grid of channels against half hours and everything else stacked above and below it in full-width bands. Navigation is a row of small outlined keys typed beside the wordmark, over a coloured band that carries the day and the time; boxes are hairline rectangles under solid title strips, and text is 10px Verdana with Arial headings no larger than 20px. It gave way from about 2005 to wider guides that scrolled sideways without reloading and wore gradients and rounded corners.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 780px; `.ds-page__frame` is a sheet of that width centred in the window (`margin: 0 auto`), outlined with a `--border-width` line in `--color-border-strong` and padded `--space-4` (6px) at the sides, so no band touches the outline. `.ds-page` pads the window by `--space-4` and paints `--fill-page`. No text sits on the page colour.\n- Navigation is at the top right, beside the wordmark, not on a bar: `.ds-nav__masthead` holds `.ds-nav__brand` on the left and `.ds-nav__side` on the right, which stacks the `.ds-nav__links` row of outlined keys over the `.ds-nav__search` line. Under the masthead `.ds-nav__band` is the one coloured bar of the header: the day and time on the left, the seven days and the region on the right.\n- The home page has no columns of its own: it is `.ds-page__stack`, a stack of full-width bands `--space-4` apart. From the top: `.ds-page__top` (the `.ds-hero` filling the width beside a `--size-pick` 232px box of what starts next), then one `.ds-block` of `.ds-tabs`, `.ds-guide` and `.ds-guide__key` touching each other, then `.ds-page__thirds` (three equal columns: a `.ds-section` over a `.ds-list`, a `.ds-panel`, a `.ds-sidebar`), then `.ds-grid`, four equal cells across the sheet.\n- The grid of listings: `.ds-guide` has a `--size-channel` (96px) column and six equal half-hour columns; a programme spans one, two, three, four or six of them.\n- Inner pages keep the sheet, header and footer and have no hero and no listings grid. A `.ds-page__stack` opens the view with `.ds-breadcrumb`, then `.ds-page-header`, then an optional `.ds-stat` strip, each full width. Below it `.ds-page__columns` has two columns: `.ds-page__main` and a `--size-rail` (216px) `.ds-page__rail` on the right holding `.ds-panel` and `.ds-sidebar` boxes. A page that needs the whole width (a wide table with its buttons) stays in the stack and puts two half-width blocks side by side in `.ds-page__pair`. `.ds-tabs` stand directly on the table they switch.\n- Views. The specimen is one example site of five screens, one showing at a time; the header and footer are written once around them. `home` is tonight: the pick of the night, the grid from 7 pm to 10 pm, films, sport and the channel index, then four kinds of programme. `listings` is one channel's day: breadcrumb, page header, tabs on the schedule table, pagination by day, and a rail. `programme` is one programme: a section rule, the preview as article text, a row of links, further showings, and a rail of facts. `planner` is the signed-in page: page header, stat strip, tabs on the reminders table with its button row, then the remove message box beside the empty next-week block. `setup` is the form page: page header, notices, the form and a rail. Each key in the navigation marks its own view.\n- Spacing scale: `--space-1` 1px is the padding between checkbox rows; `--space-2` 2px is the vertical padding of bars, title strips, tabs and buttons; `--space-3` 3px is the vertical padding of table cells, list rows and grid cells of the guide; `--space-4` 6px is the side padding of every cell and box, the gutter between columns and the gap between bands; `--space-5` 9px is the side padding of buttons, tabs and the page header and the gap between paragraphs; `--space-6` 12px is the gap between links in a row and the padding round a dialog. There is no step above 12px.\n- Fixed sizes: `--size-time` 58px is the time column of lists and tables; `--size-mark` 30px the brand tile; `--size-search` 130px a short input; `--size-field` 220px a text input; `--size-label` 124px the label cell of a form; `--size-area` the height of a textarea; `--size-dialog` 330px a message box.\n- Things are separated by hairlines. Every box has a 1px outline, rows are ruled, and the only heavier lines are the `--border-width-strong` rule under a `.ds-section` title, the top edge of a `.ds-grid__cell`, the left edge of the page header and of a notice, and the top of the footer.\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- Blues on a dark window. `--color-page` #003366 (navy) frames a white sheet (`--color-canvas`, `--color-surface` #ffffff); `--color-surface-alt` #eeeee3 (warm stone) fills the page header, the menu box, form action rows, inactive in-page tabs, the dialog and the empty state; `--color-surface-strong` #989acd (light periwinkle) with black text is inactive navigation tabs, menu title strips and picture slots.\n- `--color-bar` #666699 (periwinkle) with white text is the open navigation tab and the bar under it, story headlines, panel and dialog titles, table heads and section markers; `--color-bar-alt` #4d86bc (mid blue) with white text is the form title strip and alternate panel titles. `--color-inverse` #003366 with white text is the hero band, the one dark block of a page.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #666666 for posting lines, counts and captions; `--color-heading-alt` #666699 for section titles, h3 and positive figures.\n- `--color-link` #003366, `--color-link-quiet` #000000 for tabs, menu and breadcrumb links, visited #666699, hover #cc0000, active #ff0000. `--color-accent` #fdfe96 (pale yellow) with black text is the badge and the current page number; as a text colour it is the current link on the bar and every link on the hero band. `--color-accent-alt` #cc0000 marks promoted entries.\n- `--color-fill-1` #f1f0ff lilac, `--color-fill-2` #e4f7e4 green, `--color-fill-3` #fff0e0 peach, `--color-fill-4` #eeeee3 stone tint the four cells of the grid strip; lilac is also the stats line. Text on a fill is `--color-text`, `--color-heading` or a link colour. Rules and box outlines are `--color-border` #989acd; the tab outline, dialog outline and footer rule are `--color-border-strong` #003366; rules between form rows and menu rows are `--color-border-muted` #eeeee3.\n- `--color-button` #eeeee3 with black label; the secondary button is white with a #003366 label. `--color-danger` #cc0000 on #fff0e0; `--color-success` #3f8640 and `--color-warning` #fff8c0 are badge fills; `--color-notice` #fffbee.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are all Arial; `--font-mono` Courier for code.\n- Small and tight: `--text-base` and `--text-ui` 11px, `--text-small` 10px for posting lines, the bar under the tabs, the breadcrumb and captions, `--text-large` 12px for a lead paragraph, `--text-h3` 12px for story headlines and hero side titles, `--text-h2` 13px for section and grid titles, `--text-h1` and `--text-display` 16px for the wordmark, the hero title and the page title. Hierarchy comes from bold, not from size.\n- `--line-body`, `--line-heading` and `--line-display` are 1.09 (12px lines for 11px text). `--weight-ui` 700: tabs and both buttons are bold. No uppercase, no tracking.\n- Links in running text are underlined (`--link-decoration`); tabs, menu, breadcrumb and bar links are not (`--link-decoration-quiet` none) until hovered.\n- Hairlines: `--border-width` and `--border-width-strong` are both 1px, solid. Buttons and inputs have a 1px bevel. `--shadow-panel` is a 1px ring in `--color-border-strong` with no offset and no blur around each panel, outside the 1px outline of its body, so a panel reads as a double-ruled box. Controls and the dialog carry the same kind of ring: `--shadow-control` is a 1px ring in `--color-border-strong` around every button and input, outside its bevel (`--color-focus` when hovered, an inset ring when pressed), `--shadow-dialog` a 1px ring in `--color-border-strong`. `--shadow-text` is none. A hovered button and the secondary button take `--color-surface`, the sheet colour. Fills are flat and all radii are 0. `--focus-ring` is 1px solid in `--color-focus`; `--transition` none.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, `solid` for tab outlines and the 1px dividers in link rows, and `calc()` sums of spacing steps for the bullet indent and the form action offset.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Wrap everything in `.ds-page__frame`. `.ds-page__stack` is a column of full-width bands; `.ds-page__top`, `.ds-page__thirds`, `.ds-page__pair` and `.ds-page__columns` (with `.ds-page__main` and `.ds-page__rail`) split a band into columns. `.ds-block` groups things that must touch. `.ds-page__legal` is the centred copyright line.\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`, a 1px `--color-border-strong` outline, `--radius-control` and `--shadow-control`. The mark is inline SVG with butt caps and a 2.6 stroke. `.ds-brand__name` is the 20px bold wordmark in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__masthead` holds `.ds-nav__brand` (the `.ds-brand` over `.ds-nav__tagline`) and `.ds-nav__side` (`.ds-nav__links` of `.ds-nav__item` and `.ds-nav__link` keys; `is-current` fills the key with the accent; then `.ds-nav__search` with `.ds-nav__search-label`, a short input and a button). `.ds-nav__band` is the coloured clock band: `.ds-nav__clock` and `.ds-nav__days` of `.ds-nav__day` links, the current day `is-current`.\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the start page). A real multi-page site does not need it.\n- `.ds-breadcrumb`: inner pages only, first thing in the view: a 10px trail on the secondary bar with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the pick of the night, home page only. `.ds-hero__slot` is the dark block at its left with `.ds-hero__time` and `.ds-hero__channel`; `.ds-hero__body` holds `.ds-hero__kicker`, the 17px `.ds-hero__title`, `.ds-hero__text` and `.ds-hero__actions` (one `.ds-button`, then links).\n- `.ds-guide`: the listings grid. `.ds-guide__head` is the bar of `.ds-guide__hour` cells; each `.ds-guide__row` starts with a `.ds-guide__channel` (with `.ds-guide__number`) and continues with `.ds-guide__show` cells, which take `--2`, `--3`, `--4` or `--6` for the half hours they span and `--film`, `--sport`, `--news` or `--plain` for their kind. A cell holds a `.ds-guide__title` link and a `.ds-guide__meta` line. The spans of a row must add up to six. `.ds-guide__key` under it explains the tints with `.ds-guide__swatch` squares.\n- `.ds-section`: a heading on the sheet over a heavy rule, with `.ds-section__title` and an optional `.ds-section__more` link at the right. It opens a list or an article.\n- `.ds-page-header`: head of an inner page, once per page: a tinted outlined band with a heavy left edge, holding `.ds-page-header__title` (the page's h1), one line of `.ds-page-header__text` and `.ds-page-header__action` with one button at the right.\n- `.ds-stat`: the row. One outlined strip of three to five `.ds-stat__item` cells divided by rules, each a 17px `.ds-stat__value` followed on the same line by its `.ds-stat__label`.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code` (programme codes), strong; `.ds-prose__byline` for the 10px line of time and channel and `.ds-prose__lead` for the bold first paragraph.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the navigation colour without underline. `.ds-links` is a ruled row of links under an article.\n- `.ds-button`: the flat outlined key for the main action. `.ds-button--secondary` is lighter with a normal-weight label; `.ds-button--danger` is the secondary key outlined and lettered in the danger colour, for remove and delete; `disabled` or `is-disabled` greys it; `is-hover` and `is-active` use the surface set's hover and pressed shadows. `.ds-buttons` is the outlined button row under a table, with `.ds-buttons__label` saying what the buttons act on.\n- `.ds-form`: an outlined block of ruled `.ds-form__row` pairs: a tinted `.ds-form__label` cell (optional `.ds-form__hint`) and a `.ds-form__field` cell holding the control. Controls take `.ds-form__input` (`--small`, `--auto` for selects, `--area` for textareas); `is-invalid` with a `.ds-form__error` line marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` is the tinted button row.\n- `.ds-table`: an outlined schedule: bar-coloured head, ruled rows alternating two surfaces, `.ds-table__time` for the tinted first column, `.ds-table__num` for right-aligned figures, `.ds-table__note` for the 10px line under a title, `is-current` on the row that is on now. `.ds-table__caption` is the small line under it.\n- `.ds-tabs`: outlined `.ds-tabs__tab` cells without a bottom edge, standing on the block they switch; `is-current` is bar-coloured and 2px taller.\n- `.ds-list`: a what's-on list. Each `.ds-list__item` has a `.ds-list__time` column and a `.ds-list__body` with a bold `.ds-list__title` link, an optional `.ds-list__text` and a `.ds-list__meta` line; items are ruled apart.\n- `.ds-panel`: an outlined box: `.ds-panel__title` bar over `.ds-panel__body`, optional `.ds-panel__foot`. Body helpers: `.ds-panel__text`, `.ds-panel__list` of `.ds-panel__row` (label left, value right, ruled), `.ds-panel__small`. `.ds-panel--alt` has the secondary bar as its title; `.ds-panel--inverse` is the one dark box of a page.\n- `.ds-sidebar`: an outlined tinted block of `.ds-sidebar__title` strips over `.ds-sidebar__list` link lists (`--two` sets the list in two columns); entries are `.ds-sidebar__item` with `.ds-link--quiet`.\n- `.ds-grid`: four `.ds-grid__cell` blocks across the sheet, tinted `--color-fill-1` or with `--2`, `--3`, `--4`, each with a heavy top edge, a 13px `.ds-grid__title` link, a `.ds-grid__text` line and `.ds-grid__meta`.\n- `.ds-badge`: a square accent label (\"NEW\"). `.ds-badge--alt` is bare text in `--color-accent-alt` (\"LIVE\"). Status labels change the fill: `.ds-badge--success` (set), `.ds-badge--warning` (time changed), `.ds-badge--danger` (clash).\n- `.ds-notice`: a one-line outlined message with a heavy left edge, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colours. Stack several in `.ds-notices`.\n- `.ds-pagination`: an outlined strip of small boxed `.ds-pagination__link` days with the current one as `.ds-pagination__current` on the accent; `.ds-pagination__item--end` pushes the next link to the right end.\n- `.ds-dialog`: the era's message box, in the page flow: a `--size-dialog` outlined box with a bar-coloured `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`, on the flat `.ds-dialog__backdrop`.\n- `.ds-empty`: an outlined block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: `.ds-footer__bar`, a centred strip of `.ds-footer__link` entries on the secondary bar under a heavy rule, followed by `.ds-page__legal`.\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- `.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-accordion`: a list of questions or help topics as `
` with `.ds-accordion__summary` (a plus or minus box before it) and `.ds-accordion__body`. Use it for FAQs and help, not for navigation.\n\n## Never\n\n- `row-gap <= 6px`: rows of tables and lists touch.\n- `block-gap <= 12px`: bands sit 6px apart.\n- `content-width <= 790px`: the sheet is fixed at 780px and does not stretch.\n- `font-size <= 16px`: the largest text is 16px bold.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Arial and a monospace for code.\n- `line-height <= 1.2`: lines are set tight, 12px for 11px text.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: nothing is uppercased by CSS.\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 box copies `.ds-panel` (1px outline, bar-coloured title strip, body padded `--space-4`); a new schedule copies `.ds-table` or, for several channels at once, `.ds-guide`; a new band on the home page is one more child of `.ds-page__stack`, split with `.ds-page__thirds` if it needs columns; a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, then `.ds-page__columns` or full-width blocks). 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 under 13px and 17px headings, keep corners square, outline every box with a hairline and rule every row, and never separate things with whitespace, cards, soft shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). A listings page: a channel column, six\n half-hour columns, and a narrow rail on inner pages. */\n:root {\n --size-page: 780px;\n --size-channel: 96px;\n --size-rail: 216px;\n --size-pick: 232px;\n --size-mark: 30px;\n --size-search: 130px;\n --size-label: 124px;\n --size-field: 220px;\n --size-area: 6em;\n --size-dialog: 330px;\n --size-time: 58px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 3px;\n --space-4: 6px;\n --space-5: 9px;\n --space-6: 12px;\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, outlined all round. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-4) var(--space-4);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* Every stage of a page is a full-width band; bands sit one step apart. */\n.ds-page__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-page__top {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-pick);\n gap: var(--space-4);\n align-items: stretch;\n}\n.ds-page__thirds {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: stretch;\n}\n/* Inner page: the work on the left, a rail of boxes on the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-4);\n align-items: start;\n padding-top: var(--space-4);\n}\n.ds-page__main,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- views ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- 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.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- nav ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__masthead {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) 0;\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 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-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n display: block;\n margin-top: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Navigation is typed beside the wordmark: a row of links over the search\n line, both set to the right. */\n.ds-nav__side {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-4);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\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__item {\n display: block;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n color: var(--color-link-hover);\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(#listings:target) .ds-nav__link[href=\"#listings\"],\n.ds-page:has(#programme:target) .ds-nav__link[href=\"#programme\"],\n.ds-page:has(#planner:target) .ds-nav__link[href=\"#planner\"],\n.ds-page:has(#setup:target) .ds-nav__link[href=\"#setup\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-nav__search-label {\n font-weight: var(--weight-bold);\n}\n/* The clock band: what day and time the listings are for. */\n.ds-nav__band {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__clock {\n font-weight: var(--weight-bold);\n}\n.ds-nav__days {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__day {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__day:hover,\n.ds-nav__day.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__day.is-current {\n color: var(--color-accent);\n font-weight: var(--weight-bold);\n text-decoration: none;\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-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- section strip ---------- */\n/* A ruled heading: bold title on the sheet over a strong rule. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading-alt);\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-section__more {\n font-size: var(--text-small);\n}\n\n/* ---------- hero ---------- */\n/* Pick of the night: a tinted, outlined band with the time and channel in\n a block at its left edge. */\n.ds-hero {\n display: flex;\n align-items: stretch;\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-hero__slot {\n display: flex;\n flex: none;\n flex-direction: column;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-channel);\n padding: var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-align: center;\n}\n.ds-hero__time {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__channel {\n display: block;\n font-size: var(--text-small);\n}\n.ds-hero__body {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-4) var(--space-5);\n}\n.ds-hero__kicker {\n margin: 0;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\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-hero__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-5);\n}\n\n/* ---------- guide ---------- */\n/* The listings grid: one row per channel, six half-hour columns; a\n programme spans the half hours it runs. Lines are the border colour\n showing through one-border-width gaps. */\n.ds-guide {\n display: grid;\n row-gap: var(--border-width);\n background: var(--color-border);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-guide__head,\n.ds-guide__row {\n display: grid;\n grid-template-columns: var(--size-channel) repeat(6, minmax(0, 1fr));\n column-gap: var(--border-width);\n}\n.ds-guide__head {\n column-gap: 0;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-guide__hour {\n padding: var(--space-2) var(--space-4);\n}\n.ds-guide__channel {\n padding: var(--space-3) 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-h3);\n font-weight: var(--weight-heading);\n}\n.ds-guide__number {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-guide__show {\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-guide__show--2 { grid-column: span 2; }\n.ds-guide__show--3 { grid-column: span 3; }\n.ds-guide__show--4 { grid-column: span 4; }\n.ds-guide__show--film { background: var(--color-fill-2); }\n.ds-guide__show--sport { background: var(--color-fill-3); }\n.ds-guide__show--news { background: var(--color-fill-4); }\n.ds-guide__row:nth-child(odd) .ds-guide__show--plain { background: var(--color-surface-alt); }\n.ds-guide__title {\n font-weight: var(--weight-bold);\n}\n.ds-guide__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n/* The key under the grid. */\n.ds-guide__key {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-guide__swatch {\n display: inline-block;\n width: var(--space-5);\n height: var(--space-5);\n margin-right: var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: middle;\n}\n.ds-guide__swatch--film { background: var(--color-fill-2); }\n.ds-guide__swatch--sport { background: var(--color-fill-3); }\n.ds-guide__swatch--news { background: var(--color-fill-4); }\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\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-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: var(--space-2) 0 0;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* One outlined strip cut into cells by rules: figure and label on a line. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-5);\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 margin-right: var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-4) var(--space-2);\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 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); color: var(--color-heading-alt); }\n.ds-prose h3 { font-size: var(--text-h3); }\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 calc(var(--space-6) + var(--space-4));\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-large);\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 font-weight: var(--weight-bold);\n}\n.ds-prose__byline {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- buttons ---------- */\n/* A flat outlined key with the surface set's highlight. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border);\n font-weight: var(--weight-ui);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-danger);\n border-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 border-color: var(--color-border-muted);\n box-shadow: none;\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}\n.ds-buttons__label {\n margin-right: auto;\n}\n\n/* ---------- form ---------- */\n/* Ruled rows: the label in a tinted cell, the control beside it. */\n.ds-form {\n margin: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\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__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-form__field {\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-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--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\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 border-width: var(--border-width-strong);\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 padding-top: var(--space-2);\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 padding: var(--space-1) 0;\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/* A ruled schedule: a line under every row, the time column tinted. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n vertical-align: top;\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table td.ds-table__time {\n width: var(--size-time);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table tr.is-current td {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table tr.is-current .ds-link,\n.ds-table tr.is-current .ds-table__note {\n color: var(--color-accent-text);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* Outlined cells standing on the top edge of the block they switch. */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\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-2) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-3);\n padding-bottom: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-border-strong);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- list ---------- */\n/* A what's-on list: the time in a column at the left, a rule between items. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-time) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-3) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__time {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\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 color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\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-h3);\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 flex: 1 1 auto;\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-2) 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__small {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel__foot {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n text-align: right;\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\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 padding-top: var(--space-4);\n background: transparent;\n color: var(--color-accent);\n}\n.ds-panel--inverse .ds-panel__small {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-panel__row {\n border-color: color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\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-inverse-text);\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\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-h3);\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__list--two {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n column-gap: var(--space-4);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n\n/* ---------- grid ---------- */\n/* Four kinds of programme across the sheet, each a tinted outlined cell\n with a heavy top edge. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n}\n.ds-grid__meta {\n display: block;\n margin-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\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 vertical-align: baseline;\n}\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\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.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-2);\n}\n\n/* ---------- pagination ---------- */\n/* Day by day: a row of small outlined cells. */\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-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__item--end {\n margin-left: auto;\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface);\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-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\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-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\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 display: block;\n margin-top: var(--space-4);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\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\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--20 { width: 20%; }\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/* ---------- accordion ---------- */\n/* Questions that open and close, each with a plus or minus box. */\n.ds-accordion {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n list-style: none;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: calc(var(--text-small) + 2 * var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-2) calc(var(--space-2) * 3) no-repeat,\n var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n height: calc(var(--text-small) + 2 * var(--border-width));\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n var(--color-surface);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3) calc(2ch + var(--space-4));\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: television listings, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n What's on television, hour by hour, for the next seven days\n
\n
\n \n
\n \n \n Go\n
\n
\n
\n
\n Thursday 13 March, 7.42 pm\n \n
\n
\n\n \n
\n
\n\n
\n
\n
\n 9.00\n tonight on Channel One\n
\n
\n

Pick of the night NEW

\n

The Harbour: a town waits for its boats

\n

First of six parts. A storm closes the port on the night the fleet is due home, and the harbour master has to decide who goes out to look. Filmed over one winter on the north coast.

\n
\n Remind me at 8.50 pm\n Read the preview\n All of Channel One tonight\n
\n
\n
\n\n
\n

Starting in the next hour

\n
\n \n
\n
\n
\n\n
\n \n
\n
\n Channel\n 7.00 pm\n 7.30 pm\n 8.00 pm\n 8.30 pm\n 9.00 pm\n 9.30 pm\n
\n
\n
Channel One button 1
\n
Evening Newsand weather
\n
The Quiz HourFour teams, one hundred questions. Subtitled
\n
Street VetsRepeat
\n
The Harbour NEWDrama, part 1 of 6. Our pick of the night
\n
\n
\n
Channel Two button 2
\n
Small GardensPots and window boxes
\n
Rivers of the NorthDocumentary. From the spring to the sea in a canoe
\n
Half Past EightComedy
\n
Film: The Long Road1971, three stars. Ends 10.50 pm
\n
\n
\n
Regional button 3
\n
North TonightLocal news
\n
Mill StreetSerial
\n
The Corner ShopSerial
\n
Supper in TwentyCookery
\n
The Thursday DebateLive from the town hall: who pays for the bypass?
\n
\n
\n
Film channel button 4
\n
Film: A Winter Journey1958, four stars, black and white. A piano tuner crosses the country by train to keep a promise. Started 6.45 pm
\n
Film: Night Ferry1984, two stars. Thriller
\n
\n
\n
Sport channel button 5
\n
Live football: Rovers v Athletic LIVECup quarter-final, kick-off 7.45 pm. Extra time and penalties if needed
\n
Rugby Round-upHighlights of six matches
\n
\n
\n
News channel button 6
\n
The World at SevenHeadlines on the hour and half hour
\n
Business TonightMarkets
\n
Weather WeekFive-day outlook
\n
Tomorrow's PapersTwo editors read the first editions
\n
\n
\n
Children's button 7
\n
Cartoon HourFive short films
\n
Story TimeThe lighthouse cat
\n
CloseThe channel returns at 6.00 am
\n
\n
\n \n
\n
\n\n
\n
\n
\n

Films tonight

\n All films this week\n
\n
    \n
  • \n 6.45 pm\n \n A Winter Journey\n Film channel | 1958 | four stars | 2 hr 15 min\n \n
    • \n
  • \n 9.00 pm\n \n The Long Road\n Channel Two | 1971 | three stars | 1 hr 50 min\n \n
    • \n
  • \n 9.00 pm\n \n Night Ferry\n Film channel | 1984 | two stars | 1 hr 35 min\n \n
    • \n
  • \n 11.20 pm\n \n The Clockmaker's Daughter\n Channel One | 1966 | four stars | 1 hr 40 min\n \n
    • \n
\n
\n\n
\n

Sport on television this week

\n
\n \n
\n

Sport channel, day by day

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

Drama

\n

The Harbour begins tonight; Mill Street reaches its 500th episode on Monday.

\n 38 programmes this week\n
\n
\n

Films

\n

A season of railway films on the Film channel, every night at 6.45 pm.

\n 61 films this week\n
\n
\n

Sport

\n

Two cup quarter-finals live, and the indoor athletics final on Saturday.

\n 44 hours live\n
\n
\n

Children's

\n

Story Time at 8.00 pm all week; Saturday morning cartoons from 6.00 am.

\n Daily until 8.30 pm\n
\n
\n\n
\n
\n\n \n
\n
\n
    \n
  1. Tonight
    2. \n
  2. >
    3. \n
  3. Channels
    4. \n
  4. >
    5. \n
  5. Channel One, Thursday
    6. \n
\n
\n
\n

Channel One: Thursday 13 March

\n

The whole day on button 1, from the breakfast programme to close-down.

\n
\n
Add to my channels
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TimeProgrammeKindMinutes
6.00 pmEvening NewsNational and world news, then the weather for the North.News30
6.30 pmThe AllotmentSpring sowing, and what to do about pigeons. Repeat.Leisure30
7.00 pmEvening News updateHeadlines and regional round-up.News30
7.30 pmThe Quiz Hour On nowFour teams, one hundred questions, one trophy. Subtitled.Quiz60
8.30 pmStreet VetsA greyhound with a limp and a parrot that will not eat. Repeat.Factual30
9.00 pmThe Harbour NEWPart 1 of 6. A storm closes the port on the night the fleet is due home.Drama60
10.00 pmLate NewsWith the first look at tomorrow's front pages.News35
10.35 pmQuestion NightAn audience in the city hall puts questions to a panel of five.Debate45
11.20 pmFilm: The Clockmaker's Daughter1966, four stars. A watch left for repair leads to an inheritance.Film100
\n

Times can change at short notice. Subtitles are available on programmes marked Subtitled.

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

On Channel One now

\n
\n

The Quiz Hour
Started 7.30 pm, 48 minutes left.

\n
12 of 60 minutes shown20%
\n

Next: Street Vets at 8.30 pm.

\n
\n

Back to the grid

\n
\n \n
\n

Print this page

\n
\n

A plain version of the day fits on one sheet of paper.

\n Printer-friendly listings\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Tonight
    2. \n
  2. >
    3. \n
  3. Channel One
    4. \n
  4. >
    5. \n
  5. The Harbour
    6. \n
\n
\n
\n
\n
\n
\n

Drama preview

\n Channel One, Thursday\n
\n
\n

The Harbour

\n

Thursday 13 March, 9.00 pm to 10.00 pm, Channel One. Part 1 of 6. Subtitled.

\n

A storm closes the port on the night the fleet is due home, and the harbour master has to decide who goes out to look.

\n

The first episode takes its time. For twenty minutes we watch a town do what it does on any winter evening: the fish market hoses down, the school bus drops its last children at the top of the hill, the radio in the harbour office reads out the shipping forecast. Then the forecast changes, and nobody says very much.

\n

Why watch

\n

It was filmed over one winter on the north coast, with a cast drawn largely from the town itself, and it shows. Nothing is hurried and nothing is explained twice.

\n
    \n
  • Six parts, Thursdays at 9.00 pm
    • \n
  • Repeated on Sundays at 10.15 pm on Channel Two
    • \n
  • Not suitable for young children
    • \n
\n

Setting your video recorder

\n

If your recorder takes programme codes, enter 48213 for tonight's episode or 48214 for the Sunday repeat. Allow five minutes either side.

\n
\n

\n Episode guide\n Cast and crew\n Where it was filmed\n Send us your review\n More drama this week\n

\n
\n
\n
\n

Further showings

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

At a glance

\n
\n
    \n
  • Starts9.00 pm
    • \n
  • ChannelOne (button 1)
    • \n
  • Length60 minutes
    • \n
  • KindDrama serial
    • \n
  • Our ratingFour stars
    • \n
\n
\n

Remind me

\n
\n
\n

On at the same time

\n
\n \n
\n
\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. Tonight
    2. \n
  2. >
    3. \n
  3. My planner
    4. \n
  4. >
    5. \n
  5. Reminders
    6. \n
\n
\n
\n

My planner

\n

The programmes you asked to be reminded about. We send an e-mail ten minutes before each one starts.

\n
\n
Add from the grid
\n
\n
    \n
  • 6reminders this week
    • \n
  • 2tonight
    • \n
  • 1clash to sort out
    • \n
  • 9 hrof viewing planned
    • \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
WhenProgrammeChannelMinutesReminder
Thu 9.00The HarbourChannel One60Set
Thu 9.00Film: The Long RoadChannel Two110Clash
Fri 7.00Snooker: evening sessionSport channel180Set
Sat 6.45Film: The Night MailFilm channel95Time changed
Sun 8.00Rivers of the NorthChannel Two60Set
Mon 7.30Mill Street: 500th episodeRegional30New
\n
\n With the ticked reminder (Film: The Long Road):\n Move to the repeat\n Change e-mail\n Remove\n \n
\n
\n
\n
\n
\n

Remove this reminder?

\n
\n

Film: The Long Road, Thursday 9.00 pm, clashes with The Harbour. Removing it cannot be undone, but the film is shown again on Sunday.

\n
\n Remove\n Keep both\n
\n
\n
\n
\n
\n
\n

Next week

\n
\n
\n

You have no reminders for the week of 20 March yet. Next week's listings went up this morning.

\n Look through next week\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Tonight
    2. \n
  2. >
    3. \n
  3. My planner
    4. \n
  4. >
    5. \n
  5. Set up my guide
    6. \n
\n
\n
\n

Set up my guide

\n

Tell us where you live and how you get your television, and the grid will show your channels in your order.

\n
\n
Skip for now
\n
\n
\n
\n
\n
\n

Regional programmes: your postcode decides which local news and which regional variations the grid shows.

\n

One thing to put right: the e-mail address is not complete. Reminders cannot be sent until it is.

\n
\n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n This address has no ending, such as .com or .org.\n
\n
\n
\n Show in the grid\n
\n \n \n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Save my guide\n Cancel\n
\n
\n
\n
\n
\n

Your channels now

\n
\n
    \n
  • 1Channel One
    • \n
  • 2Channel Two
    • \n
  • 3Regional (North)
    • \n
  • 4Film channel
    • \n
  • 5Sport channel
    • \n
  • 6News channel
    • \n
  • 7Children's
    • \n
\n
\n

Change the order

\n
\n \n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s07.p06.t03.u05\",\n \"library\": \"2026.10.09-1346\",\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-7635\",\n \"short\": \"v1-po-7635\"\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, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 16px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.09;\n --line-heading: 1.09;\n --line-display: 1.09;\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: 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" } }