{ "id": "v1-tm-8451", "long_id": "v1.terminal.shop.s08.p04.t05.u01", "name": "Terminal, a shop kept as a ledger in magenta", "era": { "slug": "terminal", "code": "tm", "name": "Terminal", "years": [ 2015, 2026 ], "description": "The text-terminal look of 2015 to 2026: a monospace face for everything, bright text on a dark screen, boxes and rules drawn with borders like character frames, prompts and cursors, status lines and key hints instead of buttons with chrome." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is a small online shop of 2015 to 2026 that sells its goods the way a terminal lists files: a line of cells at the top, then ruled rows, each named and numbered in a gutter at the left, with pictures typed in characters and prices in aligned columns. One monospace face sets everything, here in hot magenta on black with a cyan accent, capitals for headings and controls, dotted rules and a hard offset ghost behind the large type. It was the look of merchandise shops of software projects, of shops that took orders from a command line, and of the storefronts of people who sold keyboards, zines and stickers to others like themselves.", "url": "https://chrono.skin/s/v1-tm-8451", "preview_url": "https://chrono.skin/s/v1-tm-8451/specimen.html", "files": { "STYLE.md": "# Terminal, a shop kept as a ledger in magenta\n\n## Summary\n\nThis is a small online shop of 2015 to 2026 that sells its goods the way a terminal lists files: a line of cells at the top, then ruled rows, each named and numbered in a gutter at the left, with pictures typed in characters and prices in aligned columns. One monospace face sets everything, here in hot magenta on black with a cyan accent, capitals for headings and controls, dotted rules and a hard offset ghost behind the large type. It was the look of merchandise shops of software projects, of shops that took orders from a command line, and of the storefronts of people who sold keyboards, zines and stickers to others like themselves.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch beyond it: `.ds-shop` is a column of `--size-page` (1280px) on `--color-canvas`, at least as tall as the window: the line of cells `.ds-nav`, then `.ds-main` (the views), then the `.ds-footer` strip.\n- `.ds-nav` is one line on `--fill-bar-alt` with a rule below, cut into cells by upright rules: the `.ds-brand` in a cell as wide as the gutter, then `.ds-nav__list` whose `.ds-nav__link` items are one cell each, and at the right `.ds-nav__tools`: a pulled-down `.ds-menu` and `.ds-nav__cart`, the cart with its count. The cell of the view that shows is a hole in the bar: `--color-canvas` with `--color-heading`.\n- The ledger. A view is a pile of `.ds-row` blocks with a rule between them and no gap. A row is two columns: `.ds-row__gutter`, `--size-side` (220px) wide with an upright rule at its right, and `.ds-row__body`, padded `--space-3` and `3ch`. The gutter names the row: `.ds-row__num` (a number or a code), `.ds-row__name` (the row's heading) and a small muted `.ds-row__hint`. `.ds-row--mark` is the row the reader is on: its gutter stands on `--color-surface-strong` with a mark in `--color-accent` at the left edge. There are no other section headings.\n- The home view is four rows: `shop`, the `.ds-hero` (3 to 2: the claim, a lead and two buttons at the left, the `.ds-carousel` of featured goods at the right); `numbers`, the `.ds-stats` row; `shelves`, the `.ds-grid` of four; `new in`, `.ds-cols` (3 to 2) with the table of new items beside a `.ds-stack` of the shipping panel and the restock line `.ds-inline`.\n- Inner pages have no hero. Their first row is `.ds-row--head`: the gutter says where the reader is, the body holds the `.ds-breadcrumb` and the `.ds-page-header`, and a rule of `--border-width-strong` closes the row. The work follows in further rows. In the catalogue the gutter of the main row holds the `.ds-sidebar` in place of a name. Inside a row, `.ds-cols` is 3 to 2 and `.ds-cols--item` 2 to 3; `.ds-col` is a column that may shrink, `.ds-stack` piles frames `--space-3` apart. Tabs sit directly above the list they sort.\n- Views. The specimen is one small shop with six views, one showing at a time; nav and footer are written once around them. `shop` is the home view. `catalogue` is one shelf: the shelves in the gutter, sort tabs, the list of items, pagination, and the empty state of the seconds. `item` is one item: its typed picture and badges beside the text, the framed table of sizes and links, then what buyers said, each with an avatar. `cart` is two notices, the table of lines with its sum and a progress bar toward a free parcel beside the question before a line is removed, and the empty state of things saved for later. `order` is the step as a progress bar, then the address form with its error and four buttons beside the receipt and the switches for extras. `help` is how ordering works as running text beside the questions asked most as a folding list. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in quarters and multiples of one 24px step: `--space-1` 6px is the vertical padding of buttons, inputs, table cells and tabs; `--space-2` 12px the padding of a cell of the nav, the padding above the text in a frame, the gap between list rows and between notices; `--space-3` 24px the padding above the content of a row, the gap between paragraphs and between frames in a stack; `--space-4` 36px the padding under the content of a row; `--space-5` 60px is kept for a break larger than a row. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 150px the label column of a form, `--size-field` 440px a text input, `--size-date` 90px the code column of the list, `--size-dialog` 420px a dialog.\n- Below 900px a row is one column: its gutter becomes one line above the body (number and name side by side, the hint left out; the sidebar keeps its full blocks), the hero's carousel goes under its text, columns stack, the stats row and the grid become two by two, the nav puts brand and tools on its first line and the cells of the views on a second, form labels sit above their fields, list codes sit above their entries, and table cells marked `.ds-table__extra` are left out. The page never scrolls sideways; only the carousel does, inside itself. Below 900px a `.ds-tooltip__tip` opens under its line, as wide as the box its trigger sits in. Below 600px the `.ds-nav__list` cells share the second line, each growing to fill it and centred, and scroll sideways if they do not fit; the current cell stays a hole in the bar.\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- One face for everything: `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same monospace stack (\"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace). Weights are `--weight-body` 400 and 700 for bold and headings; `--weight-display` and `--weight-ui` are 400. Nothing is tracked.\n- Small and dense: `--text-base` 13px with `--line-body` 1.35 is all running text, `--text-ui` 13px the window list, buttons, inputs, tabs and the status line, `--text-small` 12px meta lines, hints, badges, the log and code blocks, `--text-large` 15px the hero's lead. `--text-display` 24px is the hero title and the figures, `--text-h1` 18px a page title; `--text-h2` and `--text-h3` are 13px, told from text by weight and colour. `--heading-transform` is lowercase, `--ui-transform` none.\n- The sixteen colours of a terminal on black: grey text, white for what matters, and blue, cyan, yellow, green, amber and red each with one job.\n- The screen: `--color-page` #000000 is the window, `--color-canvas` #0b0b0b the screen and (as `--fill-panel`) the inside of tiles, `--color-surface` #121212 table rows, `--color-surface-alt` #1c1c1c alternate rows and code blocks, `--color-surface-strong` #303030 tile title lines and inline code. `--color-text` #bbbbbb is running text, `--color-text-muted` #8a8a8a times, counts and hints, `--color-heading` #ffffff headings and figures, `--color-heading-alt` #ffff00 tile titles, figure labels and tags.\n- Links: `--color-link` #87afff, `--color-link-quiet` #bbbbbb for breadcrumb, tabs and sidebar links, `--color-link-visited` #af87ff, `--color-link-hover` #ffffff, `--color-link-active` #ffff00. Links are not underlined (`--link-decoration` and `--link-decoration-quiet` none) until hovered (`--link-decoration-hover` underline).\n- Bars: `--color-bar` #87afff with `--color-bar-text` #000000 is the head row of a table and the session label of the status line. `--color-bar-alt` #303030 with `--color-bar-alt-text` #d0d0d0 is the window list and the status line. `--color-inverse` #bbbbbb with `--color-inverse-text` #000000 is inverse video: the current window, tab, page number and sidebar link, the row under the cursor.\n- Lines: `--color-border` #585858 at `--border-width` 1px solid draws every tile; `--border-width-strong` is also 1px, in `--color-border-strong` #bbbbbb, under a page header and around a notice and a dialog; `--color-border-muted` #303030 parts list rows and a tile's foot.\n- Accents: `--color-accent` #ffff00 with `--color-accent-text` #000000 is the count badge; `--color-accent-alt` #00d7d7 the names of meters and the prompt sign. `--color-fill-1` to `--color-fill-4` (#0f1b2d, #0f2414, #2b2410, #24122a: blue, green, yellow and magenta, darkened) tint the tiles of the grid by group. Status words and meters: `--color-success` #5fd700, `--color-warning` #ffaf00, `--color-danger` #ff5555.\n- Controls: the primary button is `--color-button` #00d7d7 with `--color-button-text` #000000; the secondary button is `--color-button-secondary` #303030 with #ffffff text; fields are `--color-input` #000000 with `--color-input-text` #ffffff and a line in `--color-input-border` #585858; disabled is `--color-disabled` #1c1c1c with `--color-disabled-text` #585858. The notice is `--color-notice` #0f1b2d with `--color-notice-text` #afd7ff, the error notice `--color-danger-surface` #2a0a0a with `--color-danger`. `--color-overlay` #1c1c1c is the block a dialog stands on; `--color-focus` #ffff00 the focus outline, `--focus-ring` 1px dashed.\n- Surface: flat and thin. `--fill-panel` is `--color-canvas`, so a tile is only its lines. `--shadow-panel` is a one-pixel edge in `--color-shadow` #3a3a3a at the right and foot of a deck; `--shadow-dialog` a hard 4px block; a hovered button gets a 2px underline in the focus colour (`--shadow-control-hover`), a pressed one an inset line; `--fill-button-hover` darkens the button. `--shadow-control` and `--shadow-text` are none, all four radii are 0, `--backdrop-blur` is 0px and `--transition` is none.\n- The era's rule for which text stands on which fill (every layout of the era keeps it, so any palette works with any layout): `--color-text`, `--color-text-muted`, the two heading colours, every link colour and the three status colours stand on `--fill-page`, `--color-canvas`, the three surfaces, `--fill-panel` and the four fills, and on nothing else. `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`; `--color-accent-text` only on `--fill-accent`; `--color-button-text` and `--color-button-hover-text` only on `--fill-button` and its hover; `--color-notice-text` only on `--color-notice`; `--color-danger` also on `--color-danger-surface`; `--color-disabled-text` on `--color-disabled`. Two tokens must read in two places, because a surface set may leave a control unfilled: `--color-button-secondary-text` on `--fill-button-secondary` and on the canvas and surfaces, `--color-input-text` on `--fill-input` and on the canvas and surfaces. Whatever is current or selected is inverse video (`--fill-inverse` with `--color-inverse-text`); where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`.\n- One-off sizes written with `calc()` or `ch`: tiles overlap by `--border-width` through negative margins written with `calc()`; a dialog's title is lifted by half of `--text-h3` times `--line-body` so that its top line runs through it; the brand tile is one text line square; horizontal paddings are whole character cells; the checkbox is `2ch` square.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-shop` is the sheet; `.ds-main` holds the views; `.ds-row` (`--head`, `--mark`) with `.ds-row__gutter` (`.ds-row__num`, `.ds-row__name`, `.ds-row__hint`) and `.ds-row__body` is the ledger row; `.ds-cols` (`--item`) are column pairs inside a row, `.ds-col` a column, `.ds-stack` a pile of frames, `.ds-text` a paragraph of at most 70 characters.\n- `.ds-nav`: the line of cells at the top. `.ds-nav__list` holds `.ds-nav__link` cells; `.ds-nav__tools` at the right holds a `.ds-menu` and `.ds-nav__cart`, a link with a `.ds-badge` count. The stylesheet marks the cell whose `href` names the view that is showing (one selector per view, and the first when the address names none); on a page of its own give the link `is-current`.\n- `.ds-hero`: the opening of the home view, 3 to 2. `.ds-hero__text` holds `.ds-hero__title` (`--text-display`), `.ds-hero__lead`, a `.ds-buttons` row and a small `.ds-hero__note`; beside it stands the `.ds-carousel`.\n- `.ds-footer`: a strip on `--fill-bar`: `.ds-footer__keys`, a list of `.ds-footer__link` items in brackets, and `.ds-footer__text` at the right.\n- `.ds-brand`: the site's mark and name, a link to the home view, in the first cell of the nav. `.ds-brand__mark` is a tile one text line square, dressed like the primary button (`--fill-button`, `--color-button-text`, the button's frame, `--radius-control`, `--shadow-control`); `.ds-brand__name` is bold at `--text-large`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a path: `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-page-header`: the head of an inner page, in the body of a `.ds-row--head`: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`) and one muted `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. Inside the head row it draws no rule of its own; the row's heavy rule closes it.\n- `.ds-prose`: running text, at most 78 characters wide: h1, h2, h3, paragraphs, lists whose bullet is a typed dash, `code` on `--color-surface-strong`, `strong` in the heading colour. Anything typed literally goes in `.ds-code`, a `
` at `--text-small` on `--color-surface-alt` in a frame; it scrolls sideways inside itself.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta and tool links, `.ds-link--bracket` for a link written as a word in brackets (`[all 24]`). `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n          \n        \n      \n    \n  \n
\n\n\n
\n
\n
~

you are here

\n
\n
    \n
  1. shop
    2. \n
  2. /
    3. \n
  3. catalogue
    4. \n
  4. /
    5. \n
  5. apparel
    6. \n
\n
\n
\n

Apparel

\n

9 items. Printed in small runs; when a size is gone it comes back with the next batch.

\n
\n
Size guide
\n
\n
\n
\n
\n
\n
\n
\n

shelves

\n \n
\n
\n

show

\n \n
\n
\n
\n
\n \n
\n
    \n
  • \n CS-014\n
    \n Prompt tee\n

    Heavy cotton, a prompt on the chest, nothing on the back.

    \n

    24.00, sizes S to XXL, in stock

    \n
    \n
    • \n
  • \n CS-015\n
    \n Exit code tee\n

    A zero on the front for the days when everything returned clean.

    \n

    24.00, sizes S to XL, 4 left

    \n
    \n
    • \n
  • \n CS-009\n
    \n Hooded jumper\n

    Brushed inside, the mark on the sleeve, a pocket that holds a notebook.

    \n

    54.00, sizes M to XXL, in stock

    \n
    \n
    • \n
  • \n CS-004\n
    \n Six panel cap\n

    One size, a strap at the back, the mark stitched in one colour.

    \n

    18.00, one size, sold out

    \n
    \n
    • \n
\n
\n \n
\n
\n
\n
00

seconds

misprints at half price

\n
\n
\n

No seconds on this shelf today. The last batch printed clean.

\n Back to the shop front\n
\n
\n
\n
\n\n\n
\n
\n
~

you are here

\n
\n
    \n
  1. shop
    2. \n
  2. /
    3. \n
  3. apparel
    4. \n
  4. /
    5. \n
  5. CS-014
    6. \n
\n
\n
\n

Prompt tee

\n

24.00, tax included. Leaves within a day of your order.

\n
\n
Add to cart
\n
\n
\n
\n
\n
CS-014

the item

batch 7, printed in September

\n
\n
\n
\n
\n

front

\n
\n
      ____     ____\n     /    \\___/    \\\n    /               \\\n   /__             __\\\n      |           |\n      |   >_      |\n      |           |\n      |           |\n      |___________|
\n

One print, one colour, on the chest.

\n
\n
\n
\n 7\n in stock\n XL: 4 left\n S: sold out\n cotton\n
\n
\n
\n

A shirt that says what you look at all day. Heavy combed cotton that keeps its shape, a collar that does not curl, and a print that is part of the cloth, not a film on top of it.

\n \n \n \n \n \n \n \n \n \n \n
sizechest, cmlength, cmstockprice
S9268sold out24.00
M1007118 left24.00
L1087422 left24.00
XL116774 left24.00
\n

Size M is chosen. Measured flat, doubled; a shirt may differ by a centimetre.

\n \n
\n
\n
\n
\n
\n
03

buyers say

3 of 41 notes

\n
\n
    \n
  • \n mk\n
    mika size M, 2026-09-22, bought hereThis note belongs to an order the shop has shipped.\n

    Washed it ten times. The print has not moved and neither has the collar.

    \n
    • \n
  • \n jo\n
    jonas size L, 2026-09-14\n

    Runs a little long. Good cloth, and the parcel came in two days.

    \n
    • \n
  • \n ai\n
    aiko size S, 2026-08-30\n

    The only shirt my colleagues have asked about. Please print S again.

    \n
    • \n
\n
\n
\n
\n\n\n
\n
\n
~

you are here

\n
\n
    \n
  1. shop
    2. \n
  2. /
    3. \n
  3. cart
    4. \n
\n
\n
\n

Cart

\n

2 lines, 3 pieces. Nothing is reserved until the order is placed.

\n
\n
Check out
\n
\n
\n
\n
\n
01

notes

from the shop

\n
\n
\n

Today. Place the order before 14:00 and the parcel leaves this afternoon.

\n

Changed. Only 2 cursor mugs were left, so the line was cut from 3 pieces to 2.

\n
\n
\n
\n
\n
02

lines

prices in EUR

\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
itemsizepieceseachsum
Prompt teeM124.0024.00
Cursor mug330 ml214.0028.00
Parcel, inside the union15.505.50
to pay357.50
\n

8.00 more and the parcel is free.

\n

free parcel##############..52.00 of 60.00

\n
\n
\n
\n

remove the mugs?

\n
\n

2 cursor mugs leave the cart. They are the last two, and someone else may take them.

\n
\n \n Keep them\n
\n
\n
\n
\n
\n
\n
\n
\n
03

for later

kept for 30 days

\n
\n
\n

Nothing is saved for later.

\n Browse the catalogue\n
\n
\n
\n
\n\n\n
\n
\n
~

you are here

\n
\n
    \n
  1. shop
    2. \n
  2. /
    3. \n
  3. cart
    4. \n
  4. /
    5. \n
  5. order
    6. \n
\n
\n
\n

Order

\n

Where the parcel goes. Payment is the next and last step.

\n
\n
Back to the cart
\n
\n
\n
\n
\n
01

step

cart, address, payment

\n
\n

2 of 3################........address

\n
\n
\n
\n
02

address

as the carrier should read it

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

This address has no domain ending. The receipt is sent by mail.

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

Street and number, then postcode and town.

\n
\n
\n
\n terms\n
\n \n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n

receipt

\n
\n
\n

1 Prompt tee, M24.00

\n

2 Cursor mug28.00

\n

Parcel5.50

\n

to pay57.50

\n
\n
\n
\n
\n

extras

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
~

you are here

\n
\n
    \n
  1. shop
    2. \n
  2. /
    3. \n
  3. help
    4. \n
\n
\n
\n

Help

\n

How an order travels from the cart to your door, and what to do when it does not.

\n
\n
Write to us
\n
\n
\n
\n
\n
01

the manual

read once, order often

\n
\n
\n
\n

How ordering works

\n

The chronoskin shop is run by two people of the project. There is no warehouse: goods are printed in small batches and sent from one room.

\n

From cart to door

\n
    \n
  • Fill the cart and give an address. No account is needed.
    • \n
  • Pay by card or transfer. The receipt comes by mail.
    • \n
  • The parcel leaves within a day and carries a tracking number.
    • \n
\n

When something is wrong

\n

Answer the receipt and say what happened. Quote the order number, which looks like CS-2026-03180, and we take it from there.

\n

Returns

\n

Unworn goods come back within 30 days. Seconds and stickers do not.

\n

Batches

\n

A sold out size returns with the next batch, about every six weeks.

\n
\n
\n
\n

asked most

\n
\n
\n
\n How long does a parcel take?\n

Two to four working days inside the union, up to two weeks beyond it.

\n
\n
\n Do you ship everywhere?\n

To 41 countries so far. The order form lists them.

\n
\n
\n Can I change an order?\n

Until it is packed. Answer the receipt.

\n
\n
\n Where does the money go?\n

To the build machines and the people who mind them.

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

costs of a parcel

\n
\n
\n

inside the union5.50

\n

rest of Europe9.00

\n

rest of the world16.00

\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.shop.s08.p04.t05.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-tm-8451\",\n \"short\": \"v1-tm-8451\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f3f3f3;\n --color-surface-strong: #dedede;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #dedede;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #1c1c1c;\n --color-text-muted: #636363;\n --color-heading: #000000;\n --color-heading-alt: #a3001b;\n --color-link: #0037a6;\n --color-link-quiet: #1c1c1c;\n --color-link-visited: #6a2c91;\n --color-link-hover: #000000;\n --color-link-active: #a3001b;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #c4c4c4;\n --color-accent: #ffe14d;\n --color-accent-text: #000000;\n --color-accent-alt: #006f80;\n --color-fill-1: #ffffff;\n --color-fill-2: #f3f3f3;\n --color-fill-3: #e8e8e8;\n --color-fill-4: #f3f3f3;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffe14d;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #e8e8e8;\n --color-disabled-text: #8a8a8a;\n --color-danger: #a3001b;\n --color-danger-surface: #fbe9ec;\n --color-success: #1a7a1a;\n --color-warning: #8a5a00;\n --color-notice: #f3f3f3;\n --color-notice-text: #1c1c1c;\n --color-focus: #0037a6;\n --color-shadow: #000000;\n --color-overlay: #c4c4c4;\n}\n\n/* @part type */\n:root {\n --font-body: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n --font-heading: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n --font-ui: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n --font-mono: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n --text-base: 13px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 15px;\n --text-display: 24px;\n --text-h1: 18px;\n --text-h2: 13px;\n --text-h3: 13px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: lowercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\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: none;\n --shadow-dialog: none;\n --shadow-text: 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 70%, white);\n --fill-button-secondary: transparent;\n --fill-input: transparent;\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }