{ "id": "v1-w9-6545", "long_id": "v1.windows-9x.portal.s06.p05.t04.u05", "name": "Desktop grey control panel, plum, 1999", "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": "portal", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "The member centre of an Internet provider laid out as the control panel of a late 1990s desktop: one window with a bar of flat link keys, an information pane at the left that names the page under a coloured rule and offers related links, and at the right a field of large icons with a line of description each, or the property sheet, list view or statement the icon opens. This pack shows it in a plum scheme: pink-grey windows with a wine title bar that fades toward rose, cushioned edges without a black line, softly shaded keys and bars, a dotted mauve desktop and a text serif throughout. Account pages, intranet settings and hosting panels used this web-view form of the desktop from 1997 to 2001.", "url": "https://chrono.skin/s/v1-w9-6545", "preview_url": "https://chrono.skin/s/v1-w9-6545/specimen.html", "files": { "STYLE.md": "# Desktop grey control panel, plum, 1999\n\n## Summary\n\nThe member centre of an Internet provider laid out as the control panel of a late 1990s desktop: one window with a bar of flat link keys, an information pane at the left that names the page under a coloured rule and offers related links, and at the right a field of large icons with a line of description each, or the property sheet, list view or statement the icon opens. This pack shows it in a plum scheme: pink-grey windows with a wine title bar that fades toward rose, cushioned edges without a black line, softly shaded keys and bars, a dotted mauve desktop and a text serif throughout. Account pages, intranet settings and hosting panels used this web-view form of the desktop from 1997 to 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 768px, one window (`.ds-page__window`, also a `.ds-window`) centred on the desktop of an 800px screen with a `--space-6` margin above and below.\n- The specimen is one example site, the member centre, of four views. `.ds-nav` (title bar and the bar of link keys) and `.ds-footer` (status bar) are written once, inside the window and outside the views; each view is a `.ds-view` and one shows at a time.\n- Every view is `.ds-page__columns`: the information pane `.ds-page__info` (`--size-info`, 196px, a white well) at the left and the working pane at the right, `--space-2` apart and stretched to the same height.\n- Home view: the information pane holds the `.ds-hero` (large icon, title, lead, one line and the default key, closed by a thick rule in the accent colour), the `.ds-sidebar` block of links and a small note pushed to its foot. The working pane is a `.ds-pane` whose well is the `.ds-grid` of twelve applets, three to a row. Under the columns, `--space-4` apart: the `.ds-stat` row of four read-outs and a `.ds-panel` group box with the `.ds-list` of recent activity.\n- Inner pages keep the title bar, the link keys, the status bar and both panes, and drop the icons, the read-outs and the activity list. The information pane opens with the `.ds-breadcrumb` (small links), then the `.ds-page-header` in the hero's place (large icon, title, one line and one key, closed by the same thick rule), then property rows, a group box or a `.ds-sidebar` of tasks. The working pane is `.ds-page__main`, a column `--space-4` apart; tabs come first in it, after any notices, with their `.ds-sheet`.\n- Views: `home` is the control panel. `account` is a property sheet: two notices, five tabs over a sheet with two group boxes (the form, and three radio buttons), and the row of keys. `users` is the list view of users with status labels, a selected row and a total row, the pagination keys beside the key of status labels, then the confirmation dialog beside the empty state of the invitations pane. `billing` is the list view of statements over an explanation of the plan in a well, with the hours meter in the information pane. The link key of the view that is showing stays pressed and bold; the Control Panel key is marked when the address names no view.\n- Fixed sizes: `--size-ctl` 16px caption button and `--size-glyph` 8px glyph; `--size-icon` 32px and `--size-icon-small` 16px icons; `--size-check` 13px check box and radio button; `--size-label` 104px form label column; `--size-field` 200px text field; `--size-dialog` 316px; `--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\n## Components\n\n- `.ds-page`: on ``; the desktop. `.ds-page__window` is the one window at `--size-page`; `.ds-page__body` stacks the blocks of a view; `.ds-page__columns` is the information pane beside the working pane; `.ds-page__info` is the information pane, a white well; `.ds-page__main` is the working column of an inner page.\n- `.ds-nav`: the chrome of the window, written once: the title bar (a `.ds-window__title` holding the `.ds-brand`, the caption and the caption buttons) and `.ds-nav__links`, one bar on `--fill-bar-alt` that starts with `.ds-nav__grip`, a thin raised strip. A `.ds-nav__link` is a flat key, a small icon and a word, that rises under the pointer (`is-hover`); the key of the current view (`is-current`, or one selector per view) stays pressed on `--color-surface-alt` and is bold. `.ds-nav__fill` pushes Help and Sign Out to the right.\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-hero`: the head of the information pane on the home page, the era's page introduction: a large icon, `.ds-hero__title` at `--text-display` in `--color-heading-alt`, `.ds-hero__lead` at `--text-large`, a muted `.ds-hero__text` line and `.ds-hero__action` with the default key, closed by a rule `--border-width-strong` thick in `--color-accent`.\n- `.ds-page-header`: the same head on an inner page: a large icon, `.ds-page-header__text` with `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__lead`, and `.ds-page-header__action` with one secondary key, closed by the same rule.\n- `.ds-breadcrumb`: the path, small links at `--text-small` at the top of the information pane with a `>` between the `.ds-breadcrumb__item`s; the last is `is-current`, bold and in `--color-text`.\n- `.ds-sidebar`: a block of links in the information pane: `.ds-sidebar__title` in bold `--color-heading-alt` and a `.ds-sidebar__list` of `.ds-sidebar__item`s, each a small icon and a `.ds-link`. `.ds-sidebar__note` is a small muted line pushed to the foot of the pane.\n- `.ds-grid`: the applets: a white well of three columns. Each `.ds-grid__cell` is a link: a `.ds-grid__icon` tile (a 32px icon in `--color-text` on one of the four block colours: `--2`, `--3`, `--4` on the cell) beside `.ds-grid__body` with an underlined `.ds-grid__title` in `--color-link` and a small muted `.ds-grid__text`.\n- `.ds-pane` with `.ds-pane__title`: a raised caption strip, like a column head, over a well.\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-footer`: the status bar of the window, a `.ds-status` row: one wide cell with the site line and quiet links, then short cells.\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 \n OK\n Cancel\n \n \n \n\n \n \n \n\n
\n
\n
\n\n
\n
    \n
  1. Control Panel
    2. \n
  2. Users
    3. \n
  3. All users
    4. \n
\n
\n \n
\n

Users

\n

5 of 8 sign-in names are in use. Each has its own mailbox.

\n
\n
\n New User...\n
\n
\n

Select a user to see what you can do. finn is selected.

\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 \n \n \n \n \n \n \n \n \n
5 object(s), 1 selected. Space is the mail waiting in each mailbox.
Sign-in nameFull nameStatusLast sign-inSpace
quarteyLena QuarteyOn lineToday 9:021,204 KB
bramBram QuarteySigned outFri 13 Mar388 KB
finnFinn QuarteyHours used upThu 12 Mar96 KB
lena.jrLena Quartey (junior)Hours nearly usedWed 11 Mar52 KB
shopHarbour Road SeedsLocked2 Feb2,210 KB
Total for the account, of 10 MB3,950 KB
\n
\n
    \n
  1. Page 1 of 2:
    2. \n
  2. < Previous
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. Next >
    6. \n
\n \n 5 users On line Nearly used Locked\n
\n
\n
\n

Confirm User Remove

\n
\n \n

Are you sure you want to remove finn? The mailbox and its 96 KB of mail are deleted with the user.

\n
\n
\n Yes, Remove\n No\n
\n
\n
\n

Invitations waiting for an answer

\n
\n

There are no items to show.

\n

Nobody has been invited. Three sign-in names are still free.

\n New User...\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Control Panel
    2. \n
  2. Billing
    3. \n
  3. Statements
    4. \n
\n
\n \n
\n

Billing

\n

Statements, the hours meter and how the plan is charged.

\n
\n
\n Print Statement\n
\n
\n
\n Hours this month\n
\n \n 31 h 20 of 40 hours used. The meter starts again on 1 April.\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 \n \n \n \n \n
StatementPaid byHoursExtraAmount
March 1998, so farDue 1 April31:200.0014.95
February 1998Direct debit43:052.7817.73
January 1998Direct debit38:400.0014.95
December 1997Cheque51:1210.0825.03
Four statements164:1712.8672.66
\n\n
\n

How the Family 40 plan is charged

\n

One price covers 40 hours on line each month, shared by up to 8 users.

\n

The meter counts from the moment the modem answers until you sign out. Time spent reading mail off line is not counted.

\n

Extra hours

\n

After 40 hours each minute is charged at the rate on your statement, shown in the column Extra.

\n
    \n
  • Hours you do not use are not carried over.
    • \n
  • The account holder can stop extra hours altogether.
    • \n
\n

Where to read more

\n

\n Compare the three plans,\n a statement you have opened,\n a link under the pointer,\n a link as you click it and\n hours for each user.\n

\n
\n
\n\n
\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.portal.s06.p05.t04.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-6545\",\n \"short\": \"v1-w9-6545\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #8a4a2e;\n --color-canvas: #d2bf90;\n --color-surface: #f6ecca;\n --color-surface-alt: #eadcb0;\n --color-surface-strong: #c9b47e;\n --color-bar: #5c3a1a;\n --color-bar-text: #fff6dc;\n --color-bar-alt: #d2bf90;\n --color-bar-alt-text: #2a1c0c;\n --color-inverse: #86724e;\n --color-inverse-text: #fff6dc;\n --color-text: #2a1c0c;\n --color-text-muted: #5a4628;\n --color-heading: #4a2c10;\n --color-heading-alt: #1a5c58;\n --color-link: #8a2c0a;\n --color-link-quiet: #2a1c0c;\n --color-link-visited: #5a3a6a;\n --color-link-hover: #b84400;\n --color-link-active: #b00020;\n --color-border: #8f7c52;\n --color-border-strong: #2a1c0c;\n --color-border-muted: #efe3bd;\n --color-accent: #1f6f6a;\n --color-accent-text: #fff6dc;\n --color-accent-alt: #b03a10;\n --color-fill-1: #f0d48a;\n --color-fill-2: #c9d6a8;\n --color-fill-3: #e6b99a;\n --color-fill-4: #b9d2cc;\n --color-button: #d2bf90;\n --color-button-text: #2a1c0c;\n --color-button-hover-text: #2a1c0c;\n --color-button-secondary: #c9b47e;\n --color-button-secondary-text: #2a1c0c;\n --color-input: #f6ecca;\n --color-input-text: #2a1c0c;\n --color-input-border: #8f7c52;\n --color-disabled: #d2bf90;\n --color-disabled-text: #8f7c52;\n --color-danger: #9a1a10;\n --color-danger-surface: #f8dcc8;\n --color-success: #2a6a2a;\n --color-warning: #8a5200;\n --color-notice: #fff2a8;\n --color-notice-text: #2a1c0c;\n --color-focus: #2a1c0c;\n --color-shadow: #2a1c0c;\n --color-overlay: rgba(42, 28, 12, 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: 2px;\n --border-width-strong: 3px;\n --border-style: groove;\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-strong), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 3px 3px color-mix(in srgb, var(--color-border-muted), var(--color-border)), inset -3px -3px color-mix(in srgb, var(--color-border-muted), var(--color-border));\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-muted), var(--color-border)), inset -2px -2px color-mix(in srgb, var(--color-border-muted), var(--color-border)), inset 3px 3px var(--color-border), inset -3px -3px color-mix(in srgb, var(--color-border-muted) 25%, white);\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-muted), var(--color-border)), inset -2px -2px color-mix(in srgb, var(--color-border-muted), var(--color-border)), inset 3px 3px var(--color-border), inset -3px -3px color-mix(in srgb, var(--color-border-muted) 25%, white);\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-muted), var(--color-border)), inset -2px -2px color-mix(in srgb, var(--color-border-muted), var(--color-border)), inset 3px 3px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -3px -3px var(--color-border);\n --shadow-dialog: inset 0 0 0 1px var(--color-border-strong), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 3px 3px color-mix(in srgb, var(--color-border-muted), var(--color-border)), inset -3px -3px color-mix(in srgb, var(--color-border-muted), var(--color-border)), 0 0 0 2px var(--color-border);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(0deg, var(--color-page) 0 3px, color-mix(in srgb, var(--color-page), black 14%) 3px 4px);\n --fill-bar: repeating-linear-gradient(0deg, var(--color-bar) 0 1px, color-mix(in srgb, var(--color-bar), white 16%) 1px 2px);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 1px, color-mix(in srgb, var(--color-inverse), white 16%) 1px 2px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }