clio.css 0.0.0-stage → 0.2.0

package/AGENTS.md

@@ -0,0 +1,35 @@
+# AGENTS.md — clio.css
+
+For AI coding agents using or changing this repository.
+
+## Using clio.css in a project
+
+- Link `dist/clio.css` (System 6 default) and set `data-era="platinum"` on `<html>` or
+  any element for Mac OS 9 Platinum. Copy markup from `dist/components.json`
+  (`components[].html`); it is the same markup the docs render.
+- Style overrides go through `--clio-*` custom properties, not by restating rules.
+  Library rules have zero or one-class specificity, so a plain class in your CSS wins.
+- Do not add hover effects to push buttons: the era had none, and the library's state
+  model is pressed-on-pointer-down only.
+
+## Changing this repository
+
+- Sources: `src/*.css` (concatenated in file-name order) and `components/index.mjs`
+  (docs, `components.json`, `llms.txt`, `llms-full.txt` and `EVIDENCE.md` are generated
+  from it). Never hand-edit `dist/`, `docs/`, `llms.txt` or `EVIDENCE.md`.
+- After a change: `npm test` (build + static checks) must pass. For Platinum chrome,
+  run `npm run fidelity` and do not let a specimen's exact-match share fall.
+- Every new or changed value needs an evidence row in `components/index.mjs` with an
+  honest status: `measured` only when read from real pixels of the era (name the
+  capture), `inferred` when reasoned, `adapted` for web-only changes, `third-party` for
+  licensed art or fonts. An unmeasured value is never labelled measured.
+- No Apple bitmaps, icons, logos or fonts, and no art cut from a screenshot. Draw art as
+  CSS or small SVGs (see `tooling/tab-art.py` for a drawn-from-measurement example).
+  Third-party art needs a licence entry in `THIRD-PARTY.md`.
+- Tokens live on `:root, [data-era="system6"]` (01-tokens.css) and
+  `[data-era="platinum"]` (90-platinum.css). A token that reads another token is
+  resolved where it is declared, so an era that changes `--clio-paper` must re-declare
+  every token built from it.
+- Motion: none today. If added, animate `transform`/`opacity` only and honour
+  `prefers-reduced-motion`.
+- Keep `dist/clio.min.css` under the size budget in `test/check.mjs`.

package/EVIDENCE.md

