{ "id": "v1-br-5331", "long_id": "v1.brutalism.docs.s05.p03.t03.u01", "name": "Web brutalism, manual", "era": { "slug": "brutalism", "code": "br", "name": "Web brutalism", "years": [ 2014, 2019 ], "description": "The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The manual page of web brutalism, as kept between 2014 and 2019 by people who wrote small programs and documented them by hand: a black page of grey monospaced text, a three-part head line like the one a terminal prints over a manual, one blue bar of links, a column of contents that stays put at the left, and numbered parts whose names hang in a gutter beside them. Nothing is rounded, graded or animated and there are no pictures; structure comes from numbers, from 1px grey rules, from one heavy blue rule where a part of the page ends, and from a hard grey underside on boxes and buttons. It was the look of project pages, manuals, changelogs and download directories written by the same people who wrote the code.", "url": "https://chrono.skin/s/v1-br-5331", "preview_url": "https://chrono.skin/s/v1-br-5331/specimen.html", "files": { "STYLE.md": "# Web brutalism, manual\n\n## Summary\n\nThe manual page of web brutalism, as kept between 2014 and 2019 by people who wrote small programs and documented them by hand: a black page of grey monospaced text, a three-part head line like the one a terminal prints over a manual, one blue bar of links, a column of contents that stays put at the left, and numbered parts whose names hang in a gutter beside them. Nothing is rounded, graded or animated and there are no pictures; structure comes from numbers, from 1px grey rules, from one heavy blue rule where a part of the page ends, and from a hard grey underside on boxes and buttons. It was the look of project pages, manuals, changelogs and download directories written by the same people who wrote the code.\n\n## Layout\n\n- The bars run across the window; the text does not. `.ds-nav` and `.ds-footer` are as wide as the window. Between them `.ds-page__frame` is flush left, filled with `--color-canvas`, and never wider than `--size-page` (1180px), so on a wide window the right of the page is left as bare `--fill-page`. Nothing is centred.\n- `.ds-nav` is two lines. `.ds-nav__head` is the head line of a manual page on `--fill-bar-alt`: the `.ds-brand` at the left, `.ds-nav__title` (what kind of manual) in the middle, `.ds-nav__version` at the right. `.ds-nav__bar` under it is one line of links on `--fill-bar`, the last one pushed to the right with `.ds-nav__item--right`. A rule of `--border-width-strong` closes the header.\n- `.ds-page__columns` is a grid of two columns: `.ds-sidebar` at `--size-toc` (230px) on the left behind a 1px rule, then `.ds-page__main`. The sidebar is the table of contents: its inner `.ds-sidebar__fixed` is `position: sticky` at the top of the window, so it stays in view while the page scrolls. The sidebar is always on the left and always present.\n- `.ds-page__main` is a stack of numbered parts. Each `.ds-page__section` is a grid of a `--size-gutter` (150px) column that holds its name (`.ds-page__label`, numbered by the stylesheet) and a `.ds-page__content` column that holds the thing itself. A 1px rule opens every part; parts are `--space-5` (25px) of padding apart and are never boxed. Two short blocks inside a part sit side by side in `.ds-page__pair`.\n- The home page opens `.ds-page__main` with `.ds-hero` (no gutter, no number): the sentence that says what the program is, a lead line, the synopsis as a `.ds-code` block and the actions. Its parts follow: the figures, the chapters as a `.ds-grid`, the news as a `.ds-list`, the current release.\n- Inner pages (a chapter, the changelog, the download page, the report form) keep the header, the contents column and the footer. `.ds-page__main` opens with the `.ds-breadcrumb` written as a path, then `.ds-page-header` (22px title, one line, one button at the right, a heavy rule below); the hero is not used. Then numbered parts as on the home page: running text, `.ds-tabs` with the `.ds-table` in `.ds-tabs__body`, the form. `.ds-pagination` closes a chapter outside any part: previous at the left, the chapter numbers in the middle, next at the right.\n- Views. The specimen is one small site with five views, one showing at a time; the header and the footer are written once around them. `manual` is the home page: name, synopsis, status, chapters, news and the current release. `reference` is one chapter: running text, tabs over the table of options, see also, pagination. `changelog` is the grouped table of releases with its pagination, the empty state of the unreleased part, and a note on upgrading. `download` is the table of files, how to check one and how to build. `report` is the two messages the form can answer with, the form with its error, and the confirmation for throwing a draft away. A view is `
` holding one `.ds-page__columns`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 2px is the padding of tabs and page numbers and the gap between a title and its meta line; `--space-2` 5px is the padding of table cells, buttons and inputs (vertical), badges and panel titles; `--space-3` 10px is the padding of panels, grid cells, the bars and list rows and the gap between buttons; `--space-4` 15px is the gap between paragraphs, between the gutter and the content, and the padding above a part; `--space-5` 25px is the padding below a part, the side padding of the main column and the gap between sidebar blocks; `--space-6` 40px is the indent of lists and the space at the foot of the main column.\n- Fixed sizes: `--size-date` 100px is the date column of the list, `--size-label` 130px the label column of a form, `--size-field` 340px a text input, `--size-num` 90px a numeric table column, `--size-dialog` 420px a dialog.\n- Below 800px there is one column: the page first, then the contents column under a heavy rule, no longer sticky. The head line drops its middle part and stacks, the last navigation link joins the others, part names sit above their content, pairs and figures become one column, the grid two, form labels sit above their fields and table cells marked `.ds-table__extra` are left out. A `.ds-code` block scrolls sideways inside itself; the page never does.\n- On a phone (800px and below) the head is one column and `.ds-nav__title` is not shown; at 560px and below `.ds-nav__bar` becomes a grid of three columns, the four links one cell each and the last item (`.ds-nav__item--right`) two cells, so the five links stand in two rows. There is no menu button, and the current page stays an inverted block.\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- A dark page: `--color-page`, `--color-canvas` and `--color-surface` are #0c0c0c, `--color-surface-alt` #181818 (alternate table rows, tags), `--color-surface-strong` #202020 (label strips, panel titles, inline code).\n- `--color-bar` #ac130d with white `--color-bar-text` is the red block of navigation links, table heads and dialog titles. `--color-bar-alt` #202020 with #a0a0a0 text is the footer. `--color-inverse` #dedede with #0c0c0c text is the light block of the current navigation row, the current tab and the current page number.\n- Text is grey-white in three steps: `--color-text` and `--color-heading` #dedede, `--color-heading-alt` #c4c4c4 (sidebar and panel titles), `--color-text-muted` and `--color-link-quiet` #a0a0a0 (numbers, dates, meta, captions, tabs, sidebar links).\n- `--color-link` #8ab1ff, visited #5070b1, hover and active #ffffff.\n- Rules are greys: `--color-border` #585858 between cells, `--color-border-strong` #a0a0a0 for the rail, the frame, the hero and page header and around dialogs, `--color-border-muted` #303030 for the edge of a disabled button.\n- Block fills are the dark tints of tags and messages: `--color-fill-1` #3b320d, `--color-fill-2` #3b1719, `--color-fill-3` #15293d, `--color-fill-4` #202020 colour the cells of the index in turn; `--color-notice` is #15293d and `--color-danger-surface` #3b1719. `--color-text` and `--color-text-muted` are readable on all of them.\n- `--color-accent` #ac130d with white text is the count badge. Buttons are #303030 and #181818 with light text; inputs are #181818 with a #707070 edge.\n- Text-coloured status needs lighter colours than the references' dark red and yellow-brown fills: `--color-danger` #f0706a, `--color-success` #8fc07a, `--color-warning` and `--color-accent-alt` #d4b106 are derived (the same hues, lightened to read on #0c0c0c), not measured.\n- One sans: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial, sans-serif; `--font-mono` is Menlo, Consolas, monospace, used for everything that is a number of the catalogue: cell numbers, dates, sidebar counts, the id column of a table, inline code.\n- `--text-base` and `--text-ui` 16px with `--line-body` 1.45; `--text-small` 13px for numbers, meta, captions, label strips, table heads, form labels, badges and the footer; `--text-large` 18px for the hero's lead. Headings are bold: `--text-display` 29px (hero headline), `--text-h1` 26px (site name, page title, figures), `--text-h2` 18px (cell titles, form and empty titles), `--text-h3` 16px.\n- Navigation, tabs and buttons are bold (`--weight-ui` 700).\n- Links in running text are underlined; index and list titles, navigation, tabs, sidebar, breadcrumb, pagination and footer links are bare (`--link-decoration-quiet` none) and underline on hover. Current navigation items, tabs and page numbers are ``, not links. Nothing is uppercased or tracked.\n- Two weights far apart: `--border-width` 1px solid for cells, boxes, row dividers and controls; `--border-width-strong` 4px for the rule beside the rail, under a frame, the hero and the page header, the left edge of a notice and a quotation, and the outline of dialogs.\n- Heavy edges are also drawn with hard inset shadows, never blurred: `--shadow-control` puts a 2px line of `--color-border-strong` along the foot of every button and input (4px on hover, moved to the top when pressed), and `--shadow-panel` a 4px bar down the left of a panel. `--shadow-dialog` is `none`.\n- All radii are 0. `--fill-panel` is `--color-surface-alt`, `--fill-input` is `transparent` so a field is its edge and its heavy foot on whatever it stands on, `--fill-button-hover` lightens the button; every other fill is its plain palette colour. `--focus-ring` is a 2px dotted outline; `--transition` none.\n- Each text token is used only on its own fill: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-button-text` on `--fill-button`, `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface` or the canvas, `--color-text` and the muted and heading colours on the canvas, the surfaces and the four fills. Keep to this so that other palettes work with the same structure.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-page__frame` is the sheet; `.ds-page__columns` its two columns with `.ds-sidebar` first and `.ds-page__main` second. `.ds-page__section` is a numbered part (`--last` drops its bottom padding) with `.ds-page__label` and `.ds-page__content`; `.ds-page__pair` sets two blocks side by side; `.ds-page__note` is a small grey line under a block. `.ds-code` is a literal block: a `
` in 12px monospace on `--color-surface-alt` with a 1px rule.\n- `.ds-nav`: the header. `.ds-nav__head` holds the brand, `.ds-nav__title` and `.ds-nav__version`; `.ds-nav__bar` is a list of `.ds-nav__item`, each holding one `.ds-nav__link`. The current page is an inverted block: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own give the link `is-current`.\n- `.ds-brand`: the site's mark and name, a link to the home page, first thing in the head line. `.ds-brand__mark` is a small square tile dressed like the primary button: `--fill-button`, `--color-button-text`, the control's edge, radius and shadow. `.ds-brand__name` is 17px bold in `--color-bar-alt-text`; `.ds-brand__section` is the small manual section number after it. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a path in 12px monospace: `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the opening of the home page: `.ds-hero__title` (30px bold sentence), `.ds-hero__lead` at 16px, `.ds-hero__synopsis` (a `.ds-code` block showing how the thing is called) and `.ds-hero__actions` with a primary button, a secondary button and a text link. No box, no fill, left-aligned.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` (22px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A heavy rule closes it.\n- `.ds-stat`: one figure as a line: `.ds-stat__label`, a 1px leader the stylesheet draws, then a bold 17px `.ds-stat__value` at the right. `.ds-stats` is the row: a list that sets four of them in two columns (one column on a phone). Lines of a listing, never cards.\n- `.ds-prose`: running text, at most 80 characters wide: h1, h2, h3, paragraphs, square-bulleted and numbered lists indented 40px, `code` in 12px on `--color-surface-strong`, `strong` in the heading colour.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is for meta and tool links. `.ds-links` lays references out in a wrapping monospaced line, as under \"see also\".\n- `.ds-button`: a `\n            \n          \n          
\n            
Contents
\n            
    \n              
  1. Name and synopsis
    2. \n              
  2. The timetable file
    3. \n              
  3. Options
    4. \n              
  4. Output formats
    5. \n              
  5. Exit status
    6. \n              
  6. Changelog
    7. \n              
  7. Download and build
    8. \n              
  8. Reporting mistakes
    9. \n            
\n          
\n          
\n            
Elsewhere
\n            \n          
\n          
\n            
One page of HTML per chapter, written by hand. No scripts, no fonts to fetch, nothing that moves.
\n          
\n        \n      \n\n      
\n        
\n          
chronoskin prints a timetable from a text file.
\n          
You keep one plain file of times and what happens at them. It gives you back a week, a month or a single day, as text you can read, print or pipe.
\n          
chronoskin [-w | -m | -d date] [-f format] [-o file] timetable.txt\nchronoskin -c timetable.txt
\n          
\n            Download 2.4.1\n            Read the options\n            what changed in 2.4.1\n          
\n        
\n\n        
\n          
Status
\n          
\n            
    \n              
  • releases since 201431
    • \n              
  • lines of C4,180
    • \n              
  • size of the binary, KB212
    • \n              
  • libraries it needs0
    • \n            
\n            
\n              
Chapters rewritten for 2.4 6 of 8
\n              
\n            
\n          
\n        
\n\n        
\n          
Chapters
\n          
\n            
\n              
\n                
chapter 2
\n                
The file
\n                
One line, one event. How times, days and repeats are written. Read
\n              
\n              
\n                
chapter 3
\n                
Options
\n                
All fourteen flags in one table, with defaults. Read
\n              
\n              
\n                
chapter 6
\n                
Changelog
\n                
Every release since 0.1, newest first. Read
\n              
\n              
\n                
chapter 7
\n                
Download
\n                
Source, four binaries and their checksums. Get it
\n              
\n            
\n          
\n        
\n\n        
\n          
News
\n          
\n            
    \n              
  • \n                2017-03-14\n                
    \n                  2.4.1 is out new\n                  
    Fixes the week that lost an hour when the clocks went forward. Everyone on 2.4.0 should upgrade.
    \n                  
    release | 3 fixes | 212 KB
    \n                
    \n              
    • \n              
  • \n                2017-02-02\n                
    \n                  The -f option now takes a file\n                  
    A format can live beside the timetable instead of on the command line. The old form still works.
    \n                  
    manual | chapter 4 rewritten
    \n                
    \n              
    • \n              
  • \n                2016-11-20\n                
    \n                  Binaries are now built for ARM\n                  
    It runs on the small board in the hallway that drives the printer.
    \n                  
    download | 1 new file
    \n                
    \n              
    • \n            
\n          
\n        
\n\n        
\n          
This release
\n          
\n            
\n              
chronoskin-2.4.1.tar.gz
\n              
\n                
Source, 88 KB. Builds with any C compiler and make; no configure step.
\n                
All files and checksums
\n              
\n            
\n            
Note. 2.4.0 was withdrawn two days after it came out. If chronoskin -V prints 2.4.0, replace it.
\n          
\n        
\n      
\n    \n
\n\n \n
\n
\n \n\n
\n
    \n
  1. chronoskin(1)
    2. \n
  2. /
    3. \n
  3. manual
    4. \n
  4. /
    5. \n
  5. 3 options
    6. \n
\n\n
\n
\n

Chapter 3. Options

\n

Fourteen flags, each one letter. All of them can be left out.

\n
\n
This chapter as text
\n
\n\n
\n

Reading

\n
\n

How options are read

\n

Options come before the name of the timetable file and are read from left to right. When two of them disagree, the later one wins, so a shell alias can set your habits and the command line can still overrule them.

\n

Choosing the span

\n

With no option at all the program prints the current week, Monday first. Three flags choose something else, and only one of them may be given:

\n
    \n
  • -w prints a week, which is the default.
    • \n
  • -m prints the whole month, one line a day.
    • \n
  • -d 2017-03-14 prints that one day in full.
    • \n
\n

Dates

\n

A date is always year, month, day with hyphens. Nothing else is accepted, and a date that does not exist ends the run with status 2.

\n
\n
\n\n
\n

All options

\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
FlagWhat it doesDefaultStateSince
-wPrint one week, Monday first.onstable0.1
-mPrint one month, a line for each day.offstable0.4
-d datePrint a single day in full.todaystable0.4
-f formatLay each line out as the format says. May name a file.%t %enew2.3
-o fileWrite to the file instead of standard output.nonestable1.0
-cCheck the file and print nothing but its mistakes.offstable1.2
-x widthWrap lines at the width. Use a pager instead.80going0.2
\n

Showing 7 of 14. -x goes in 3.0.

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

See also

\n
\n \n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n \n\n
\n
    \n
  1. chronoskin(1)
    2. \n
  2. /
    3. \n
  3. manual
    4. \n
  4. /
    5. \n
  5. 6 changelog
    6. \n
\n\n
\n
\n

Chapter 6. Changelog

\n

Every release of the 2.x series, newest first.

\n
\n
Download 2.4.1
\n
\n\n
\n

Releases

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
VersionDateWhat changedStateLines
2.4, daylight saving
2.4.12017-03-14A week that crosses a clock change keeps all its hours. Filescurrent+38
2.4.02017-03-12Time zones are read from the file. Lost an hour in spring.withdrawn+412
2.3, formats
2.3.22017-02-02The -f option takes a file as well as a string.kept+96
2.3.12016-12-09An empty line in a format no longer ends it.kept+7
2.3.02016-11-20Formats. ARM binaries. The -x option is on its way out.old+530
\n \n
\n
\n\n
\n

Unreleased

\n
\n
\n

Nothing has been changed since 2.4.1. When something is, it is listed here before it is released.

\n Report a mistake\n
\n
\n
\n\n
\n

Upgrading

\n
\n
\n

Releases within a series read the same files and take the same options. Between series, read the first entry of the new one before you replace the binary.

\n

To see what you have, run chronoskin -V.

\n
\n
\n

From 1.x to 2.x

\n
\n

Weeks start on Monday unless the file says otherwise. Add week sunday as its first line to keep the old behaviour.

\n
\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n \n\n
\n
    \n
  1. chronoskin(1)
    2. \n
  2. /
    3. \n
  3. manual
    4. \n
  4. /
    5. \n
  5. 7 download
    6. \n
\n\n
\n
\n

Chapter 7. Download and build

\n

Release 2.4.1 of 14 March 2017: the source and four binaries.

\n
\n
chronoskin-2.4.1.tar.gz
\n
\n\n
\n

Files

\n
\n \n \n \n \n \n \n \n \n \n \n \n
FileForSHA-256, first 16KB
chronoskin-2.4.1.tar.gzsource9c41e07ab35d2f1888
chronoskin-2.4.1-linux-amd64Linux, 64 bit03b7d1c95e6a40f2212
chronoskin-2.4.1-linux-armLinux, ARMe58a20c6714bd93f196
chronoskin-2.4.1-openbsd-amd64OpenBSD71fd08e2a9c3b654204
chronoskin-2.4.1-macosmacOS 10.9 onb26c94f0d17e83a5231
\n
\n
\n\n
\n

Checking a file

\n
\n
\n

Every file is listed in SHA256, which is signed. Fetch both, then:

\n 
sha256sum -c SHA256\nsignify -V -p chronoskin.pub -m SHA256
\n
\n

Mirrors. The two mirrors copy this directory once a night. A release less than a day old may not be on them yet.

\n
\n
\n\n
\n

Building

\n
\n
\n

There is no configure step. Unpack, build, and copy one file to where you keep programs:

\n 
tar xzf chronoskin-2.4.1.tar.gz\ncd chronoskin-2.4.1\nmake && make test\ncp chronoskin ~/bin/
\n
\n
\n

What it needs

\n
\n

A C compiler from this century and make. The tests also want diff.

\n

It did not build

\n
\n
\n make: cc: not found\n

No compiler is installed. Install one, or set CC to the one you have.

\n
\n
\n One test fails on dates\n

Your clock is in a zone that changes this week. Run the tests again with TZ=UTC.

\n
\n
\n Permission denied on copy\n

Copy the binary to a directory of your own; nothing needs root.

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n \n\n
\n
    \n
  1. chronoskin(1)
    2. \n
  2. /
    3. \n
  3. manual
    4. \n
  4. /
    5. \n
  5. 8 reporting mistakes
    6. \n
\n\n
\n
\n

Chapter 8. Reporting mistakes

\n

In the program or in this manual. Both count.

\n
\n
See open reports
\n
\n\n
\n

Answers

\n
\n

Draft kept. What you typed is stored in this browser until you send it or throw it away.

\n

Not sent. One field below needs another look. Nothing has left this page.

\n
\n
\n\n
\n

The report

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

Give the number that chronoskin -V prints, such as 2.4.1.

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

Used once, to answer you. Never published.

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

Throwing away

\n
\n
\n
\n

Throw this draft away?

\n
\n

The report you have typed will be removed from this browser. It was never sent, so nothing else changes.

\n
\n \n Keep writing\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.docs.s05.p03.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-5331\",\n \"short\": \"v1-br-5331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #0c0c0c;\n --color-canvas: #0c0c0c;\n --color-surface: #0c0c0c;\n --color-surface-alt: #181818;\n --color-surface-strong: #202020;\n --color-bar: #ac130d;\n --color-bar-text: #ffffff;\n --color-bar-alt: #202020;\n --color-bar-alt-text: #a0a0a0;\n --color-inverse: #dedede;\n --color-inverse-text: #0c0c0c;\n --color-text: #dedede;\n --color-text-muted: #a0a0a0;\n --color-heading: #dedede;\n --color-heading-alt: #c4c4c4;\n --color-link: #8ab1ff;\n --color-link-quiet: #a0a0a0;\n --color-link-visited: #5070b1;\n --color-link-hover: #ffffff;\n --color-link-active: #ffffff;\n --color-border: #585858;\n --color-border-strong: #a0a0a0;\n --color-border-muted: #303030;\n --color-accent: #ac130d;\n --color-accent-text: #ffffff;\n --color-accent-alt: #d4b106;\n --color-fill-1: #3b320d;\n --color-fill-2: #3b1719;\n --color-fill-3: #15293d;\n --color-fill-4: #202020;\n --color-button: #303030;\n --color-button-text: #dedede;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #181818;\n --color-button-secondary-text: #c4c4c4;\n --color-input: #181818;\n --color-input-text: #dedede;\n --color-input-border: #707070;\n --color-disabled: #202020;\n --color-disabled-text: #707070;\n --color-danger: #f0706a;\n --color-danger-surface: #3b1719;\n --color-success: #8fc07a;\n --color-warning: #d4b106;\n --color-notice: #15293d;\n --color-notice-text: #dedede;\n --color-focus: #8ab1ff;\n --color-shadow: #000000;\n --color-overlay: #181818;\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 29px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 16px;\n --line-body: 1.45;\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: 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: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset 0 0 0 2px color-mix(in srgb, var(--color-button) 25%, white);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 25%, white);\n --shadow-dialog: none;\n --shadow-text: none;\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) 92%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }