clio.css 0.1.0 → 0.9.0

package/dist/clio.drawingboard.css

@@ -0,0 +1,3562 @@
+/*! clio.css 0.9.0 (Drawing Board default) | MIT | https://surfine.github.io/clio.css/
+ * Classic Mac OS interface CSS: System 6, System 7, Mac OS 8.5 Drawing Board and Mac OS 9 Platinum.
+ * Measured values traced to AI System 6; see EVIDENCE.md.
+ * Includes art from system.css (MIT) and pixel reconstructions of Apple control art; see THIRD-PARTY.md. */
+/* Clio Sans '84: Chicago 12 rebuilt pixel for pixel from System 6.0.8
+   (fonts-src/clio-sans-84.txt). Every pixel is a square on a 1200-unit em, so
+   at 12px and its multiples it draws exactly the original bitmap. */
+@font-face {
+  font-family: "Clio Sans '84";
+  src: url("fonts/ClioSans84.woff2") format("woff2");
+  font-display: swap;
+}
+
+/* Clio Text '84: Geneva 12, and Clio Text '84 9: Geneva 9, rebuilt the same
+   way (fonts-src/clio-text-84*.txt). */
+@font-face {
+  font-family: "Clio Text '84";
+  src: url("fonts/ClioText84.woff2") format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Text '84 9";
+  src: url("fonts/ClioText84-9.woff2") format("woff2");
+  font-display: swap;
+}
+
+/* Clio Sans '97: Charcoal 12 rebuilt the same way from Mac OS 9.0's Key Caps
+   (fonts-src/clio-sans-97.txt). Charcoal has one weight, so the face covers
+   every weight and the browser never thickens it. */
+@font-face {
+  font-family: "Clio Sans '97";
+  src: url("fonts/ClioSans97.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Clio Sans '97 Title: the same face as window titles draw it (a few faint
+   pixels fewer than menus and buttons), for title bars only. */
+@font-face {
+  font-family: "Clio Sans '97 Title";
+  src: url("fonts/ClioSans97Title.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Clio Sans '97 Exact and Clio Sans '97 Title Exact: the same glyphs with
+   each antialiasing level painted from a palette entry, so the palettes below
+   give, for clio.css's own title and button colours, the very pixels Mac OS
+   blends ((fg * a + bg * (255 - a)) >> 8). They ignore the text colour: a
+   page that recolours a title or a button label also sets --clio-font-window-title
+   or --clio-font-button back to a stack without "Exact", and gets Clio Sans
+   '97 in its colour, within one level of the real screen. */
+@font-face {
+  font-family: "Clio Sans '97 Exact";
+  src: url("fonts/ClioSans97Exact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Sans '97 Title Exact";
+  src: url("fonts/ClioSans97TitleExact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Written by tooling/aa-palettes.py. */
+@font-palette-values --clio-aa-p9-title {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #bebebe,
+    1 #b0b0b0,
+    2 #a2a2a2,
+    3 #959595,
+    4 #878787,
+    5 #7a7a7a,
+    6 #6c6c6c,
+    7 #5f5f5f,
+    8 #515151,
+    9 #444444,
+    10 #363636,
+    11 #282828,
+    12 #1b1b1b,
+    13 #0d0d0d,
+    14 #000000;
+}
+
+@font-palette-values --clio-aa-p9-title-inactive {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #c5c5c5,
+    1 #bfbfbf,
+    2 #bababa,
+    3 #b4b4b4,
+    4 #aeaeae,
+    5 #a9a9a9,
+    6 #a3a3a3,
+    7 #9e9e9e,
+    8 #989898,
+    9 #929292,
+    10 #8d8d8d,
+    11 #878787,
+    12 #818181,
+    13 #7c7c7c,
+    14 #777777;
+}
+
+@font-palette-values --clio-aa-p9-button {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #cecece,
+    1 #bfbfbf,
+    2 #b0b0b0,
+    3 #a2a2a2,
+    4 #939393,
+    5 #848484,
+    6 #757575,
+    7 #676767,
+    8 #585858,
+    9 #494949,
+    10 #3a3a3a,
+    11 #2c2c2c,
+    12 #1d1d1d,
+    13 #0e0e0e,
+    14 #000000;
+}
+
+@font-palette-values --clio-aa-p9-button-held {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #707070,
+    1 #7a7a7a,
+    2 #848484,
+    3 #8e8e8e,
+    4 #999999,
+    5 #a3a3a3,
+    6 #adadad,
+    7 #b7b7b7,
+    8 #c1c1c1,
+    9 #cbcbcb,
+    10 #d6d6d6,
+    11 #e0e0e0,
+    12 #eaeaea,
+    13 #f4f4f4,
+    14 #ffffff;
+}
+
+@font-palette-values --clio-aa-p9-button-disabled {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #d5d5d5,
+    1 #cecece,
+    2 #c7c7c7,
+    3 #c1c1c1,
+    4 #bababa,
+    5 #b3b3b3,
+    6 #acacac,
+    7 #a5a5a5,
+    8 #9f9f9f,
+    9 #989898,
+    10 #919191,
+    11 #8a8a8a,
+    12 #848484,
+    13 #7d7d7d,
+    14 #777777;
+}
+
+@font-palette-values --clio-aa-db-button {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #c3bcac,
+    1 #b9b2a3,
+    2 #aea89a,
+    3 #a49e91,
+    4 #999488,
+    5 #8f8a80,
+    6 #848077,
+    7 #7a766e,
+    8 #6f6c65,
+    9 #65625d,
+    10 #5a5854,
+    11 #504e4b,
+    12 #454442,
+    13 #3b3a39,
+    14 #313131;
+}
+
+@font-palette-values --clio-aa-db-button-disabled {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #cac2b2,
+    1 #c6bfaf,
+    2 #c3bcad,
+    3 #c0b9ab,
+    4 #bdb6a9,
+    5 #bab3a7,
+    6 #b7b0a4,
+    7 #b4ada2,
+    8 #b1aaa0,
+    9 #ada89e,
+    10 #aaa59c,
+    11 #a7a299,
+    12 #a49f97,
+    13 #a19c95,
+    14 #9c9c94;
+}
+
+/* Clio Sans '97 Display: Charcoal's outlines, traced from Mac OS 9.0 drawing it
+   at 72 points (fonts/ClioSans97Display.woff2, tooling/trace-outline.py), for
+   every size that is not 12px or a multiple of it. */
+@font-face {
+  font-family: "Clio Sans '97 Display";
+  src: url("fonts/ClioSans97Display.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Other fonts, each with a licence that allows it:
+   - ChicagoFLF: a public-domain outline revival of Chicago (Robin Casady).
+   - Asap (variable, wdth + wght): SIL OFL 1.1, Omnibus-Type. The legal
+     stand-in for Charcoal that AI System 6 measured its Platinum title bar
+     against (width axis 113 for text, 123 for titles); now the fallback
+     behind Clio Sans '97.
+   Apple's own faces (Chicago, Geneva, Charcoal, Monaco) are never shipped;
+   the stacks below reach them only when the visitor already has them. */
+@font-face {
+  font-family: "ChicagoFLF";
+  src: url("fonts/ChicagoFLF.woff2") format("woff2"),
+       url("fonts/ChicagoFLF.woff") format("woff");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Asap";
+  src: url("fonts/Asap-Variable.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-display: swap;
+}
+
+/* Tokens: Macintosh System 6 is the default era. Measured values come from
+   System 6.0.8 running in Infinite Mac, read from the emulator canvas 1:1
+   (tooling/capture-system6.mjs).
+   Every value below is traceable in EVIDENCE.md. A value marked [M] there was
+   measured from real pixels; [I] is inferred; [A] is a deliberate web
+   adaptation (contrast, focus, touch). Platinum re-declares these tokens in
+   90-platinum.css under [data-era="platinum"]. */
+:root,
+[data-era="system6"],
+[data-era="system7"] {
+  /* 1-bit palette. System 6 on a compact Mac had two colours. */
+  --clio-ink: #000000;
+  --clio-paper: #ffffff;
+  --clio-face: #ffffff;
+  /* [A] Disabled text: System 6 drew it through a 50% grey pattern; a solid
+     grey keeps 5.6:1 on white instead of a dither the browser would blur. */
+  --clio-disabled: #696969;
+  /* Dimmed text is drawn through QuickDraw's 50% gray pattern, aligned to the
+     screen: the ink where x + y is odd survives (measured, File menu). The
+     pattern is fixed to the viewport the same way; #696969 is only the
+     fallback colour where background-clip: text is missing. */
+  --clio-disabled-dither: var(--clio-art-s6-gray50);
+  --clio-disabled-fill: transparent;
+  --clio-selection-bg: #000000;
+  --clio-selection-fg: #ffffff;
+
+  /* Type. Chicago 12 is the system font; Geneva is the application font. */
+  --clio-font-chrome: "Clio Sans '84", Chicago, "ChicagoFLF", Charcoal, Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-text: "Clio Text '84", Geneva, "Helvetica Neue", Arial, sans-serif;
+  /* Geneva 9: the Finder info line, icon names, status lines. */
+  --clio-font-small: "Clio Text '84 9", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-text-smoothing: none;
+  --clio-font-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
+  /* Chrome type at sizes other than 12px and its multiples (.display): an
+     outline face, smoothed. */
+  --clio-font-display: Chicago, "ChicagoFLF", Charcoal, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-size: 12px;
+  /* A bitmap face: no antialiasing, so a glyph on a half pixel stays 1-bit. */
+  --clio-font-smoothing: none;
+  /* Geneva 9: the Finder info line and icon names. */
+  --clio-font-size-small: 9px;
+  --clio-chrome-weight: 400;
+  --clio-font-stretch-text: normal;
+  --clio-font-stretch-title: normal;
+
+  /* Geometry */
+  --clio-line: 1px;
+  --clio-border: 1px solid var(--clio-ink);
+  --clio-radius: 0;
+  --clio-control-height: 20px;
+  --clio-field-height: 20px;
+  --clio-row-height: 16px;
+  --clio-gap: 8px;
+
+  /* Focus: [A] the era had no keyboard focus ring for buttons. A dotted frame
+     is how System 6 drew a dragged outline, so it reads as native and cannot
+     be confused with the default button's solid ring. */
+  --clio-focus-outline: 1px dotted var(--clio-ink);
+  --clio-focus-offset: 2px;
+
+  /* Desktop */
+  --clio-desktop: var(--clio-art-s6-desktop) 0 0 / 2px 2px repeat, #808080;
+
+  /* Window frame and title bar [M: measured at the emulator's exact 2x] */
+  --clio-window-bg: var(--clio-paper);
+  --clio-pane-bg: var(--clio-paper);
+  --clio-window-border: 1px solid var(--clio-ink);
+  --clio-window-shadow: 1px 1px 0 var(--clio-ink);
+  --clio-window-padding: 0;
+  --clio-titlebar-height: 17px;
+  --clio-titlebar-margin: 1px 0 0;
+  --clio-titlebar-padding: 2px 1px;
+  --clio-titlebar-border: 1px solid var(--clio-ink);
+  --clio-titlebar-row: 12px;
+  --clio-titlebar-stripe: 2px;
+  --clio-titlebar-bg:
+    linear-gradient(to bottom, var(--clio-ink) 0 1px, transparent 1px 2px)
+      0 0 / 100% var(--clio-titlebar-stripe) repeat-y content-box content-box,
+    var(--clio-paper);
+  --clio-titlebar-inactive-bg: var(--clio-paper);
+  --clio-title-font-size: 12px;
+  --clio-title-bg: var(--clio-paper);
+  --clio-title-fg: var(--clio-ink);
+  --clio-title-inactive-fg: var(--clio-ink);
+  --clio-title-padding: 0 0.5em;
+  --clio-titlebar-slot: 18px;
+  --clio-titlebar-shade-slot: 0px;
+  --clio-shade-display: none;
+  --clio-box-size: 11px;
+  --clio-box-inset: 7px;
+  /* 1px of paper between a box and the stripes (HD window, 6.0.8). */
+  --clio-box-isolation: 1px;
+
+  /* Menus */
+  --clio-menubar-height: 20px;
+  --clio-menubar-bg: var(--clio-paper);
+  --clio-menubar-border: 1px solid var(--clio-ink);
+  --clio-menubar-shadow: none;
+  --clio-menubar-padding: 0 8px;
+  /* "File" highlight is 41px wide: about 9px each side of the word. */
+  --clio-menu-title-padding: 0 9px;
+  /* The open title's highlight leaves the bar's top row white. */
+  --clio-menu-title-inset: 1px;
+  --clio-menu-title-active-bg: var(--clio-ink);
+  --clio-menu-title-active-fg: var(--clio-paper);
+  --clio-menu-title-active-shadow: none;
+  --clio-menu-bg: var(--clio-paper);
+  --clio-menu-border: 1px solid var(--clio-ink);
+  /* A menu hangs from the bar's own rule; it draws no top line. */
+  --clio-menu-border-top-width: 0;
+  --clio-menu-shadow: 1px 1px 0 var(--clio-ink);
+  --clio-menu-item-height: 16px;
+  --clio-menu-item-padding: 0 12px 0 13px;
+  --clio-menu-item-weight: 400;
+  --clio-menu-item-active-bg: var(--clio-ink);
+  --clio-menu-item-active-fg: var(--clio-paper);
+  --clio-menu-item-active-shadow: none;
+  /* A full 16px row with a 1-on 1-off dotted rule on its ninth line. */
+  --clio-menu-separator:
+    repeating-linear-gradient(to right, var(--clio-ink) 0 1px, transparent 1px 2px) 0 8px / 100% 1px no-repeat;
+  --clio-menu-separator-height: 16px;
+
+  /* Push buttons */
+  --clio-button-bg: var(--clio-paper);
+  --clio-button-fg: var(--clio-ink);
+  --clio-button-border: 1px solid var(--clio-ink);
+  /* 20px tall; the corner steps in 3, 1, 1 pixels on its first three rows
+     (OK and Cancel, 6.0.8), which a 4.5px radius reproduces exactly. */
+  /* The frame and the default ring are the real pixel staircases, cut from
+     System 6.0.8's Alert and Save dialog (tooling/frame-art.py) and drawn with
+     border-image; border-radius would antialias an arc. */
+  --clio-button-radius: 0;
+  --clio-button-frame: var(--clio-art-frame-s6-button);
+  --clio-button-frame-held: var(--clio-art-frame-s6-button-held);
+  --clio-button-frame-slice: 4;
+  --clio-ring-frame: var(--clio-art-frame-s6-ring);
+  --clio-ring-frame-slice: 7;
+  --clio-popup-frame: none;
+  --clio-popup-frame-slice: 3;
+  --clio-button-shadow: 0 0 0 0 transparent;
+  --clio-button-padding: 0 12px;
+  --clio-button-min-width: 59px;
+  --clio-button-weight: 400;
+  --clio-button-active-bg: transparent;   /* the held frame carries the ink face */
+  --clio-button-active-fg: var(--clio-paper);
+  --clio-button-active-shadow: 0 0 0 0 transparent;
+  /* Default button: Inside Macintosh's recipe is PenSize(3,3) around the
+     button inset by -4, so a 1px gap then a 3px ring. */
+  --clio-button-default-gap: 1px;
+  --clio-button-default-width: 3px;
+  --clio-button-default-radius: 8px;
+  --clio-button-disabled-fg: var(--clio-disabled);
+  --clio-button-disabled-border: 1px solid var(--clio-ink);
+
+  /* Check boxes and radio buttons */
+  --clio-check-size: 12px;
+  --clio-check-bg: var(--clio-paper);
+  --clio-check-border: 1px solid var(--clio-ink);
+  --clio-check-shadow: none;
+  --clio-check-mark: var(--clio-art-s6-check) 0 0 / 12px 12px no-repeat;
+  --clio-check-mark-origin: border-box;
+  --clio-check-pressed-border-width: 2px;
+  --clio-radio-size: 12px;
+  --clio-radio-off: var(--clio-art-s6-radio) 0 0 / 12px 12px no-repeat;
+  --clio-radio-on: var(--clio-art-s6-radio-dot) 3px 3px / 6px 6px no-repeat, var(--clio-art-s6-radio) 0 0 / 12px 12px no-repeat;
+  --clio-radio-pressed: var(--clio-art-s6-radio-focus) 0 0 / 12px 12px no-repeat;
+  --clio-radio-pressed-on: var(--clio-art-s6-radio-dot) 3px 3px / 6px 6px no-repeat, var(--clio-art-s6-radio-focus) 0 0 / 12px 12px no-repeat;
+
+  /* Text fields */
+  --clio-field-bg: var(--clio-paper);
+  --clio-field-border: 1px solid var(--clio-ink);
+  --clio-field-shadow: none;
+  /* Edit text: 1px frame, text inset 3px (Control Panel RAM cache field). */
+  --clio-field-padding: 3px;
+  --clio-field-focus-shadow: none;
+
+  /* Pop-up menus */
+  --clio-popup-bg: var(--clio-paper);
+  --clio-popup-border: 1px solid var(--clio-ink);
+  --clio-popup-radius: 0;
+  --clio-popup-shadow: 1px 1px 0 var(--clio-ink);
+  /* System 6 pop-up (Standard File folder menu, 6.0.8): an 18px box, 1px
+     frame, 1px shadow, no arrow; held, it inverts. */
+  --clio-popup-height: 18px;
+  --clio-popup-padding: 0 8px;
+  --clio-popup-arrow: none;
+  --clio-popup-weight: 400;
+
+  /* Scroll bars */
+  /* The lane line plus 14px; the window frame is the 16th line. The lane is
+     QuickDraw's ltGray, one dot in four. */
+  --clio-scrollbar-size: 15px;
+  --clio-scrollbar-track: var(--clio-art-s6-ltgray) 0 0 / 4px 2px repeat, #ffffff;
+  --clio-scrollbar-track-shadow: none;
+  --clio-scrollbar-thumb-bg: var(--clio-paper);
+  --clio-scrollbar-thumb-border: 1px solid var(--clio-ink);
+  --clio-scrollbar-thumb-shadow: none;
+  --clio-scrollbar-button-bg: var(--clio-paper);
+  --clio-scrollbar-button-shadow: none;
+  --clio-scrollbar-up: var(--clio-art-s6-up);
+  --clio-scrollbar-up-on: var(--clio-art-s6-up-on);
+  --clio-scrollbar-down: var(--clio-art-s6-down);
+  --clio-scrollbar-down-on: var(--clio-art-s6-down-on);
+  --clio-scrollbar-left: var(--clio-art-s6-left);
+  --clio-scrollbar-left-on: var(--clio-art-s6-left-on);
+  --clio-scrollbar-right: var(--clio-art-s6-right);
+  --clio-scrollbar-right-on: var(--clio-art-s6-right-on);
+
+  /* Dialogs */
+  --clio-dialog-bg: var(--clio-paper);
+  /* Modal frame (stop alert, 6.0.8): 1px ink, 2px paper, 2px ink; no shadow. */
+  --clio-modal-border: 1px solid var(--clio-ink);
+  --clio-modal-frame: inset 0 0 0 2px var(--clio-paper), inset 0 0 0 4px var(--clio-ink);
+  --clio-modal-padding: 18px 20px;
+  --clio-plain-dialog-border: 1px solid var(--clio-ink);
+  --clio-plain-dialog-shadow: 2px 2px 0 var(--clio-ink);
+
+  /* Bars, lists, groups, progress, tabs */
+  --clio-details-bg: var(--clio-paper);
+  /* Finder's info line: 17 rows of Geneva 9, closed by 1px ink, 1px paper,
+     1px ink. */
+  --clio-details-border: 3px double var(--clio-ink);
+  --clio-details-font-size: 9px;
+  --clio-details-height: 17px;
+  --clio-details-padding: 0 15px;
+  --clio-scrollbar-corner: var(--clio-art-s6-grow) 0 0 / 14px 14px no-repeat, var(--clio-paper);
+  --clio-list-bg: var(--clio-paper);
+  --clio-list-border: 1px solid var(--clio-ink);
+  --clio-list-shadow: none;
+  --clio-list-row: 16px;
+  --clio-group-border: 1px solid var(--clio-ink);
+  --clio-group-shadow: none;
+  --clio-group-bg: transparent;
+  --clio-progress-height: 12px;
+  --clio-progress-bg: var(--clio-paper);
+  --clio-progress-border: 1px solid var(--clio-ink);
+  --clio-progress-shadow: none;
+  /* Finder copy progress (6.0.8): 12px, 1px frame, dkGray fill. */
+  --clio-progress-fill: var(--clio-art-s6-dkgray) 0 0 / 4px 2px repeat, var(--clio-ink);
+  --clio-tab-height: 20px;
+  --clio-tab-bg: var(--clio-paper);
+  --clio-tab-active-bg: var(--clio-paper);
+  --clio-tab-panel-bg: var(--clio-paper);
+  --clio-tab-panel-border: 1px solid var(--clio-ink);
+  --clio-label-bg: var(--clio-paper);
+  --clio-label-fg: var(--clio-ink);
+  --clio-label-selected-bg: var(--clio-ink);
+  --clio-label-selected-fg: var(--clio-paper);
+
+  /* Control Strip: System 6 had none; drawn here in its ink and paper, at the
+     Mac OS 9 geometry (adapted). */
+  --clio-strip-height: 24px;
+  --clio-strip-bg: var(--clio-paper);
+  --clio-strip-line: 1px solid var(--clio-ink);
+  --clio-strip-cell-shadow: none;
+  --clio-strip-sunken-shadow: none;
+  --clio-strip-sunken-lines: linear-gradient(transparent, transparent);
+  --clio-strip-pressed-bg: var(--clio-ink);
+  --clio-strip-pressed-shadow: inset 0 0 0 2px var(--clio-paper);
+  --clio-strip-cap-width: 13px;
+  --clio-strip-scroll-width: 13px;
+  --clio-strip-module-width: 30px;
+  --clio-strip-icon-inset: 2px;
+  --clio-strip-menu-top: 7px;
+  --clio-strip-menu-inset: 4px;
+  --clio-strip-handle-width: 18px;
+  --clio-strip-tab-width: 18px;
+  --clio-strip-cap: var(--clio-art-s6-strip-cap);
+  --clio-strip-back: var(--clio-art-s6-strip-back);
+  --clio-strip-forward: var(--clio-art-s6-strip-forward);
+  --clio-strip-menu: var(--clio-art-s6-strip-menu);
+  --clio-strip-handle: var(--clio-art-s6-strip-handle);
+  --clio-strip-tab: var(--clio-art-s6-strip-tab);
+}
+
+/* Inline art. Pixel-grid SVGs, never Apple bitmaps: the System 6 check, radio
+   ring and dot come from system.css (MIT, Sakun Acharige); Platinum's art lives
+   in 90-platinum.css; everything here is drawn for clio.css. See
+   THIRD-PARTY.md. */
+:root {
+  --clio-art-s6-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 1h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1zM4 4h1v1h-1zM5 5h1v1h-1zM6 6h1v1h-1zM7 7h1v1h-1zM8 8h1v1h-1zM9 9h1v1h-1zM10 10h1v1h-1zM11 11h1v1h-1zM11 0h1v1h-1zM10 1h1v1h-1zM9 2h1v1h-1zM8 3h1v1h-1zM7 4h1v1h-1zM6 5h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1zM3 8h1v1h-1zM2 9h1v1h-1zM1 10h1v1h-1zM0 11h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1H4zM0 4h1v4H0zM11 4h1v4h-1zM2 1h2v1H2zM8 1h2v1H8zM10 2h1v2h-1zM1 2h1v2H1zM4 11h4v1H4zM2 10h2v1H2zM8 10h2v1H8zM10 8h1v2h-1zM1 8h1v2H1z'/%3E%3C/svg%3E");
+  --clio-art-s6-radio-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 1h2v2H2zM8 1h2v2H8zM9 2h2v2H9zM1 2h2v2H1zM4 10h4v2H4zM2 9h2v2H2zM8 9h2v2H8zM9 8h2v2H9zM1 8h2v2H1z'/%3E%3C/svg%3E");
+  --clio-art-s6-radio-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM1 5h4v1H1zM0 1h6v4H0z'/%3E%3C/svg%3E");
+  --clio-art-s6-submenu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
+  --clio-art-s6-submenu-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath fill='%23fff' d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
+  --clio-art-s6-desktop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3Cpath fill='%23fff' d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3C/svg%3E");
+  /* Measured from System 6.0.8 (tooling/s6-art.py). */
+  --clio-art-s6-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h3v1h-3zM4 4h5v1h-5zM3 5h7v1h-7zM2 6h9v1h-9zM4 7h5v1h-5zM4 8h5v1h-5zM4 9h5v1h-5zM4 10h5v1h-5z'/%3E%3Cpath fill='%23000' d='M6 1h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM8 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM2 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM0 7h4v1h-4zM9 7h4v1h-4zM3 8h1v1h-1zM9 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM3 10h1v1h-1zM9 10h1v1h-1zM3 11h7v1h-7z'/%3E%3C/svg%3E");
+  --clio-art-s6-up-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 2h3v1h-3zM4 3h5v1h-5zM3 4h7v1h-7zM2 5h9v1h-9zM1 6h11v1h-11zM0 7h13v1h-13zM3 8h7v1h-7zM3 9h7v1h-7zM3 10h7v1h-7zM3 11h7v1h-7z'/%3E%3C/svg%3E");
+  --clio-art-s6-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 3h5v1h-5zM4 4h5v1h-5zM4 5h5v1h-5zM4 6h5v1h-5zM2 7h9v1h-9zM3 8h7v1h-7zM4 9h5v1h-5zM5 10h3v1h-3zM6 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM3 5h1v1h-1zM9 5h1v1h-1zM0 6h4v1h-4zM9 6h4v1h-4zM1 7h1v1h-1zM11 7h1v1h-1zM2 8h1v1h-1zM10 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM4 10h1v1h-1zM8 10h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM6 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h7v1h-7zM3 4h7v1h-7zM3 5h7v1h-7zM0 6h13v1h-13zM1 7h11v1h-11zM2 8h9v1h-9zM3 9h7v1h-7zM4 10h5v1h-5zM5 11h3v1h-3z'/%3E%3C/svg%3E");
+  --clio-art-s6-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M5 2h1v1h-1zM4 3h2v1h-2zM3 4h7v1h-7zM2 5h8v1h-8zM1 6h9v1h-9zM2 7h8v1h-8zM3 8h7v1h-7zM4 9h2v1h-2zM5 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M6 0h1v1h-1zM5 1h2v1h-2zM4 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM6 3h5v1h-5zM2 4h1v1h-1zM10 4h1v1h-1zM1 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM10 7h1v1h-1zM2 8h1v1h-1zM10 8h1v1h-1zM3 9h1v1h-1zM6 9h5v1h-5zM4 10h1v1h-1zM6 10h1v1h-1zM5 11h2v1h-2zM6 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-left-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 0h1v1h-1zM5 1h2v1h-2zM4 2h3v1h-3zM3 3h8v1h-8zM2 4h9v1h-9zM1 5h10v1h-10zM1 6h10v1h-10zM1 7h10v1h-10zM2 8h9v1h-9zM3 9h8v1h-8zM4 10h3v1h-3zM5 11h2v1h-2zM6 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M8 2h1v1h-1zM8 3h2v1h-2zM4 4h7v1h-7zM4 5h8v1h-8zM4 6h9v1h-9zM4 7h8v1h-8zM4 8h7v1h-7zM8 9h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM7 1h2v1h-2zM7 2h1v1h-1zM9 2h1v1h-1zM3 3h5v1h-5zM10 3h1v1h-1zM3 4h1v1h-1zM11 4h1v1h-1zM3 5h1v1h-1zM12 5h1v1h-1zM3 6h1v1h-1zM13 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM3 9h5v1h-5zM10 9h1v1h-1zM7 10h1v1h-1zM9 10h1v1h-1zM7 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-right-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM7 1h2v1h-2zM7 2h3v1h-3zM3 3h8v1h-8zM3 4h9v1h-9zM3 5h10v1h-10zM3 6h10v1h-10zM3 7h10v1h-10zM3 8h9v1h-9zM3 9h8v1h-8zM7 10h3v1h-3zM7 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM1 5h3v1h-3zM5 5h1v1h-1zM7 5h3v1h-3zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM2 8h1v1h-1zM5 8h1v1h-1zM8 8h1v1h-1zM5 9h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-ltgray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM2 1h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M1 0h3v1h-3zM0 1h2v1h-2zM3 1h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-grow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM2 4h1v1h-1zM8 4h5v1h-5zM2 5h1v1h-1zM8 5h1v1h-1zM12 5h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM12 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM2 8h7v1h-7zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM4 10h1v1h-1zM12 10h1v1h-1zM4 11h1v1h-1zM12 11h1v1h-1zM4 12h9v1h-9z'/%3E%3C/svg%3E");
+  --clio-art-s6-dkgray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM2 0h2v1h-2zM0 1h3v1h-3z'/%3E%3Cpath fill='%23fff' d='M1 0h1v1h-1zM3 1h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-menucheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
+  /* Frames cut from captures by tooling/frame-art.py. */
+  --clio-art-frame-s6-button: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEUAAAAAAAD///+D3c/SAAAAAXRSTlMAQObYZgAAACpJREFUeJxjYAxgYBINZWBiYWFgCmB0YGJgYABhBqmVDEx//jAwMAYwAAA66QRtNyAoFwAAAABJRU5ErkJggg==");
+  --clio-art-frame-s6-button-held: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB1JREFUeJxjkGFgSmZgYmBg/N/IxABiMNSDSRkGACm1Aqb7EOVpAAAAAElFTkSuQmCC");
+  --clio-art-frame-s6-ring: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAADRJREFUeJxjYD/AIP+BSYGDsYaB5csahg9yTB8+MDEwgJCAAFPDPyaeBAb7H0wPfjCwHwAAEpMM/gNXK+MAAAAASUVORK5CYII=");
+  --clio-art-frame-p9-button: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAGFBMVEUAAAAAAAB3d3fd3d27u7uqqqoiIiL///+EaqngAAAAAXRSTlMAQObYZgAAADxJREFUeJxjYEgUTGBgYnyk9JCBMUWYYa8O03qGPXIbmBj+MDAwMIERY8pFhbN2jIyOD/7fZ/ov/96eAQBghg8JraaOFgAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-button-held: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAGFBMVEUAAAAAAAB3d3dVVVVmZmYiIiKIiIhEREQ39d/AAAAAAXRSTlMAQObYZgAAAD9JREFUeJxjYAgUDGBgYVRT+8XAGC5zgJ+PUVxG8NErJgZGBgYGJgaGfwwMLA6vH7i8YmRUdfg9n+m/9ur3DAAxwg5nPuolSwAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-ring: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANBAMAAACAxflPAAAAG1BMVEUAAAAAAAB3d3fd3d3MzMy7u7uqqqoiIiKIiIhznn7oAAAAAXRSTlMAQObYZgAAAFpJREFUeJxjZGDnYmB7ycDCwKPAwPjzAwujgjEDg+x6xuLDrx6oOXEwCCcxMDAlCTAx/GMAISYGCEDQTGAOUyKLAoOKQgIjY6gAA9PO+4wMElwMDO8+MELNBwCaGBDQEM8mggAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-button-disabled: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEUAAACIiIjd3d2RXqmqAAAAAXRSTlMAQObYZgAAACFJREFUeJxjYA1hYBINZWAKYHRgYmBgQMYMUisZGFhDGAAtsQJ9dgAT/gAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-popup: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAGFBMVEUAAAAAAAB3d3fd3d27u7uqqqoiIiL///+EaqngAAAAAXRSTlMAQObYZgAAACtJREFUeJxjYEhMYGBi5H/IwJh+klWbQYCBQYAl/OQnOwbGAEUGpv+C9gwAea0HTcaLsPwAAAAASUVORK5CYII=");
+  --clio-art-frame-p9-popup-disabled: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAgMAAAC5PL9AAAAACVBMVEUAAACIiIjd3d2RXqmqAAAAAXRSTlMAQObYZgAAAB1JREFUeJxjZLVmEg5gChBhcGBh0ljAtOENI6s1ACDmA/qjrWTUAAAAAElFTkSuQmCC");
+  --clio-art-s6-gray50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3C/svg%3E");
+  --clio-art-s6-menucheck-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 1h13v22H1z'/%3E%3Cpath d='M0 0h15v1H0zM0 23h15v1H0zM0 1h1v22H0zM14 1h1v22h-1zM3 8h8v1H3zM3 15h8v1H3zM3 9h1v6H3zM10 9h1v6h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M4 1h1v8H4zM3 2h1v6H3zM2 3h1v4H2zM1 4h1v2H1z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v8H5zM6 2h1v6H6zM7 3h1v4H7zM8 4h1v2H8z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 1h9l8 8v6l-8 8H0z'/%3E%3Cpath d='M0 0h10v1H0zM10 1h1v1h-1zM11 2h1v1h-1zM12 3h1v1h-1zM13 4h1v1h-1zM14 5h1v1h-1zM15 6h1v1h-1zM16 7h1v1h-1zM17 8h1v8h-1zM16 16h1v1h-1zM15 17h1v1h-1zM14 18h1v1h-1zM13 19h1v1h-1zM12 20h1v1h-1zM11 21h1v1h-1zM10 22h1v1h-1zM0 23h10v1H0zM5 6h1v1H5zM5 9h1v1H5zM5 12h1v1H5zM5 15h1v1H5zM5 18h1v1H5z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 1h9l8 8v6l-8 8H0z'/%3E%3Cpath d='M0 0h10v1H0zM10 1h1v1h-1zM11 2h1v1h-1zM12 3h1v1h-1zM13 4h1v1h-1zM14 5h1v1h-1zM15 6h1v1h-1zM16 7h1v1h-1zM17 8h1v8h-1zM16 16h1v1h-1zM15 17h1v1h-1zM14 18h1v1h-1zM13 19h1v1h-1zM12 20h1v1h-1zM11 21h1v1h-1zM10 22h1v1h-1zM0 23h10v1H0zM5 6h1v1H5zM5 9h1v1H5zM5 12h1v1H5zM5 15h1v1H5zM5 18h1v1H5z'/%3E%3C/svg%3E");
+}
+
+/* Base. clio.css styles elements only inside its own components, plus bare
+   form controls through :where(), so every rule here has zero specificity and
+   your own CSS always wins. It never restyles <body> unless you ask with
+   .desktop. */
+:where(.desktop) {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--clio-desktop);
+  color: var(--clio-ink);
+}
+
+:where(.window, .menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"],
+  .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) {
+  box-sizing: border-box;
+  color: var(--clio-ink);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-weight: var(--clio-chrome-weight);
+  font-stretch: var(--clio-font-stretch-text);
+  font-synthesis: none;
+  line-height: 16px;
+  -webkit-font-smoothing: var(--clio-font-smoothing);
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) *,
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) *::before,
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) *::after {
+  box-sizing: border-box;
+}
+
+/* Application text (Geneva role) for content areas. */
+:where(.window-pane, .modal-contents, .alert-contents, .text, .details-bar, .listbox, [role="listbox"], .status-bar, .icon, input, textarea) {
+  font-family: var(--clio-font-text);
+  font-stretch: var(--clio-font-stretch-text);
+  -webkit-font-smoothing: var(--clio-text-smoothing);
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(h1, h2, h3, h4, .heading) {
+  margin: 0 0 8px;
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-weight: var(--clio-chrome-weight);
+  line-height: 16px;
+}
+
+:where(.display) {
+  font-family: var(--clio-font-display);
+  -webkit-font-smoothing: auto;
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(p) {
+  margin: 0 0 8px;
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(a) {
+  color: inherit;
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(code, kbd, pre, samp) {
+  font-family: var(--clio-font-mono);
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(hr) {
+  height: 0;
+  margin: 8px 0;
+  border: 0;
+  border-top: var(--clio-border);
+}
+
+:where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) ::selection {
+  background: var(--clio-selection-bg);
+  color: var(--clio-selection-fg);
+}
+
+/* A row of controls with their label (system.css name kept). */
+:where(.field-row, .field-row-stacked) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:where(.field-row-stacked) {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+:where(.field-row, .field-row-stacked) + :where(.field-row, .field-row-stacked) {
+  margin-top: 6px;
+}
+
+/* Hidden, still read aloud. */
+:where(.visually-hidden, .title-bar button > span) {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* Windows.
+   Markup: .window > .title-bar (> .close, .title, .resize [, .shade]) >
+   optional .details-bar > .window-pane. system.css markup (.title-bar
+   button.close / button.resize, .inactive-title-bar) and AI System 6 markup
+   (.close-box, .resize-box, .shade-box, h1/h2 as the title) also work. */
+:where(.window) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  padding: var(--clio-window-padding);
+  border: var(--clio-window-border);
+  background: var(--clio-window-bg);
+  box-shadow: var(--clio-window-shadow);
+}
+
+/* ---- Title bar ---------------------------------------------------------
+   System 6: a 17px box under a 1px inset: 2px of paper, six 1px ink stripes
+   on a 2px period across a 12px row, 2px of paper, then the 1px rule. */
+.title-bar,
+.inactive-title-bar {
+  --clio-tb-close: var(--clio-titlebar-slot);
+  --clio-tb-zoom: var(--clio-titlebar-slot);
+  --clio-tb-shade: var(--clio-titlebar-shade-slot);
+  --clio-tb-gutter: max(var(--clio-tb-close), calc(var(--clio-tb-zoom) + var(--clio-tb-shade)));
+  position: relative;
+  display: grid;
+  flex: none;
+  grid-template-columns:
+    var(--clio-tb-gutter)
+    minmax(0, 1fr)
+    var(--clio-tb-zoom)
+    calc(var(--clio-tb-gutter) - var(--clio-tb-zoom));
+  grid-template-rows: var(--clio-titlebar-row);
+  align-items: start;
+  box-sizing: border-box;
+  height: var(--clio-titlebar-height);
+  margin: var(--clio-titlebar-margin);
+  padding: var(--clio-titlebar-padding);
+  border-bottom: var(--clio-titlebar-border);
+  background: var(--clio-titlebar-bg);
+  font-family: var(--clio-font-chrome);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* A slot is reserved only for a control that is really there, so the title
+   stays centred on the whole bar. */
+.title-bar:not(:has(> :is(.resize, .resize-box, .zoom))) { --clio-tb-zoom: 0px; }
+.title-bar:not(:has(> :is(.shade, .shade-box, .collapse))) { --clio-tb-shade: 0px; }
+
+.title-bar > :is(.title, h1, h2, h3),
+.inactive-title-bar > :is(.title, h1, h2, h3) {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: center;
+  max-width: 100%;
+  height: var(--clio-titlebar-row);
+  margin: 0;
+  padding: var(--clio-title-padding);
+  overflow: hidden;
+  background: var(--clio-title-bg);
+  color: var(--clio-title-fg);
+  font-family: var(--clio-font-window-title, var(--clio-font-chrome));
+  font-size: var(--clio-title-font-size);
+  font-stretch: var(--clio-font-stretch-title);
+  font-weight: var(--clio-chrome-weight);
+  line-height: var(--clio-titlebar-row);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- Close, zoom and collapse boxes ------------------------------------ */
+.title-bar > :is(button, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse) {
+  position: relative;
+  grid-row: 1;
+  width: var(--clio-box-size);
+  min-width: 0;
+  height: var(--clio-box-size);
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--clio-ink);
+  border-radius: 0;
+  background: var(--clio-paper);
+  box-shadow: 0 0 0 var(--clio-box-isolation) var(--clio-paper);
+  color: transparent;
+  font-size: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+  touch-action: manipulation;
+}
+
+.title-bar > :is(.close, .close-box) {
+  grid-column: 1;
+  justify-self: start;
+  margin-left: var(--clio-box-inset);
+}
+
+.title-bar > :is(.resize, .resize-box, .zoom) {
+  grid-column: 3;
+  justify-self: end;
+  margin-right: var(--clio-box-inset);
+}
+
+/* System 6 had no WindowShade box; only an era that opens the slot shows it. */
+.title-bar > :is(.shade, .shade-box, .collapse) {
+  display: var(--clio-shade-display);
+  grid-column: 4;
+  justify-self: end;
+}
+
+/* Held close or zoom box: System 6 draws the same starburst in both
+   (measured, 6.0.8); the zoom box's inner square goes while it is held. */
+.title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom):is(:active, .active) {
+  background: var(--clio-art-s6-burst) 0 0 / 11px 11px no-repeat border-box, var(--clio-paper);
+}
+
+/* Zoom box: an inner square sharing the outer frame's top-left corner,
+   7 of the frame's 11 pixels (System 6's 7:11 ratio). */
+.title-bar > :is(.resize, .resize-box, .zoom)::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 7px;
+  height: 7px;
+  border-right: 1px solid var(--clio-ink);
+  border-bottom: 1px solid var(--clio-ink);
+  box-sizing: border-box;
+}
+
+.title-bar > :is(.resize, .resize-box, .zoom):is(:active, .active)::before {
+  opacity: 0;
+}
+
+.title-bar > button:focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: calc(var(--clio-box-isolation) - 1px);
+}
+
+/* ---- Inactive windows ----------------------------------------------------
+   System 6 draws a background window's title bar as a plain strip with its
+   name: no stripes, no close box, no zoom box. */
+.window.inactive > .title-bar,
+.inactive-title-bar {
+  background: var(--clio-titlebar-inactive-bg);
+}
+
+.window.inactive > .title-bar > :is(.title, h1, h2, h3),
+.inactive-title-bar > :is(.title, h1, h2, h3) {
+  color: var(--clio-title-inactive-fg);
+}
+
+.window.inactive > .title-bar > :not(.title, h1, h2, h3),
+.inactive-title-bar > :not(.title, h1, h2, h3) {
+  visibility: hidden;
+}
+
+/* ---- Window body ------------------------------------------------------- */
+:where(.window-pane) {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 8px;
+  overflow: auto;
+  background: var(--clio-pane-bg);
+  font-size: var(--clio-font-size);
+  line-height: 16px;
+}
+
+/* Finder's info line ("3 items  1,234K in disk"), ruled twice below. */
+:where(.details-bar) {
+  display: flex;
+  flex: none;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: var(--clio-details-height);
+  padding: var(--clio-details-padding);
+  border-bottom: var(--clio-details-border);
+  background: var(--clio-details-bg);
+  box-shadow: var(--clio-details-shadow, none);
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-details-font-size);
+  line-height: var(--clio-details-height);
+  white-space: nowrap;
+}
+
+:where(.separator) {
+  flex: none;
+  border-top: var(--clio-border);
+}
+
+/* A status line under the pane. */
+:where(.status-bar) {
+  display: flex;
+  flex: none;
+  gap: 12px;
+  padding: 1px 8px;
+  border-top: var(--clio-border);
+  background: var(--clio-details-bg);
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-font-size-small);
+  line-height: 14px;
+}
+
+/* Menu bar and menus.
+   Markup: <ul role="menubar" class="menu-bar"> <li role="none"><button
+   role="menuitem" aria-haspopup="true" aria-expanded="false">File</button>
+   <ul role="menu" class="menu">…</ul></li></ul>. A menu opens while its title
+   has aria-expanded="true" or the class .open (your script toggles either), or
+   while focus is inside it, so it works with the keyboard and no script.
+   system.css's role="menu-bar" / role="menu-item" markup is accepted too. */
+:where(.menu-bar, ul[role="menubar"], ul[role="menu-bar"]) {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  height: var(--clio-menubar-height);
+  margin: 0;
+  padding: var(--clio-menubar-padding);
+  list-style: none;
+  border-bottom: var(--clio-menubar-border);
+  background: var(--clio-menubar-bg);
+  box-shadow: var(--clio-menubar-shadow);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+/* Menu titles: a <button>, an <a>, or the <li> itself (system.css). */
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a, span),
+:where([role="menu-bar"]) > [role="menu-item"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: var(--clio-menu-title-padding);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  line-height: 16px;
+  text-decoration: none;
+  white-space: nowrap;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a, span):is([aria-expanded="true"], .active),
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li.open > :is(button, a, span),
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a):active,
+:where([role="menu-bar"]) > [role="menu-item"]:is(:focus, :focus-within) {
+  background: var(--clio-menu-title-active-bg);
+  box-shadow: var(--clio-menu-title-active-shadow);
+  color: var(--clio-menu-title-active-fg);
+  outline: none;
+}
+
+:where(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: -3px;
+}
+
+/* ---- Menu panel ----------------------------------------------------------
+   System 6: paper, a 1px ink frame and a 1px ink drop shadow. */
+:where(.menu, ul[role="menu"]) {
+  z-index: 10;
+  display: block;
+  box-sizing: border-box;
+  min-width: 140px;
+  width: max-content;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: var(--clio-menu-border);
+  border-top-width: var(--clio-menu-border-top-width);
+  background: var(--clio-menu-bg);
+  box-shadow: var(--clio-menu-shadow);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+}
+
+/* Inside a menu bar or a parent item, a menu is a drop-down. */
+:where(.menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"]) li > :is(.menu, ul[role="menu"]) {
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 0;
+  display: none;
+}
+
+:where(.menu, [role="menu"]) li > :is(.menu, ul[role="menu"]) {
+  top: -1px;
+  left: 100%;
+}
+
+:where(.menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"]) li:is(.open, :focus-within) > :is(.menu, ul[role="menu"]),
+:where(.menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"]) li > [aria-expanded="true"] + :is(.menu, ul[role="menu"]) {
+  display: block;
+}
+
+/* ---- Menu items ---------------------------------------------------------- */
+:where(.menu, [role="menu"]) > li {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--clio-menu-item-height);
+  padding: var(--clio-menu-item-padding);
+  font-weight: var(--clio-menu-item-weight);
+  line-height: var(--clio-menu-item-height);
+  white-space: nowrap;
+  cursor: default;
+}
+
+:where(.menu, [role="menu"]) > li:has(> :is(a, button)) {
+  padding: 0;
+}
+
+:where(.menu, [role="menu"]) > li > :is(a, button) {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  min-height: var(--clio-menu-item-height);
+  margin: 0;
+  padding: var(--clio-menu-item-padding);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(.menu, [role="menu"]) > li:not(.disabled, [aria-disabled="true"], .separator, [role="separator"]):is(:hover, :focus-within, .active),
+:where(.menu, [role="menu"]) > li > :is(a, button):not([aria-disabled="true"], :disabled):is(:hover, :focus-visible, .active) {
+  background: var(--clio-menu-item-active-bg);
+  box-shadow: var(--clio-menu-item-active-shadow);
+  color: var(--clio-menu-item-active-fg);
+  outline: none;
+}
+
+:where(.menu, [role="menu"]) > li:is(.disabled, [aria-disabled="true"]),
+:where(.menu, [role="menu"]) > li > :is(a, button):is(:disabled, [aria-disabled="true"]) {
+  color: var(--clio-disabled);
+  background-image: var(--clio-disabled-dither);
+  background-size: 2px 2px;
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
+}
+
+/* Keyboard shortcut column, right-aligned. */
+:where(.menu, [role="menu"]) :is(kbd, .shortcut) {
+  margin-left: auto;
+  padding-left: 24px;
+  font: inherit;
+}
+
+/* Check mark column. */
+:where(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"])::before,
+:where(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 9px;
+  height: 8px;
+  margin-top: -4px;
+  background: var(--clio-art-s6-menucheck) 0 0 / 9px 8px no-repeat;
+}
+
+:where(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active)::before,
+:where(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked):is(:hover, :focus-visible, .active)::before {
+  background-image: var(--clio-art-s6-menucheck-on);
+}
+
+/* Submenu arrow. */
+:where(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"]))::after,
+:where(.menu, [role="menu"]) > li > [aria-haspopup="true"]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  width: 6px;
+  height: 11px;
+  margin-top: -5.5px;
+  background: var(--clio-art-s6-submenu) 0 0 / 6px 11px no-repeat;
+}
+
+:where(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"])):is(:hover, :focus-within, .active)::after {
+  background-image: var(--clio-art-s6-submenu-on);
+}
+
+/* Separator: System 6 draws a dotted grey rule through a full-height row. */
+:where(.menu, [role="menu"]) > :is(li.separator, li[role="separator"], hr) {
+  display: block;
+  height: var(--clio-menu-separator-height);
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: var(--clio-menu-separator);
+}
+
+/* system.css divider items keep their label row and add the rule below. */
+:where(.menu, [role="menu"]) > li.divider {
+  border-bottom: 1px dotted var(--clio-ink);
+}
+
+/* Controls. Bare elements are styled through :where(), so the rules carry no
+   specificity. State model (from AI System 6's fidelity contract): hover never
+   changes a push button; pressed comes only from pointer-down, Space or
+   Enter (:active) or from the .active class; disabled keeps full geometry. */
+
+/* ---- Push buttons -------------------------------------------------------- */
+:where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--clio-button-min-width);
+  min-height: var(--clio-control-height);
+  margin: 0;
+  padding: var(--clio-button-padding);
+  border: var(--clio-button-border);
+  border-radius: var(--clio-button-radius);
+  background: var(--clio-button-bg);
+  box-shadow: var(--clio-button-shadow);
+  border-image: var(--clio-button-frame) var(--clio-button-frame-slice) fill / calc(var(--clio-button-frame-slice) * 1px) stretch;
+  color: var(--clio-button-fg);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-stretch: var(--clio-font-stretch-text);
+  font-weight: var(--clio-button-weight);
+  -webkit-font-smoothing: var(--clio-font-smoothing);
+  line-height: 14px;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled, .disabled):is(:active, .active) {
+  background: var(--clio-button-active-bg);
+  box-shadow: var(--clio-button-active-shadow);
+  border-image-source: var(--clio-button-frame-held);
+  color: var(--clio-button-active-fg);
+}
+
+/* Default button: the ring that says Return will press it. Drawn as its own
+   rounded rectangle (Inside Macintosh: PenSize(3,3), InsetRect(-4,-4),
+   FrameRoundRect(16,16)), so its corners do not follow the button's. */
+:where(.default, .btn-default, button[type="submit"].default) {
+  position: relative;
+  border-radius: var(--clio-button-radius);
+}
+
+:where(.default, .btn-default)::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1px - var(--clio-button-default-gap) - var(--clio-button-default-width));
+  border: var(--clio-button-default-width) solid var(--clio-ink);
+  border-radius: var(--clio-button-default-radius);
+  border-image: var(--clio-ring-frame) var(--clio-ring-frame-slice) / calc(var(--clio-ring-frame-slice) * 1px) stretch;
+  pointer-events: none;
+}
+
+:where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):is(:disabled, .disabled) {
+  border: var(--clio-button-disabled-border);
+  color: var(--clio-button-disabled-fg);
+  /* System 6: the label through the 50% pattern, the frame left solid. */
+  background-image: var(--clio-disabled-dither), linear-gradient(var(--clio-button-bg), var(--clio-button-bg));
+  background-size: 2px 2px, auto;
+  background-attachment: fixed, scroll;
+  -webkit-background-clip: text, border-box;
+  background-clip: text, border-box;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
+  /* The frame without its face, so the dimmed label shows through. */
+  border-image-source: var(--clio-button-frame-disabled, var(--clio-button-frame));
+  border-image-slice: var(--clio-button-frame-slice);
+}
+
+:where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: var(--clio-focus-offset);
+}
+
+:where(.default, .btn-default):focus-visible {
+  outline-offset: calc(var(--clio-focus-offset) + 4px);
+}
+
+/* ---- Check boxes ---------------------------------------------------------- */
+:where(input[type="checkbox"]) {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--clio-check-size);
+  height: var(--clio-check-size);
+  margin: 0;
+  border: var(--clio-check-border);
+  border-radius: 0;
+  background: var(--clio-check-bg);
+  box-shadow: var(--clio-check-shadow);
+  vertical-align: -2px;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(input[type="checkbox"]):checked {
+  background: var(--clio-check-mark), var(--clio-check-bg);
+  background-origin: var(--clio-check-mark-origin);
+}
+
+:where(input[type="checkbox"]):not(:disabled):active {
+  border-width: var(--clio-check-pressed-border-width);
+}
+
+:where(input[type="checkbox"]):disabled {
+  border-color: var(--clio-disabled);
+  opacity: 0.6;
+}
+
+/* ---- Radio buttons -------------------------------------------------------- */
+:where(input[type="radio"]) {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--clio-radio-size);
+  height: var(--clio-radio-size);
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--clio-radio-off);
+  vertical-align: -2px;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(input[type="radio"]):checked {
+  background: var(--clio-radio-on);
+}
+
+:where(input[type="radio"]):not(:disabled):active {
+  background: var(--clio-radio-pressed);
+}
+
+:where(input[type="radio"]):checked:not(:disabled):active {
+  background: var(--clio-radio-pressed-on);
+}
+
+:where(input[type="radio"]):disabled {
+  opacity: 0.45;
+}
+
+:where(input[type="checkbox"], input[type="radio"]):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: var(--clio-focus-offset);
+}
+
+:where(input[type="checkbox"], input[type="radio"]) + label,
+:where(label):has(> :is(input[type="checkbox"], input[type="radio"])) {
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+}
+
+:where(label):has(> :is(input[type="checkbox"], input[type="radio"])) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+:where(input[type="checkbox"], input[type="radio"]):disabled + label,
+:where(label):has(> :is(input[type="checkbox"], input[type="radio"]):disabled) {
+  color: var(--clio-disabled);
+  background-image: var(--clio-disabled-dither);
+  background-size: 2px 2px;
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
+}
+
+/* ---- Text fields ---------------------------------------------------------- */
+:where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
+  input[type="number"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"],
+  input[type="datetime-local"], input[type="month"], input[type="week"], textarea) {
+  box-sizing: border-box;
+  min-height: var(--clio-field-height);
+  margin: 0;
+  padding: var(--clio-field-padding);
+  border: var(--clio-field-border);
+  border-radius: 0;
+  background: var(--clio-field-bg);
+  box-shadow: var(--clio-field-shadow);
+  color: var(--clio-ink);
+  font-family: var(--clio-font-text);
+  font-size: var(--clio-font-size);
+  font-stretch: var(--clio-font-stretch-text);
+  line-height: 14px;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+:where(textarea) {
+  display: block;
+  line-height: 16px;
+  resize: vertical;
+}
+
+:where(input, textarea):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: var(--clio-focus-offset);
+  box-shadow: var(--clio-field-focus-shadow);
+}
+
+:where(input, textarea):disabled {
+  color: var(--clio-disabled);
+}
+
+:where(input, textarea)::placeholder {
+  color: var(--clio-disabled);
+  opacity: 1;
+}
+
+:where(label) {
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+}
+
+/* ---- Pop-up menus (select) ------------------------------------------------ */
+:where(select) {
+  box-sizing: border-box;
+  min-height: var(--clio-popup-height, var(--clio-control-height));
+  margin: 0;
+  padding: var(--clio-popup-padding);
+  border: var(--clio-popup-border);
+  border-radius: var(--clio-popup-radius);
+  background: var(--clio-popup-arrow), var(--clio-popup-bg);
+  box-shadow: var(--clio-popup-shadow);
+  border-image: var(--clio-popup-frame) var(--clio-popup-frame-slice) / calc(var(--clio-popup-frame-slice) * 1px) stretch;
+  color: var(--clio-ink);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-stretch: var(--clio-font-stretch-text);
+  font-weight: var(--clio-popup-weight);
+  -webkit-font-smoothing: var(--clio-font-smoothing);
+  line-height: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(select):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: var(--clio-focus-offset);
+}
+
+:where(select):disabled {
+  color: var(--clio-disabled);
+}
+
+/* A list box: <select multiple> or <select size="n">. */
+:where(select[multiple], select[size]:not([size="1"])) {
+  min-height: 0;
+  padding: 0;
+  border: var(--clio-list-border);
+  border-radius: 0;
+  background: var(--clio-list-bg);
+  box-shadow: var(--clio-list-shadow);
+  font-family: var(--clio-font-text);
+}
+
+:where(select[multiple], select[size]:not([size="1"])) option {
+  min-height: var(--clio-list-row);
+  padding: 0 4px;
+}
+
+:where(select[multiple], select[size]:not([size="1"])) option:checked {
+  background: var(--clio-selection-bg) linear-gradient(var(--clio-selection-bg), var(--clio-selection-bg));
+  color: var(--clio-selection-fg);
+}
+
+/* ---- List boxes ------------------------------------------------------------ */
+:where(.listbox, ul[role="listbox"], ol[role="listbox"], div[role="listbox"]) {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  border: var(--clio-list-border);
+  background: var(--clio-list-bg);
+  box-shadow: var(--clio-list-shadow);
+  font-family: var(--clio-font-text);
+  font-size: var(--clio-font-size);
+}
+
+:where(.listbox, [role="listbox"]) > :is(li, [role="option"]) {
+  min-height: var(--clio-list-row);
+  padding: 0 4px;
+  line-height: var(--clio-list-row);
+  white-space: nowrap;
+  cursor: default;
+}
+
+:where(.listbox, [role="listbox"]) > :is(li, [role="option"]):is([aria-selected="true"], .selected) {
+  background: var(--clio-selection-bg);
+  color: var(--clio-selection-fg);
+}
+
+:where(.listbox, [role="listbox"]) > :is(li, [role="option"]):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: -2px;
+}
+
+/* ---- Group boxes (fieldset) ---------------------------------------------- */
+:where(fieldset) {
+  margin: 0;
+  padding: 8px 10px 10px;
+  border: var(--clio-group-border);
+  background: var(--clio-group-bg);
+  box-shadow: var(--clio-group-shadow);
+}
+
+:where(fieldset) > :where(legend) {
+  padding: 0 4px;
+  background: var(--clio-pane-bg);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-weight: var(--clio-chrome-weight);
+}
+
+/* ---- Progress -------------------------------------------------------------- */
+:where(progress) {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--clio-progress-height);
+  margin: 0;
+  border: var(--clio-progress-border);
+  border-radius: 0;
+  background: var(--clio-progress-bg);
+  box-shadow: var(--clio-progress-shadow);
+  color: var(--clio-ink);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+:where(progress)::-webkit-progress-bar {
+  background: var(--clio-progress-bg);
+}
+
+:where(progress)::-webkit-progress-value {
+  background: var(--clio-progress-fill);
+}
+
+:where(progress)::-moz-progress-bar {
+  background: var(--clio-progress-fill);
+}
+
+/* ---- Tabs -------------------------------------------------------------------
+   System 6 had no tab control; the System 6 tab here is an adaptation (a
+   boxed label that joins its panel). Platinum draws the real Mac OS 9 tab. */
+:where([role="tablist"], .tabs) {
+  display: flex;
+  align-items: flex-end;
+  gap: 0;
+  margin: 0;
+  padding: 0 8px;
+  list-style: none;
+}
+
+:where([role="tablist"], .tabs) > :is([role="tab"], li, button) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--clio-tab-height);
+  margin: 0 -1px -1px 0;
+  padding: 0 12px;
+  border: 1px solid var(--clio-ink);
+  border-radius: 0;
+  background: var(--clio-tab-bg);
+  box-shadow: none;
+  color: var(--clio-ink);
+  font-family: var(--clio-font-chrome);
+  font-size: var(--clio-font-size);
+  font-weight: var(--clio-chrome-weight);
+  cursor: default;
+}
+
+:where([role="tablist"], .tabs) > :is([role="tab"], li, button):is([aria-selected="true"], .active) {
+  z-index: 1;
+  border-bottom-color: var(--clio-tab-active-bg);
+  background: var(--clio-tab-active-bg);
+  color: var(--clio-ink);
+}
+
+:where([role="tabpanel"], .tab-panel) {
+  padding: 10px;
+  border: var(--clio-tab-panel-border);
+  background: var(--clio-tab-panel-bg);
+}
+
+/* ---- Desktop icons ---------------------------------------------------------- */
+:where(.icon) {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 2px;
+  width: 80px;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: var(--clio-ink);
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-font-size-small);
+  text-align: center;
+  cursor: default;
+}
+
+:where(.icon) > :is(img, svg, .icon-image) {
+  width: 32px;
+  height: 32px;
+  image-rendering: pixelated;
+}
+
+:where(.icon) > :is(figcaption, span, .icon-label) {
+  max-width: 100%;
+  padding: 0 2px;
+  background: var(--clio-label-bg);
+  color: var(--clio-label-fg);
+  line-height: 13px;
+}
+
+:where(.icon):is(.selected, [aria-selected="true"], [aria-pressed="true"]) > :is(img, svg, .icon-image) {
+  filter: var(--clio-icon-selected-filter, invert(1));
+}
+
+:where(.icon):is(.selected, [aria-selected="true"], [aria-pressed="true"]) > :is(figcaption, span, .icon-label) {
+  background: var(--clio-label-selected-bg);
+  color: var(--clio-label-selected-fg);
+}
+
+/* Dialogs and alerts.
+   .modal-dialog / .alert-box: the double-framed modal box (dBoxProc).
+   .standard-dialog: the plain box with a drop shadow (altDBoxProc).
+   .modeless-dialog: a movable dialog, which is a .window.
+   Use them on <dialog> or on a <div role="dialog">. system.css's
+   .outer-border / .inner-border wrappers are accepted and draw nothing extra. */
+:where(.modal-dialog, .alert-box, dialog.modal) {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: var(--clio-modal-padding);
+  border: var(--clio-modal-border);
+  background: var(--clio-dialog-bg);
+  box-shadow: var(--clio-modal-frame);
+  color: var(--clio-ink);
+}
+
+:where(.standard-dialog) {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  border: var(--clio-plain-dialog-border);
+  background: var(--clio-dialog-bg);
+  box-shadow: var(--clio-plain-dialog-shadow);
+  color: var(--clio-ink);
+}
+
+:where(dialog):is(.modal-dialog, .alert-box, .standard-dialog, .modal)::backdrop {
+  background: transparent;
+}
+
+:where(.modal-dialog, .alert-box, .standard-dialog) :where(.outer-border, .inner-border) {
+  padding: 0;
+  border: 0;
+}
+
+/* Alert layout: icon on the left, message, buttons bottom-right. */
+:where(.alert-box) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 16px;
+  row-gap: 12px;
+  align-items: start;
+}
+
+:where(.alert-box) > :where(.alert-icon) {
+  grid-row: 1;
+  width: 32px;
+  height: 32px;
+}
+
+:where(.alert-box) > :where(.alert-contents, .modal-contents, p) {
+  grid-column: 2;
+  margin: 0;
+}
+
+:where(.alert-box) > :where(.alert-buttons, .dialog-buttons) {
+  grid-column: 1 / -1;
+}
+
+:where(.dialog-buttons, .alert-buttons) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+/* An alert icon drawn here, not Apple's: a rounded speech box with "!". */
+:where(.alert-icon.caution, .alert-icon.note, .alert-icon.stop) {
+  display: block;
+  box-sizing: border-box;
+  border: 2px solid var(--clio-ink);
+  border-radius: 6px;
+  background: var(--clio-paper);
+  color: var(--clio-ink);
+  font: 700 22px/28px var(--clio-font-display);
+  text-align: center;
+}
+
+:where(.alert-icon.caution)::before { content: "!"; }
+:where(.alert-icon.note)::before { content: "i"; }
+:where(.alert-icon.stop) { border-radius: 50%; }
+:where(.alert-icon.stop)::before { content: "\00D7"; }
+
+/* Scroll bars, for scroll areas clio.css owns (.window-pane, .listbox,
+   textarea, list-box selects) and for anything you mark with .clio-scroll.
+   Add class="clio-scrollbars" to <html> to give every scroll area the era's
+   scroll bar.
+
+   WebKit/Blink draw the full bar: two arrow boxes, the patterned lane and the
+   scroll box. The scroll box is proportional to the content here (a browser
+   limit), where System 6 drew a fixed 16px square. Firefox has no scroll bar
+   parts, so it gets the era's colours through scrollbar-color. */
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar,
+:where(html.clio-scrollbars)::-webkit-scrollbar {
+  width: var(--clio-scrollbar-size);
+  height: var(--clio-scrollbar-size);
+  background: var(--clio-paper);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track,
+:where(html.clio-scrollbars)::-webkit-scrollbar-track {
+  background: var(--clio-scrollbar-track);
+  box-shadow: var(--clio-scrollbar-track-shadow);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track:vertical,
+:where(html.clio-scrollbars)::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid var(--clio-ink);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track:horizontal,
+:where(html.clio-scrollbars)::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--clio-ink);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-thumb,
+:where(html.clio-scrollbars)::-webkit-scrollbar-thumb {
+  min-width: var(--clio-scrollbar-size);
+  min-height: var(--clio-scrollbar-size);
+  border: var(--clio-scrollbar-thumb-border);
+  background: var(--clio-scrollbar-thumb-bg);
+  box-shadow: var(--clio-scrollbar-thumb-shadow);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-thumb:horizontal,
+:where(html.clio-scrollbars)::-webkit-scrollbar-thumb:horizontal {
+  background: var(--clio-scrollbar-thumb-bg-horizontal, var(--clio-scrollbar-thumb-bg));
+  box-shadow: var(--clio-scrollbar-thumb-shadow-horizontal, var(--clio-scrollbar-thumb-shadow));
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:start:decrement,
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:end:increment,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:start:decrement,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:end:increment {
+  display: block;
+  width: var(--clio-scrollbar-size);
+  height: var(--clio-scrollbar-size);
+  background-color: var(--clio-scrollbar-button-bg);
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: var(--clio-scrollbar-button-shadow);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:vertical:decrement,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:vertical:decrement {
+  border-left: 1px solid var(--clio-ink);
+  border-bottom: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-up);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:vertical:increment,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:vertical:increment {
+  border-left: 1px solid var(--clio-ink);
+  border-top: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-down);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:horizontal:decrement,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:horizontal:decrement {
+  border-top: 1px solid var(--clio-ink);
+  border-right: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-left);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:horizontal:increment,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:horizontal:increment {
+  border-top: 1px solid var(--clio-ink);
+  border-left: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-right);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:vertical:decrement:active,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:vertical:decrement:active {
+  background-image: var(--clio-scrollbar-up-on);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:vertical:increment:active,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:vertical:increment:active {
+  background-image: var(--clio-scrollbar-down-on);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:horizontal:decrement:active,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:horizontal:decrement:active {
+  background-image: var(--clio-scrollbar-left-on);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:horizontal:increment:active,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:horizontal:increment:active {
+  background-image: var(--clio-scrollbar-right-on);
+}
+
+/* Only the single arrow box at each end, as on the Mac. */
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:start:increment,
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:end:decrement,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:start:increment,
+:where(html.clio-scrollbars)::-webkit-scrollbar-button:end:decrement {
+  display: none;
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-corner,
+:where(html.clio-scrollbars)::-webkit-scrollbar-corner {
+  border-top: 1px solid var(--clio-ink);
+  border-left: 1px solid var(--clio-ink);
+  background: var(--clio-scrollbar-corner);
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  :where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, html.clio-scrollbars, .clio-scrollbars *) {
+    scrollbar-color: var(--clio-scrollbar-thumb-color, var(--clio-ink)) var(--clio-scrollbar-track-color, #c0c0c0);
+  }
+}
+
+/* Control Strip (System 7.5 to Mac OS 9): a row of module buttons with scroll
+   arrows and a tab that folds the strip away. Markup follows AI System 6:
+   .control-strip > button.control-strip-scroll.control-strip-scroll-back,
+   .control-strip-modules[role=toolbar] > .control-strip-module-track >
+   button.control-strip-module (an icon inside; aria-haspopup="menu" draws the
+   menu triangle), button.control-strip-scroll.control-strip-scroll-forward,
+   button.control-strip-handle. Add .is-collapsed to fold it to the tab, and
+   data-edge="right" for a strip on the right edge. Placement is yours
+   (AI System 6 fixes it to the screen's lower left). */
+/* The strip's art is the same in System 7.5.3, Mac OS 8.5 and Mac OS 9.0
+   (compared pixel for pixel with the backdrop removed); only the cell colours
+   differ, so it lives here for every era. Redrawn by tooling/p9-art.py. */
+:root {
+  --clio-art-p9-strip-cap: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYBAMAAADXK7paAAAAHlBMVEUAAAAAAABERERVVVWAgICIiIigoKDAwMDMzP/////+VYXkAAAAAXRSTlMAQObYZgAAAGlJREFUeJxjFGQAg/8sbAlgxkwWBiUQfZuBheHfAwYGhg8MTBAlDPgYLAx/9jAwsOgysDAwhDIw/L8LYvy98NcVry4mBoa/Zy+AtTOwlzP8AzFY3r0jYBfC0l/3P4AZjILMBiD6DCPMOwBKOxgiile5lQAAAABJRU5ErkJggg==");
+  --clio-art-s7-strip-cap: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYBAMAAADXK7paAAAAG1BMVEUAAAAAAABERERVVVWIiIiqqqrMzMzMzP/////JRvoVAAAAAXRSTlMAQObYZgAAAGVJREFUeJxjFGQAg/8srAFgxioWBiUQfYeBheHfAwYGhg8MTBAlDPgYLAx/zzIwMMsxsDAwuDAw/L8HYvy98M+FgC6Gf/egDLY0hn8gBvO7dwTsQmj/ff8DmMEoyGwAos8wwrwDAP+1F0dci98qAAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-back: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAACVBMVEUAAABVVVXd3d2apXz3AAAAAXRSTlMAQObYZgAAACxJREFUeJwFwaERwCAABLD0j3oE7IPBs/8KrcBjSKhiKM/cebs0gvzkfFioLlg9BPcTGNP4AAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-forward: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAACVBMVEUAAABVVVXd3d2apXz3AAAAAXRSTlMAQObYZgAAAC1JREFUeJwFwSESABAUQMHnzegC9/nFqRX3IegCuxBIwVYxdySFgLzpHbg2cvhWkAdTrBZiqwAAAABJRU5ErkJggg==");
+  --clio-art-p9-strip-menu: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHAQMAAAAVq36TAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABZJREFUeJxjaGA4wPCA4QMTA9MHpgcAIQYE58W2/JQAAAAASUVORK5CYII=");
+  --clio-art-p9-strip-handle: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYBAMAAAAFe7ACAAAAFVBMVEUAAAAAAABERERVVVWIiIjMzMz///8V67gPAAAAAXRSTlMAQObYZgAAAINJREFUeJxVz7ENAjEMheE/IbQokRiAUVJQUjAs5RXZhJvgkp6LjGwfBU309PzFkkMBZAApVVgAIqWUZ9bORsE6fWvWJCukoIlbtjICG0sK5iLnVrM7Hqefsy3qPKnzZM6n/+41D/epbbi772IOaOPYsIv/sIrEG6YA4XqB3vWO2UErvmVcJ4BylohjAAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-tab: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYBAMAAAAFe7ACAAAAFVBMVEUAAAAAAABERERVVVWIiIjMzMz///8V67gPAAAAAXRSTlMAQObYZgAAAIFJREFUeJxVz7ENAjEMQNHvKPS+DRiBEVJQMi49WeAkRrgJSHoijOyEgipf1pPlyAbQgMwVxqN7iYIACVprRaMUskS9gKJeSWKYADtGLRruzC3Lcqd6WW7uw45V7ma5m/Xv3uW53H3YdLnU7g4YFg9Q+6phfv2nw95BNlGsRf1++QW6eCj9rQPMHAAAAABJRU5ErkJggg==");
+}
+
+:where(.control-strip) {
+  display: inline-flex;
+  align-items: stretch;
+  height: var(--clio-strip-height);
+  max-width: 100%;
+  vertical-align: bottom;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The end cap, then every cell: one bevelled box between 1px lines. */
+:where(.control-strip)::before,
+:where(.control-strip) > :is(.control-strip-scroll, .control-strip-modules),
+:where(.control-strip-module) {
+  box-sizing: border-box;
+  border: var(--clio-strip-line);
+  border-left: 0;
+  background: var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-cell-shadow);
+}
+
+/* The end cap is one picture: frame, bevel, icon and the rounded lower-left corner. */
+:where(.control-strip)::before {
+  content: "";
+  flex: none;
+  width: calc(var(--clio-strip-cap-width) + 2px);
+  border: 0;
+  background: var(--clio-strip-cap) 0 0 / 100% 100% no-repeat;
+  box-shadow: none;
+}
+
+:where(.control-strip) > :is(.control-strip-scroll, .control-strip-handle) {
+  flex: none;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+/* Scroll arrows: 13px cells, sunken and hollow while there is nothing to scroll. */
+:where(.control-strip) > .control-strip-scroll {
+  width: calc(var(--clio-strip-scroll-width) + 1px);
+  min-width: 0;
+  height: auto;
+  min-height: 0;
+  background: var(--clio-strip-back) 1px 6px / 10px 10px no-repeat, var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-cell-shadow);
+}
+
+:where(.control-strip) > .control-strip-scroll-forward {
+  background-image: var(--clio-strip-forward);
+}
+
+:where(.control-strip) > .control-strip-scroll:disabled {
+  background:
+    var(--clio-strip-back) 1px 6px / 10px 10px no-repeat,
+    var(--clio-strip-sunken-lines),
+    var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-sunken-shadow);
+}
+
+:where(.control-strip) > .control-strip-scroll-forward:disabled {
+  background-image: var(--clio-strip-forward);
+}
+
+:where(.control-strip) > .control-strip-scroll:not(:disabled):active,
+:where(.control-strip-module):not(:disabled):is(:active, [aria-expanded="true"]) {
+  background-color: var(--clio-strip-pressed-bg);
+  box-shadow: var(--clio-strip-pressed-shadow);
+}
+
+:where(.control-strip-modules) {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+
+:where(.control-strip-module-track) {
+  display: flex;
+}
+
+/* A module: the 16px icon 2px in, the menu triangle 3px from the right. */
+:where(.control-strip-module) {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  width: calc(var(--clio-strip-module-width) + 1px);
+  min-width: 0;
+  height: var(--clio-strip-height);
+  min-height: 0;
+  margin: 0;
+  padding: 0 0 0 var(--clio-strip-icon-inset);
+  border-radius: 0;
+  color: var(--clio-ink);
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(.control-strip-module) > :is(svg, img, .sys-icon) {
+  width: 16px;
+  height: 16px;
+}
+
+:where(.control-strip-module)[aria-haspopup]::after {
+  content: "";
+  position: absolute;
+  top: var(--clio-strip-menu-top);
+  right: calc(var(--clio-strip-menu-inset) + 1px);
+  width: 4px;
+  height: 7px;
+  background: var(--clio-strip-menu) 0 0 / 4px 7px no-repeat;
+}
+
+:where(.control-strip-module):disabled {
+  color: var(--clio-disabled);
+  opacity: 0.5;
+}
+
+/* The tab: open, a slanted end with a grip; folded, the strip shrinks to it. */
+:where(.control-strip) > .control-strip-handle {
+  width: var(--clio-strip-handle-width);
+  min-width: 0;
+  height: var(--clio-strip-height);
+  min-height: 0;
+  border: 0;
+  background: var(--clio-strip-handle) 0 0 / 100% 100% no-repeat;
+  box-shadow: none;
+}
+
+:where(.control-strip.is-collapsed)::before,
+:where(.control-strip.is-collapsed) > :not(.control-strip-handle) {
+  display: none;
+}
+
+:where(.control-strip.is-collapsed) > .control-strip-handle {
+  width: var(--clio-strip-tab-width);
+  background-image: var(--clio-strip-tab);
+}
+
+:where(.control-strip)[data-edge="right"] {
+  flex-direction: row-reverse;
+}
+
+:where(.control-strip)[data-edge="right"]::before,
+:where(.control-strip)[data-edge="right"] > .control-strip-handle {
+  transform: scaleX(-1);
+}
+
+:where(.control-strip) > :focus-visible,
+:where(.control-strip-module):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: -3px;
+}
+
+/* Mac OS 8/9 Platinum. Applies inside any element with data-era="platinum"
+   (put it on <html> for a whole page). clio.platinum.css is a build of this
+   same file with Platinum as the page default.
+   Values: AI System 6's Platinum tables, each tied to a Mac OS 9.0 capture
+   (GUIdebook, Infinite Mac). P-numbers in comments are AI System 6's patch
+   ids; see EVIDENCE.md. */
+:root {
+  --clio-ink: #000000;
+  --clio-paper: #dddddd;
+  --clio-face: #dddddd;
+  --clio-disabled: #6f6f6f;
+  --clio-disabled-dither: none;
+  /* Push button, disabled button and default ring: the real pixel frames
+     (tooling/frame-art.py: Mac OS 9.0 Appearance and GUIdebook's Mac OS 9.0). */
+  --clio-button-frame: var(--clio-art-frame-p9-button);
+  --clio-button-frame-held: var(--clio-art-frame-p9-button-held);
+  --clio-button-frame-disabled: var(--clio-art-frame-p9-button-disabled);
+  --clio-ring-frame: var(--clio-art-frame-p9-ring);
+  --clio-ring-frame-slice: 6;
+  --clio-disabled-fill: currentcolor;
+  --clio-selection-bg: #ccccff;
+  --clio-selection-fg: #000000;
+
+  /* Charcoal if the visitor has it, else Clio Sans '97 (Charcoal 12 rebuilt
+     from Mac OS 9.0), drawn without smoothing like the bitmap it is; Asap
+     (OFL) at the widths AI System 6 measured against Charcoal as the last
+     fallback; Geneva for text on a Mac. */
+  --clio-font-chrome: Charcoal, "Charcoal CY", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-display: Charcoal, "Charcoal CY", "Clio Sans '97 Display", "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-window-title: Charcoal, "Charcoal CY", "Clio Sans '97 Title Exact", "Clio Sans '97 Title", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-button: Charcoal, "Charcoal CY", "Clio Sans '97 Exact", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-text: Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-size: 12px;
+  --clio-font-smoothing: none;
+  --clio-text-smoothing: auto;
+  --clio-font-small: var(--clio-font-text);
+  --clio-font-size-small: 10px;
+  --clio-chrome-weight: 700;
+  --clio-font-stretch-text: 113%;
+  --clio-font-stretch-title: 123%;
+
+  --clio-border: 1px solid #000000;
+  --clio-control-height: 20px;
+  --clio-field-height: 22px;
+  --clio-focus-outline: 2px solid #6666cc;
+  --clio-focus-offset: 0px;
+
+  /* [I] Solid base of AI System 6's azul tile; the tile itself is not shipped. */
+  --clio-desktop: #4a71ab;
+
+  /* P14 window frame: black line, a raised 4px strip, black content line. */
+  --clio-window-bg: #cccccc;
+  --clio-pane-bg: #dddddd;
+  --clio-window-border: 1px solid #000000;
+  /* The frame's white light and #999 shade are drawn as lines in the window's
+     background (below), which leave the two odd corners in the frame grey. */
+  --clio-window-shadow: 1px 1px 0 #000000;
+  /* AI System 6 pads 5px because its pane has no border; here the pane draws
+     the black content line itself, so the strip is 4px. */
+  --clio-window-padding: 2px 4px 4px;
+
+  /* Title bar: 19px, six white/#777 ridge pairs, covers behind the boxes. */
+  --clio-titlebar-height: 19px;
+  --clio-titlebar-margin: 0;
+  --clio-titlebar-padding: 1px 0;
+  --clio-titlebar-border: 1px solid #000000;
+  --clio-titlebar-row: 13px;
+  --clio-titlebar-slot: 16px;
+  --clio-titlebar-shade-slot: 16px;
+  --clio-shade-display: block;
+  --clio-titlebar-inactive-bg: #dddddd;
+  --clio-title-bg: #cccccc;
+  --clio-title-fg: #000000;
+  --clio-title-inactive-fg: #777777;
+  --clio-title-padding: 0 4px;
+  --clio-box-size: 11px;
+  --clio-box-inset: 0px;
+  --clio-box-isolation: 0px;
+
+  /* Menu bar and menus (P21, P24) */
+  --clio-menubar-height: 20px;
+  --clio-menubar-bg: #dddddd;
+  --clio-menubar-border: 1px solid #000000;
+  --clio-menubar-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #999999;
+  --clio-menubar-padding: 0 8px;
+  --clio-menu-title-padding: 0 10px;
+  --clio-menu-title-inset: 0px;
+  --clio-menu-title-active-bg: #333399;
+  --clio-menu-title-active-fg: #ffffff;
+  --clio-menu-title-active-shadow: inset 0 1px 0 #6666cc, inset 0 -1px 0 #000088;
+  --clio-menu-bg: #dddddd;
+  --clio-menu-border: 1px solid #000000;
+  --clio-menu-border-top-width: 0;
+  --clio-menu-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #999999, 1px 1px 0 #222222;
+  --clio-menu-item-height: 16px;
+  --clio-menu-item-padding: 0 10px 0 21px;
+  --clio-menu-item-weight: 600;
+  --clio-menu-item-active-bg: #333399;
+  --clio-menu-item-active-fg: #ffffff;
+  --clio-menu-item-active-shadow: inset 1px 0 0 #6666cc, inset -1px 0 0 #000088;
+  /* Separator: a 6px row, #888 on its third line and white on its fourth,
+     across the menu's full width (Mac OS 9.0 Finder File menu). */
+  --clio-menu-separator:
+    linear-gradient(#888888, #888888) 0 2px / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 0 3px / 100% 1px no-repeat;
+  --clio-menu-separator-height: 6px;
+
+  /* Push buttons: bevel, 3px corners (P29 pressed) */
+  --clio-button-bg: transparent;
+  --clio-button-fg: #000000;
+  --clio-button-border: 1px solid #000000;
+  --clio-button-radius: 3px;
+  --clio-button-shadow: none;
+  --clio-button-padding: 0 10px;
+  --clio-button-min-width: 58px;
+  --clio-button-weight: 700;
+  /* Held: the frame and its dark face cut from Mac OS 9.0 (frame-art.py). */
+  --clio-button-active-bg: transparent;
+  --clio-button-active-fg: #ffffff;
+  --clio-button-active-shadow: none;
+  --clio-button-disabled-fg: #777777;
+  --clio-button-disabled-border: 1px solid #888888;
+
+  /* Check boxes and radio buttons: the mark and both radio states are redrawn
+     from Mac OS 9.0's General Controls (tooling/p9-art.py). */
+  --clio-check-size: 12px;
+  /* The well's white light and #888 shade as lines that leave the odd corners
+     in the face (an inset shadow would also paint over the check mark). */
+  --clio-check-bg:
+    linear-gradient(#ffffff, #ffffff) 0 0 / calc(100% - 1px) 1px no-repeat padding-box,
+    linear-gradient(#ffffff, #ffffff) 0 0 / 1px calc(100% - 1px) no-repeat padding-box,
+    linear-gradient(#888888, #888888) 1px 100% / calc(100% - 1px) 1px no-repeat padding-box,
+    linear-gradient(#888888, #888888) 100% 1px / 1px calc(100% - 1px) no-repeat padding-box,
+    #dddddd;
+  --clio-check-border: 1px solid #000000;
+  --clio-check-shadow: none;
+  --clio-check-mark: var(--clio-art-p9-check) 0 0 / 10px 10px no-repeat;
+  --clio-check-mark-origin: padding-box;
+  --clio-check-pressed-border-width: 1px;
+
+  /* Text fields (P30) */
+  --clio-field-bg: #ffffff;
+  --clio-field-border: 1px solid #000000;
+  --clio-field-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff;
+  --clio-field-padding: 2px 3px;
+  --clio-field-focus-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff;
+
+  /* Pop-up menus, measured from Mac OS 9.0 (Appearance tab, "Apple platinum"):
+     20px, black frame, #ddd face with a white top line and #aaa foot; a #aaa
+     divider 20px from the right, then a raised arrow box (white left and top,
+     #aaa then #777 shade) with the 7x10 arrows 7px from the right, 4px down. */
+  --clio-popup-bg: #dddddd;
+  --clio-popup-border: 1px solid #000000;
+  --clio-popup-radius: 0;
+  --clio-popup-frame: var(--clio-art-frame-p9-popup);   /* the real corners */
+  --clio-popup-shadow: none;
+  --clio-popup-height: 20px;
+  --clio-popup-padding: 0 28px 0 7px;
+  --clio-popup-weight: 700;
+  --clio-popup-arrow:
+    var(--clio-art-p-dropdown) right 7px top 4px / 7px 10px no-repeat,
+    linear-gradient(#777777, #777777) right 0 top 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#777777, #777777) right 0 bottom 0 / 19px 1px no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) right 1px top 1px / 1px calc(100% - 2px) no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) right 1px bottom 1px / 17px 1px no-repeat,
+    linear-gradient(#bbbbbb, #bbbbbb) right 19px bottom 0 / 1px 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) right 18px top 1px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) right 2px top 1px / 17px 1px no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) right 20px top 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) left 0 top 0 / calc(100% - 21px) 1px no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) left 0 bottom 0 / calc(100% - 21px) 1px no-repeat;
+
+  /* Scroll bars (P16, P17, P27) */
+  --clio-scrollbar-size: 16px;
+  --clio-scrollbar-track: #aaaaaa;
+  --clio-scrollbar-track-shadow: inset 1px 1px #777777, inset 2px 2px #888888, inset -1px -1px #cccccc, inset -2px -2px #bbbbbb;
+  --clio-scrollbar-thumb-bg: var(--clio-art-p-grip-v) center / 8px 8px no-repeat, #9999ff;
+  --clio-scrollbar-thumb-bg-horizontal: var(--clio-art-p-grip-h) center / 8px 8px no-repeat, #9999ff;
+  --clio-scrollbar-thumb-border: 1px solid #000000;
+  --clio-scrollbar-thumb-shadow: inset 1px 1px #ccccff, inset -1px -1px #6666cc;
+  --clio-scrollbar-button-bg: #dddddd;
+  --clio-scrollbar-button-shadow: inset 1px 1px #ffffff, inset -1px -1px #bbbbbb;
+  --clio-scrollbar-up: var(--clio-art-p-up);
+  --clio-scrollbar-up-on: var(--clio-art-p-up);
+  --clio-scrollbar-down: var(--clio-art-p-down);
+  --clio-scrollbar-down-on: var(--clio-art-p-down);
+  --clio-scrollbar-left: var(--clio-art-p-left);
+  --clio-scrollbar-left-on: var(--clio-art-p-left);
+  --clio-scrollbar-right: var(--clio-art-p-right);
+  --clio-scrollbar-right-on: var(--clio-art-p-right);
+  --clio-scrollbar-thumb-color: #9999ff;
+  --clio-scrollbar-track-color: #aaaaaa;
+
+  /* Dialogs (P06) */
+  --clio-dialog-bg: #dddddd;
+  --clio-modal-border: 1px solid #000000;
+  --clio-modal-frame:
+    inset 1px 1px 0 #dddddd,
+    inset 2px 2px 0 #ffffff,
+    inset 3px 3px 0 #ffffff,
+    inset -1px -1px 0 #555555,
+    inset -2px -2px 0 #999999,
+    inset -3px -3px 0 #aaaaaa,
+    1px 1px 0 #000000;
+  --clio-modal-padding: 16px 18px;
+  --clio-plain-dialog-border: 1px solid #000000;
+  --clio-plain-dialog-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #999999, 1px 1px 0 #000000;
+
+  /* Bars, lists, groups, progress, tabs, icons */
+  --clio-details-bg: #dddddd;
+  --clio-details-border: 1px solid #000000;
+  --clio-details-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #aaaaaa;
+  --clio-details-font-size: 12px;
+  --clio-details-height: 20px;
+  --clio-details-padding: 0 8px;
+  --clio-scrollbar-corner: #dddddd;
+  --clio-list-bg: #ffffff;
+  --clio-list-border: 1px solid #000000;
+  --clio-list-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff;
+  --clio-list-row: 16px;
+  /* Group box: a 1px line of #777 and #888 dots, the pattern aligned to the
+     screen (#777 where x + y is even), no light (Mac OS 9.0 General Controls). */
+  --clio-group-border: 1px solid transparent;
+  --clio-group-shadow: none;
+  --clio-art-p9-group-dots: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEV3d3eIiIjxRXMlAAAADElEQVR4nGNwYHIAAAEIAIMYhovOAAAAAElFTkSuQmCC");
+  --clio-progress-height: 12px;
+  --clio-progress-bg: #bbbbbb;
+  --clio-progress-border: 1px solid #000000;
+  --clio-progress-shadow: 1px 1px #ffffff, -1px -1px #aaaaaa, inset 1px 1px #888888, inset -1px -1px #dddddd;
+  --clio-progress-fill: linear-gradient(to bottom, #333399 0 1px, #6666cc 1px 2px, #9999ff 2px 3px, #ccccff 3px 4px, #eeeeee 4px 5px, #ccccff 5px 6px, #9999ff 6px 7px, #6666cc 7px 8px, #333399 8px 9px, #000055 9px 10px);
+  --clio-tab-height: 23px;
+  --clio-tab-panel-bg: #eeeeee;
+  --clio-tab-panel-border: 1px solid #000000;
+  --clio-label-bg: rgba(255, 255, 255, 0.7);
+  --clio-label-fg: #000000;
+  --clio-label-selected-bg: #000000;
+  --clio-label-selected-fg: #ffffff;
+  --clio-icon-selected-filter: brightness(0.5);
+
+  /* Control Strip, measured from Mac OS 9.0 (npm run capture:platinum, frames
+     strip-expanded, strip-collapsed, strip-slider); Mac OS 8.5's is the same
+     under Drawing Board. 24px: 1px black lines, #c0c0c0 cells with a white
+     inner light, #a0a0a0 then #808080 shade; scroll cells sunken while idle. */
+  --clio-strip-bg: #c0c0c0;
+  --clio-strip-line: 1px solid #000000;
+  --clio-strip-cell-shadow: inset -1px -1px 0 #808080, inset -2px -2px 0 #a0a0a0, inset 1px 1px 0 #c0c0c0, inset 2px 2px 0 #ffffff;
+  --clio-strip-sunken-shadow: none;
+  --clio-strip-sunken-lines:
+    linear-gradient(#808080, #808080) 0 0 / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#808080, #808080) 0 0 / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 100% 1px / 1px calc(100% - 1px) no-repeat;
+  --clio-strip-pressed-bg: #808080;
+  --clio-strip-pressed-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #c0c0c0;
+  --clio-strip-cap: var(--clio-art-p9-strip-cap);
+  --clio-strip-back: var(--clio-art-p9-strip-back);
+  --clio-strip-forward: var(--clio-art-p9-strip-forward);
+  --clio-strip-menu: var(--clio-art-p9-strip-menu);
+  --clio-strip-handle: var(--clio-art-p9-strip-handle);
+  --clio-strip-tab: var(--clio-art-p9-strip-tab);
+
+  /* Art: pop-up arrow, menu check mark and submenu arrow redrawn from
+     Mac OS 9.0 (tooling/p9-art.py, below); scroll arrows, grips and tabs drawn
+     here (tabs: tooling/tab-art.py). */
+  --clio-art-p-dropdown: var(--clio-art-p9-dropdown);
+  --clio-art-p-dropdown-off: var(--clio-art-p9-dropdown-off);
+  --clio-art-p-check: var(--clio-art-p9-menucheck);
+  --clio-art-p-submenu: var(--clio-art-p9-submenu);
+  --clio-art-p-submenu-on: var(--clio-art-p9-submenu-on);
+  --clio-art-p-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 5h2v1h-2zM4 6h4v1h-4zM3 7h6v1h-6zM2 8h8v1h-8z'/%3E%3C/svg%3E");
+  --clio-art-p-up-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23888' d='M5 5h2v1h-2zM4 6h4v1h-4zM3 7h6v1h-6zM2 8h8v1h-8z'/%3E%3C/svg%3E");
+  --clio-art-p-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 5h8v1h-8zM3 6h6v1h-6zM4 7h4v1h-4zM5 8h2v1h-2z'/%3E%3C/svg%3E");
+  --clio-art-p-down-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23888' d='M2 5h8v1h-8zM3 6h6v1h-6zM4 7h4v1h-4zM5 8h2v1h-2z'/%3E%3C/svg%3E");
+  --clio-art-p-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 5h1v2h-1zM6 4h1v4h-1zM7 3h1v6h-1zM8 2h1v8h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-left-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23888' d='M5 5h1v2h-1zM6 4h1v4h-1zM7 3h1v6h-1zM8 2h1v8h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 2h1v8h-1zM6 3h1v6h-1zM7 4h1v4h-1zM8 5h1v2h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-right-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23888' d='M5 2h1v8h-1zM6 3h1v6h-1zM7 4h1v4h-1zM8 5h1v2h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-grip-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eee' d='M0 0h1v1H0zM0 2h1v1H0zM0 4h1v1H0zM0 6h1v1H0z'/%3E%3Cpath fill='%23ccf' d='M1 0h6v1H1zM1 2h6v1H1zM1 4h6v1H1zM1 6h6v1H1z'/%3E%3Cpath fill='%23339' d='M1 1h7v1H1zM1 3h7v1H1zM1 5h7v1H1zM1 7h7v1H1z'/%3E%3C/svg%3E");
+  --clio-art-p-grip-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23eee' d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM6 0h1v1H6z'/%3E%3Cpath fill='%23ccf' d='M0 1h1v6H0zM2 1h1v6H2zM4 1h1v6H4zM6 1h1v6H6z'/%3E%3Cpath fill='%23339' d='M1 1h1v7H1zM3 1h1v7H3zM5 1h1v7H5zM7 1h1v7H7z'/%3E%3C/svg%3E");
+  --clio-art-p-tab-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23222' d='M11 1h1v1h-1zM9 2h1v1h-1zM8 3h1v1h-1zM7 4h1v1h-1zM25 4h1v1h-1zM6 6h1v1h-1zM26 6h1v1h-1zM5 9h1v1h-1zM27 9h1v1h-1zM4 12h1v1h-1zM28 12h1v1h-1zM3 15h1v1h-1zM29 15h1v1h-1zM2 18h1v1h-1zM30 18h1v1h-1zM1 21h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 1h10v1h-10zM10 2h1v1h-1zM22 2h2v1h-2zM24 3h1v1h-1zM7 5h1v1h-1zM25 5h1v1h-1zM6 7h1v1h-1zM26 7h1v1h-1zM6 8h1v1h-1zM26 8h1v1h-1zM5 10h1v1h-1zM27 10h1v1h-1zM5 11h1v1h-1zM27 11h1v1h-1zM4 13h1v1h-1zM28 13h1v1h-1zM4 14h1v1h-1zM28 14h1v1h-1zM3 16h1v1h-1zM29 16h1v1h-1zM3 17h1v1h-1zM29 17h1v1h-1zM2 19h1v1h-1zM30 19h1v1h-1zM2 20h1v1h-1zM30 20h1v1h-1zM0 21h1v1h-1zM31 21h2v1h-2zM0 22h2v1h-2zM31 22h2v1h-2z'/%3E%3Cpath fill='%23bbb' d='M11 2h1v1h-1zM21 2h1v1h-1zM9 3h1v1h-1zM8 4h1v1h-1zM23 4h1v1h-1zM7 6h1v1h-1zM24 6h1v1h-1zM6 9h1v1h-1zM25 9h1v1h-1zM5 12h1v1h-1zM26 12h1v1h-1zM4 15h1v1h-1zM27 15h1v1h-1zM3 18h1v1h-1zM28 18h1v1h-1zM2 21h1v1h-1zM29 21h1v1h-1zM30 22h1v1h-1z'/%3E%3Cpath fill='%23ccc' d='M12 2h9v1h-9zM10 3h1v1h-1zM8 5h1v1h-1zM7 7h1v1h-1zM7 8h1v1h-1zM6 10h1v1h-1zM6 11h1v1h-1zM5 13h1v1h-1zM5 14h1v1h-1zM4 16h1v1h-1zM4 17h1v1h-1zM3 19h1v1h-1zM3 20h1v1h-1zM2 22h1v1h-1zM0 23h3v1h-3zM30 23h3v1h-3z'/%3E%3Cpath fill='%23fff' d='M11 3h11v1h-11zM9 4h2v1h-2zM9 5h1v1h-1zM8 6h1v1h-1zM8 7h1v1h-1zM8 8h1v1h-1zM7 9h1v1h-1zM7 10h1v1h-1zM7 11h1v1h-1zM6 12h1v1h-1zM6 13h1v1h-1zM6 14h1v1h-1zM5 15h1v1h-1zM5 16h1v1h-1zM5 17h1v1h-1zM4 18h1v1h-1zM4 19h1v1h-1zM4 20h1v1h-1zM3 21h1v1h-1zM3 22h1v1h-1z'/%3E%3Cpath fill='%23ddd' d='M22 3h1v1h-1zM23 5h1v1h-1zM24 7h1v1h-1zM24 8h1v1h-1zM25 10h1v1h-1zM25 11h1v1h-1zM26 13h1v1h-1zM26 14h1v1h-1zM27 16h1v1h-1zM27 17h1v1h-1zM28 19h1v1h-1zM28 20h1v1h-1zM29 22h1v1h-1z'/%3E%3Cpath fill='%23888' d='M23 3h1v1h-1zM24 5h1v1h-1zM25 7h1v1h-1zM25 8h1v1h-1zM26 10h1v1h-1zM26 11h1v1h-1zM27 13h1v1h-1zM27 14h1v1h-1zM28 16h1v1h-1zM28 17h1v1h-1zM29 19h1v1h-1zM29 20h1v1h-1z'/%3E%3Cpath fill='%23eee' d='M11 4h12v1h-12zM10 5h13v1h-13zM9 6h15v1h-15zM9 7h15v1h-15zM9 8h15v1h-15zM8 9h17v1h-17zM8 10h17v1h-17zM8 11h17v1h-17zM7 12h19v1h-19zM7 13h19v1h-19zM7 14h19v1h-19zM6 15h21v1h-21zM6 16h21v1h-21zM6 17h21v1h-21zM5 18h23v1h-23zM5 19h23v1h-23zM5 20h23v1h-23zM4 21h25v1h-25zM4 22h25v1h-25zM3 23h27v1h-27z'/%3E%3Cpath fill='%23444' d='M24 4h1v1h-1zM25 6h1v1h-1zM26 9h1v1h-1zM27 12h1v1h-1zM28 15h1v1h-1zM29 18h1v1h-1zM30 21h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23222' d='M11 3h1v1h-1zM9 4h1v1h-1zM8 5h1v1h-1zM7 6h1v1h-1zM25 6h1v1h-1zM6 8h1v1h-1zM26 8h1v1h-1zM5 11h1v1h-1zM27 11h1v1h-1zM4 14h1v1h-1zM28 14h1v1h-1zM3 17h1v1h-1zM29 17h1v1h-1zM2 20h1v1h-1zM30 20h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 3h10v1h-10zM10 4h1v1h-1zM22 4h2v1h-2zM24 5h1v1h-1zM7 7h1v1h-1zM25 7h1v1h-1zM6 9h1v1h-1zM26 9h1v1h-1zM6 10h1v1h-1zM26 10h1v1h-1zM5 12h1v1h-1zM27 12h1v1h-1zM5 13h1v1h-1zM27 13h1v1h-1zM4 15h1v1h-1zM28 15h1v1h-1zM4 16h1v1h-1zM28 16h1v1h-1zM3 18h1v1h-1zM29 18h1v1h-1zM3 19h1v1h-1zM29 19h1v1h-1zM2 21h1v1h-1zM30 21h1v1h-1zM2 22h1v1h-1zM30 22h1v1h-1zM0 23h33v1h-33z'/%3E%3Cpath fill='%23bbb' d='M11 4h1v1h-1zM21 4h1v1h-1zM9 5h1v1h-1zM8 6h1v1h-1zM23 6h1v1h-1zM7 8h1v1h-1zM24 8h1v1h-1zM6 11h1v1h-1zM25 11h1v1h-1zM5 14h1v1h-1zM26 14h1v1h-1zM4 17h1v1h-1zM27 17h1v1h-1zM3 20h1v1h-1zM28 20h1v1h-1z'/%3E%3Cpath fill='%23ccc' d='M12 4h9v1h-9zM10 5h1v1h-1zM11 6h12v1h-12zM8 7h1v1h-1zM10 7h13v1h-13zM9 8h15v1h-15zM7 9h1v1h-1zM9 9h15v1h-15zM7 10h1v1h-1zM9 10h15v1h-15zM8 11h17v1h-17zM6 12h1v1h-1zM8 12h17v1h-17zM6 13h1v1h-1zM8 13h17v1h-17zM7 14h19v1h-19zM5 15h1v1h-1zM7 15h19v1h-19zM5 16h1v1h-1zM7 16h19v1h-19zM6 17h21v1h-21zM4 18h1v1h-1zM6 18h21v1h-21zM4 19h1v1h-1zM6 19h21v1h-21zM5 20h23v1h-23zM3 21h1v1h-1zM5 21h23v1h-23zM3 22h1v1h-1zM5 22h23v1h-23z'/%3E%3Cpath fill='%23ddd' d='M11 5h12v1h-12zM9 6h2v1h-2zM9 7h1v1h-1zM23 7h1v1h-1zM8 8h1v1h-1zM8 9h1v1h-1zM24 9h1v1h-1zM8 10h1v1h-1zM24 10h1v1h-1zM7 11h1v1h-1zM7 12h1v1h-1zM25 12h1v1h-1zM7 13h1v1h-1zM25 13h1v1h-1zM6 14h1v1h-1zM6 15h1v1h-1zM26 15h1v1h-1zM6 16h1v1h-1zM26 16h1v1h-1zM5 17h1v1h-1zM5 18h1v1h-1zM27 18h1v1h-1zM5 19h1v1h-1zM27 19h1v1h-1zM4 20h1v1h-1zM4 21h1v1h-1zM28 21h1v1h-1zM4 22h1v1h-1zM28 22h1v1h-1z'/%3E%3Cpath fill='%23888' d='M23 5h1v1h-1zM24 7h1v1h-1zM25 9h1v1h-1zM25 10h1v1h-1zM26 12h1v1h-1zM26 13h1v1h-1zM27 15h1v1h-1zM27 16h1v1h-1zM28 18h1v1h-1zM28 19h1v1h-1zM29 21h1v1h-1zM29 22h1v1h-1z'/%3E%3Cpath fill='%23444' d='M24 6h1v1h-1zM25 8h1v1h-1zM26 11h1v1h-1zM27 14h1v1h-1zM28 17h1v1h-1zM29 20h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-p-tab-pressed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23222' d='M11 3h1v1h-1zM9 4h1v1h-1zM8 5h1v1h-1zM7 6h1v1h-1zM25 6h1v1h-1zM6 8h1v1h-1zM26 8h1v1h-1zM5 11h1v1h-1zM27 11h1v1h-1zM4 14h1v1h-1zM28 14h1v1h-1zM3 17h1v1h-1zM29 17h1v1h-1zM2 20h1v1h-1zM30 20h1v1h-1z'/%3E%3Cpath fill='%23000' d='M12 3h10v1h-10zM10 4h1v1h-1zM22 4h2v1h-2zM24 5h1v1h-1zM7 7h1v1h-1zM25 7h1v1h-1zM6 9h1v1h-1zM26 9h1v1h-1zM6 10h1v1h-1zM26 10h1v1h-1zM5 12h1v1h-1zM27 12h1v1h-1zM5 13h1v1h-1zM27 13h1v1h-1zM4 15h1v1h-1zM28 15h1v1h-1zM4 16h1v1h-1zM28 16h1v1h-1zM3 18h1v1h-1zM29 18h1v1h-1zM3 19h1v1h-1zM29 19h1v1h-1zM2 21h1v1h-1zM30 21h1v1h-1zM2 22h1v1h-1zM30 22h1v1h-1zM0 23h33v1h-33z'/%3E%3Cpath fill='%23bbb' d='M11 4h1v1h-1zM21 4h1v1h-1zM9 5h1v1h-1zM8 6h1v1h-1zM23 6h1v1h-1zM7 8h1v1h-1zM24 8h1v1h-1zM6 11h1v1h-1zM25 11h1v1h-1zM5 14h1v1h-1zM26 14h1v1h-1zM4 17h1v1h-1zM27 17h1v1h-1zM3 20h1v1h-1zM28 20h1v1h-1z'/%3E%3Cpath fill='%23ccc' d='M12 4h9v1h-9zM10 5h1v1h-1zM8 7h1v1h-1zM7 9h1v1h-1zM7 10h1v1h-1zM6 12h1v1h-1zM6 13h1v1h-1zM5 15h1v1h-1zM5 16h1v1h-1zM4 18h1v1h-1zM4 19h1v1h-1zM3 21h1v1h-1zM3 22h1v1h-1z'/%3E%3Cpath fill='%23888' d='M11 5h11v1h-11zM23 5h1v1h-1zM9 6h2v1h-2zM9 7h1v1h-1zM24 7h1v1h-1zM8 8h1v1h-1zM8 9h1v1h-1zM25 9h1v1h-1zM8 10h1v1h-1zM25 10h1v1h-1zM7 11h1v1h-1zM7 12h1v1h-1zM26 12h1v1h-1zM7 13h1v1h-1zM26 13h1v1h-1zM6 14h1v1h-1zM6 15h1v1h-1zM27 15h1v1h-1zM6 16h1v1h-1zM27 16h1v1h-1zM5 17h1v1h-1zM5 18h1v1h-1zM28 18h1v1h-1zM5 19h1v1h-1zM28 19h1v1h-1zM4 20h1v1h-1zM4 21h1v1h-1zM29 21h1v1h-1zM4 22h1v1h-1zM29 22h1v1h-1z'/%3E%3Cpath fill='%23ddd' d='M22 5h1v1h-1zM23 7h1v1h-1zM24 9h1v1h-1zM24 10h1v1h-1zM25 12h1v1h-1zM25 13h1v1h-1zM26 15h1v1h-1zM26 16h1v1h-1zM27 18h1v1h-1zM27 19h1v1h-1zM28 21h1v1h-1zM28 22h1v1h-1z'/%3E%3Cpath fill='%23666' d='M11 6h12v1h-12zM10 7h13v1h-13zM9 8h15v1h-15zM9 9h15v1h-15zM9 10h15v1h-15zM8 11h17v1h-17zM8 12h17v1h-17zM8 13h17v1h-17zM7 14h19v1h-19zM7 15h19v1h-19zM7 16h19v1h-19zM6 17h21v1h-21zM6 18h21v1h-21zM6 19h21v1h-21zM5 20h23v1h-23zM5 21h23v1h-23zM5 22h23v1h-23z'/%3E%3Cpath fill='%23444' d='M24 6h1v1h-1zM25 8h1v1h-1zM26 11h1v1h-1zM27 14h1v1h-1zM28 17h1v1h-1zM29 20h1v1h-1z'/%3E%3C/svg%3E");
+
+  color: #000000;
+  /* Measured from Mac OS 9.0 frames by tooling/p9-art.py. */
+  --clio-art-p9-check: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAGFBMVEUAAAAAAABVVVV3d3eIiIiqqqrd3d3///8DgOpFAAAAAXRSTlMAQObYZgAAAEBJREFUeJwVxLENgDAQBMH9k4lxQAPvSuiKtr4iRAUW+QVGTDBxAautFyyA+nfIRaU2WynOGl0cSkSMTpvPfvMB4jgPBUEhtgkAAAAASUVORK5CYII=");
+  --clio-art-p9-check-overhang: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAEAgMAAADZgQaqAAAADFBMVEUAAAAAAAB3d3eqqqoo0Gg2AAAAAXRSTlMAQObYZgAAABBJREFUeJxjcGDYwCTAwAAABXABA8z2jo8AAAAASUVORK5CYII=");
+  --clio-art-p9-radio-on: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAIVBMVEUAAAAAAAAiIiJERERVVVV3d3eIiIiZmZm7u7vd3d3///9FvHqFAAAAAXRSTlMAQObYZgAAAFlJREFUeJwVwUERQEAUgOH/vdlxcni7W8CSQBYh5HBy0kEADeigAQqYoQDG9wEpgJCinavTmKTa9fXLbIWWOYyN3oA8ys/UDCTolkE3OKz1dugzme8voI7wAZyaEH+rqNVXAAAAAElFTkSuQmCC");
+  --clio-art-p9-radio: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAG1BMVEUAAAAAAABERERVVVWIiIiqqqq7u7vd3d3///9N7yqcAAAAAXRSTlMAQObYZgAAAFpJREFUeJwlzLENQEAYBeDn5RJRuZwJiI2IOZTKW0FnB7OICbDC61x1v8I3wAegDYBDM9n+sBjXMHiyigs9+y2V6KgYZxmRSjOwxiwVvF4zu5lPSXJ2ZFzCn32EjiE9A/VQnAAAAABJRU5ErkJggg==");
+  --clio-art-p9-radio-pressed: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAIVBMVEUAAAAAAAAiIiJERERVVVVmZmZ3d3eIiIiZmZm7u7v////rjZGwAAAAAXRSTlMAQObYZgAAAFdJREFUeJwVxKsRgDAURcFz34B/iUaQoQE0ilKogUHREyVQAxKZFnBRfIYVC6QI+n+OymIIyvZK8lZdCkGNXapHfwz3RZiL0kfLwLyZ3CmT3bvDKhhO+ABY6xACXUidtgAAAABJRU5ErkJggg==");
+  --clio-art-p9-checkbox-pressed: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAElBMVEUAAAAAAABVVVV3d3eZmZn///8vNloyAAAAAXRSTlMAQObYZgAAADhJREFUeJxFibENACAMwxzUGegH/f8MxFkdEHQgi2VHzp1pAsO42ttrfLQoW4WM+lYhp8kFW44lHI3DBiNDd4iSAAAAAElFTkSuQmCC");
+  --clio-art-p9-box-face: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAG1BMVEUAAACIiIiZmZmqqqq7u7vMzMzd3d3u7u7///8xpbC+AAAAAXRSTlMAQObYZgAAAClJREFUeJxjbL3AwPCb5exFQcHTTAwCAgIMTIyMjIwMuNgsfw4wMDAAAAO8B0nHBJxRAAAAAElFTkSuQmCC");
+  --clio-art-p9-progress-pole: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKBAMAAABPkMOvAAAAKlBMVEUAAAAAAFUAAIgzM5lVVVVmZsx3d3eZmZmZmf+qqqq7u7vMzP/d3d3///+RIHmxAAAAAXRSTlMAQObYZgAAAFFJREFUeJwlyrEJgwAQQNF3ciNYiziBIKQ2U7lTpnAAAy4QcYOAtQbRFK/5/GhwyefM1pKPDR3x+q0UtfhY7ism+0j2ufBGFYN/yi8uUbYcMycurhMrVyrlPQAAAABJRU5ErkJggg==");
+  --clio-art-p9-submenu: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALAQMAAABmnG7VAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB9JREFUeJxjaGA4wPCA4QPDD4Y/TH+YfjB9YHrAdAAAZSIJk3jnGdQAAAAASUVORK5CYII=");
+  --clio-art-p9-submenu-on: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALAQMAAABmnG7VAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAB9JREFUeJxjaGA4wPCA4QPDD4Y/TH+YfjB9YHrAdAAAZSIJk3jnGdQAAAAASUVORK5CYII=");
+  --clio-art-p9-dropdown: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKAQMAAABCAtZOAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABlJREFUeJxjEGDSYHJh+McAAv8YahgsGAQAHygDQTD2iPAAAAAASUVORK5CYII=");
+  --clio-art-p9-dropdown-off: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKAQMAAABCAtZOAAAABlBMVEUAAACIiIhaeOqmAAAAAXRSTlMAQObYZgAAABlJREFUeJxjEGDSYHJh+McAAv8YahgsGAQAHygDQTD2iPAAAAAASUVORK5CYII=");
+  --clio-art-p9-menucheck: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAYAAAArzdW1AAAAP0lEQVR42mNgIAyMiFHwnxgFK2ECLgwMDKFYFJxB1nUGKmiEpOAOAwODALKilVCJ/7gUwMAdQgoYoBIrsSkAAK+iEhBS63EWAAAAAElFTkSuQmCC");
+}
+
+/* ---- Window ---------------------------------------------------------------- */
+/* The strip's inner edge below the title bar: #999 on the left, white on the
+   right and bottom (GUIdebook Appearance window, x=4 and x=width-5). */
+:root .window:not(.inactive) {
+  background:
+    linear-gradient(#ffffff, #ffffff) 0 0 / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 0 0 / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#999999, #999999) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#999999, #999999) 100% 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#999999, #999999) 3px 19px / 1px calc(100% - 22px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) right 3px top 20px / 1px calc(100% - 23px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) left 3px bottom 3px / calc(100% - 6px) 1px no-repeat,
+    var(--clio-window-bg);
+}
+
+:root .window-pane {
+  border: 1px solid #000000;
+  background: var(--clio-pane-bg);
+}
+
+:root .window > .title-bar + .window-pane,
+:root .window > .details-bar + .window-pane {
+  border-top: 0;
+}
+
+:root .window > .details-bar {
+  border-left: 1px solid #000000;
+  border-right: 1px solid #000000;
+}
+
+/* The ridged bar. Its covers read the slot sizes the .title-bar itself
+   computes, so this is a rule, not a token. */
+:root .title-bar {
+  /* Six ridges: white lines, and #777 lines one pixel to their right (the
+     ridge's shade), between the box slots (Mac OS 9.0, both ends measured). */
+  --clio-tb-ridges: calc(100% - var(--clio-tb-close) - var(--clio-tb-zoom) - var(--clio-tb-shade) - 1px);
+  background:
+    linear-gradient(to bottom, #cccccc 0 1px, transparent 1px 13px, #cccccc 13px 17px, #999999 17px 18px),
+    repeating-linear-gradient(to bottom, #ffffff 0 1px, transparent 1px 2px) var(--clio-tb-close) 1px / var(--clio-tb-ridges) 2px repeat-y,
+    repeating-linear-gradient(to bottom, transparent 0 1px, #777777 1px 2px) calc(var(--clio-tb-close) + 1px) 1px / var(--clio-tb-ridges) 2px repeat-y,
+    #cccccc;
+}
+
+:root .window.inactive > .title-bar,
+:root .inactive-title-bar {
+  background: var(--clio-titlebar-inactive-bg);
+}
+
+/* The title is cut out of the ridges in the frame grey, drawn wide. */
+:root .title-bar > :is(.title, h1, h2, h3) {
+  /* Mac OS 9.0: the cut-out spans the ridges, 4px before the title and 3px
+     after it, and is centred 1px left of the bar's middle; Charcoal sits one
+     row low in it. */
+  padding: 1px 3px 0 4px;
+  transform: translateX(-1px);
+  /* The ridge's #777 lines are its white lines one pixel to the right, and so
+     is their cut: show them in the cut-out's first column, cover them one
+     column past its last. */
+  background:
+    repeating-linear-gradient(to bottom, transparent 0 1px, #777777 1px 2px) 0 0 / 1px 12px no-repeat,
+    #cccccc;
+  overflow: clip;              /* still truncates with an ellipsis */
+  overflow-clip-margin: 1px;   /* but lets the column past the end show */
+}
+
+/* The close, zoom and collapse boxes: an 11px bevelled square sunk into the
+   ridges, no paper isolation. */
+:root .title-bar > :is(button, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse) {
+  margin-top: 1px;
+  border-color: #222222;
+  background: var(--clio-art-p9-box-face) 0 0 / 9px 9px no-repeat;
+  box-shadow:
+    -1px -1px 0 #888888,
+    -1px 0 0 #888888,
+    0 -1px 0 #888888,
+    1px 1px 0 #ffffff,
+    1px 0 0 #ffffff,
+    0 1px 0 #ffffff;
+}
+
+:root .title-bar > :is(button, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse):is(:active, .active) {
+  background: linear-gradient(to bottom right, #444444, #bbbbbb);
+  box-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff, inset -1px -1px 0 #999999;
+}
+
+/* Zoom: a six-pixel lower-left corner inside the frame. */
+:root .title-bar > :is(.resize, .resize-box, .zoom)::before {
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border: 0;
+  background:
+    linear-gradient(#222222, #222222) right top / 1px 6px no-repeat,
+    linear-gradient(#222222, #222222) left bottom / 6px 1px no-repeat;
+  opacity: 1;
+}
+
+/* WindowShade: two nine-pixel rules. */
+:root .title-bar > :is(.shade, .shade-box, .collapse)::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 0;
+  width: 9px;
+  height: 3px;
+  background:
+    linear-gradient(#222222, #222222) left top / 9px 1px no-repeat,
+    linear-gradient(#222222, #222222) left bottom / 9px 1px no-repeat;
+}
+
+/* Background window: flat grey, #555 frame, controls erased, title kept. */
+:root .window.inactive {
+  --clio-button-shadow: 0 0 0 0 transparent;
+  --clio-field-shadow: none;
+  --clio-check-shadow: none;
+  border-color: #555555;
+  background: #dddddd;
+  box-shadow: 1px 1px 0 #555555;   /* flat: no light or shade inside (Mac OS 9.0 Finder, behind Appearance) */
+  color: #555555;
+}
+
+:root .window.inactive > .title-bar,
+:root .inactive-title-bar {
+  border-bottom-color: #555555;
+  --clio-title-bg: #dddddd;
+}
+
+:root .window.inactive > .title-bar > :is(.title, h1, h2, h3),
+:root .inactive-title-bar > :is(.title, h1, h2, h3) {
+  background: #dddddd;
+}
+
+/* ---- Default button ring: 1px black, a #aaa bevel band, 1px gap. -------- */
+:root :is(.default, .btn-default) {
+  position: relative;
+  box-shadow: var(--clio-button-shadow);
+}
+
+:root :is(.default, .btn-default):not(:disabled, .disabled):is(:active, .active) {
+  box-shadow: var(--clio-button-active-shadow);
+}
+
+:root :is(.default, .btn-default)::before {
+  content: "";
+  position: absolute;
+  border-width: 1px;                  /* longhands: the shorthand would reset the ring, which is a border-image */
+  border-style: solid;
+  border-color: transparent;
+  inset: -4px;
+  border-radius: 0;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+:root :is(.default, .btn-default):is(:disabled, .disabled)::before {
+  box-shadow: 0 0 0 1px #888888;
+}
+
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(:disabled, .disabled) {
+  background: transparent;
+  box-shadow: none;
+  border-image: var(--clio-button-frame-disabled) var(--clio-button-frame-slice) fill / calc(var(--clio-button-frame-slice) * 1px) stretch;
+}
+
+/* ---- Radio buttons: drawn, not cut from a screenshot ------------------------ */
+/* Check box mark: inside the frame, plus the two columns that overhang it. */
+:root input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 2px;
+  height: 4px;
+  background: var(--clio-art-p9-check-overhang) 0 0 / 2px 4px no-repeat;
+}
+
+/* ---- Radio buttons: Mac OS 9's shaded ball (pressed states drawn here). ---- */
+:root input[type="radio"] {
+  border: 0;
+  border-radius: 0;
+  background: var(--clio-art-p9-radio) 0 0 / 12px 12px no-repeat;
+  box-shadow: none;
+}
+
+:root input[type="radio"]:checked {
+  background: var(--clio-art-p9-radio-on) 0 0 / 12px 12px no-repeat;
+}
+
+:root input[type="radio"]:not(:disabled):active {
+  background: var(--clio-art-p9-radio-pressed) 0 0 / 12px 12px no-repeat;
+}
+
+/* Held while on: not captured; the on ball stays (inferred). */
+:root input[type="radio"]:checked:not(:disabled):active {
+  background: var(--clio-art-p9-radio-on) 0 0 / 12px 12px no-repeat;
+}
+
+/* Held while checked: the mark over the held box (inferred; only the empty
+   box was captured held). */
+:root input[type="checkbox"]:checked:not(:disabled):active {
+  background:
+    var(--clio-art-p9-check) 0 0 / 10px 10px no-repeat padding-box,
+    var(--clio-art-p9-checkbox-pressed) -1px -1px / 12px 12px no-repeat;
+}
+
+:root input[type="checkbox"]:not(:disabled):active {
+  border-color: transparent;
+  background: var(--clio-art-p9-checkbox-pressed) -1px -1px / 12px 12px no-repeat;
+  box-shadow: none;
+}
+
+:root :is(input[type="checkbox"], input[type="radio"]):disabled {
+  border-color: #888888;
+  opacity: 0.6;
+}
+
+/* ---- Menus ------------------------------------------------------------------- */
+:root :is(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a, span) {
+  font-weight: 700;
+}
+
+:root :is(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"])::before,
+:root :is(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked)::before {
+  left: 7px;
+  width: 9px;
+  height: 8px;
+  margin-top: -4px;
+  background: var(--clio-art-p-check) 0 0 / 9px 8px no-repeat;
+}
+
+:root :is(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active)::before,
+:root :is(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked):is(:hover, :focus-visible, .active)::before {
+  filter: invert(1);
+}
+
+:root :is(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"]))::after,
+:root :is(.menu, [role="menu"]) > li > [aria-haspopup="true"]::after {
+  background-image: var(--clio-art-p-submenu);
+}
+
+:root :is(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"])):is(:hover, :focus-within, .active)::after {
+  background-image: var(--clio-art-p-submenu-on);
+}
+
+:root :is(.menu, [role="menu"]) > li.divider {
+  border-bottom: 0;
+  box-shadow: inset 0 -2px 0 #dddddd, inset 0 -3px 0 #ffffff, inset 0 -4px 0 #888888;
+}
+
+/* ---- Tabs: drawn from the measured Mac OS 9 tab (tooling/tab-art.py) ------ */
+:root :is([role="tablist"], .tabs) {
+  gap: 0;
+  padding: 0 4px;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button) {
+  min-width: 48px;
+  height: 24px;
+  min-height: 0;
+  margin: 0 -3px -1px 0;
+  padding: 3px 0 0;
+  border-style: solid;
+  border-width: 0 16px;
+  border-color: transparent;
+  border-radius: 0;
+  border-image: var(--clio-art-p-tab) 0 16 fill / 0 16px stretch;
+  background: transparent;
+  box-shadow: none;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button):not(:disabled):active {
+  border-image-source: var(--clio-art-p-tab-pressed);
+  background: transparent;
+  color: #ffffff;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button):is([aria-selected="true"], .active) {
+  z-index: 1;
+  padding-top: 0;
+  border-image-source: var(--clio-art-p-tab-selected);
+  background: transparent;
+  color: #000000;
+}
+
+:root :is([role="tabpanel"], .tab-panel) {
+  border-top: 0;
+  box-shadow: inset 1px 0 0 #ffffff, inset -1px -1px 0 #888888;
+}
+
+/* ---- Scroll arrow art sits on the bevelled box ---------------------------- */
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-button {
+  background-position: 1px 1px;
+  background-size: 14px 14px;
+}
+
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:active,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-button:active {
+  background-color: #666666;
+  box-shadow: inset 1px 1px #444444, inset -1px -1px #888888;
+}
+
+:root :is(fieldset) > legend {
+  background: var(--clio-pane-bg);
+}
+
+:root fieldset {
+  background:
+    linear-gradient(var(--clio-pane-bg), var(--clio-pane-bg)) padding-box,
+    var(--clio-art-p9-group-dots) 0 0 / 2px 2px fixed border-box;
+  image-rendering: pixelated;   /* keep the dots from blending into one grey */
+}
+
+/* The title's gap opens 13px after the corner (General Controls, "Desktop"). */
+:root fieldset > legend {
+  margin-left: 2px;
+}
+
+/* Disabled pop-up menu: #888 frame, flat face, the #aaa divider and a grey
+   arrow (Mac OS 9.0 Appearance, "Position Automatically"). Browsers also fade
+   a disabled <select>; Mac OS did not. */
+:root select:disabled {
+  border-color: #888888;
+  background:
+    var(--clio-art-p-dropdown-off) right 7px top 4px / 7px 10px no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) right 20px top 0 / 1px 100% no-repeat,
+    #dddddd;
+  background-clip: padding-box;
+  box-shadow: none;
+  color: #888888;
+  opacity: 1;
+  border-image-source: var(--clio-art-frame-p9-popup-disabled);
+}
+
+/* The face stays inside the frame, so the rounded corners show what is behind. */
+:root select {
+  background-clip: padding-box;
+}
+
+/* Indeterminate progress (no value): Mac OS 9's stripes, one 16px period
+   repeated (Finder copy window). Static: clio.css adds no motion. */
+:root progress:indeterminate,
+:root progress:indeterminate::-webkit-progress-bar {
+  background: var(--clio-art-p9-progress-pole) 0 0 / 16px 10px repeat-x;
+}
+
+:root .title-bar > :is(.title, h1, h2, h3)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -1px;
+  width: 1px;
+  height: 12px;
+  background: repeating-linear-gradient(to bottom, transparent 0 1px, #cccccc 1px 2px);
+}
+
+:root .window.inactive > .title-bar > :is(.title, h1, h2, h3)::after,
+:root .inactive-title-bar > :is(.title, h1, h2, h3)::after {
+  content: none;
+}
+
+/* ---- Antialiasing as Mac OS blends it -------------------------------------
+   Window titles and push button labels in their own colours on their own
+   backgrounds take the exact palettes (src/00-fonts.css). */
+:root .title-bar > :is(.title, h1, h2, h3) {
+  font-palette: --clio-aa-p9-title;
+}
+
+:root :is(.window.inactive > .title-bar, .inactive-title-bar) > :is(.title, h1, h2, h3) {
+  font-palette: --clio-aa-p9-title-inactive;
+}
+
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *) {
+  font-family: var(--clio-font-button);
+  font-palette: --clio-aa-p9-button;
+}
+
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):not(:disabled, .disabled):is(:active, .active) {
+  font-palette: --clio-aa-p9-button-held;
+}
+
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(:disabled, .disabled) {
+  font-palette: --clio-aa-p9-button-disabled;
+}
+
+/* Mac OS 8.5 "Drawing Board" (the beta theme Apple shipped in 8.5b6 and
+   withdrew). Applies inside any element with data-era="drawingboard"; it shares
+   the Platinum layer's structure (both are Appearance Manager themes) and
+   replaces its colours, geometry and art. clio.drawingboard.css is a build of
+   this file with Drawing Board as the page default.
+   Values: Infinite Mac, Mac OS 8.5 with the theme installed
+   (`npm run capture:drawingboard`), read 1:1. The art is the theme's own:
+   its 'pxm#' pictures and 'ppat' patterns (papers and the pattern pens the
+   theme draws its pencil lines with), written to art/drawingboard/ by
+   tooling/db-art.py and tooling/db-pens.py and placed as Mac OS places them,
+   each found 1:1 in the capture. The stylesheet loads them from art/ beside
+   itself, as it loads fonts/. See EVIDENCE.md. */
+:root {
+  /* Titles sit on the textured title bar, where no palette can know the
+     background: they keep Clio Sans '97 Title in the text colour. */
+  --clio-font-window-title: Charcoal, "Charcoal CY", "Clio Sans '97 Title", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  /* Where a 128px theme pattern starts. Mac OS sometimes starts one half a
+     tile (64px) earlier, depending on where the window sits on screen; a page
+     matching a particular screen can set 64px on that window or control. */
+  --clio-db-phase: 0px;
+  --clio-ink: #313131;
+  --clio-paper: #e7ded6;
+  --clio-face: #cdc6bd;
+  --clio-disabled: #8c8c8c;
+  --clio-selection-bg: #ccccff;
+
+  --clio-border: 1px solid #555555;
+
+  /* Window: the theme's own nine frame pictures (see the Window rules), on
+     the content paper. The frame is 6px on each side inside the outline; the
+     title bar's 22 rows include the outline and the #555 rule. */
+  --clio-window-bg: #cdc6bd;
+  --clio-pane-bg: #e7ded6;
+  --clio-window-border: 0 none;
+  --clio-window-shadow: none;
+  --clio-window-padding: 0 6px 6px;
+
+  /* Title bar: 22 rows of the frame picture. Boxes 11px, 5px below the top. */
+  --clio-titlebar-height: 22px;
+  --clio-titlebar-padding: 4px 0 0;
+  --clio-titlebar-margin: 0 -1px;
+  --clio-titlebar-border: 0 none;
+  --clio-titlebar-row: 16px;
+  --clio-titlebar-inactive-bg: #cdc6bd;
+  --clio-title-bg: transparent;
+  --clio-title-fg: #313131;
+  --clio-title-inactive-fg: #9f9a94;
+
+  /* Menu bar: 22px of #cec6b5 paper, no rule under it. Menus: #ddd paper,
+     #333 outline, 18px items (20px with an icon); the chosen title and item
+     are underlined in pencil: left, stretched centre and right pieces, 16px
+     in from the menu's left, 15px from its right (Control Panels; the Appearance
+     pop-up's sits 16px from both), 1px above the item's foot. */
+  --clio-menubar-height: 22px;
+  --clio-menubar-bg: url("art/drawingboard/menubar.png") 0 0 / 630px 27px repeat-x, #cec6b5;
+  --clio-menubar-border: 0 none;
+  --clio-menubar-shadow: none;
+  --clio-menu-title-active-bg:
+    var(--clio-art-db-title-underline-left) left 0 bottom 3px / 15px 3px no-repeat,
+    var(--clio-art-db-title-underline-right) right 0 bottom 3px / 16px 3px no-repeat,
+    var(--clio-art-db-title-underline-tiled) left 15px bottom 3px / calc(100% - 31px) 4px no-repeat;
+  --clio-menu-title-active-fg: #313131;
+  --clio-menu-title-active-shadow: none;
+  /* Menus: the theme's paper inside a pencil frame (see the Menus rules). */
+  --clio-menu-bg: #dddddd;
+  --clio-menu-border: 1px solid transparent;
+  --clio-menu-border-top-width: 1px;
+  --clio-menu-shadow: none;
+  --clio-menu-item-height: 18px;
+  --clio-menu-item-active-bg:
+    var(--clio-art-db-menu-underline-left) left 16px bottom 1px / 29px 3px no-repeat,
+    var(--clio-art-db-menu-underline-right) right 15px bottom 1px / 36px 3px no-repeat,
+    var(--clio-art-db-menu-underline-tiled) left 45px bottom 1px / calc(100% - 96px) 3px no-repeat;
+  --clio-menu-item-active-fg: #313131;
+  --clio-menu-item-active-shadow: none;
+  --clio-menu-separator: none;
+  --clio-menu-separator-height: 9px;
+
+  /* Push buttons: four pattern pens (ppat 7070-7072, 7079) tiled from the last
+     column and row, the corner pixels they leave (tooling/db-pens.py), the
+     hatched ButtonFaceCorner in the lower right of the #cec6b5 face, and a
+     1px pencil shade right and below (the Buttons rules). Held: other pens
+     for the foot and right side, tiled from the second column and row, and no
+     hatch ("Save Theme…" held). */
+  --clio-button-bg:
+    url("art/drawingboard/pens/button-left.png") left 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/button-right.png") right 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/button-top.png") right 1px top 0 / 64px 1px repeat-x border-box,
+    url("art/drawingboard/pens/button-bottom.png") right 1px bottom 0 / 64px 1px repeat-x border-box,
+    var(--clio-art-db-button-corner) right 0 bottom / 24px 24px no-repeat padding-box,
+    #cec6b5;
+  --clio-button-fg: #313131;
+  /* The label sits 1px lower than Platinum's (themes tab, "Save Theme…"). */
+  --clio-button-padding: 2px 10px 0;
+  --clio-button-border: 1px solid transparent;
+  --clio-button-radius: 0;
+  --clio-button-shadow: none;
+  --clio-button-active-bg:
+    url("art/drawingboard/pens/button-held-left.png") left 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/button-held-right.png") right 0 top 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/button-held-top.png") right 1px top 0 / 64px 1px repeat-x border-box,
+    url("art/drawingboard/pens/button-held-bottom.png") left 1px bottom 0 / 32px 1px repeat-x border-box,
+    #cec6b5;
+  --clio-button-active-fg: #313131;
+  --clio-button-active-shadow: none;
+  --clio-button-frame: url("art/drawingboard/pens/button-corners.png");
+  --clio-button-frame-held: url("art/drawingboard/pens/button-held-corners.png");
+  --clio-button-frame-disabled: url("art/drawingboard/pens/button-corners.png");
+  --clio-button-frame-slice: 5;
+  --clio-ring-frame: none;
+  /* Pop-up frame: four pattern pens (ppat 7095-7098) tiled from the last
+     column and row, and the corner pixels they leave (tooling/db-pens.py). */
+  --clio-popup-frame: url("art/drawingboard/pens/popup-corners.png");
+  --clio-popup-frame-slice: 5;
+  --clio-popup-bg:
+    url("art/drawingboard/pens/popup-left.png") left 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/popup-right.png") right 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/popup-top.png") right 1px top 0 / 64px 1px repeat-x border-box,
+    url("art/drawingboard/pens/popup-bottom.png") right 1px bottom 0 / 64px 1px repeat-x border-box,
+    #cec6b5;
+  --clio-popup-border: 1px solid transparent;
+  --clio-popup-radius: 0;
+  --clio-popup-shadow: none;
+  --clio-popup-padding: 0 30px 0 7px;
+  --clio-popup-arrow:
+    var(--clio-art-db-popup-arrow) right 5px top 4px / 7px 9px no-repeat,
+    var(--clio-art-db-popup-corner) right 19px bottom / 24px 24px no-repeat;
+
+  /* Check boxes and radio buttons are the theme's own pictures. */
+  --clio-check-size: 14px;
+  --clio-radio-size: 16px;
+
+  /* Edit text: a 1px pencil line drawn with pattern pens, 1px of whatever is
+     behind (the paper) inside it, then the white field (Date & Time; the
+     Text fields rules). */
+  --clio-field-border: 2px solid transparent;
+  --clio-field-shadow: none;
+  --clio-field-focus-shadow: none;
+  --clio-button-disabled-fg: #8c8c8c;
+  --clio-button-disabled-border: 1px solid #888888;
+
+  /* Scroll bars: the theme's 16px arrow boxes; a #ece6e4 track with a #aaa
+     edge, a two-pixel pencil rail down the middle and a #777 far edge; the
+     scroll box drawn from the theme's ends, stretch and grip. */
+  --clio-scrollbar-up: var(--clio-art-db-up);
+  --clio-scrollbar-up-on: var(--clio-art-db-up-on);
+  --clio-scrollbar-down: var(--clio-art-db-down);
+  --clio-scrollbar-down-on: var(--clio-art-db-down-on);
+  --clio-scrollbar-left: var(--clio-art-db-left);
+  --clio-scrollbar-left-on: var(--clio-art-db-left-on);
+  --clio-scrollbar-right: var(--clio-art-db-right);
+  --clio-scrollbar-right-on: var(--clio-art-db-right-on);
+  --clio-scrollbar-button-bg: transparent;
+  --clio-scrollbar-button-shadow: none;
+  /* Vertical (Desktop tab pattern list): #555 edges, a two-pixel #777 rail. */
+  --clio-scrollbar-track: linear-gradient(to right, #555555 0 1px, #ece6e4 1px 7px, #777777 7px 9px, #ece6e4 9px 15px, #555555 15px);
+  --clio-scrollbar-track-color: #ece6e4;
+  --clio-scrollbar-track-shadow: none;
+  --clio-scrollbar-thumb-bg:
+    var(--clio-art-db-thumb-top) 1px 0 / 14px 7px no-repeat,
+    var(--clio-art-db-thumb-bottom) 1px 100% / 14px 8px no-repeat,
+    var(--clio-art-db-thumb-vgrip) 1px 50% / 14px 2px no-repeat,
+    var(--clio-art-db-thumb-vstretch) 1px 0 / 14px 100% no-repeat;
+  --clio-scrollbar-thumb-bg-horizontal:
+    var(--clio-art-db-thumb-left) 0 1px / 7px 14px no-repeat,
+    var(--clio-art-db-thumb-right) 100% 1px / 8px 14px no-repeat,
+    var(--clio-art-db-thumb-hgrip) 50% 1px / 2px 14px no-repeat,
+    var(--clio-art-db-thumb-hstretch) 0 1px / 100% 14px no-repeat;
+  --clio-scrollbar-thumb-color: #cdc6bd;
+  --clio-scrollbar-thumb-border: 0 none;
+  --clio-scrollbar-thumb-shadow: none;
+  --clio-scrollbar-corner: var(--clio-art-db-grow) 0 0 / 16px 16px no-repeat, #cdc6bd;
+
+  /* Dialogs: the theme's frame pictures (see the Dialogs rules); plain dialogs
+     keep a 1px pencil frame with a #777 band 7px wide on the right and 8px
+     deep below. */
+  --clio-dialog-bg: #e7ded6;
+  --clio-modal-border: 1px solid transparent;
+  --clio-modal-frame: none;
+  --clio-plain-dialog-border: 1px solid #333333;
+  --clio-plain-dialog-shadow: 7px 0 0 #777777, 0 8px 0 #777777, 7px 8px 0 #777777;
+
+  --clio-details-bg: #e7ded6;
+  --clio-details-border: 1px solid #555555;
+  --clio-details-shadow: none;
+  /* List boxes (Desktop tab pattern list): a 2px olive #9c9c63 line, 1px of
+     whatever is behind (the pane's paper) inside it, then white; the chosen
+     row #ccf. */
+  --clio-list-border: 2px solid #9c9c63;
+  --clio-list-shadow: none;
+  --clio-list-bg: #ffffff;
+  --clio-group-border: 1px solid #777777;
+  --clio-group-bg: transparent;
+  --clio-group-shadow: none;
+  /* Progress bar (Finder copy window): 12px, a #756f66 pencil line (#333 on
+     the left) round #ddd6c5; an indeterminate bar shows the theme's arrows.
+     The determinate fill was not captured and stays Platinum's. */
+  --clio-progress-height: 12px;
+  --clio-progress-bg: #ddd6c5;
+  --clio-progress-border: 1px solid #756f66;
+  --clio-progress-shadow: none;
+  --clio-tab-height: 27px;
+  /* Tab pane paper (ppat 7115), from the pane's inner top-left. */
+  --clio-tab-panel-bg: url("art/drawingboard/tab-paper.png") 0 0 / 256px 64px, #e7ded6;
+  --clio-tab-panel-border: 1px solid #555555;
+
+  /* Art: redrawn from the theme's 'pxm#' pixmaps by tooling/db-art.py. */
+  --clio-art-db-close: url("art/drawingboard/parts/close.png"); /* 11x11 */
+  --clio-art-db-close-on: url("art/drawingboard/parts/close-on.png"); /* 11x11 */
+  --clio-art-db-collapse: url("art/drawingboard/parts/collapse.png"); /* 11x11 */
+  --clio-art-db-collapse-on: url("art/drawingboard/parts/collapse-on.png"); /* 11x11 */
+  --clio-art-db-zoom: url("art/drawingboard/parts/zoom.png"); /* 11x11 */
+  --clio-art-db-zoom-on: url("art/drawingboard/parts/zoom-on.png"); /* 11x11 */
+  --clio-art-db-check: url("art/drawingboard/parts/check.png"); /* 14x11 */
+  --clio-art-db-check-on: url("art/drawingboard/parts/check-on.png"); /* 14x11 */
+  --clio-art-db-check-mixed: url("art/drawingboard/parts/check-mixed.png"); /* 14x11 */
+  --clio-art-db-check-pressed: url("art/drawingboard/parts/check-pressed.png"); /* 14x11 */
+  --clio-art-db-check-on-pressed: url("art/drawingboard/parts/check-on-pressed.png"); /* 14x11 */
+  --clio-art-db-check-disabled: url("art/drawingboard/parts/check-disabled.png"); /* 14x11 */
+  --clio-art-db-check-on-disabled: url("art/drawingboard/parts/check-on-disabled.png"); /* 14x11 */
+  --clio-art-db-radio: url("art/drawingboard/parts/radio.png"); /* 16x12 */
+  --clio-art-db-radio-on: url("art/drawingboard/parts/radio-on.png"); /* 16x12 */
+  --clio-art-db-radio-on-pressed: url("art/drawingboard/parts/radio-on-pressed.png"); /* 16x12 */
+  --clio-art-db-radio-disabled: url("art/drawingboard/parts/radio-disabled.png"); /* 16x12 */
+  --clio-art-db-radio-on-disabled: url("art/drawingboard/parts/radio-on-disabled.png"); /* 16x12 */
+  --clio-art-db-up: url("art/drawingboard/parts/up.png"); /* 16x16 */
+  --clio-art-db-up-on: url("art/drawingboard/parts/up-on.png"); /* 16x16 */
+  --clio-art-db-up-off: url("art/drawingboard/parts/up-off.png"); /* 16x16 */
+  --clio-art-db-down: url("art/drawingboard/parts/down.png"); /* 16x16 */
+  --clio-art-db-down-on: url("art/drawingboard/parts/down-on.png"); /* 16x16 */
+  --clio-art-db-down-off: url("art/drawingboard/parts/down-off.png"); /* 16x16 */
+  --clio-art-db-left: url("art/drawingboard/parts/left.png"); /* 16x16 */
+  --clio-art-db-left-on: url("art/drawingboard/parts/left-on.png"); /* 16x16 */
+  --clio-art-db-left-off: url("art/drawingboard/parts/left-off.png"); /* 16x16 */
+  --clio-art-db-right: url("art/drawingboard/parts/right.png"); /* 16x16 */
+  --clio-art-db-right-on: url("art/drawingboard/parts/right-on.png"); /* 16x16 */
+  --clio-art-db-right-off: url("art/drawingboard/parts/right-off.png"); /* 16x16 */
+  --clio-art-db-popup-arrow: url("art/drawingboard/parts/popup-arrow.png"); /* 7x9 */
+  --clio-art-db-popup-arrow-off: url("art/drawingboard/parts/popup-arrow-off.png"); /* 7x9 */
+  --clio-art-db-submenu: url("art/drawingboard/parts/submenu.png"); /* 6x11 */
+  --clio-art-db-grow: url("art/drawingboard/parts/grow.png"); /* 16x16 */
+  --clio-art-db-popup-corner: url("art/drawingboard/parts/popup-corner.png"); /* 24x24 */
+  --clio-art-db-popup-corner-off: url("art/drawingboard/parts/popup-corner-off.png"); /* 24x24 */
+  --clio-art-db-button-corner: url("art/drawingboard/parts/button-corner.png"); /* 24x24 */
+  --clio-art-db-btn-tl: url("art/drawingboard/parts/btn-tl.png"); /* 7x3 */
+  --clio-art-db-btn-tr: url("art/drawingboard/parts/btn-tr.png"); /* 4x3 */
+  --clio-art-db-btn-br: url("art/drawingboard/parts/btn-br.png"); /* 5x6 */
+  --clio-art-db-btn-br-held: url("art/drawingboard/parts/btn-br-held.png"); /* 5x6 */
+  --clio-art-db-btn-bl: url("art/drawingboard/parts/btn-bl.png"); /* 7x4 */
+  --clio-art-db-progress-arrows: url("art/drawingboard/parts/progress-arrows.png"); /* 128x5 */
+  --clio-art-db-def-tl: url("art/drawingboard/parts/def-tl.png"); /* 9x5 */
+  --clio-art-db-def-tr: url("art/drawingboard/parts/def-tr.png"); /* 4x4 */
+  --clio-art-db-def-br: url("art/drawingboard/parts/def-br.png"); /* 5x6 */
+  --clio-art-db-def-bl: url("art/drawingboard/parts/def-bl.png"); /* 9x5 */
+  --clio-art-db-thumb-left: url("art/drawingboard/parts/thumb-left.png"); /* 7x14 */
+  --clio-art-db-thumb-right: url("art/drawingboard/parts/thumb-right.png"); /* 8x14 */
+  --clio-art-db-thumb-hgrip: url("art/drawingboard/parts/thumb-hgrip.png"); /* 2x14 */
+  --clio-art-db-thumb-hstretch: url("art/drawingboard/parts/thumb-hstretch.png"); /* 1x14 */
+  --clio-art-db-thumb-top: url("art/drawingboard/parts/thumb-top.png"); /* 14x7 */
+  --clio-art-db-thumb-bottom: url("art/drawingboard/parts/thumb-bottom.png"); /* 14x8 */
+  --clio-art-db-thumb-vgrip: url("art/drawingboard/parts/thumb-vgrip.png"); /* 14x2 */
+  --clio-art-db-thumb-vstretch: url("art/drawingboard/parts/thumb-vstretch.png"); /* 14x1 */
+  --clio-art-db-tab: url("art/drawingboard/parts/tab.png"); /* 24x27 */
+  --clio-art-db-tab-selected: url("art/drawingboard/parts/tab-selected.png"); /* 24x27 */
+  --clio-art-db-tab-pressed: url("art/drawingboard/parts/tab-pressed.png"); /* 24x27 */
+  --clio-art-db-menu-underline-left: url("art/drawingboard/parts/menu-underline-left.png"); /* 29x3 */
+  --clio-art-db-menu-underline: url("art/drawingboard/parts/menu-underline.png"); /* 48x3 */
+  --clio-art-db-menu-underline-right: url("art/drawingboard/parts/menu-underline-right.png"); /* 36x3 */
+  --clio-art-db-title-underline-left: url("art/drawingboard/parts/title-underline-left.png"); /* 15x3 */
+  --clio-art-db-title-underline: url("art/drawingboard/parts/title-underline.png"); /* 32x4 */
+  --clio-art-db-title-underline-right: url("art/drawingboard/parts/title-underline-right.png"); /* 16x3 */
+  --clio-art-db-menu-underline-tiled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='48' height='3' patternUnits='userSpaceOnUse'%3E%3Cimage width='48' height='3' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAADBAMAAAAnwpG3AAAAElBMVEUAAADMZmbMmWbMmZnMZjPMMzOFAtjtAAAAAXRSTlMAQObYZgAAACJJREFUeJxjFGSAAMb/DMYMDAxnwWwBBgbGUKgENmCATRAAmjoCqut/JFgAAAAASUVORK5CYII='/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23p)'/%3E%3C/svg%3E"); /* 48 px tile */
+  --clio-art-db-title-underline-tiled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='32' height='4' patternUnits='userSpaceOnUse'%3E%3Cimage width='32' height='4' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAEBAMAAAAdaSDnAAAAD1BMVEUAAADMZmbMmWbMmZnMZjOW1IuaAAAAAXRSTlMAQObYZgAAACBJREFUeJxjdGGAgP+MDAwM5/4rs0D5DCA+gxGMhw8AALzeA23Id2x2AAAAAElFTkSuQmCC'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23p)'/%3E%3C/svg%3E"); /* 32 px tile */
+}
+
+/* ---- Window ----------------------------------------------------------------
+   Drawn as the theme draws it: the nine 'pxm#' frame pieces (6176-6184, active
+   and inactive sets), placed where Mac OS 8.5 puts them round a 476x338
+   outline (Appearance window, found 1:1 in the capture), with the edge pieces
+   tiled from their ends. Under them the window paper (ppat 7120): 128x128,
+   origin at the content's top-left, 6px in and 22px down (Date & Time, Finder
+   Preferences windows agree). Corners overrun the outline, so they sit on a
+   pseudo-element larger than the window; the tiled edges sit on one clipped
+   to where each edge runs. Files: art/drawingboard/ (tooling/db-art.py --files). */
+:root .window {
+  --db-tl: url("art/drawingboard/window-tl.png");
+  --db-top: url("art/drawingboard/window-top.png");
+  --db-tr: url("art/drawingboard/window-tr.png");
+  --db-ur: url("art/drawingboard/window-ur.png");
+  --db-right: url("art/drawingboard/window-right.png");
+  --db-br: url("art/drawingboard/window-br.png");
+  --db-bottom: url("art/drawingboard/window-bottom.png");
+  --db-bl: url("art/drawingboard/window-bl.png");
+  --db-left: url("art/drawingboard/window-left.png");
+  isolation: isolate;
+  min-width: 128px;
+  min-height: 60px;
+}
+
+:root .window.inactive {
+  --db-tl: url("art/drawingboard/window-tl-inactive.png");
+  --db-top: url("art/drawingboard/window-top-inactive.png");
+  --db-tr: url("art/drawingboard/window-tr-inactive.png");
+  --db-ur: url("art/drawingboard/window-ur-inactive.png");
+  --db-right: url("art/drawingboard/window-right-inactive.png");
+  --db-br: url("art/drawingboard/window-br-inactive.png");
+  --db-bottom: url("art/drawingboard/window-bottom-inactive.png");
+  --db-bl: url("art/drawingboard/window-bl-inactive.png");
+  --db-left: url("art/drawingboard/window-left-inactive.png");
+}
+
+:root .window,
+:root .window:not(.inactive) {
+  background: url("art/drawingboard/paper.png") calc(6px - var(--clio-db-phase, 0px)) 22px / 128px 128px;
+}
+
+:root .window::before,
+:root .window::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Edges: the box from 1px left of the outline to the shadow's far side. */
+:root .window::before {
+  inset: 0 -7px -8px -1px;
+  background:
+    var(--db-top) 25px 0 / 256px 22px repeat-x,
+    var(--db-left) 0 22px / 7px 214px repeat-y,
+    var(--db-right) right 0 top 54px / 13px 150px repeat-y,
+    var(--db-bottom) left 57px bottom 0 / 183px 14px repeat-x;
+  clip-path: polygon(25px 0, calc(100% - 13px) 0, calc(100% - 13px) 54px, 100% 54px,
+    100% calc(100% - 54px), calc(100% - 59px) calc(100% - 54px), calc(100% - 59px) 100%,
+    57px 100%, 57px calc(100% - 22px), 0 calc(100% - 22px), 0 22px, 25px 22px);
+}
+
+/* Corners, overrunning the outline by up to 10px. */
+:root .window::after {
+  inset: -10px -11px -18px -8px;
+  background:
+    var(--db-tl) 4px 5px / 28px 27px no-repeat,
+    var(--db-tr) right 1px top 0 / 16px 32px no-repeat,
+    var(--db-ur) right 4px top 32px / 13px 32px no-repeat,
+    var(--db-br) right 0 bottom 2px / 63px 62px no-repeat,
+    var(--db-bl) left 0 bottom 0 / 64px 32px no-repeat;
+}
+
+/* ---- Menus -----------------------------------------------------------------
+   The shade: 2px of pencil (ppat 130, 131) down the right from 3px below the
+   menu's top and along the foot from 4px in. A menu that is not a drop-down
+   becomes the shade's containing block. --clio-db-phase shifts the pens
+   along the menu (Mac OS drew the Finder's File menu 64px further along). */
+:root :is(.menu, ul[role="menu"]):not(li > *) {
+  position: relative;
+}
+
+/* Paper (ppat 7125) from the inside top-left, and a frame drawn with pattern
+   pens (ppat 129-132), each tiled from the menu's own corner: the left pen
+   and the top from the top-left, the right pen from 4px lower, the foot from
+   4px in. Rules, not tokens: the pens read this menu's own top line and phase. */
+:root :is(.menu, ul[role="menu"]) {
+  background:
+    url("art/drawingboard/menu-top.png") 0 calc(var(--clio-menu-border-top-width) - 1px) / 128px 1px repeat-x border-box,
+    url("art/drawingboard/menu-left.png") 0 calc(var(--clio-menu-border-top-width) - 1px) / 1px 128px repeat-y border-box,
+    url("art/drawingboard/menu-right.png") right 0 top calc(var(--clio-menu-border-top-width) + 3px) / 1px 128px repeat-y border-box,
+    url("art/drawingboard/menu-foot.png") calc(4px - var(--clio-db-phase, 0px)) 100% / 128px 1px repeat-x border-box,
+    url("art/drawingboard/menu-paper.png") 0 0 / 64px 64px padding-box,
+    #dddddd;
+}
+
+:root :is(.menu, [role="menu"]) > :is(li.separator, li[role="separator"], hr) {
+  background: url("art/drawingboard/menu-separator.png") calc(0px - var(--clio-db-phase, 0px)) 4px / 128px 1px repeat-x;
+}
+
+/* A menu bar's menu hangs from the bar's last row, which is its top line. */
+:root :is(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(.menu, ul[role="menu"]) {
+  --clio-menu-border-top-width: 0px;
+}
+
+:root :is(.menu, ul[role="menu"])::before {
+  content: "";
+  position: absolute;
+  top: 3px;      /* from the padding box: 4px below the top line */
+  right: -3px;
+  bottom: -3px;
+  left: 3px;
+  background:
+    url("art/drawingboard/menu-shade-right.png") right 0 top 0 / 2px 128px repeat-y,
+    url("art/drawingboard/menu-shade-foot.png") calc(0px - var(--clio-db-phase, 0px)) 100% / 128px 2px repeat-x;
+  pointer-events: none;
+}
+
+/* The fixed pencil pixels where the pens meet (File and Edit menus agree). */
+:root :is(.menu, ul[role="menu"])::after {
+  content: "";
+  position: absolute;
+  top: 1px;      /* from the padding box: 2px below the top line */
+  right: -3px;
+  bottom: -3px;
+  left: -1px;
+  background:
+    url("art/drawingboard/menu-corner-tr.png") right 0 top 0 / 3px 2px no-repeat,
+    url("art/drawingboard/menu-corner-br.png") right 0 bottom 0 / 3px 3px no-repeat,
+    url("art/drawingboard/menu-corner-bl.png") left 0 bottom 0 / 4px 3px no-repeat;
+  pointer-events: none;
+}
+
+:root .window-pane {
+  border: 0;
+  background: transparent;
+}
+
+:root .window > .details-bar {
+  border-left: 0;
+  border-right: 0;
+}
+
+:root .title-bar,
+:root .window.inactive > .title-bar,
+:root .inactive-title-bar {
+  background: transparent;
+}
+
+:root .title-bar > :is(.title, h1, h2, h3) {
+  padding: var(--clio-title-padding);
+  background: transparent;
+  transform: none;
+}
+
+:root .title-bar > :is(.title, h1, h2, h3)::after {
+  content: none;
+}
+
+/* Close, zoom and collapse boxes are the theme's 11px pictures. */
+:root .title-bar > :is(button, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse) {
+  border: 0;
+  background: var(--clio-art-db-close) 0 0 / 11px 11px no-repeat;
+  box-shadow: none;
+}
+
+:root .title-bar > :is(.resize, .resize-box, .zoom) {
+  background-image: var(--clio-art-db-zoom);
+}
+
+:root .title-bar > :is(.shade, .shade-box, .collapse) {
+  background-image: var(--clio-art-db-collapse);
+}
+
+:root .title-bar > :is(button, .close, .close-box):is(:active, .active) {
+  background: var(--clio-art-db-close-on) 0 0 / 11px 11px no-repeat;
+  box-shadow: none;
+}
+
+:root .title-bar > :is(.resize, .resize-box, .zoom):is(:active, .active) {
+  background: var(--clio-art-db-zoom-on) 0 0 / 11px 11px no-repeat;
+}
+
+:root .title-bar > :is(.shade, .shade-box, .collapse):is(:active, .active) {
+  background: var(--clio-art-db-collapse-on) 0 0 / 11px 11px no-repeat;
+}
+
+:root .title-bar > :is(.resize, .resize-box, .zoom, .shade, .shade-box, .collapse)::before {
+  content: none;
+}
+
+/* Background window: its own frame set, grey title, boxes erased (base rule). */
+:root .window.inactive {
+  color: #555555;
+}
+
+:root .window.inactive > .title-bar > :is(.title, h1, h2, h3),
+:root .inactive-title-bar > :is(.title, h1, h2, h3) {
+  background: transparent;
+}
+
+/* List boxes: the 1px between the olive line and the white is see-through. */
+:root :is(.listbox, ul[role="listbox"], ol[role="listbox"], div[role="listbox"], select[multiple], select[size]:not([size="1"])) {
+  padding: 1px;
+  background-clip: content-box;
+}
+
+/* ---- Text fields ---------------------------------------------------------------
+   Pens (ppat 7003-7006): the rows tiled from the white's left edge, the left
+   column from its top, the right column from 1px higher (both of Date & Time's
+   fields agree), and the corner pixels they leave (tooling/db-pens.py). A rule,
+   not a token: the rows read the field's own --clio-db-phase. */
+:root :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], textarea) {
+  border-image: url("art/drawingboard/pens/field-corners.png") 5 / 5px stretch;
+  background:
+    url("art/drawingboard/pens/field-left.png") left 0 top 2px / 1px 32px repeat-y border-box,
+    url("art/drawingboard/pens/field-right.png") right 0 top 1px / 1px 32px repeat-y border-box,
+    url("art/drawingboard/pens/field-top.png") calc(2px - var(--clio-db-phase, 0px)) 0 / 128px 1px repeat-x border-box,
+    url("art/drawingboard/pens/field-bottom.png") calc(2px - var(--clio-db-phase, 0px)) 100% / 128px 1px repeat-x border-box,
+    #ffffff padding-box;
+}
+
+/* ---- Dialogs -----------------------------------------------------------------
+   Alerts and modal dialogs are framed like windows: eight pictures round the
+   1px outline (Alert 6127-6134, found 1:1 round Energy Saver's start-up
+   notice; Modal 6135-6142, the same sizes, placed the same way, inferred),
+   edges tiled from their ends, on the window paper from 4px inside the
+   outline. Insets are from the padding box, inside the 1px border. */
+:root :is(.alert-box, .modal-dialog, dialog.modal) {
+  --db-tl: url("art/drawingboard/modal-tl.png");
+  --db-top: url("art/drawingboard/modal-top.png");
+  --db-tr: url("art/drawingboard/modal-tr.png");
+  --db-right: url("art/drawingboard/modal-right.png");
+  --db-right-h: 150px;
+  --db-br: url("art/drawingboard/modal-br.png");
+  --db-bottom: url("art/drawingboard/modal-bottom.png");
+  --db-bl: url("art/drawingboard/modal-bl.png");
+  --db-left: url("art/drawingboard/modal-left.png");
+  --db-left-h: 214px;
+  position: relative;
+  isolation: isolate;
+  background: url("art/drawingboard/paper.png") calc(4px - var(--clio-db-phase, 0px)) 4px / 128px 128px border-box;
+}
+
+:root :is(.alert-box, dialog.alert-box) {
+  --db-tl: url("art/drawingboard/alert-tl.png");
+  --db-top: url("art/drawingboard/alert-top.png");
+  --db-tr: url("art/drawingboard/alert-tr.png");
+  --db-right: url("art/drawingboard/alert-right.png");
+  --db-right-h: 43px;
+  --db-br: url("art/drawingboard/alert-br.png");
+  --db-bottom: url("art/drawingboard/alert-bottom.png");
+  --db-bl: url("art/drawingboard/alert-bl.png");
+  --db-left: url("art/drawingboard/alert-left.png");
+  --db-left-h: 106px;
+}
+
+:root :is(.alert-box, .modal-dialog, dialog.modal)::before,
+:root :is(.alert-box, .modal-dialog, dialog.modal)::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* Edges: from 1px left of the outline to the shade's far side. */
+:root :is(.alert-box, .modal-dialog, dialog.modal)::before {
+  inset: -1px -8px -9px -2px;
+  background:
+    var(--db-top) 20px 0 / 256px 1px repeat-x,
+    var(--db-left) 0 22px / 2px var(--db-left-h) repeat-y,
+    var(--db-right) right 0 top 54px / 8px var(--db-right-h) repeat-y,
+    var(--db-bottom) left 57px bottom 0 / 183px 9px repeat-x;
+  clip-path: polygon(20px 0, calc(100% - 8px) 0, calc(100% - 8px) 54px, 100% 54px,
+    100% calc(100% - 54px), calc(100% - 59px) calc(100% - 54px), calc(100% - 59px) 100%,
+    57px 100%, 57px calc(100% - 22px), 0 calc(100% - 22px), 0 22px, 20px 22px);
+}
+
+/* Corners, overrunning the outline by up to 18px. */
+:root :is(.alert-box, .modal-dialog, dialog.modal)::after {
+  inset: -11px -12px -19px -9px;
+  background:
+    var(--db-tl) 5px 5px / 22px 27px no-repeat,
+    var(--db-tr) right 1px top 0 / 11px 64px no-repeat,
+    var(--db-br) right 0 bottom 2px / 63px 62px no-repeat,
+    var(--db-bl) left 0 bottom 0 / 64px 32px no-repeat;
+}
+
+/* ---- Default button: a second pencil line round the button and its shade,
+   with a light #9f9a94 pencil line between (Energy Saver notice,
+   "Close Message": ring 2px out on the left and top, 3px right, 2px below). -- */
+:root :is(.default, .btn-default)::before {
+  inset: -3px -4px -3px -3px;
+  border: 1px solid;
+  border-color: #555555 #111111 #333333 #555555;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 1px #9f9a94;
+}
+
+/* Disabled push button: not captured; the plain button's frame and face with
+   the theme's grey label (inferred). */
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(:disabled, .disabled) {
+  background: var(--clio-button-bg);
+  color: #9f9a94;
+  -webkit-text-fill-color: #9f9a94;
+}
+
+/* ---- Check boxes and radio buttons: one picture per state. ---------------- */
+:root input[type="checkbox"] {
+  width: 14px;
+  height: 11px;
+  border: 0;
+  background: var(--clio-art-db-check) 0 0 / 14px 11px no-repeat;
+  box-shadow: none;
+  vertical-align: -1px;
+}
+
+:root input[type="checkbox"]:checked {
+  background-image: var(--clio-art-db-check-on);
+}
+
+:root input[type="checkbox"]:checked::after {
+  content: none;
+}
+
+:root input[type="checkbox"]:indeterminate {
+  background-image: var(--clio-art-db-check-mixed);
+}
+
+:root input[type="checkbox"]:not(:disabled):active {
+  background: var(--clio-art-db-check-pressed) 0 0 / 14px 11px no-repeat;
+  box-shadow: none;
+}
+
+:root input[type="checkbox"]:checked:not(:disabled):active {
+  background-image: var(--clio-art-db-check-on-pressed);
+}
+
+:root input[type="checkbox"]:disabled {
+  background-image: var(--clio-art-db-check-disabled);
+}
+
+:root input[type="checkbox"]:checked:disabled {
+  background-image: var(--clio-art-db-check-on-disabled);
+}
+
+:root input[type="radio"],
+:root input[type="radio"]:not(:disabled):active {
+  width: 16px;
+  height: 12px;
+  border: 0;
+  border-radius: 0;
+  background: var(--clio-art-db-radio) 0 0 / 16px 12px no-repeat;
+  box-shadow: none;
+}
+
+:root input[type="radio"]:checked {
+  background: var(--clio-art-db-radio-on) 0 0 / 16px 12px no-repeat;
+}
+
+:root input[type="radio"]:checked:not(:disabled):active {
+  background: var(--clio-art-db-radio-on-pressed) 0 0 / 16px 12px no-repeat;
+}
+
+:root input[type="radio"]:disabled {
+  background-image: var(--clio-art-db-radio-disabled);
+}
+
+:root input[type="radio"]:checked:disabled {
+  background-image: var(--clio-art-db-radio-on-disabled);
+}
+
+:root :is(input[type="checkbox"], input[type="radio"]):disabled {
+  opacity: 1;
+}
+
+/* ---- Menus ------------------------------------------------------------------ */
+:root :is(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"]))::after,
+:root :is(.menu, [role="menu"]) > li > [aria-haspopup="true"]::after,
+:root :is(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"])):is(:hover, :focus-within, .active)::after {
+  background-image: var(--clio-art-db-submenu);
+}
+
+:root :is(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active)::before,
+:root :is(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked):is(:hover, :focus-visible, .active)::before {
+  filter: none;
+}
+
+:root :is(.menu, [role="menu"]) > li.divider {
+  box-shadow: inset 0 -4px 0 #dddddd, inset 0 -5px 0 #888888;
+}
+
+/* ---- Tabs: left end, one stretched column, right end. ---------------------- */
+:root :is([role="tablist"], .tabs) {
+  padding: 0 8px;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button) {
+  height: 27px;
+  margin: 0 -6px -1px 0;
+  padding: 6px 0 0;
+  border-width: 0 17px 0 6px;
+  border-image: var(--clio-art-db-tab) 0 17 0 6 fill / 0 17px 0 6px stretch;
+  color: #313131;
+  line-height: 20px;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button):not(:disabled):active {
+  border-image-source: var(--clio-art-db-tab-pressed);
+  color: #313131;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button):is([aria-selected="true"], .active) {
+  padding-top: 6px;
+  border-image-source: var(--clio-art-db-tab-selected);
+  color: #313131;
+}
+
+/* The panel's top line runs under the back tabs and breaks under the front
+   one (capture: row 121, #555 to #777 under Themes, none under Appearance). */
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button) {
+  position: relative;
+  margin-bottom: 0;
+}
+
+:root :is([role="tablist"], .tabs) > :is([role="tab"], li, button):is([aria-selected="true"], .active)::after {
+  content: "";
+  position: absolute;
+  left: -5px;
+  right: -12px;
+  bottom: -1px;
+  height: 1px;
+  background: #e7ded6;
+}
+
+:root :is([role="tabpanel"], .tab-panel) {
+  border-top: 1px solid #666666;
+  box-shadow: none;
+}
+
+/* ---- Scroll bars ----------------------------------------------------------- */
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-track {
+  border: 0;
+}
+
+/* The scroll box is the theme's 15px picture at its shortest (7px end + 8px end). */
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-thumb,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-thumb {
+  min-width: 15px;
+  min-height: 15px;
+}
+
+/* Tracks: #ece6e4 ruled by pattern pens (ppat 7045-7049) tiled from the
+   track's start: the edges and a double centre line. Rules, not tokens: the
+   pens read the scroller's own --clio-db-phase. */
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-track {
+  background:
+    url("art/drawingboard/track-v-left.png") 0 0 / 1px 128px repeat-y,
+    url("art/drawingboard/track-v-mid1.png") 7px 0 / 1px 256px repeat-y,
+    url("art/drawingboard/track-v-mid2.png") 8px 0 / 1px 256px repeat-y,
+    url("art/drawingboard/track-v-right.png") 15px 0 / 1px 128px repeat-y,
+    #ece6e4;
+}
+
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-track:horizontal,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-track:horizontal {
+  background:
+    url("art/drawingboard/track-h-top.png") calc(0px - var(--clio-db-phase, 0px)) 0 / 128px 1px repeat-x,
+    url("art/drawingboard/track-h-mid1.png") calc(0px - var(--clio-db-phase, 0px)) 7px / 256px 1px repeat-x,
+    url("art/drawingboard/track-h-mid2.png") calc(0px - var(--clio-db-phase, 0px)) 8px / 256px 1px repeat-x,
+    url("art/drawingboard/track-h-bottom.png") calc(0px - var(--clio-db-phase, 0px)) 15px / 128px 1px repeat-x,
+    #ece6e4;
+}
+
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-button,
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-button:active,
+:root:is(html.clio-scrollbars)::-webkit-scrollbar-button:active {
+  border: 0;
+  background-color: transparent;
+  background-position: 0 0;
+  background-size: 16px 16px;
+  box-shadow: none;
+}
+
+/* Disabled pop-up menu: the pens' lighter rows, the theme's dimmed hatch and
+   arrow (Appearance, "Variation"). */
+/* The arrow and hatch stay inside the frame; the pens draw on it. */
+:root select,
+:root select:disabled {
+  background-clip: padding-box, padding-box, border-box, border-box, border-box, border-box, padding-box;
+}
+
+:root select:disabled {
+  border-image: url("art/drawingboard/pens/popup-disabled-corners.png") 5 / 5px stretch;
+  border-color: transparent;
+  background:
+    var(--clio-art-db-popup-arrow-off) right 5px top 4px / 7px 9px no-repeat padding-box,
+    var(--clio-art-db-popup-corner-off) right 19px bottom / 24px 24px no-repeat padding-box,
+    url("art/drawingboard/pens/popup-disabled-left.png") left 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/popup-disabled-right.png") right 0 bottom 1px / 1px 16px repeat-y border-box,
+    url("art/drawingboard/pens/popup-disabled-top.png") right 1px top 0 / 64px 1px repeat-x border-box,
+    url("art/drawingboard/pens/popup-disabled-bottom.png") right 1px bottom 0 / 64px 1px repeat-x border-box,
+    #cec6b5;
+  color: #8c8c8c;
+}
+
+
+/* The 1px pencil shade right of and below a push button (ppat 7079, 7070 next
+   rows; held: 7127, 7126, tiled from the second column and row). A default
+   button instead wears a 3px pencil band (ppat 7085 rows, 7086 columns) whose
+   inner line is the box's edge, 2px outside it. Insets are from the padding box. */
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  left: 4px;
+  border: 0;
+  border-image: none;
+  box-shadow: none;
+  background:
+    url("art/drawingboard/pens/button-shade-right.png") right 0 bottom 2px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-shade-bottom.png") right 2px bottom 0 / 64px 1px repeat-x;
+  pointer-events: none;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *, :disabled, .disabled):is(:active, .active)::before {
+  left: 0;
+  background:
+    url("art/drawingboard/pens/button-held-shade-right.png") right 0 top 0 / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-held-shade-bottom.png") left 0 bottom 0 / 32px 1px repeat-x;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(.default, .btn-default)::before {
+  inset: -3px;
+  background:
+    url("art/drawingboard/pens/button-default-left-3.png") left 0 bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-left-2.png") left 1px bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-left.png") left 2px bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-right.png") right 2px bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-right-2.png") right 1px bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-right-3.png") right 0 bottom 3px / 1px 16px repeat-y,
+    url("art/drawingboard/pens/button-default-top-3.png") right 3px top 0 / 64px 1px repeat-x,
+    url("art/drawingboard/pens/button-default-top-2.png") right 3px top 1px / 64px 1px repeat-x,
+    url("art/drawingboard/pens/button-default-top.png") right 3px top 2px / 64px 1px repeat-x,
+    url("art/drawingboard/pens/button-default-bottom.png") right 3px bottom 2px / 64px 1px repeat-x,
+    url("art/drawingboard/pens/button-default-bottom-2.png") right 3px bottom 1px / 64px 1px repeat-x,
+    url("art/drawingboard/pens/button-default-bottom-3.png") right 3px bottom 0 / 64px 1px repeat-x;
+}
+
+/* The pencil overruns at a push button's corners, outside its box: Button*
+   pieces round a plain button, *Default pieces round the default one. */
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *) {
+  position: relative;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *)::after {
+  content: "";
+  position: absolute;
+  inset: -6px;   /* from the padding box: 5px outside the frame */
+  background:
+    var(--clio-art-db-btn-tl) left 3px top 3px / 7px 3px no-repeat,
+    var(--clio-art-db-btn-tr) right 2px top 3px / 4px 3px no-repeat,
+    var(--clio-art-db-btn-br) right 1px bottom 0 / 5px 6px no-repeat,
+    var(--clio-art-db-btn-bl) left 3px bottom 2px / 7px 4px no-repeat;
+  pointer-events: none;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *, :disabled, .disabled):is(:active, .active)::after {
+  background:
+    var(--clio-art-db-btn-tl) left 3px top 3px / 7px 3px no-repeat,
+    var(--clio-art-db-btn-tr) right 2px top 3px / 4px 3px no-repeat,
+    var(--clio-art-db-btn-br-held) right 1px bottom 0 / 5px 6px no-repeat,
+    var(--clio-art-db-btn-bl) left 3px bottom 2px / 7px 4px no-repeat;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(.default, .btn-default) {
+  border-image-source: none;
+}
+
+:root :is(button, .btn, .btn-default):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(.default, .btn-default)::after {
+  background:
+    url("art/drawingboard/pens/button-default-corner-tl.png") left 5px top 5px / 5px 5px no-repeat,
+    url("art/drawingboard/pens/button-default-corner-tr.png") right 5px top 5px / 5px 5px no-repeat,
+    url("art/drawingboard/pens/button-default-corner-bl.png") left 5px bottom 5px / 5px 5px no-repeat,
+    url("art/drawingboard/pens/button-default-corner-br.png") right 5px bottom 5px / 5px 5px no-repeat,
+    var(--clio-art-db-def-tl) left 1px top 1px / 9px 5px no-repeat,
+    var(--clio-art-db-def-tr) right 1px top 2px / 4px 4px no-repeat,
+    var(--clio-art-db-def-br) right 0 bottom 0 / 5px 6px no-repeat,
+    var(--clio-art-db-def-bl) left 1px bottom 1px / 9px 5px no-repeat;
+}
+
+:root progress {
+  border-left-color: #333333;
+}
+
+:root progress:indeterminate,
+:root progress:indeterminate::-webkit-progress-bar {
+  background: var(--clio-art-db-progress-arrows) 0 center / 128px 5px repeat-x, #ddd6c5;
+}
+
+:root fieldset {
+  background: transparent;
+}
+
+:root fieldset > legend {
+  margin-left: 0;
+}
+
+/* ---- Antialiasing as Mac OS blends it: #333 labels on #cec6b5 (their solid
+   pixels #313131, from a 16-bit buffer); grey when disabled. */
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *),
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):not(:disabled, .disabled):is(:active, .active) {
+  font-palette: --clio-aa-db-button;
+}
+
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .control-strip *):is(:disabled, .disabled) {
+  font-palette: --clio-aa-db-button-disabled;
+}
+
+/* Adaptations the historical machines never needed. Historical sizes are
+   calibration, not a cage: on a touch screen the controls grow to the
+   "coarse pointer" sizes from AI System 6's fidelity contract, without any
+   transform: scale() of the interface. */
+@media (pointer: coarse) {
+  :root,
+  [data-era] {
+    --clio-control-height: 36px;
+    --clio-popup-height: 36px;
+    --clio-field-height: 40px;
+    --clio-menubar-height: 32px;
+    --clio-menu-item-height: 32px;
+    --clio-list-row: 32px;
+    --clio-tab-height: 32px;
+  }
+
+  /* The title-bar boxes keep their 11px art; their hit area grows to 44px. */
+  .title-bar > :is(button, .close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse)::after {
+    content: "";
+    position: absolute;
+    inset: -17px;
+  }
+}
+
+/* Windows High Contrast and other forced-colour modes: give the choice
+   controls back to the system so their state stays visible. */
+@media (forced-colors: active) {
+  :where(input[type="checkbox"], input[type="radio"]) {
+    appearance: auto;
+    -webkit-appearance: auto;
+  }
+
+  .title-bar,
+  .inactive-title-bar {
+    forced-color-adjust: none;
+  }
+}
+
+@media print {
+  :where(.window, .modal-dialog, .alert-box, .standard-dialog) {
+    box-shadow: none;
+  }
+}