@@ -0,0 +1,94 @@
+# Evidence
+
+Generated from `components/index.mjs` by `npm run build`; edit there.
+
+Every value in clio.css 0.2.0 has a row here. Sources are paths in the AI System 6 development tree at commit `b75cd4ed` (public mirror: https://github.com/surfine/AI-System-6; some evidence folders such as `internal/` are private). The images measurements were taken from are evidence only; clio.css never ships them.
+
+| Status | Meaning | Rows |
+| --- | --- | ---: |
+| Measured | read from real pixels of the era | 50 |
+| Inferred | reasoned from documentation or behaviour, not measured | 13 |
+| Adapted | a deliberate departure for the web (touch, focus, contrast) | 8 |
+| Third-party | art or font from a named, licensed project | 6 |
+
+Pixel check: `npm run fidelity` renders the Platinum specimens and compares them with AI System 6's GUIdebook Mac OS 9.0 reference crops (it needs a local AI System 6 checkout; see the script).
+
+| Component | Era | Value | Status | Source — upstream evidence |
+| --- | --- | --- | --- | --- |
+| Window | System 6 | Title bar: 19 rows from the frame to the rule; 3 rows of paper, six 1px ink stripes on a 2px period, 3 rows of paper, the 1px rule | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window rows 27–45` — agrees with AI System 6 apps/desktop/styles/00-foundation.css:906 (emulator, 2x) |
+| Window | System 6 | Close and zoom boxes: 11px squares on the stripe band, 8px in from each inner edge, with 1px of paper between box and stripes (AI System 6 uses 3px) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window Macintosh HD |
+| Window | System 6 | Title cut-out: about 6px of paper either side of the name (7px left, 5px right including the glyph's side bearing) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window |
+| Window | System 6 | Zoom box: an inner square of 7 of the frame's 11 pixels sharing its top-left corner | Measured | `apps/desktop/styles/10-windows.css:1059` — System 6 zoom box, 7:11 |
+| Window | System 6 | An inactive window draws a plain white title strip with its name; no stripes, close box or zoom box | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert (Macintosh HD behind the alert)` — agrees with AI System 6 apps/desktop/styles/00-foundation.css:951 |
+| Window | System 6 | A held close or zoom box draws the same starburst: eight 3px rays and a centre dot inside the frame | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), mouse held on each box` — the cursor covered the lower half; it is drawn as the mirror of the upper half |
+| Window | System 6 | The window frame has a 1px ink drop shadow on the right and bottom | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window x=239, y=152` — AI System 6 sets no window shadow |
+| Window | System 6 | Finder info line: 17 rows of Geneva 9, text 15px in, closed by 1px ink, 1px paper, 1px ink | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window rows 46–65` — System 6.0.8 Finder window |
+| Window | Platinum | Frame: 1px black line, a raised 4px strip (white top/left, #999 bottom/right), the black content line; 2px 5px 5px padding | Measured | `apps/desktop/styles/65-appearance-themes.css:1744 (P14)` — Mac OS 8/9 window captures 16 and 21 |
+| Window | Platinum | Title bar 19px: #ccc, six white/#777 ridge pairs from row 1, #999 shadow row, black rule; #ccc covers behind the boxes | Measured | `apps/desktop/styles/65-appearance-themes.css:104` — GUIdebook Mac OS 9.0 Appearance window (Theme Lab specimen active-titlebar) |
+| Window | Platinum | Title in bold Charcoal; on other systems Asap at width 123 shifted (-1px, -1px), the metrics the title bar was measured with | Measured | `apps/desktop/styles/65-appearance-themes.css:1803` — GUIdebook Mac OS 9.0 Appearance window |
+| Window | Platinum | Boxes: 11px, #222 frame, #999 to white gradient, #888 bevel above-left and white below-right; pressed #444 to #bbb | Measured | `apps/desktop/styles/65-appearance-themes.css:1820` — GUIdebook Mac OS 9.0 captures |
+| Window | Platinum | Zoom mark: a six-pixel lower-left corner; WindowShade mark: two nine-pixel rules at y=4 and y=6 | Measured | `apps/desktop/styles/65-platinum-utility.css:725, :738` — GUIdebook Mac OS 9, 1x pixels |
+| Window | Platinum | Background window: #555 frame and drop, flat controls, #777 title, boxes erased | Measured | `apps/desktop/styles/65-appearance-themes.css:1757 (N1, P26)` — Mac OS 9 native capture 53; GUIdebook active/inactive |
+| Menu bar and menus | System 6 | Menu bar: 20 rows with the rule on the last; an open title inverts rows 1–18, about 9px either side of the word | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
+| Menu bar and menus | System 6 | Menu: hangs from the bar's rule with no top line; 1px ink frame and 1px drop shadow; 16px rows; text 15px in; the highlighted row inverts | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
+| Menu bar and menus | System 6 | Separator: a full 16px row with a 1-on 1-off dotted rule on its ninth line | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu rows 164–179` — System 6.0.8 Finder File menu |
+| Menu bar and menus | System 6 | Check mark: the Chicago check glyph, 9×8, 3px in from the frame | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), Apple menu Finder item` — redrawn as pixels in tooling/s6-art.py |
+| Menu bar and menus | System 6 | Disabled items are drawn through a 50% grey dither; clio.css uses solid #696969 | Adapted | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — a dither blurs under browser scaling; solid grey keeps 5.6:1 |
+| Menu bar and menus | Platinum | Menu bar: #ddd, white top line, #999 bottom line, 1px black rule, 20px; open title #333399 with #6666cc/#000088 lines | Measured | `apps/desktop/styles/65-appearance-themes.css:298, :45` — Mac OS 9 native menu bar captures 02/04 |
+| Menu bar and menus | Platinum | Menu: no top rule, white/#999 inner bevel, #222 1px drop; 16px rows at weight 600; highlight #333399 with #6666cc/#000088 side columns | Measured | `apps/desktop/styles/65-appearance-themes.css:912 (P21), :917 (P24)` — GUIdebook Mac OS 9.0 Apple menu (Theme Lab specimen apple-menu) |
+| Menu bar and menus | Platinum | Separator: #888 over white, in an 8px row | Inferred | `apps/desktop/styles/65-appearance-themes.css (separator #888/white)` — the line pair is measured; the 8px row height is not |
+| Menu bar and menus | Platinum | Check mark and submenu arrow art | Third-party | `classic-stylesheets macos9/checkmark.svg, menu-right.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
+| Push button | System 6 | Push button: 20px tall, 1px ink round rectangle with corners of about 4px, paper face, Chicago 12 (AI System 6 uses 7px corners) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert, OK button 60×20` — System 6.0.8 stop alert |
+| Push button | System 6 | Pressed: the button inverts to ink with paper text | Inferred | `not captured` — System 6 button tracking |
+| Push button | System 6 | Default button: a 1px gap then a 3px ring (68×28 around a 60×20 button) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert` — agrees with Inside Macintosh, Dialog Manager: PenSize(3,3), InsetRect(-4,-4), FrameRoundRect(16,16) |
+| Push button | Both eras | Hover never changes a push button; pressed only on pointer-down, Space or Enter | Inferred | `docs/design/CLASSIC_PLATINUM_FIDELITY.md:210` — a 1987–1999 Mac had no hover state |
+| Push button | System 6 | Keyboard focus: a 1px dotted frame 2px out | Adapted | `apps/desktop/styles/00-foundation.css:519` — System 6 had no button focus; a dotted frame cannot be read as the default ring |
+| Push button | Platinum | #ddd face, 1px black border, 3px corners, bevel white/#ddd over #777/#aaa | Measured | `apps/desktop/styles/65-appearance-themes.css:236` — GUIdebook Mac OS 9.0 About dialog (Theme Lab specimen default-ok) |
+| Push button | Platinum | Pressed: #666 face, white text, #444/#555 top-left over #888/#777 bottom-right | Measured | `apps/desktop/styles/65-appearance-themes.css:933 (P29)` — Infinite Mac Mac OS 9.0 capture |
+| Push button | Platinum | Default ring: 1px black, a #aaa band with #ddd/#777 edges, 1px gap | Measured | `apps/desktop/styles/65-platinum-utility.css:773` — GUIdebook Mac OS 9.0 (default-ok specimen) |
+| Push button | Platinum | Disabled: #888 border, flat #ddd, #777 text; the default ring goes #888 | Measured | `apps/desktop/styles/65-appearance-themes.css (N5)` — GUIdebook Open dialog Eject button (button-disabled specimen) |
+| Check box | System 6 | A 12px box with a 1px frame; held, the frame thickens to 2px | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame get-info (Locked)` — AI System 6 uses 13px |
+| Check box | System 6 | Checked draws an X from corner to corner | Inferred | `not captured (the Locked box was unchecked)` — System 6 check box |
+| Check box | System 6 | X art | Third-party | `apps/desktop/assets/themes/classic/controls/checkmark.svg` — system.css icon/checkmark.svg (MIT, Sakun Acharige) |
+| Check box | Platinum | 12px #ddd well, 1px black frame, white top-left and #888 bottom-right bevel | Measured | `apps/desktop/styles/65-appearance-themes.css:897 (P18)` — GUIdebook Mac OS 9.0 Appearance Options tab (checkbox specimens) |
+| Check box | Platinum | Check mark art | Third-party | `classic-stylesheets macos9/checkmark.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
+| Radio button | System 6 | 12px ring and 6px dot: the real pixels match system.css's art exactly | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (Rate of Insertion Point Blinking)` — art from system.css icon/radio-border.svg, radio-dot.svg (MIT, Sakun Acharige) |
+| Radio button | Platinum | Radio drawn with CSS gradients: black ring, white to #888 well, 6px black dot | Adapted | `apps/desktop/styles/65-appearance-themes.css:291` — AI System 6 later replaced this with art cut from a capture (P19); clio.css ships no cut art |
+| Text field | System 6 | 1px ink frame, white, text inset 3px | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (RAM Cache field), get-info (comments)` — System 6.0.8 |
+| Text field | Platinum | White field, 1px black frame, #888 shadow above-left and white etch below-right | Measured | `apps/desktop/styles/65-appearance-themes.css:935 (P30)` — Infinite Mac Mac OS 9.0 capture |
+| Text field | Platinum | Focus: a 2px #6666cc ring | Measured | `apps/desktop/styles/65-platinum-utility.css:38` — Mac OS 9 capture platinum-native/10b-fonts-tab |
+| Pop-up menu | System 6 | A box with a 1px drop shadow | Inferred | `not measured` — System 6 pop-up menu CDEF |
+| Pop-up menu | System 6 | The down triangle | Adapted | `drawn for clio.css` — a System 7 convention, kept so the control reads as a menu |
+| Pop-up menu | Platinum | #ddd, 3px corners, white/#aaa bevel, bold label, a separate bevelled arrow part with the 7x10 arrow | Measured | `apps/desktop/styles/65-appearance-themes.css:1916 (P31)` — GUIdebook Mac OS 9.0 (popup-normal specimen), native 09b |
+| Pop-up menu | Platinum | The arrow part is drawn with background layers, approximating the measured bevel | Inferred | `clio.css` — select has no ::after in CSS |
+| Pop-up menu | Platinum | Arrow art | Third-party | `classic-stylesheets macos9/dropdown.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8 |
+| List box | System 6 | White list, 1px ink frame, 16px rows, selection inverts | Inferred | `not measured` — System 6 Standard File dialog |
+| List box | Platinum | Selection is lavender #ccccff with black text | Measured | `apps/desktop/styles/65-appearance-themes.css:128` — GUIdebook Mac OS 9.0 Open dialog (open-list-scrollbar specimen) |
+| List box | Platinum | Rows carry no divider | Measured | `apps/desktop/styles/65-appearance-themes.css:860 (P10)` — Mac OS 9 native list capture 21 |
+| Scroll bar | System 6 | Lane: a 1px line and 14px inside; the window frame closes it, so the bar is 15px in CSS | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — AI System 6 uses a 16px lane |
+| Scroll bar | System 6 | Active lane pattern is QuickDraw's ltGray (one dot in four, rows offset by two), not 50% grey; an empty lane is white | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames system-folder and hd-window` — AI System 6 draws a 50% checker |
+| Scroll bar | System 6 | Scroll box: a white square with a 1px frame filling the lane, 16 rows tall | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — System 6.0.8 Finder list view |
+| Scroll bar | System 6 | Up and down arrows: hollow, 13 wide and 11 tall in the 14px box, a 45° head and a 7px stem | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames hd-window and system-folder` — redrawn as pixels in tooling/s6-art.py |
+| Scroll bar | System 6 | Left and right arrows are the up and down arrows turned | Inferred | `tooling/s6-art.py` — the horizontal arrows were captured only partly |
+| Scroll bar | System 6 | Grow box: a 7×7 square over a 9×9 square in the 14px corner | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — redrawn as pixels in tooling/s6-art.py |
+| Scroll bar | Both eras | The scroll box grows with the visible fraction instead of a fixed 16px square | Adapted | `clio.css` — browsers size ::-webkit-scrollbar-thumb themselves |
+| Scroll bar | Platinum | Lane #aaa with a double bevel; lavender #9999ff scroll box with #ccf/#66c bevel and grip ridges; #ddd arrow boxes with stepped 2/4/6/8 arrows | Measured | `apps/desktop/styles/65-appearance-themes.css:336 (P16), :351 (P17), :364 (P27)` — Mac OS 9 native capture 16; GUIdebook Open dialog |
+| Dialogs and alerts | System 6 | Modal frame: 1px ink, 2px paper, 2px ink, and no drop shadow | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert` — AI System 6 has two recipes, both off (84-clio-write.css:210 has a 1px gap) |
+| Dialogs and alerts | System 6 | Plain box: 1px ink frame and a 2px drop shadow | Inferred | `not measured` — altDBoxProc |
+| Dialogs and alerts | Both eras | The alert icon is drawn here, not Apple's | Adapted | `clio.css` — no Apple icons are shipped |
+| Dialogs and alerts | Platinum | 1px black frame over #ddd, inner bevel of three white steps inside #555/#999/#aaa, 1px black drop | Measured | `apps/desktop/styles/65-appearance-themes.css:840 (P06)` — GUIdebook Mac OS 9.0 About application (about-alert specimen) |
+| Group box | System 6 | 1px ink frame with the legend on paper | Inferred | `not measured` — System 6 control panels |
+| Group box | Platinum | Etched: #888 line with a white line inside and below | Measured | `apps/desktop/styles/65-appearance-themes.css:909 (P20)` — Mac OS 9 native group box |
+| Progress bar | System 6 | 1px ink frame, ink fill | Inferred | `not measured` — System 6 Finder copy progress |
+| Progress bar | Platinum | Barber-pole fill: ten 1px hard stops from #333399 through #eee to #000055 | Measured | `apps/desktop/styles/65-appearance-themes.css:937 (P32)` — Mac OS 9 native progress bar |
+| Progress bar | Platinum | #bbb track with white/#aaa outer and #888/#ddd inner bevel | Inferred | `apps/desktop/styles/65-appearance-themes.css:592` — AI System 6 token, not tagged as measured |
+| Tabs | System 6 | Boxed labels that join the panel | Adapted | `clio.css` — System 6 had no tab control |
+| Tabs | Platinum | Tab art: sloped caps, #ccc tabs, the front tab #eee and 2px taller | Third-party | `classic-stylesheets macos9/tab*.svg (MIT)` — nielssp/classic-stylesheets @9ebd2d8; AI System 6 measured a 21-row tab (P01, 65-appearance-themes.css:742) |
+| Desktop and icons | System 6 | The desktop is a 1px 50% checker | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), every frame` — AI System 6 draws an 8px stipple |
+| Desktop and icons | System 6 | Icon names: Geneva 9 on a white tag; a selected icon and its tag invert | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), desktop (Macintosh HD selected, Welcome! not)` — System 6.0.8 Finder |
+| Desktop and icons | Platinum | 70% white tag with no edge; selected: black tag, white name, artwork darkened | Measured | `apps/desktop/styles/65-appearance-themes.css:882 (P12, P13)` — Mac OS 9 native capture 02 |
+| Desktop and icons | Platinum | Desktop colour #4a71ab | Inferred | `apps/desktop/styles/65-appearance-themes.css:85` — base colour of AI System 6's azul tile, generated from a 512 Pixels capture; the tile is not shipped |
+| Type and tokens | System 6 | ChicagoFLF, a public-domain revival of Chicago, for chrome | Third-party | `vendor/system.css-reference/fonts/ChicagoFLF.woff2` — Robin Casady's ChicagoFLF (public domain), as shipped by system.css |
+| Type and tokens | Platinum | Charcoal when installed; otherwise Asap (OFL) at width 113 for text and 123 for titles, weights 400/600/700 | Measured | `apps/desktop/assets/fonts/platinum/README.md; 65-appearance-themes.css:25` — Asap matched to a measured Charcoal sample's x-height and advance width |
+| Type and tokens | Platinum | Palette #fff #ddd #ccc #999 #777 #000, accent #333399, lavender #ccccff | Measured | `tooling/classic-platinum-fidelity-contract.json (platinum.palette)` — Mac OS 9 captures |
+| Type and tokens | System 6 | Disabled text #696969 instead of a 50% dither | Adapted | `apps/desktop/styles/00-foundation.css (shade-dark)` — 5.6:1 on white; a dither blurs under browser scaling |

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 clio.css contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,160 @@
-# Temporary Holding Version
+# clio.css
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**A CSS library for classic Mac OS interfaces: Macintosh System 6 and Mac OS 8/9 Platinum.**
+Windows, title bars, menu bars, push buttons, check boxes, radio buttons, text fields,
+pop-up menus, list boxes, scroll bars, dialogs, group boxes, progress bars, tabs and
+desktop icons. Pure CSS, no JavaScript. MIT. No Apple bitmaps, icons, logos or fonts.
+
+Every value is traced to its source and labelled **measured** (read from real pixels of
+the era), **inferred**, **adapted** (a deliberate web change) or **third-party**. System 6
+is measured from System 6.0.8 running in [Infinite Mac](https://infinitemac.org), its
+screen read pixel for pixel; Platinum from Mac OS 9.0 captures measured by
+[AI System 6](https://github.com/surfine/AI-System-6).
+
+![A System 6 window and a Mac OS 9 Platinum window drawn with clio.css](assets/og.png)
+
+Docs and live examples: https://surfine.github.io/clio.css/
+
+## Install
+
+```bash
+npm install clio.css
+```
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/clio.css@0.2.0/dist/clio.css">
+```
+
+| File | What it draws |
+| --- | --- |
+| `dist/clio.css` | System 6 by default; `data-era="platinum"` on any element switches that subtree to Platinum |
+| `dist/clio.system6.css` | System 6 only (45 KB minified, 7 KB gzip) |
+| `dist/clio.platinum.css` | Platinum as the page default |
+| `*.min.css` | Minified builds |
+| `dist/components.json` | Machine-readable index: selectors, tokens, markup and evidence per component |
+
+The stylesheets load fonts from `dist/fonts/` with relative URLs, so serve the `dist`
+folder as a whole (the CDNs above do).
+
+## Quick start
+
+```html
+<html data-era="platinum">  <!-- omit for System 6 -->
+<div class="window" style="width: 320px">
+  <div class="title-bar">
+    <button class="close" aria-label="Close"></button>
+    <h1 class="title">Macintosh HD</h1>
+    <button class="resize" aria-label="Zoom"></button>
+    <button class="shade" aria-label="Collapse"></button> <!-- Platinum only -->
+  </div>
+  <div class="details-bar"><span>12 items</span><span>167K available</span></div>
+  <div class="window-pane">
+    <label><input type="checkbox" checked> Show warnings</label>
+    <button class="default">OK</button>
+  </div>
+</div>
+```
+
+Form controls are styled on the native elements (`button`, `input`, `select`,
+`textarea`, `fieldset`, `progress`), so keyboard, form and screen-reader behaviour stay
+the browser's.
+
+## Components
+
+| Component | Markup |
+| --- | --- |
+| Window | `.window` › `.title-bar` (`.close`, `.title`, `.resize`, `.shade`) › `.details-bar` › `.window-pane`; `.window.inactive` |
+| Menu bar and menus | `ul.menu-bar[role=menubar]` › `li` › `button[aria-expanded]` + `ul.menu[role=menu]`; `li[role=separator]`, `[aria-checked=true]`, `[aria-disabled=true]`, `kbd` |
+| Push button | `button`, `.btn`; `.default` for the default ring; `.active` to pose pressed |
+| Check box, radio button | `input[type=checkbox]`, `input[type=radio]` |
+| Text field | `input[type=text]` and friends, `textarea` |
+| Pop-up menu | `select`; `select[multiple]` becomes a list box |
+| List box | `ul.listbox[role=listbox]` › `li[role=option][aria-selected]` |
+| Scroll bar | automatic on `.window-pane`, `.listbox`, `textarea`; `.clio-scroll` on anything; `<html class="clio-scrollbars">` for the page |
+| Dialogs and alerts | `.modal-dialog`, `.alert-box` (+ `.alert-icon.caution`), `.standard-dialog`, `.dialog-buttons` |
+| Group box | `fieldset` + `legend` |
+| Progress bar | `progress` |
+| Tabs | `[role=tablist]` › `[role=tab][aria-selected]` + `[role=tabpanel]` |
+| Desktop and icons | `.desktop`; `button.icon` › `img`/`svg` + `span` |
+
+Coming from [system.css](https://github.com/sakofchit/system.css)? Its markup works
+unchanged: `.title-bar button.close`, `button.resize`, `.inactive-title-bar`,
+`.window-pane`, `.details-bar`, `.separator`, `.btn`, `.btn-default`, `.standard-dialog`,
+`.modal-dialog`, `.alert-box`, `.outer-border`, `.inner-border`, `.field-row` and
+`role="menu-bar"` / `role="menu-item"` menus.
+
+## Customising
+
+Every value is a `--clio-*` custom property, declared on `:root` and re-declared under
+`[data-era="platinum"]`. Override any of them on any element. Every rule uses `:where()`
+or a single class, so your own CSS always wins without `!important`.
+
+```css
+.my-app { --clio-selection-bg: #333399; --clio-button-radius: 4px; }
+```
+
+## How faithful is it?
+
+[EVIDENCE.md](EVIDENCE.md) lists every value with its status and source: 50 of the 77
+rows are **measured** from real pixels, 13 are still **inferred** and say so.
+
+[FIDELITY.md](FIDELITY.md) is a pixel check (`npm run fidelity`) against the real screens:
+
+| Specimen | Pixels identical to the real screen |
+| --- | ---: |
+| System 6 check box, radio buttons, scroll arrow, grow box, menu separator | 100% |
+| System 6 default OK button | 96.7% |
+| System 6 title bar | 96.3% |
+| Platinum title bar | 94.3% |
+| Platinum default OK button | 92.4% |
+
+Nearly every remaining pixel is lettering: Chicago and Charcoal are Apple's fonts and are
+not shipped, so ChicagoFLF and Asap stand in. `npm run capture:system6` re-takes the
+System 6.0.8 reference frames from Infinite Mac; the frames are never committed.
+
+What the era never had is adapted, not imitated: keyboard focus rings, touch-size
+controls on `pointer: coarse` (title-bar boxes get a 45px hit area while their art stays
+11px), solid grey instead of a dithered disabled state, and system controls in
+forced-colours mode. No animation anywhere.
+
+## Browser support
+
+Current Chrome, Edge, Safari and Firefox. Uses `:where()`, `:has()` and custom
+properties. Scroll-bar parts (arrows, scroll box) draw in Chromium and Safari; Firefox
+gets the era's scroll-bar colours only.
+
+## How it compares
+
+| Library | Look | Licence |
+| --- | --- | --- |
+| [98.css](https://github.com/jdan/98.css) | Windows 98 | MIT |
+| [7.css](https://github.com/khang-nd/7.css) | Windows 7 | MIT |
+| [XP.css](https://github.com/botoxparty/XP.css) | Windows XP | MIT |
+| [system.css](https://github.com/sakofchit/system.css) | Classic Apple (System 6 style) | MIT |
+| [Puppertino](https://github.com/codedgar/Puppertino) | Modern macOS / iOS | MIT |
+| **clio.css** | System 6 and Mac OS 8/9 Platinum, with per-value evidence | MIT |
+
+## For AI agents
+
+- [`llms.txt`](llms.txt) — summary and links ([llmstxt.org](https://llmstxt.org) format)
+- [`llms-full.txt`](https://surfine.github.io/clio.css/llms-full.txt) — every component's markup and the full stylesheet
+- [`components.json`](https://surfine.github.io/clio.css/components.json) — selectors, tokens, HTML and evidence per component
+- [`AGENTS.md`](AGENTS.md) — how to use and change this repository
+
+## Develop
+
+```bash
+npm run build      # dist/, docs/, llms.txt, EVIDENCE.md from src/ and components/index.mjs
+npm test           # build + static checks
+npm run fidelity   # pixel check against AI System 6's references (needs a local checkout)
+```
+
+## Licence
+
+MIT, see [LICENSE](LICENSE). Bundled fonts and art keep their own licences, see
+[THIRD-PARTY.md](THIRD-PARTY.md): ChicagoFLF (public domain), Asap (SIL OFL 1.1), and
+SVG art from system.css and classic-stylesheets (both MIT).
+
+clio.css is not affiliated with or endorsed by Apple Inc. Macintosh, Mac OS, Chicago,
+Geneva and Charcoal are trademarks of Apple Inc., named only to describe the eras
+recreated.

package/THIRD-PARTY.md

@@ -0,0 +1,73 @@
+# Third-party material
+
+clio.css ships no Apple bitmaps, icons, logos or fonts. Screenshots used to
+measure values stay evidence in AI System 6 and are never distributed. The
+following third-party material is included, each under its own licence.
+
+## Fonts
+
+| File | Font | Author | Licence |
+| --- | --- | --- | --- |
+| `dist/fonts/ChicagoFLF.woff2`, `.woff` | ChicagoFLF | Robin Casady | Public domain: the author's own statement and Font Library's listing (https://fontlibrary.org/font/chicagoflf); some download sites say "personal use", which is not the author's term. File as distributed by system.css |
+| `dist/fonts/Asap-Variable.woff2` | Asap (variable, wdth + wght) | Omnibus-Type | SIL Open Font License 1.1, full text in `dist/fonts/OFL-Asap.txt`; upstream github.com/Omnibus-Type/Asap at commit 2de32f20, SHA-256 3f230328…498f |
+
+Asap is a stand-in for Charcoal and is not presented as an Apple font.
+
+## Art from system.css (MIT)
+
+The System 6 check-box X, radio ring, pressed radio ring and radio dot are
+re-encoded from `icon/checkmark.svg`, `icon/radio-border.svg`,
+`icon/radio-border-focused.svg` and `icon/radio-dot.svg` of
+https://github.com/sakofchit/system.css at commit c95b9542.
+
+
+Copyright (c) 2022 Sakun Acharige
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+## Art from classic-stylesheets (MIT)
+
+The Platinum pop-up arrow (and its disabled colour), check mark, submenu
+arrow and the three tab drawings are re-encoded from `macos9/dropdown.svg`,
+`checkmark.svg`, `menu-right.svg`, `tab.svg`, `tab-active.svg` and
+`tab-selected.svg` of https://github.com/nielssp/classic-stylesheets at commit
+9ebd2d84. AI System 6 also adapted Platinum control relationships from the
+same project.
+
+MIT License
+
+Copyright (c) 2022 Niels Sonnich Poulsen (http://nielssp.dk)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.