{ "id": "v1-br-5243", "long_id": "v1.brutalism.docs.s05.p02.t04.u03", "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-5243", "preview_url": "https://chrono.skin/s/v1-br-5243/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- Two families set against each other: `--font-heading` and `--font-ui` are Helvetica, Arial, sans-serif, bold, for the headline, titles, numerals, navigation, buttons, labels, captions, meta lines and tables; `--font-body` is Baskerville, \"Calisto MT\", \"Times New Roman\", Times, serif for running text only. `--font-mono` is Consolas, Monaco, monospace for inline code.\n- The headline is the layout: `.ds-hero__title` is three times `--text-display` (3 x 64px = 192px here) at `--line-display` 0.95, written `calc(var(--text-display) * 3)` because the vocabulary has no larger size; the figures of `.ds-stats` are one and a half times it (96px). `--text-display` 64px itself is the page title of an inner page and the name in the footer.\n- `--text-base` 18px with `--line-body` 1.5 is running text; `--text-large` 21px is the lead, the navigation band, tabs, pagination and dialog titles; `--text-ui` 16px is buttons, inputs, tables and the sidebar; `--text-small` 14px is labels, captions, meta lines and the footer. Headings: `--text-h1` 36px (the brand, article titles, list numerals, the empty state), `--text-h2` 27px (list and block titles), `--text-h3` 21px. Nothing is uppercased or tracked.\n- Paper and ink: `--color-page`, `--color-canvas` and `--color-surface` are the off-white #fffceb; `--color-text` is #111111, `--color-heading` #000000, `--color-text-muted` #444444. `--color-surface-alt` #ffffff is alternate table rows, `--color-surface-strong` and `--color-overlay` #eeeeee.\n- `--color-bar` #111111 with `--color-bar-text` #dddddd is the navigation band, table heads and dialog titles. `--color-bar-alt` #222222 with #dddddd text is the footer. `--color-inverse` #ff3333 with black `--color-inverse-text` is the red block of the current navigation word, tab and page number: the only red on a page besides the count badge.\n- `--color-link` is #00449e; `--color-link-quiet` is #111111, so titles of the sidebar, breadcrumb, tabs and pagination are black underlined words; `--color-link-visited` is #444444; hover is #000000, active #ff3333. Every link is underlined at rest: `--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all underline.\n- Rules are black: `--color-border` #111111 at `--border-width` 1px between list rows and table rows and around blocks, notices and inputs; `--color-border-strong` #000000 at `--border-width-strong` 3px, drawn `double` (two 1px lines 1px apart), for the rule under the hero and page header, above every block caption and figure, and around buttons, panels, dialogs and the brand mark. `--color-border-muted` #cccccc is the edge of a disabled button.\n- Fills: `--color-fill-1` and `--color-notice` are the pale blue #cdecff, `--color-fill-2` #ffffff, `--color-fill-3` #eeeeee, `--color-fill-4` #dddddd. `--color-text` is readable on all of them.\n- The primary button is #111111 with white text; the secondary #eeeeee with #111111 text; inputs are white with a 1px #111111 edge. `--color-accent` #ff3333 with black text is the count badge; `--color-accent-alt` is the same red, as the asterisk of \"new\" only.\n- Status: `--color-danger` #b00000, `--color-success` #1a6b1a, `--color-warning` #7a4e00. The references show one red and no green or amber; these are derived, dark enough to read on the off-white and on white.\n- `--border-style` is `double`: a 1px rule stays one line, a 3px rule becomes the thin double rule of a printed page. Nothing casts a shadow at rest, the dialog included (`--shadow-dialog` is `none`: its double rule is its whole frame); a hovered or pressed button draws a keyline inside its edge, and `--fill-button-hover` lightens a hovered button slightly (the button colour mixed with 15% white).\n- All radii are 0. `--fill-input` and `--fill-button-secondary` are `transparent`, so fields and secondary buttons are drawn on the paper itself; every other fill is its plain palette colour, the hovered button apart. `--focus-ring` is a 3px double 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.p02.t04.u03\",\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-5243\",\n \"short\": \"v1-br-5243\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f7f7f7;\n --color-surface-strong: #efefef;\n --color-bar: #ddeeff;\n --color-bar-text: #333333;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #555555;\n --color-inverse: #1111aa;\n --color-inverse-text: #ffffff;\n --color-text: #444444;\n --color-text-muted: #808080;\n --color-heading: #333333;\n --color-heading-alt: #ff0000;\n --color-link: #1111aa;\n --color-link-quiet: #1111aa;\n --color-link-visited: #800080;\n --color-link-hover: #ff0000;\n --color-link-active: #ff0000;\n --color-border: #aaaaaa;\n --color-border-strong: #8899cc;\n --color-border-muted: #dddddd;\n --color-accent: #ddffaa;\n --color-accent-text: #333333;\n --color-accent-alt: #ff0000;\n --color-fill-1: #ddeeff;\n --color-fill-2: #ddffaa;\n --color-fill-3: #ffffaa;\n --color-fill-4: #f7f7f7;\n --color-button: #ddffaa;\n --color-button-text: #333333;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #444444;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #808080;\n --color-disabled: #efefef;\n --color-disabled-text: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #2a7a00;\n --color-warning: #9a5b00;\n --color-notice: #ffffaa;\n --color-notice-text: #333333;\n --color-focus: #1111aa;\n --color-shadow: #aaaaaa;\n --color-overlay: #efefef;\n}\n\n/* @part type */\n:root {\n --font-body: Baskerville, \"Calisto MT\", \"Times New Roman\", Times, serif;\n --font-heading: Helvetica, Arial, sans-serif;\n --font-ui: Helvetica, Arial, sans-serif;\n --font-mono: Consolas, Monaco, monospace;\n --text-base: 18px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 21px;\n --text-display: 64px;\n --text-h1: 36px;\n --text-h2: 27px;\n --text-h3: 21px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 0.95;\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: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset 4px 0 0 var(--color-border-strong);\n --shadow-control: inset 0 -2px 0 var(--color-border-strong);\n --shadow-control-hover: inset 0 -4px 0 var(--color-border-strong);\n --shadow-control-pressed: inset 0 4px 0 var(--color-border-strong);\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-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: transparent;\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }