{ "id": "v1-w9-5446-dr", "long_id": "v1.windows-9x.landing.s05.p04.t04.u06.dr", "name": "Desktop grey setup wizard, desert, 1998", "era": { "slug": "windows-9x", "code": "w9", "name": "Desktop grey", "years": [ 1995, 2001 ], "description": "Web pages dressed as the desktop of 1995 to 2001: silver-grey windows with a navy title bar, raised and sunken bevels on every button and field, a small pixel-sized sans, and dialogs, tabs and tree lists borrowed from the operating system." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "density": "roomy", "summary": "A download and setup site built as the installation wizard of a late 1990s desktop: one small window with a picture band at the left that lists the steps, one page of the wizard at the right under a white header band, and the row of Back, Next and Cancel keys along the foot. This pack shows it in a desert scheme: sand windows with a dark brown pinstriped title bar on a banded terracotta desktop, teal selection, every edge a double-line rim three pixels deep, etched grooves for the thin lines and a larger 13px humanist sans. Shareware authors, hardware makers and service providers walked visitors through downloads, licences and registration this way from 1995 to 2001, because everybody already knew how to use a wizard.", "url": "https://chrono.skin/s/v1-w9-5446-dr", "preview_url": "https://chrono.skin/s/v1-w9-5446-dr/specimen.html", "files": { "STYLE.md": "# Desktop grey setup wizard, desert, 1998\n\n## Summary\n\nA download and setup site built as the installation wizard of a late 1990s desktop: one small window with a picture band at the left that lists the steps, one page of the wizard at the right under a white header band, and the row of Back, Next and Cancel keys along the foot. This pack shows it in a desert scheme: sand windows with a dark brown pinstriped title bar on a banded terracotta desktop, teal selection, every edge a double-line rim three pixels deep, etched grooves for the thin lines and a larger 13px humanist sans. Shareware authors, hardware makers and service providers walked visitors through downloads, licences and registration this way from 1995 to 2001, because everybody already knew how to use a wizard.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 716px, one window (`.ds-page__window`, also a `.ds-window`) centred on the desktop of an 800px screen with twice `--space-6` above and below. The window is narrower than the screen on purpose: a wizard is a dialog, not a full window.\n- The window is a grid of two columns: the title bar across both, the picture band (`.ds-nav__band`, `--size-band`, 172px) at the left of the open view, and the `.ds-footer` brand line across the foot. `.ds-nav` (title bar and band) and the footer are written once, outside the views; each view is a `.ds-view` in the right column and one shows at a time. The band is as tall as the open page.\n- Every view is a `.ds-page__body`: a column of blocks `--space-4` apart, at least `--size-wizard` (440px) tall, that ends with `.ds-page__keys`, an etched rule over the right-aligned row of keys, pushed to the foot of the page.\n- Home view: the `.ds-hero` (the welcome title, a lead line, a paragraph and the large download key) written straight on the window face, the `.ds-stat` row of four read-outs, a `.ds-heading` and the `.ds-grid` of four picture cards, then the keys.\n- Inner pages keep the title bar, the band and the brand line and drop the welcome text, the read-outs and the cards. Each opens with the `.ds-breadcrumb`, one small line of path, then the `.ds-page-header`, a white sunken band with the page title, one line, an optional key and the page's large icon at the right. The working components follow, and where a page has tabs they sit directly under the page header with their `.ds-sheet`.\n- Views, in the order of the steps: `home` is the welcome page. `licence` is the licence in a `.ds-scroll` well with its scroll bar, and two radio buttons. `components` has three tabs over a sheet (a check tree in a well beside a description group box and property rows) and a list view of drives. `register` has two notices and the form. `download` has a progress bar across the page, a group box listing the files, a list view of mirror sites with status labels and pagination keys, and the Exit Setup dialog. `finish` has a notice, a group box of what was installed beside the empty state of the skipped files, and two check boxes. The step of the view that is showing is a raised key in the band; the first step is marked when the address names no view.\n- Fixed sizes: `--size-picture` 104px least height of the picture; `--size-scroll` 190px height of a scrolling well; `--size-ctl` 16px caption button, scroll key and scroll bar width, `--size-glyph` 8px glyph; `--size-icon` 32px and `--size-icon-small` 16px icons; `--size-check` 13px check box and radio button; `--size-label` 112px form label column; `--size-field` 210px text field; `--size-dialog` 330px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n- Spacing scale: `--space-0` 1px is the hairline step (tick inset, row padding in trees); `--space-1` 2px the gap between keys and the padding of bars; `--space-2` 4px the padding of keys, the gap between an icon and its word and between panes; `--space-3` 6px cell and field padding and the gap between keys in a row; `--space-4` 8px the gap between blocks inside a window and the padding of group boxes; `--space-5` 12px the padding of sheets and dialogs; `--space-6` 16px the margin of the desktop round the window and the gutter of two-column sheets.\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- Two families and a monospace: `--font-body` and `--font-ui` are a wide humanist sans (Lucida Sans Unicode, then Lucida Grande, Geneva); `--font-heading` is Arial Black at weight 900 for the folder banner, page titles, the brand and the read-outs; `--font-mono` is Lucida Console. The references set their text in Arial and Verdana at 10px to 13px with titles in a black weight; the stacks here are the nearest faces that shipped with the desktops of the time.\n- Sizes: `--text-base` and `--text-ui` 11px for everything; `--text-small` 10px for counts and dates; `--text-large` 12px for a lead line; `--text-h2` 12px and `--text-h3` 11px for headings; `--text-h1` 15px for a page title and a read-out; `--text-display` 20px for the folder banner only. Line height 1.45 in text, 1.25 in keys and bars. Bold is 700, headings 900; keys are regular weight. No transform and no tracking. Links in text are underlined; quiet links are not.\n- Colour: blue-grey `--color-canvas` windows on a dark storm blue `--color-page`, white wells, a slate title bar and slate selection, a mid grey-blue `--color-inverse` for the banner and the rail, ink blue links with violet visited and brick active, near-black blue text. Block colours are pale blue, sea green, lavender and straw. Status colours are deep green, ochre and dark red, all legible on white.\n- Surface: nothing is bevelled. A raised part is one hairline of `--color-border` with a 2px pale edge inside its top and left; a sunken part is the same hairline with a 2px grey shade inside its top and left; a window is a hairline of `--color-border-strong`, and a dialog adds a hard 2px shadow. `--border-width-strong` is 2px. Thin lines (`--border-style`) are dotted: group boxes, rules, the frame of notices and badges, the extra line of the default button. The desktop and the inverse fill carry thin slanting rain lines; the title bar runs from a near-black mix of `--color-bar` at the left to `--color-bar` at the right. A key under the pointer turns paler (`--fill-button-hover`) and its label takes `--color-button-hover-text`.\n- The era's rule for which text sits on which fill, the same in every layout of the era and to be kept by every token set:\n - The desktop (`--fill-page` over `--color-page`) is always dark enough to carry `--color-bar-text`. Text written straight on the desktop (icon labels, small print) uses `--color-bar-text`.\n - The window face is `--color-canvas`; raised parts inside a window (sheets, notes, dialogs) are `--fill-panel`. Both carry `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n - A sunken well (list view, tree, document, read-out, empty list) is `--color-surface` and carries the same text and link tokens as the window face, so every palette keeps text and links legible on both. `--color-surface-alt` is the alternate row and the fill of inline code and of a pressed toolbar key; `--color-surface-strong` is a group or total row. They carry `--color-text`.\n - A title bar is `--fill-bar` with `--color-bar-text`; the title bar of a window without the focus is `--fill-inverse` with `--color-inverse-text`.\n - Menu bar, toolbar and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n - The selection (current tree row, selected table row, open menu, selected list-box row, progress blocks, the plain badge) is `--fill-accent` with `--color-accent-text`. Links and icons inside a selection inherit that colour.\n - Keys are `--fill-button` with `--color-button-text` (`--color-button-hover-text` under the pointer); the lesser key is `--fill-button-secondary` with `--color-button-secondary-text`; a disabled key is `--color-disabled` with `--color-disabled-text`. The destructive key is `--fill-button` with a bold label in `--color-danger`.\n - Fields and the path field are `--fill-input` with `--color-input-text`; links inside the path field use the link tokens, so a palette keeps `--color-input` close to `--color-surface`. `--color-input-border` outlines the check box.\n - `--color-fill-1` to `--color-fill-4` carry `--color-text` (icons drawn on them) and, in the help layout, `--color-link`.\n - Notices are `--color-notice` with `--color-notice-text` inside a line of `--color-border-strong`; the error notice is `--color-danger` on `--color-danger-surface`.\n - Status labels print `--color-success`, `--color-warning` and `--color-danger` as text and frame on `--color-surface`, so each status colour must read on the well colour; none of them is used as a fill under text.\n - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, title bars, block colours and selections.\n- Edges, the same in every layout of the era. Nothing has a border of its own except thin lines; every raised or sunken edge is a `box-shadow` token drawn inside the box:\n - `--shadow-panel`: the raised frame of a window. `--shadow-dialog`: the frame of a dialog.\n - `--shadow-control`: every raised key: buttons, toolbar keys, caption buttons, column heads, tabs and their sheet, pagination keys, the brand tile.\n - `--shadow-control-pressed`: everything sunken: fields, the path field, wells, read-outs, status cells, the check box, the progress bar, a pressed key, the current pagination key. Note that fields take the pressed token, not `--shadow-control`.\n - `--border-width-strong` is the thickness of those edges: padding that must clear an edge is written `calc(var(--border-width-strong) + var(--space-N))`.\n - `--border-width`, `--border-style` and `--color-border` draw the thin lines: group boxes, the etched rule (`--color-border` over `--color-border-muted`), toolbar separators, table row lines (`--color-surface-alt`), the frame of notices, badges and the default button (`--color-border-strong`).\n - `--color-border`, `--color-border-strong` and `--color-border-muted` are the three shades the edge tokens are built from: the mid shadow, the darkest outer line and the light edge. A palette sets them as a bevel set for its window face.\n- Not expressible by a token and written literally in `components.css`: the `dotted` guide lines of the tree (and of topic lists), the `solid` strokes of the caption-button glyphs, and `clip-path` on the current tab, which cuts off its lower edge so that it joins the sheet; and the `dotted` guide lines are written literally whatever `--border-style` is.\n- All radii are 0 and are still applied through `--radius-control`, `--radius-panel`, `--radius-pill` and `--radius-page`. `--shadow-text` is applied to title bars and buttons. `--transition` is `none`; `--backdrop-blur` is `0px`: no surface blurs what lies behind it.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; the desktop. `.ds-page__window` is the wizard window at `--size-page`, a two-column grid; `.ds-page__body` is one page of the wizard; `.ds-page__keys` is its foot: an etched rule and the row of keys.\n- `.ds-nav`: the chrome of the wizard, written once: the title bar (`.ds-nav__title` on a `.ds-window__title`, holding the `.ds-brand`, the caption and the caption buttons) and `.ds-nav__band`, a sunken column in `--color-bar` with `--color-bar-text`. The band holds `.ds-nav__picture` (a framed tile in `--fill-inverse` with a 64px drawing over `.ds-nav__disks`, a row of small ones, all inline SVG in `--color-inverse-text`), the numbered steps `.ds-nav__links` of `.ds-nav__link` entries, and the sidebar. The step of the current view (`is-current`, or one selector per view) is a raised key: `--fill-button`, `--color-button-text`, `--shadow-control`, bold.\n- `.ds-brand`: the site's mark and name at the left of the title bar. `.ds-brand__mark` is the window's icon: a small tile dressed like the default button (`--fill-button`, `--color-button-text`, a line of `--color-border-strong`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with a 3 unit stroke and square caps. `.ds-brand__name` is the name in `--font-heading` at `--text-ui`, in the bar's text colour. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-sidebar`: a block of links at the foot of the band, above a thin line: `.ds-sidebar__title` in bold and a `.ds-sidebar__list` of `.ds-sidebar__link`s, underlined, all in `--color-bar-text`.\n- `.ds-hero`: the welcome page, the era's page introduction, written on the window face: `.ds-hero__title` at `--text-display` in `--color-heading-alt`, `.ds-hero__lead` at `--text-large`, a `.ds-hero__text` paragraph and `.ds-hero__action`, the large default key beside one line with a link. No box and no picture of its own: the band is the picture.\n- `.ds-breadcrumb`: the path, one line at `--text-small` in `--color-text-muted` above the page header, with a `>` between the `.ds-breadcrumb__item`s; the last is `is-current`, bold and in `--color-text`.\n- `.ds-page-header`: the head of an inner page: a white sunken band with `.ds-page-header__text` (`.ds-page-header__title` at `--text-h1` and `.ds-page-header__lead`), an optional `.ds-page-header__action` key and a large icon at the right.\n- `.ds-grid`: four picture cards in a row. Each `.ds-grid__cell` is a link in a sunken well: `.ds-grid__icon`, a large icon in `--color-text` centred on one of the four block colours (`--2`, `--3`, `--4` on the cell), a bold `.ds-grid__title` in `--color-link` and a small muted `.ds-grid__text`.\n- `.ds-list`: rows on the window face: a small icon, `.ds-list__text` (a link and one line) and a right-aligned `.ds-list__meta`. `.ds-list__item` is the row.\n- `.ds-panel`: a group box, the same thing as `.ds-group`: a `
` with its `.ds-panel__title` legend cut into the frame and a `.ds-panel__body`.\n- `.ds-scroll`: a document in a sunken well beside its scroll bar: `.ds-scroll__view` is `--size-scroll` tall and cuts off what does not fit; `.ds-scroll__bar` holds two `.ds-scroll__key`s (raised, an arrow icon), the raised `.ds-scroll__thumb` and the `.ds-scroll__track` on `--color-surface-alt`.\n- `.ds-footer`: the brand line at the foot of the window: `.ds-footer__legal` in small muted text, `.ds-footer__rule`, an etched line that takes the free width, and `.ds-footer__links`, quiet links.\n- `.ds-window`: the raised frame of a window (`--fill-panel`, `--shadow-panel`). `.ds-window__title` is the title bar (`--fill-bar`, bold `--font-ui` in `--color-bar-text`), `.ds-window__title--inactive` the bar of a window without the focus, `.ds-window__caption` the title text, `.ds-window__controls` the group of caption buttons. `.ds-window__ctl` is one caption button, a small raised square with its glyph drawn in CSS: `--min`, `--max`, `--close`. `.ds-window__body` pads plain content.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, and `.ds-view--home` when none is named. No box of its own.\n- `.ds-prose`: running text: styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `strong` and `code`; `.ds-prose__lead` is the lead line at `--text-large`. Used inside a well.\n- `.ds-link`: every link in text, underlined. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` (`--color-link-quiet`, `--link-decoration-quiet`) for tool and footer links, `.ds-link--strong` for a bold link. `.ds-links` wraps a line of links.\n- `.ds-button`: a raised key at least `--size-button` wide, on a `\n Next >\n Cancel\n \n \n \n \n\n
\n
\n
    \n
  1. Atlas 98 Setup
    2. \n
  2. Step 2 of 6
    3. \n
  3. Licence Agreement
    4. \n
\n
\n
\n

Licence Agreement

\n

Please read the whole text. Use the scroll bar to see the rest.

\n
\n
\n Print...\n
\n \n
\n\n
\n
\n

chronoskin Atlas 98

\n

Licence for one person on one computer.

\n

This is an agreement between you and chronoskin. By choosing \"I accept\" below you agree to it. If you do not agree, choose Cancel and nothing is installed.

\n

1. What you may do

\n
    \n
  • Install the atlas on one computer and make one spare copy.
    • \n
  • Print maps for your own use, at home or in a classroom.
    • \n
\n

2. What you may not do

\n

You may not sell printed maps or rename the file atlas98.exe to pass it on as your own work.

\n

\n See also the school licence,\n the page you came from,\n a link under the pointer,\n a link as you click it and\n where to send questions.\n

\n
\n
\n \n \n \n \n
\n
\n\n
\n \n \n
\n\n
\n
\n
\n \n < Back\n Next >\n Cancel\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Atlas 98 Setup
    2. \n
  2. Step 3 of 6
    3. \n
  3. Choose Components
    4. \n
\n
\n
\n

Choose Components

\n

Tick the parts you want. Parts you leave out can be added later.

\n
\n \n
\n\n
\n \n
\n
\n
\n
    \n
    • \n
  • \n
      \n
      • \n
      • \n
      • \n
      • \n
      • \n
    \n
    • \n
    • \n
    • \n
    • \n
\n
\n
\n
\n Description\n

Europe: 44 countries with relief, rivers, railways and roads, and street plans of 30 cities.

\n
\n
\n
Space needed:
\n
5.2 MB to fetch, 14 MB on disk
\n
Install to:
\n
C:\\ATLAS98
\n
Drive C:
\n
212 MB free of 540 MB
\n
In use:
\n
\n
\n
\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DriveLabelFreeNeededLeft over
C:Hard disk212.0 MB14.0 MB198.0 MB
D:Second disk61.4 MB0.0 MB61.4 MB
E:CD-ROM, read only0.0 MB0.0 MB0.0 MB
F:Network, school server1,240.5 MB0.0 MB1,240.5 MB
\n\n
\n
\n
\n \n \n < Back\n Next >\n \n Cancel\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Atlas 98 Setup
    2. \n
  2. Step 4 of 6
    3. \n
  3. Registration
    4. \n
\n
\n
\n

Registration

\n

Your name is shown on the opening screen and printed on your maps.

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

Note: the serial number is on the card in the box, or in the letter that confirmed your order.

\n

Cannot continue. The serial number is one group short. Type all four groups and choose Next again.

\n
\n\n
\n \n
\n \n
\n \n
\n \n leave empty for a copy used at home\n
\n \n
\n \n A serial number has four groups, for example AT98-0000-0000-0000.\n
\n \n
\n \n
\n Send me:\n
\n \n \n
\n \n
\n \n
\n
\n\n
\n
\n
\n \n < Back\n Next >\n Cancel\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Atlas 98 Setup
    2. \n
  2. Step 5 of 6
    3. \n
  3. Download
    4. \n
\n
\n
\n

Fetching the Files

\n

3 of 5 files fetched. About 9 minutes remain at 28.8 kbps.

\n
\n
\n Pause\n
\n \n
\n\n
\n Fetching maps-am.cab from the mirror \"north\":\n \n
\n\n
\n Files\n
    \n
  • atlas98.cab, the atlas program 1.9 MB, fetched
    • \n
  • maps-eu.cab, maps of Europe 0.9 MB, fetched
    • \n
  • maps-af.cab, maps of Africa 0.8 MB, fetched
    • \n
  • maps-am.cab, maps of the Americas 0.9 MB, 40%
    • \n
  • gazette.cab, the gazetteer 0.7 MB, waiting
    • \n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Mirror siteWhereSpeedState
northDublin3.1 KB/sIn use
fjordBergen2.8 KB/sReady
coastAccra1.2 KB/sBusy
prairieWinnipeg0.0 KB/sNo answer
\n
\n
    \n
  1. Mirrors 1 to 4 of 11:
    2. \n
  2. < Previous
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. Next >
    7. \n
\n \n In use Ready Busy No answer\n
\n\n
\n

Exit Setup

\n
\n \n

Setup is not complete. If you exit now the atlas is not installed, but the 3 files already fetched are kept. Exit Setup?

\n
\n
\n Resume\n Exit Setup\n
\n
\n\n
\n
\n
\n \n < Back\n Next >\n Cancel\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Atlas 98 Setup
    2. \n
  2. Step 6 of 6
    3. \n
  3. Finish
    4. \n
\n
\n
\n

Setup Has Finished

\n

chronoskin Atlas 98 is installed in C:\\ATLAS98 and is on the Programs menu.

\n
\n \n
\n\n

Thank you. Your registration was sent. A card with the school licence follows by post.

\n\n
\n
\n What was installed\n
    \n
  • Atlas program Installed
    • \n
  • Maps, 3 of 5 sets Installed
    • \n
  • Gazetteer Installed
    • \n
  • Flags and Facts Left out
    • \n
\n
\n
\n

Files that could not be copied

\n
\n

Nothing was skipped.

\n

Every file was copied and checked. The list of what went where is in the log.

\n View the Log\n
\n
\n
\n\n
\n \n \n
\n\n
\n
\n
\n \n < Back\n Finish\n \n
\n
\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.landing.s05.p04.t04.u06.dr\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-5446-dr\",\n \"short\": \"v1-w9-5446-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #2f3e4e;\n --color-canvas: #bcc6d0;\n --color-surface: #ffffff;\n --color-surface-alt: #e6ebf0;\n --color-surface-strong: #cdd5dd;\n --color-bar: #3f5b78;\n --color-bar-text: #ffffff;\n --color-bar-alt: #bcc6d0;\n --color-bar-alt-text: #10181f;\n --color-inverse: #6f7d8a;\n --color-inverse-text: #ffffff;\n --color-text: #10181f;\n --color-text-muted: #45525e;\n --color-heading: #1f3347;\n --color-heading-alt: #2f5078;\n --color-link: #0a3a8c;\n --color-link-quiet: #10181f;\n --color-link-visited: #5a3a7a;\n --color-link-hover: #0060d0;\n --color-link-active: #b02020;\n --color-border: #7b8894;\n --color-border-strong: #18222c;\n --color-border-muted: #dfe6ec;\n --color-accent: #3f5b78;\n --color-accent-text: #ffffff;\n --color-accent-alt: #b03a20;\n --color-fill-1: #dfe8f0;\n --color-fill-2: #c8dcd8;\n --color-fill-3: #d8d4e8;\n --color-fill-4: #f0e8c8;\n --color-button: #bcc6d0;\n --color-button-text: #10181f;\n --color-button-hover-text: #0a3a8c;\n --color-button-secondary: #cdd5dd;\n --color-button-secondary-text: #10181f;\n --color-input: #ffffff;\n --color-input-text: #10181f;\n --color-input-border: #7b8894;\n --color-disabled: #bcc6d0;\n --color-disabled-text: #7b8894;\n --color-danger: #9a1c1c;\n --color-danger-surface: #f6e6e2;\n --color-success: #1f6a4a;\n --color-warning: #8a5c00;\n --color-notice: #f4f0cc;\n --color-notice-text: #10181f;\n --color-focus: #18222c;\n --color-shadow: #18222c;\n --color-overlay: rgba(16, 24, 31, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Lucida Sans Unicode\", \"Lucida Grande\", \"Lucida Sans\", Geneva, sans-serif;\n --font-heading: \"Arial Black\", \"Arial Bold\", Arial, Helvetica, sans-serif;\n --font-ui: \"Lucida Sans Unicode\", \"Lucida Grande\", \"Lucida Sans\", Geneva, sans-serif;\n --font-mono: \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 20px;\n --text-h1: 15px;\n --text-h2: 12px;\n --text-h3: 11px;\n --line-body: 1.45;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 900;\n --weight-display: 900;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: 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: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset 0 0 0 1px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px color-mix(in srgb, var(--color-border) 60%, transparent), inset -3px -3px color-mix(in srgb, var(--color-border) 28%, transparent), 2px 2px 0 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-control: inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -1px -1px var(--color-border), inset -2px -2px color-mix(in srgb, var(--color-border) 60%, transparent), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 60%, transparent), inset -3px -3px color-mix(in srgb, var(--color-border) 28%, transparent);\n --shadow-control-hover: inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -1px -1px var(--color-border-strong), inset -2px -2px color-mix(in srgb, var(--color-border) 60%, transparent), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 60%, transparent), inset -3px -3px color-mix(in srgb, var(--color-border) 28%, transparent);\n --shadow-control-pressed: inset 1px 1px var(--color-border), inset -1px -1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset 2px 2px color-mix(in srgb, var(--color-border) 60%, transparent), inset 3px 3px color-mix(in srgb, var(--color-border) 28%, transparent);\n --shadow-dialog: inset 0 0 0 1px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px color-mix(in srgb, var(--color-border) 60%, transparent), inset -3px -3px color-mix(in srgb, var(--color-border) 28%, transparent), 4px 4px 0 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(color-mix(in srgb, var(--color-page), white 16%) 1px, transparent 1.5px) 0 0 / 8px 8px, var(--color-page);\n --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar), var(--color-accent-alt)));\n --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt), white 40%), var(--color-bar-alt) 60%, color-mix(in srgb, var(--color-bar-alt), black 12%));\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 40%), var(--color-button) 60%, color-mix(in srgb, var(--color-button), black 12%));\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 65%), color-mix(in srgb, var(--color-button), white 20%) 60%, var(--color-button));\n --fill-button-secondary: linear-gradient(180deg, color-mix(in srgb, var(--color-button-secondary), white 40%), var(--color-button-secondary) 60%, color-mix(in srgb, var(--color-button-secondary), black 12%));\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-accent);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }