clio.css 0.9.1 → 0.12.0

package/dist/clio.platinum.css

@@ -1,4 +1,4 @@
-/*! clio.css 0.9.1 (Platinum default) | MIT | https://surfine.github.io/clio.css/
+/*! clio.css 0.12.0 (Platinum 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. */
@@ -28,6 +28,16 @@
 /* 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. */
+/* Each colour face is declared twice: the Plain file alone first, then both. An
+   engine that cannot parse tech() (Safari before 17) drops the second rule and
+   keeps the first instead of losing the face. */
+@font-face {
+  font-family: "Clio Sans '97";
+  src: url("fonts/ClioSans97Plain.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
 @font-face {
   font-family: "Clio Sans '97";
   src: url("fonts/ClioSans97.woff2") format("woff2") tech(color-COLRv1),
@@ -38,9 +48,18 @@
 
 /* Clio Sans '97's antialiasing is COLRv1 colour layers. A browser without
    COLRv1 (Safari) would paint every layer solid, so it gets the Plain file:
-   the outlines alone, each pixel at least half covered. */
+   the same levels as COLRv0 layers, which Safari draws (fully covered pixels
+   in the text colour, the others black at their alpha unless a palette below
+   recolours them), over outlines for browsers with no colour fonts. */
 /* 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/ClioSans97TitlePlain.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
 @font-face {
   font-family: "Clio Sans '97 Title";
   src: url("fonts/ClioSans97Title.woff2") format("woff2") tech(color-COLRv1),
@@ -56,10 +75,24 @@
    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/ClioSans97PlainExact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
 @font-face {
   font-family: "Clio Sans '97 Exact";
   src: url("fonts/ClioSans97Exact.woff2") format("woff2") tech(color-COLRv1),
-    url("fonts/ClioSans97Plain.woff2") format("woff2");
+    url("fonts/ClioSans97PlainExact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Sans '97 Title Exact";
+  src: url("fonts/ClioSans97TitlePlainExact.woff2") format("woff2");
   font-weight: 100 900;
   font-display: swap;
 }
@@ -67,7 +100,7 @@
 @font-face {
   font-family: "Clio Sans '97 Title Exact";
   src: url("fonts/ClioSans97TitleExact.woff2") format("woff2") tech(color-COLRv1),
-    url("fonts/ClioSans97TitlePlain.woff2") format("woff2");
+    url("fonts/ClioSans97TitlePlainExact.woff2") format("woff2");
   font-weight: 100 900;
   font-display: swap;
 }
@@ -213,6 +246,126 @@
     14 #9c9c94;
 }
 
+@font-palette-values --clio-aa-rdoc-title {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #101010,
+    1 #212121,
+    2 #323232,
+    3 #444444,
+    4 #555555,
+    5 #666666,
+    6 #777777,
+    7 #878787,
+    8 #989898,
+    9 #a9a9a9,
+    10 #bababa,
+    11 #cccccc,
+    12 #dddddd,
+    13 #eeeeee,
+    14 #ffffff;
+}
+
+@font-palette-values --clio-aa-rdoc-title-inactive {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #eeeeee,
+    1 #dddddd,
+    2 #cccccc,
+    3 #bababa,
+    4 #a9a9a9,
+    5 #989898,
+    6 #878787,
+    7 #777777,
+    8 #666666,
+    9 #555555,
+    10 #444444,
+    11 #323232,
+    12 #212121,
+    13 #101010,
+    14 #000000;
+}
+
+/* COLRv0 edge levels in other text colours (Safari; Chrome's COLRv1 file
+   follows the text colour by itself and ignores these): white for chosen
+   menu titles, items and icon labels, #6f6f6f for dimmed items. */
+@font-palette-values --clio-aa-white {
+  font-family: "Clio Sans '97";
+  override-colors:
+    0 rgb(255 255 255 / 0.0667),
+    1 rgb(255 255 255 / 0.1333),
+    2 rgb(255 255 255 / 0.2000),
+    3 rgb(255 255 255 / 0.2667),
+    4 rgb(255 255 255 / 0.3333),
+    5 rgb(255 255 255 / 0.4000),
+    6 rgb(255 255 255 / 0.4667),
+    7 rgb(255 255 255 / 0.5333),
+    8 rgb(255 255 255 / 0.6000),
+    9 rgb(255 255 255 / 0.6667),
+    10 rgb(255 255 255 / 0.7333),
+    11 rgb(255 255 255 / 0.8000),
+    12 rgb(255 255 255 / 0.8667),
+    13 rgb(255 255 255 / 0.9333);
+}
+
+@font-palette-values --clio-aa-6f6f6f {
+  font-family: "Clio Sans '97";
+  override-colors:
+    0 rgb(111 111 111 / 0.0667),
+    1 rgb(111 111 111 / 0.1333),
+    2 rgb(111 111 111 / 0.2000),
+    3 rgb(111 111 111 / 0.2667),
+    4 rgb(111 111 111 / 0.3333),
+    5 rgb(111 111 111 / 0.4000),
+    6 rgb(111 111 111 / 0.4667),
+    7 rgb(111 111 111 / 0.5333),
+    8 rgb(111 111 111 / 0.6000),
+    9 rgb(111 111 111 / 0.6667),
+    10 rgb(111 111 111 / 0.7333),
+    11 rgb(111 111 111 / 0.8000),
+    12 rgb(111 111 111 / 0.8667),
+    13 rgb(111 111 111 / 0.9333);
+}
+
+/* Drawing Board's menu text (#313131) and dimmed text (#8c8c8c), for Safari's COLRv0 file. */
+@font-palette-values --clio-aa-313131 {
+  font-family: "Clio Sans '97";
+  override-colors:
+    0 rgb(49 49 49 / 0.0667),
+    1 rgb(49 49 49 / 0.1333),
+    2 rgb(49 49 49 / 0.2000),
+    3 rgb(49 49 49 / 0.2667),
+    4 rgb(49 49 49 / 0.3333),
+    5 rgb(49 49 49 / 0.4000),
+    6 rgb(49 49 49 / 0.4667),
+    7 rgb(49 49 49 / 0.5333),
+    8 rgb(49 49 49 / 0.6000),
+    9 rgb(49 49 49 / 0.6667),
+    10 rgb(49 49 49 / 0.7333),
+    11 rgb(49 49 49 / 0.8000),
+    12 rgb(49 49 49 / 0.8667),
+    13 rgb(49 49 49 / 0.9333);
+}
+
+@font-palette-values --clio-aa-8c8c8c {
+  font-family: "Clio Sans '97";
+  override-colors:
+    0 rgb(140 140 140 / 0.0667),
+    1 rgb(140 140 140 / 0.1333),
+    2 rgb(140 140 140 / 0.2000),
+    3 rgb(140 140 140 / 0.2667),
+    4 rgb(140 140 140 / 0.3333),
+    5 rgb(140 140 140 / 0.4000),
+    6 rgb(140 140 140 / 0.4667),
+    7 rgb(140 140 140 / 0.5333),
+    8 rgb(140 140 140 / 0.6000),
+    9 rgb(140 140 140 / 0.6667),
+    10 rgb(140 140 140 / 0.7333),
+    11 rgb(140 140 140 / 0.8000),
+    12 rgb(140 140 140 / 0.8667),
+    13 rgb(140 140 140 / 0.9333);
+}
+
 /* 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. */
@@ -270,6 +423,12 @@
      fallback colour where background-clip: text is missing. */
   --clio-disabled-dither: var(--clio-art-s6-gray50);
   --clio-disabled-fill: transparent;
+  /* A dimmed pop-up menu: the whole control (frame, shadow, title, arrow) drawn
+     through the 50% gray, the ink where x + y is odd surviving (System 7.5.3,
+     Memory's Select Hard Disk with virtual memory off, measured). The pattern
+     starts at the control's corner, not the screen's. */
+  --clio-popup-disabled-mask: var(--clio-art-s6-gray50) 0 0 / 2px 2px;   /* a crisp 2x2 picture: a gradient blurs at 2x in Firefox */
+  --clio-popup-disabled-fg: var(--clio-ink);
   --clio-selection-bg: #000000;
   --clio-selection-fg: #ffffff;
 
@@ -279,6 +438,7 @@
   /* 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-text-smoothing-moz: grayscale;   /* Firefox's nearest to 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. */
@@ -298,6 +458,12 @@
   --clio-radius: 0;
   --clio-control-height: 20px;
   --clio-field-height: 20px;
+  /* clio.js's insertion point: the font's line height, 16px for 12pt (System
+     7.5.3, Find File's 20px field: rows 2-17), whatever the field's line-height. */
+  --clio-caret-height: 16px;
+  /* ...and its blink: CaretTime, 32 ticks lit and 32 dark (System 6.0.8 and 7.5.3 Find File;
+     PRAM's factory value in the Mac IIx and Quadra 650 ROMs). */
+  --clio-caret-ticks: 32;
   --clio-row-height: 16px;
   --clio-gap: 8px;
 
@@ -422,6 +588,7 @@
   /* Edit text: 1px frame, text inset 3px (Control Panel RAM cache field). */
   --clio-field-padding: 3px;
   --clio-field-focus-shadow: none;
+  --clio-field-focus-outline: var(--clio-focus-outline);
 
   /* Pop-up menus */
   --clio-popup-bg: var(--clio-paper);
@@ -440,12 +607,43 @@
      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.js scroll bars: System 6 and 7 drag an outline of the box and scroll
+     on release; the box keeps one length, whatever the document's. */
+  --clio-scrollbar-thumb-length: 16px;
+  --clio-scrollbar-thumb-tracking: outline;
+  --clio-scrollbar-thumb-overlap: 0px;
+  --clio-scrollbar-thumb-after: none;
+  /* clio.js: a held arrow or lane repeats at once (System 6 and 7's TrackControl
+     calls the action on every pass while the button is down) */
+  --clio-scrollbar-repeat-delay: 0ms;
+  /* clio.js menus: System 6 and 7 menus stay open only while the button is held */
+  --clio-menu-sticky: 0;
+  /* clio.js: the grey outline of a dragged window (System 6.0.8 and 7.5.3: 1px) */
+  --clio-drag-outline-width: 1px;
+  /* ... around the window and its 1px shadow (both measured) */
+  --clio-drag-outline-extra: 1px;
+  /* clio.zoomRects() (System 7.5.3, measured): 8 outlines at (1.6^k - 1) / (1.6^8 - 1)
+     of the way, 4 on screen at once */
+  --clio-zoom-count: 8;
+  --clio-zoom-steps: 8;
+  --clio-zoom-ratio: 1.6;
+  --clio-zoom-offset: 1;
+  --clio-zoom-keep: 4;
+  --clio-drag-outline-shadow-inset: 0px;   /* System 6: the region is the whole rectangle, though the shadow is drawn from a pixel in */
+  /* clio.js: a dragged scroll box leaves its frame XORed with dkGray (System
+     6.0.8, measured): white where dkGray is set, in step with the lane's ltGray,
+     inverting what is under it, so over the lane it comes out solid black. */
+  --clio-scrollbar-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 0h3v1H1zM0 1h2v1H0zM3 1h1v1H3z'/%3E%3C/svg%3E") 0 0 / 4px 2px repeat;
+  --clio-scrollbar-ghost-blend: difference;
+  /* clio.js: the box sits inside the bar's line, 14px wide (System 6.0.8, System Folder list) */
+  --clio-scrollbar-thumb-inset: 1px;
   --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-button-bevel: 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);
@@ -548,6 +746,99 @@
   --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");
+  /* Disclosure triangle: System 6 had none; it takes System 7's (Finder list
+     view, 11px, black with a blue and white checker). */
+  --clio-disclosure-size: 11px;
+  --clio-disclosure-gap: 4px;
+  --clio-art-disclosure: url("art/system7/disclosure.png");
+  --clio-art-disclosure-open: url("art/system7/disclosure-open.png");
+
+  /* List view (Finder, View by Name; System 7.5.3): headers on the window's
+     white, the sorted one underlined, a double rule (black, white, black) below. */
+  --clio-list-view-bg: var(--clio-paper);
+  --clio-list-view-row: 16px;
+  --clio-list-view-header-height: 20px;
+  --clio-list-view-header-padding: 0 4px 3px;
+  --clio-list-view-header-bg: linear-gradient(var(--clio-ink), var(--clio-ink)) 0 calc(100% - 2px) / 100% 1px no-repeat, linear-gradient(var(--clio-ink), var(--clio-ink)) 0 100% / 100% 1px no-repeat;
+  --clio-list-view-sorted-header-bg: var(--clio-list-view-header-bg);
+  --clio-list-view-sorted-decoration: underline;
+  --clio-list-view-sorted-bg: transparent;
+  --clio-list-view-sort-width: 0;
+
+  /* Slider: System 6 had none; it takes Platinum's (Mouse control panel,
+     Mac OS 9.0) until an era draws its own. */
+  --clio-slider-height: 16px;
+  --clio-slider-track-height: 7px;
+  --clio-slider-track-top: 3px;
+  --clio-slider-track-slice: 3px;
+  --clio-slider-track-slice-n: 3;
+  --clio-slider-thumb-width: 15px;
+  --clio-slider-thumb-height: 16px;
+  --clio-art-slider-track: url("art/platinum/slider-track.png");
+  --clio-art-slider-thumb: url("art/platinum/slider-thumb.png");
+  --clio-slider-tick-gap: 0px;
+  --clio-slider-tick-count: 5;
+  --clio-slider-tick-offset: 9px;
+  --clio-slider-tick-run: 18px;
+  --clio-slider-tick-light: #ffffff;
+  --clio-slider-tick-ink: #000000;
+  --clio-slider-tick-shade: #888888;
+
+  /* Little arrows: System 6 had none; it takes System 7's (Memory control
+     panel, Cache Size: 15x25). Held and dimmed states are not on System 7's
+     screens and keep the normal picture. */
+  --clio-little-arrows-width: 15px;
+  --clio-little-arrows-height: 25px;
+  --clio-art-little-arrows: url("art/system7/little-arrows.png");
+  --clio-art-little-arrows-up: var(--clio-art-little-arrows);
+  --clio-art-little-arrows-down: var(--clio-art-little-arrows);
+  --clio-art-little-arrows-disabled: var(--clio-art-little-arrows);
+
+  /* Bevel button: System 6 and 7 had none; they take Platinum's
+     (Navigation Services, Mac OS 9.0). */
+  --clio-bevel-min: 20px;
+  --clio-bevel-padding: 0 2px;
+  --clio-bevel-slice: 3px;
+  --clio-bevel-slice-n: 3;
+  --clio-art-bevel: url("art/platinum/bevel.png");
+  --clio-art-bevel-held: url("art/platinum/bevel-held.png");
+  --clio-art-bevel-menu-arrow: url("art/platinum/bevel-menu-arrow.png");
+  --clio-bevel-arrow-right: 5px;
+  --clio-bevel-arrow-bottom: 4px;
+  --clio-bevel-arrow-width: 3px;
+  --clio-bevel-arrow-height: 2px;
+
+  /* Chasing arrows: Platinum's three frames (Network Browser, Mac OS 9.0). */
+  --clio-art-chasing-arrows: url("art/platinum/chasing-arrows.png");
+  --clio-chasing-arrows-frames: 3;
+
+  /* Separator: a 1px ink line. */
+  --clio-separator-height: 1px;
+  --clio-separator-margin: 8px 0;
+  --clio-separator-bg: var(--clio-ink);
+
+  /* Help button: Platinum's (Keyboard control panel, Mac OS 9.0). */
+  --clio-art-help-button: url("art/platinum/help-button.png");
+  --clio-image-well-bg: #ffffff;
+
+  /* Utility window: the document window's parts at the size of System 7's
+     floating windows (inferred: none was on the captured screens). */
+  --clio-utility-titlebar-height: 13px;
+  --clio-utility-titlebar-row: 11px;
+  --clio-utility-box-size: 9px;
+  --clio-utility-slot: 13px;
+  --clio-utility-title-size: 9px;
+
+  /* Help balloon: Mac OS 9.0's (Balloon Help), the same in every era. */
+  --clio-art-balloon: url("art/platinum/balloon.png");
+  --clio-art-balloon-tail: url("art/platinum/balloon-tail.png");
+
+  /* Scrolling menu arrows: System 6 and 7 (Control Panels submenu, System
+     7.5.3), black, 5px in from the item's left (up arrow inferred, mirrored). */
+  --clio-art-menu-scroll-down: url("art/system7/menu-scroll-down.png");
+  --clio-art-menu-scroll-up: url("art/system7/menu-scroll-up.png");
+  --clio-menu-scroll-left: 5px;
+
   /* 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");
@@ -557,6 +848,7 @@
   --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-open: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAGFBMVEUAAAAAAADd3d1mZmZEREQiIiKIiIj///+MKsksAAAAAXRSTlMAQObYZgAAACtJREFUeJxjEBQMYGBii//IwCjOKSbFIMDAIMAozun2iomB4fcGJgbG9wwAWK0GLJJZmp8AAAAASUVORK5CYII="); /* 7x7, slice 3 */
   --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");
@@ -566,6 +858,15 @@
   --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");
+  /* Rounded-corner window (rDocProc): corner masks and frame curves, tooling/rare-art.py. */
+  --clio-art-rdoc-mask-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h1v1h-1zM3 1h3v1h-3zM2 2h4v1h-4zM1 3h5v1h-5zM1 4h5v1h-5zM0 5h6v1h-6z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-frame-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h1v1h-1zM3 1h3v1h-3zM2 2h2v1h-2zM1 3h2v1h-2zM1 4h1v1h-1zM0 5h2v1h-2z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-mask-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM0 1h3v1h-3zM0 2h4v1h-4zM0 3h5v1h-5zM0 4h5v1h-5zM0 5h6v1h-6z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-frame-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM0 1h3v1h-3zM2 2h2v1h-2zM3 3h2v1h-2zM4 4h1v1h-1zM4 5h2v1h-2z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-mask-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h6v1h-6zM1 1h5v1h-5zM1 2h5v1h-5zM2 3h4v1h-4zM3 4h3v1h-3zM5 5h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-frame-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h2v1h-2zM1 1h1v1h-1zM1 2h2v1h-2zM2 3h2v1h-2zM3 4h3v1h-3zM5 5h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-mask-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h6v1h-6zM0 1h5v1h-5zM0 2h5v1h-5zM0 3h4v1h-4zM0 4h3v1h-3zM0 5h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-rdoc-frame-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 0h2v1h-2zM4 1h1v1h-1zM3 2h2v1h-2zM2 3h2v1h-2zM0 4h3v1h-3zM0 5h1v1h-1z'/%3E%3C/svg%3E");
 }
 
 /* Base. clio.css styles elements only inside its own components, plus bare
@@ -580,7 +881,7 @@
 }
 
 :where(.window, .menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"],
-  .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) {
+  .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .rounded-window, .clio) {
   box-sizing: border-box;
   color: var(--clio-ink);
   font-family: var(--clio-font-chrome);
@@ -590,6 +891,7 @@
   font-synthesis: none;
   line-height: 16px;
   -webkit-font-smoothing: var(--clio-font-smoothing);
+  -moz-osx-font-smoothing: grayscale;   /* Firefox on macOS otherwise thickens the pixel squares with a grey fringe */
 }
 
 :where(.window, .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) *,
@@ -603,6 +905,7 @@
   font-family: var(--clio-font-text);
   font-stretch: var(--clio-font-stretch-text);
   -webkit-font-smoothing: var(--clio-text-smoothing);
+  -moz-osx-font-smoothing: var(--clio-text-smoothing-moz);
 }
 
 :where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(h1, h2, h3, h4, .heading) {
@@ -669,6 +972,37 @@
   white-space: nowrap;
 }
 
+/* Cursors: the arrow, the I-beam and the watch redrawn pixel for pixel from System 7.5.3
+   and Mac OS 9.0 (tooling/cursor-art.py; the arrow is the same in both), at
+   1x, 2x and 3x. On by default; class="clio-system-cursors" on <html> gives
+   the system's own back. The Mac had no pointing hand: links and buttons
+   inside clio.css's windows keep the arrow. aria-busy="true" shows the watch
+   (its first frame; hot spot 8,8). */
+:where(:root) {
+  --clio-cursor-arrow: image-set(url("art/cursors/arrow.png") 1x, url("art/cursors/arrow-2x.png") 2x, url("art/cursors/arrow-3x.png") 3x) 1 1, default;
+  --clio-cursor-text: image-set(url("art/cursors/ibeam.png") 1x, url("art/cursors/ibeam-2x.png") 2x, url("art/cursors/ibeam-3x.png") 3x) 3 4, text;
+  --clio-cursor-wait: image-set(url("art/cursors/watch.png") 1x, url("art/cursors/watch-2x.png") 2x, url("art/cursors/watch-3x.png") 3x) 8 8, wait;
+  cursor: var(--clio-cursor-arrow);
+}
+
+:where(:root.clio-system-cursors) {
+  --clio-cursor-arrow: default;
+  --clio-cursor-text: text;
+  --clio-cursor-wait: wait;
+}
+
+:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"]), textarea, [contenteditable]:not([contenteditable="false"])) {
+  cursor: var(--clio-cursor-text);
+}
+
+:where(.window, .menu-bar, [role="menubar"], .menu, [role="menu"], .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .control-strip, .clio, .desktop) :where(a:any-link, button, label, summary, select, [role="button"], [role="tab"]) {
+  cursor: var(--clio-cursor-arrow);
+}
+
+:where([aria-busy="true"]), :where([aria-busy="true"]) * {
+  cursor: var(--clio-cursor-wait);
+}
+
 /* Windows.
    Markup: .window > .title-bar (> .close, .title, .resize [, .shade]) >
    optional .details-bar > .window-pane. system.css markup (.title-bar
@@ -760,7 +1094,7 @@
   font-size: 0;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
   touch-action: manipulation;
 }
 
@@ -785,7 +1119,7 @@
 
 /* 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) {
+.title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom):is(:active:where(:not([data-clio-off])), .active) {
   background: var(--clio-art-s6-burst) 0 0 / 11px 11px no-repeat border-box, var(--clio-paper);
 }
 
@@ -803,7 +1137,7 @@
   box-sizing: border-box;
 }
 
-.title-bar > :is(.resize, .resize-box, .zoom):is(:active, .active)::before {
+.title-bar > :is(.resize, .resize-box, .zoom):is(:active:where(:not([data-clio-off])), .active)::before {
   opacity: 0;
 }
 
@@ -858,9 +1192,15 @@
   white-space: nowrap;
 }
 
+/* A separator line between groups in a window or dialog (Mac OS 8 HIG:
+   "Separator Lines"): <hr class="separator"> or <div class="separator">. */
 :where(.separator) {
   flex: none;
-  border-top: var(--clio-border);
+  box-sizing: border-box;
+  height: var(--clio-separator-height);
+  margin: var(--clio-separator-margin);
+  border: 0;
+  background: var(--clio-separator-bg);
 }
 
 /* A status line under the pane. */
@@ -876,6 +1216,17 @@
   line-height: 14px;
 }
 
+/* Collapsed (WindowShade; clio.js toggles .collapsed from the collapse box):
+   only the title bar stays. */
+:where(.window.collapsed) {
+  height: auto !important;
+  min-height: 0 !important;
+}
+
+:where(.window.collapsed) > :not(.title-bar) {
+  display: none !important;
+}
+
 /* 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>
@@ -923,12 +1274,12 @@
   white-space: nowrap;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :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(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a):active:where(:not([data-clio-off])),
 :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);
@@ -978,6 +1329,12 @@
   display: block;
 }
 
+/* With clio.js (data-clio-menus) a menu opens from the pointer or the arrow
+   keys, not merely because focus sits on its title. */
+:where([data-clio-menus]) li:focus-within:not(.open) > :is(.menu, ul[role="menu"]) {
+  display: none;
+}
+
 /* ---- Menu items ---------------------------------------------------------- */
 :where(.menu, [role="menu"]) > li {
   position: relative;
@@ -988,7 +1345,7 @@
   font-weight: var(--clio-menu-item-weight);
   line-height: var(--clio-menu-item-height);
   white-space: nowrap;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(.menu, [role="menu"]) > li:has(> :is(a, button)) {
@@ -1014,11 +1371,11 @@
   text-decoration: none;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
-: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) {
+:where(.menu, [role="menu"]) > li:not(.disabled, [aria-disabled="true"], .separator, [role="separator"]):is(:hover, :focus-within, .active):where(:not([data-clio-blink])),
+:where(.menu, [role="menu"]) > li > :is(a, button):not([aria-disabled="true"], :disabled):is(:hover, :focus-visible, .active):where(:not([data-clio-blink])) {
   background: var(--clio-menu-item-active-bg);
   box-shadow: var(--clio-menu-item-active-shadow);
   color: var(--clio-menu-item-active-fg);
@@ -1056,8 +1413,8 @@
   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 {
+:where(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active):where(:not([data-clio-blink]))::before,
+:where(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked):is(:hover, :focus-visible, .active):where(:not([data-clio-blink]))::before {
   background-image: var(--clio-art-s6-menucheck-on);
 }
 
@@ -1074,7 +1431,7 @@
   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 {
+:where(.menu, [role="menu"]) > li:has(> :is(.menu, ul[role="menu"])):is(:hover, :focus-within, .active):where(:not([data-clio-blink]))::after {
   background-image: var(--clio-art-s6-submenu-on);
 }
 
@@ -1094,6 +1451,33 @@
   border-bottom: 1px dotted var(--clio-ink);
 }
 
+/* ---- Scrolling menus, menu bar extras, item icons ------------------------------
+   A menu longer than the screen ends in a scroll arrow row: <li class="scroll-down"
+   aria-hidden="true"> (or "scroll-up" at the top). Menu bar items pushed to
+   the right (the Help and Application menus) take class "menu-extras"; an
+   icon in a title or an item is an <img> 16px square. */
+:where(.menu, [role="menu"]) > :where(li.scroll-down, li.scroll-up) {
+  min-height: var(--clio-menu-item-height);
+  padding: 0;
+  background: var(--clio-art-menu-scroll-down) var(--clio-menu-scroll-left) 50% / auto no-repeat;
+}
+
+:where(.menu, [role="menu"]) > :where(li.scroll-up) {
+  background-image: var(--clio-art-menu-scroll-up);
+}
+
+:where(.menu-bar, [role="menubar"]) > :where(li.menu-extras) {
+  margin-left: auto;
+}
+
+:where(.menu-bar, [role="menubar"], .menu, [role="menu"]) :where(img) {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  vertical-align: -3px;
+  image-rendering: pixelated;
+}
+
 /* 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
@@ -1120,18 +1504,19 @@
   font-stretch: var(--clio-font-stretch-text);
   font-weight: var(--clio-button-weight);
   -webkit-font-smoothing: var(--clio-font-smoothing);
+  -moz-osx-font-smoothing: grayscale;   /* Firefox on macOS otherwise thickens the pixel squares with a grey fringe */
   line-height: 14px;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
   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) {
+:where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled, .disabled):is(:active:where(:not([data-clio-off])), .active) {
   background: var(--clio-button-active-bg);
   box-shadow: var(--clio-button-active-shadow);
   border-image-source: var(--clio-button-frame-held);
@@ -1195,7 +1580,7 @@
   vertical-align: -2px;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(input[type="checkbox"]):checked {
@@ -1203,7 +1588,7 @@
   background-origin: var(--clio-check-mark-origin);
 }
 
-:where(input[type="checkbox"]):not(:disabled):active {
+:where(input[type="checkbox"]):not(:disabled):active:where(:not([data-clio-off])) {
   border-width: var(--clio-check-pressed-border-width);
 }
 
@@ -1225,18 +1610,18 @@
   vertical-align: -2px;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(input[type="radio"]):checked {
   background: var(--clio-radio-on);
 }
 
-:where(input[type="radio"]):not(:disabled):active {
+:where(input[type="radio"]):not(:disabled):active:where(:not([data-clio-off])) {
   background: var(--clio-radio-pressed);
 }
 
-:where(input[type="radio"]):checked:not(:disabled):active {
+:where(input[type="radio"]):checked:not(:disabled):active:where(:not([data-clio-off])) {
   background: var(--clio-radio-pressed-on);
 }
 
@@ -1300,7 +1685,7 @@
 }
 
 :where(input, textarea):focus-visible {
-  outline: var(--clio-focus-outline);
+  outline: var(--clio-field-focus-outline, var(--clio-focus-outline));
   outline-offset: var(--clio-focus-offset);
   box-shadow: var(--clio-field-focus-shadow);
 }
@@ -1336,10 +1721,14 @@
   font-stretch: var(--clio-font-stretch-text);
   font-weight: var(--clio-popup-weight);
   -webkit-font-smoothing: var(--clio-font-smoothing);
+  -moz-osx-font-smoothing: grayscale;   /* Firefox on macOS otherwise thickens the pixel squares with a grey fringe */
   line-height: 16px;
+  white-space: nowrap;   /* one line, cut short with an ellipsis, as the Mac truncated a pop-up's title */
+  overflow: hidden;
+  text-overflow: ellipsis;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(select):focus-visible {
@@ -1348,7 +1737,93 @@
 }
 
 :where(select):disabled {
-  color: var(--clio-disabled);
+  color: var(--clio-popup-disabled-fg, var(--clio-disabled));
+  opacity: 1;   /* Chrome fades a disabled select it draws itself; the Mac did not */
+  mask: var(--clio-popup-disabled-mask, none);
+  mask-clip: no-clip;   /* the shadow outside the frame is dimmed too */
+}
+
+/* The open pop-up menu. Where the browser lets CSS draw it (appearance:
+   base-select: Chrome 135, Safari 27), it is the era's menu, laid over the
+   button with the current item on the button's row (clio.js sets
+   --clio-picker-shift; without it the first item sits there). clio.js draws
+   the same menu as elements elsewhere. */
+@supports (appearance: base-select) {
+  /* a mouse or trackpad only: on touch screens the system's own picker
+     (the iOS wheel, Android's sheet) stays, as it is the better tool there */
+  @media (pointer: fine) {
+    :where(select:not([multiple], [size]:not([size="1"]))),
+    :where(select:not([multiple], [size]:not([size="1"])))::picker(select) {
+      appearance: base-select;
+    }
+
+    /* keep the closed button laid out as before (the base-select default is a
+       centred inline-flex box, a pixel off the measured text) */
+    :where(select:not([multiple], [size]:not([size="1"]))) {
+      display: inline-block;
+      align-items: normal;
+      gap: normal;
+      text-align: start;
+    }
+
+    :where(select)::picker-icon {
+      display: none;   /* the era's arrow is the button's own art */
+    }
+
+    :where(select)::picker(select) {
+      position-area: span-block-end span-inline-end;   /* top and left on the button's */
+      position-try-fallbacks: none;
+      inset: auto;
+      min-width: anchor-size(width);
+      margin: 0;
+      padding: 0;
+      translate: 0 var(--clio-picker-shift, 0px);
+      border: var(--clio-menu-border);
+      border-top-width: var(--clio-menu-border-top-width, 1px);
+      border-radius: 0;   /* Safari rounds its picker */
+      background: var(--clio-menu-bg);
+      box-shadow: var(--clio-menu-shadow);
+      color: var(--clio-ink);
+    }
+
+    :where(select) option {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: var(--clio-menu-item-height);
+      padding: var(--clio-menu-item-padding);
+      font: inherit;
+      font-weight: var(--clio-menu-item-weight, inherit);
+      line-height: var(--clio-menu-item-height);
+      white-space: nowrap;
+      outline: none;
+    }
+
+    :where(select) option:is(:hover, :focus-visible):not(:disabled) {
+      background: var(--clio-menu-item-active-bg);
+      box-shadow: var(--clio-menu-item-active-shadow);
+      color: var(--clio-menu-item-active-fg);
+    }
+
+    :where(select) option:disabled {
+      color: var(--clio-disabled);
+    }
+
+    :where(select) option::checkmark {
+      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(select) option:is(:hover, :focus-visible)::checkmark {
+      background-image: var(--clio-art-s6-menucheck-on);
+    }
+  }
 }
 
 /* A list box: <select multiple> or <select size="n">. */
@@ -1391,7 +1866,7 @@
   padding: 0 4px;
   line-height: var(--clio-list-row);
   white-space: nowrap;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(.listbox, [role="listbox"]) > :is(li, [role="option"]):is([aria-selected="true"], .selected) {
@@ -1477,7 +1952,7 @@
   font-family: var(--clio-font-chrome);
   font-size: var(--clio-font-size);
   font-weight: var(--clio-chrome-weight);
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where([role="tablist"], .tabs) > :is([role="tab"], li, button):is([aria-selected="true"], .active) {
@@ -1513,7 +1988,7 @@
   font-family: var(--clio-font-small);
   font-size: var(--clio-font-size-small);
   text-align: center;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
 :where(.icon) > :is(img, svg, .icon-image) {
@@ -1539,1090 +2014,2717 @@
   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);
-}
+/* Controls the classic guidelines add to the first set (Macintosh Human
+   Interface Guidelines 1992, ch. 7; Mac OS 8 Human Interface Guidelines,
+   ch. 2), each drawn per era from tokens. COVERAGE.md lists them all. */
 
-:where(.standard-dialog) {
+/* ---- Disclosure triangle ---------------------------------------------------
+   Markup: <button class="disclosure" aria-expanded="false" aria-label="Show">
+   or <details><summary>…</summary>…</details>. System 7 brought it to the
+   Finder's list views; System 6 had none (it uses System 7's). */
+:where(.disclosure) {
+  display: inline-block;
   box-sizing: border-box;
-  max-width: 100%;
+  width: var(--clio-disclosure-size);
+  height: var(--clio-disclosure-size);
+  min-width: 0;
+  min-height: 0;
   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;
+  background: var(--clio-art-disclosure) 0 0 / var(--clio-disclosure-size) var(--clio-disclosure-size) no-repeat;
+  box-shadow: none;
+  vertical-align: middle;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: var(--clio-cursor-arrow);
 }
 
-/* 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(.disclosure):is([aria-expanded="true"], .open) {
+  background-image: var(--clio-art-disclosure-open);
 }
 
-:where(.alert-box) > :where(.alert-icon) {
-  grid-row: 1;
-  width: 32px;
-  height: 32px;
+:where(details) > :where(summary) {
+  display: flex;
+  align-items: center;
+  gap: var(--clio-disclosure-gap);
+  list-style: none;
+  cursor: var(--clio-cursor-arrow);
 }
 
-:where(.alert-box) > :where(.alert-contents, .modal-contents, p) {
-  grid-column: 2;
-  margin: 0;
+:where(details) > :where(summary)::-webkit-details-marker {
+  display: none;
 }
 
-:where(.alert-box) > :where(.alert-buttons, .dialog-buttons) {
-  grid-column: 1 / -1;
+:where(details) > :where(summary)::before {
+  content: "";
+  flex: none;
+  width: var(--clio-disclosure-size);
+  height: var(--clio-disclosure-size);
+  background: var(--clio-art-disclosure) 0 0 / var(--clio-disclosure-size) var(--clio-disclosure-size) no-repeat;
 }
 
-:where(.dialog-buttons, .alert-buttons) {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+:where(details[open]) > :where(summary)::before {
+  background-image: var(--clio-art-disclosure-open);
 }
 
-/* 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;
+/* ---- List view --------------------------------------------------------------
+   The Finder's list view: column headers, the sorted column marked, rows of
+   name and details. Markup: <table class="list-view"> with <th aria-sort> on
+   the sorted column and an optional empty <th class="sort-direction">.
+   System 7: plain headers in the small font, the sorted one underlined, a
+   double rule below (Finder, View by Name). */
+:where(.list-view) {
+  border-collapse: collapse;
+  border-spacing: 0;
+  background: var(--clio-list-view-bg);
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-font-size-small);
+  line-height: var(--clio-list-view-row);
 }
 
-: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(.list-view) :where(th, td) {
+  box-sizing: border-box;
 }
 
-: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(.list-view) :where(th) {
+  height: var(--clio-list-view-header-height);
+  padding: var(--clio-list-view-header-padding);
+  background: var(--clio-list-view-header-bg);
+  font-weight: normal;
+  line-height: 14px;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
 }
 
-: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(.list-view) :where(th[aria-sort]:not([aria-sort="none"])) {
+  background: var(--clio-list-view-sorted-header-bg);
+  text-decoration: var(--clio-list-view-sorted-decoration);
+  text-underline-offset: 2px;
 }
 
-: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(.list-view) :where(td) {
+  height: var(--clio-list-view-row);
+  padding: 0 4px;
+  vertical-align: middle;
+  white-space: nowrap;
 }
 
-: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(.list-view) :where(td.sorted) {
+  background: var(--clio-list-view-sorted-bg);
 }
 
-: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(.list-view) :where(.sort-direction) {
+  width: var(--clio-list-view-sort-width);
+  padding: 0;
 }
 
-: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);
+/* ---- Slider ------------------------------------------------------------------
+   <input type="range">, the Appearance slider (Mac OS 8 HIG: "Sliders and Tick
+   Marks"). Add class "ticks" and --clio-slider-tick-count for tick marks under
+   the track. System 6 and System 7 had no slider in the Toolbox; System 7.5's
+   control panels drew their own (see the System 7 layer). */
+:where(input[type="range"]) {
+  box-sizing: border-box;
+  height: var(--clio-slider-height);
+  margin: 0;
+  /* Chrome centres the track in the content box: the padding puts it
+     --clio-slider-track-top below the thumb's top. */
+  padding: 0 0 calc(var(--clio-slider-height) - var(--clio-slider-track-height) - 2 * var(--clio-slider-track-top));
+  background: transparent;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: var(--clio-cursor-arrow);
 }
 
-: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(input[type="range"].ticks) {
+  /* A whole number of pixels: each engine rounds a fractional period its own way. */
+  --clio-slider-tick-spacing: round((100% - var(--clio-slider-tick-run)) / (var(--clio-slider-tick-count) - 1), 1px);
+  height: calc(var(--clio-slider-height) + var(--clio-slider-tick-gap) + 4px);
+  background:
+    repeating-linear-gradient(to right, var(--clio-slider-tick-light) 0 1px, var(--clio-slider-tick-ink) 1px 2px, var(--clio-slider-tick-shade) 2px 3px, transparent 3px var(--clio-slider-tick-spacing)) var(--clio-slider-tick-offset) 100% / 100% 3px no-repeat,
+    repeating-linear-gradient(to right, var(--clio-slider-tick-light) 0 2px, transparent 2px var(--clio-slider-tick-spacing)) var(--clio-slider-tick-offset) calc(100% - 3px) / 100% 1px no-repeat;
 }
 
-: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(input[type="range"])::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: var(--clio-slider-track-height);
+  border-style: solid;
+  border-width: var(--clio-slider-track-slice);
+  border-color: transparent;
+  border-image: var(--clio-art-slider-track) var(--clio-slider-track-slice-n) fill / var(--clio-slider-track-slice) stretch;
 }
 
-: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(input[type="range"])::-webkit-slider-thumb {
+  width: var(--clio-slider-thumb-width);
+  height: var(--clio-slider-thumb-height);
+  /* the thumb sits in the track's content box, inside the border-image slice */
+  margin-top: calc(-1 * (var(--clio-slider-track-top) + var(--clio-slider-track-slice)));
+  border: 0;
+  background: var(--clio-art-slider-thumb) 0 0 / 100% 100% no-repeat;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
-: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);
+/* Firefox: the same track and thumb through its own parts. Its thumb travels
+   the whole content box: the padding keeps it inside the track's ends, as
+   Chrome's and the Mac's (Mouse control panel at both ends), and the track
+   reaches back over the padding. */
+@supports selector(::-moz-range-thumb) {
+  :where(input[type="range"]) {
+    padding-inline: var(--clio-slider-track-slice);
+  }
 }
 
-: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(input[type="range"])::-moz-range-track {
+  margin-inline: calc(-1 * var(--clio-slider-track-slice));
 }
 
-: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(input[type="range"])::-moz-range-track {
+  box-sizing: border-box;
+  height: var(--clio-slider-track-height);
+  border-style: solid;
+  border-width: var(--clio-slider-track-slice);
+  border-color: transparent;
+  border-image: var(--clio-art-slider-track) var(--clio-slider-track-slice-n) fill / var(--clio-slider-track-slice) stretch;
 }
 
-: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(input[type="range"])::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--clio-slider-thumb-width);
+  height: var(--clio-slider-thumb-height);
+  border: 0;
+  border-radius: 0;
+  background: var(--clio-art-slider-thumb) 0 0 / 100% 100% no-repeat;
+  /* Firefox centres the thumb in the content box (its top lands half a pixel
+     above, then on the pixel below); this brings its top to the content box's. */
+  translate: 0 round(down, (var(--clio-slider-thumb-height) - var(--clio-slider-track-height) - 2 * var(--clio-slider-track-top)) / 2, 1px);
+}
+
+/* ---- Little arrows -----------------------------------------------------------
+   The up/down pair beside a number or clock field (Mac OS 8 HIG: "Little
+   Arrows"; System 7's control panels drew them too). Markup:
+   <span class="little-arrows" role="group" aria-label="Cache size">
+     <button class="up" aria-label="Increase"></button>
+     <button class="down" aria-label="Decrease"></button></span>
+   Add aria-disabled="true" (or disabled buttons) for the dimmed pair. */
+:where(.little-arrows) {
+  display: inline-flex;
+  flex-direction: column;
+  width: var(--clio-little-arrows-width);
+  height: var(--clio-little-arrows-height);
+  background: var(--clio-art-little-arrows) 0 0 / 100% 100% no-repeat;
+  vertical-align: middle;
 }
 
-: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);
+:where(.little-arrows) > :where(button) {
+  flex: 1 1 50%;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-image: none;
+  background: transparent;
+  box-shadow: none;
+  appearance: none;
+  -webkit-appearance: none;
 }
 
-/* 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(.little-arrows) > :where(button)::before,
+:where(.little-arrows) > :where(button)::after {
+  content: 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);
+:where(.little-arrows):has(> .up:active:where(:not([data-clio-off]))) {
+  background-image: var(--clio-art-little-arrows-up, var(--clio-art-little-arrows));
 }
 
-@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);
-  }
+:where(.little-arrows):has(> .down:active:where(:not([data-clio-off]))) {
+  background-image: var(--clio-art-little-arrows-down, var(--clio-art-little-arrows));
 }
 
-/* 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(.little-arrows):is([aria-disabled="true"], :has(> button:disabled)) {
+  background-image: var(--clio-art-little-arrows-disabled, var(--clio-art-little-arrows));
 }
 
-:where(.control-strip) {
+/* ---- Bevel button ------------------------------------------------------------
+   A square bevelled button for an icon or a short label, which can act as a
+   push button, a toggle (aria-pressed) or a menu (class "menu", aria-haspopup)
+   (Mac OS 8 HIG: "Bevel Buttons"). Earlier eras had none and use push buttons'
+   square cousin from Platinum. */
+:where(.bevel) {
   display: inline-flex;
-  align-items: stretch;
-  height: var(--clio-strip-height);
-  max-width: 100%;
-  vertical-align: bottom;
-  user-select: none;
-  -webkit-user-select: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--clio-bevel-min);
+  min-height: var(--clio-bevel-min);
+  margin: 0;
+  padding: var(--clio-bevel-padding);
+  border: var(--clio-bevel-slice) solid transparent;
+  border-radius: 0;
+  border-image: var(--clio-art-bevel) var(--clio-bevel-slice-n) fill / var(--clio-bevel-slice) stretch;
+  background: transparent;
+  box-shadow: none;
+  color: var(--clio-ink);
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: var(--clio-cursor-arrow);
 }
 
-/* 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);
+:where(.bevel):is(:active:where(:not([data-clio-off])), .active, [aria-pressed="true"]):not(:disabled) {
+  border-image-source: var(--clio-art-bevel-held);
 }
 
-/* The end cap is one picture: frame, bevel, icon and the rounded lower-left corner. */
-:where(.control-strip)::before {
+:where(.bevel) {
+  position: relative;
+}
+
+:where(.bevel)::before,
+:where(.bevel)::after {
+  content: none;
+}
+
+/* The menu arrow, over the face (border-image fill paints over backgrounds). */
+:where(.bevel.menu, .bevel[aria-haspopup])::after {
   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;
+  position: absolute;
+  right: calc(var(--clio-bevel-arrow-right) - var(--clio-bevel-slice));
+  bottom: calc(var(--clio-bevel-arrow-bottom) - var(--clio-bevel-slice));
+  width: var(--clio-bevel-arrow-width);
+  height: var(--clio-bevel-arrow-height);
+  background: var(--clio-art-bevel-menu-arrow) 0 0 / 100% 100% no-repeat;
+}
+
+/* ---- Keyboard focus on lists ---------------------------------------------------
+   Mac OS 8 draws the same ring round a list box that has the keyboard focus
+   (Appearance, Desktop tab, the pattern list); text fields take it from
+   --clio-field-focus-shadow. */
+:where(.listbox, [role="listbox"], select[multiple]):is(:focus-visible, :focus-within) {
+  box-shadow: var(--clio-list-focus-shadow, var(--clio-list-shadow));
+}
+
+/* ---- Chasing arrows ------------------------------------------------------------
+   The asynchronous progress indicator (Mac OS 8 HIG: "Asynchronous Arrows").
+   Markup: <span class="chasing-arrows" role="status" aria-label="Looking…">.
+   It turns by stepping through the era's frames; with reduced motion it
+   stands still on the first. Earlier eras had a spinning watch cursor
+   instead, and use Platinum's arrows. */
+:where(.chasing-arrows) {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  vertical-align: middle;
 }
 
-:where(.control-strip) > :is(.control-strip-scroll, .control-strip-handle) {
-  flex: none;
+/* The frames side by side on a strip that moves a frame at a time (transform
+   only, so the turning stays off the main thread). */
+:where(.chasing-arrows)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(16px * var(--clio-chasing-arrows-frames));
+  height: 16px;
+  background: var(--clio-art-chasing-arrows) 0 0 / 100% 100% no-repeat;
+  animation: clio-chase calc(var(--clio-chasing-arrows-frames) * 0.12s) steps(var(--clio-chasing-arrows-frames)) infinite;
+}
+
+@keyframes clio-chase {
+  to { transform: translateX(calc(-16px * var(--clio-chasing-arrows-frames))); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.chasing-arrows)::before { animation: none; }
+}
+
+/* ---- Help button -----------------------------------------------------------------
+   The square button with the help icon in a dialog's lower left (Mac OS 8 HIG:
+   "Help Button Layout"). <button class="help-button" aria-label="Help">.
+   Earlier eras put a "Help" push button there instead, and use Platinum's. */
+:where(.help-button) {
+  box-sizing: border-box;
+  width: 21px;
+  min-width: 0;
+  height: 20px;
+  min-height: 0;
   margin: 0;
   padding: 0;
+  border: 0;
   border-radius: 0;
+  border-image: none;
+  background: var(--clio-art-help-button) 0 0 / 21px 20px no-repeat;
+  box-shadow: none;
+  color: transparent;
+  font-size: 0;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
-/* 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(.help-button)::before,
+:where(.help-button)::after {
+  content: none;
 }
 
-:where(.control-strip) > .control-strip-scroll-forward {
-  background-image: var(--clio-strip-forward);
+/* ---- Image well ---------------------------------------------------------------------
+   A sunken well that holds a picture or an icon (Mac OS 8 HIG: "Image Wells"),
+   drawn like the era's field frame round a white face (inferred: no image
+   well was on the captured screens). <div class="image-well"><img …></div> */
+:where(.image-well) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: var(--clio-field-border);
+  background: var(--clio-image-well-bg);
+  box-shadow: var(--clio-field-shadow);
 }
 
-: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);
+/* ---- Group boxes: secondary, and titled by a check box ---------------------------
+   <fieldset class="secondary"> is the lighter group for a subordinate set
+   (Mac OS 8 HIG: "Group Boxes"). A check box or pop-up menu as the title goes
+   in the legend: <legend><label><input type="checkbox"> Use a server</label></legend>.
+   Before Mac OS 8 every group box is the one kind. */
+:where(fieldset > legend) > :where(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-:where(.control-strip) > .control-strip-scroll-forward:disabled {
-  background-image: var(--clio-strip-forward);
+/* ---- Utility window ------------------------------------------------------------------
+   A floating palette (Mac OS 8 HIG: "Utility Windows"; HIG 1992: floating
+   windows): <div class="window utility"> with the usual .title-bar. Its title
+   bar is thinner, its boxes smaller and its title in the small font. Before
+   Mac OS 8 the eras draw it from the document window's parts (inferred). */
+:where(.window.utility) {
+  --clio-titlebar-height: var(--clio-utility-titlebar-height);
+  --clio-titlebar-row: var(--clio-utility-titlebar-row);
+  --clio-box-size: var(--clio-utility-box-size);
+  --clio-titlebar-slot: var(--clio-utility-slot);
+  min-width: 80px;
 }
 
-: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(.window.utility) > :where(.title-bar) > :is(.title, h1, h2, h3) {
+  font-size: var(--clio-utility-title-size, var(--clio-title-font-size));
 }
 
-:where(.control-strip-modules) {
-  display: flex;
-  min-width: 0;
-  overflow: hidden;
-  border: 0;
-  background: none;
-  box-shadow: none;
+/* ---- Help balloon ------------------------------------------------------------------
+   Balloon Help (HIG 1992, ch. 11; Mac OS 8 and 9 kept it): a white balloon
+   with a rounded outline, a 2px drop on the right and below, and a tail rising
+   from its top edge near the right towards the object it describes.
+   <div class="balloon" role="tooltip">…</div>. The tail's tip, under the
+   pointer in the capture, is inferred. */
+:where(.balloon) {
+  position: relative;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 260px;
+  margin-top: 14px;
+  padding: 8px 12px 10px 10px;
+  border: 10px solid transparent;
+  border-image: var(--clio-art-balloon) 10 fill / 10px stretch;
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-font-size-small);
+  line-height: 13px;
 }
 
-:where(.control-strip-module-track) {
+:where(.balloon) {
+  padding: 0 2px 0 0;
+}
+
+:where(.balloon)::before {
+  content: "";
+  position: absolute;
+  top: -23px;
+  right: -5px;
+  width: 12px;
+  height: 14px;
+  background: var(--clio-art-balloon-tail) 0 0 / 12px 14px no-repeat;
+}
+
+/* The rare controls (ROADMAP "Can wait" 10): the rounded-corner window, placards,
+   split bars and the side-title utility window (its Platinum drawing is in
+   90-platinum.css). Measured in Infinite Mac; see EVIDENCE.md. */
+
+/* ---- Rounded-corner window (rDocProc, desk accessories) ----------------------
+   <div class="rounded-window"> > <div class="rounded-title"> (> .close, h2) and
+   any content. The Calculator draws the same window in System 6.0.8, 7.5.3,
+   Mac OS 8.5 (Drawing Board) and 9.0: a 1px black frame whose corners step in
+   5, 3, 2, 1, 1 pixels; a 17-row black title bar ruled below, the title in
+   white centred in the space right of an 11px white close box at (9,4). In the
+   background the bar turns white, the title black, and the close box goes. */
+:where(.rounded-window) {
+  --clio-rounded-bg: #ffffff;
+  position: relative;
   display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 60px;
+  border: 1px solid #000000;
+  background: var(--clio-rounded-bg);
+  -webkit-mask:
+    var(--clio-art-rdoc-mask-tl) left top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-tr) right top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-bl) left bottom / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-br) right bottom / 6px 6px no-repeat,
+    linear-gradient(#000000, #000000) 0 6px / 100% calc(100% - 12px) no-repeat,
+    linear-gradient(#000000, #000000) 6px 0 / calc(100% - 12px) 100% no-repeat;
+  mask:
+    var(--clio-art-rdoc-mask-tl) left top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-tr) right top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-bl) left bottom / 6px 6px no-repeat,
+    var(--clio-art-rdoc-mask-br) right bottom / 6px 6px no-repeat,
+    linear-gradient(#000000, #000000) 0 6px / 100% calc(100% - 12px) no-repeat,
+    linear-gradient(#000000, #000000) 6px 0 / calc(100% - 12px) 100% no-repeat;
+}
+
+/* The frame's curve inside each corner, over the title bar and the content. */
+.rounded-window::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: 1;
+  background:
+    var(--clio-art-rdoc-frame-tl) left top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-frame-tr) right top / 6px 6px no-repeat,
+    var(--clio-art-rdoc-frame-bl) left bottom / 6px 6px no-repeat,
+    var(--clio-art-rdoc-frame-br) right bottom / 6px 6px no-repeat;
+  pointer-events: none;
 }
 
-/* A module: the 16px icon 2px in, the menu triangle 3px from the right. */
-:where(.control-strip-module) {
+.rounded-window > .rounded-title {
   position: relative;
   display: flex;
   flex: none;
-  align-items: center;
-  width: calc(var(--clio-strip-module-width) + 1px);
+  justify-content: center;
+  box-sizing: border-box;
+  height: 18px;
+  padding: 1px 1px 0 18px;
+  border-bottom: 1px solid #000000;
+  background: #000000;
+  color: #ffffff;
+  font-family: var(--clio-font-window-title, var(--clio-font-chrome));
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rounded-window > .rounded-title > :is(.title, h1, h2, h3) {
+  margin: 0;
+  overflow: hidden;
+  color: inherit;
+  font: inherit;
+  font-size: var(--clio-title-font-size);
+  font-stretch: var(--clio-font-stretch-title);
+  font-weight: var(--clio-chrome-weight);
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rounded-window > .rounded-title > :is(button.close, .close) {
+  position: absolute;
+  top: 3px;
+  left: 8px;
+  box-sizing: border-box;
+  width: 11px;
   min-width: 0;
-  height: var(--clio-strip-height);
+  height: 11px;
   min-height: 0;
   margin: 0;
-  padding: 0 0 0 var(--clio-strip-icon-inset);
+  padding: 0;
+  border: 1px solid #ffffff;
+  border-image: none;
   border-radius: 0;
-  color: var(--clio-ink);
+  background: transparent;
+  box-shadow: none;
+  font-size: 0;
   appearance: none;
   -webkit-appearance: none;
-  cursor: default;
+  cursor: var(--clio-cursor-arrow);
 }
 
-:where(.control-strip-module) > :is(svg, img, .sys-icon) {
-  width: 16px;
-  height: 16px;
+.rounded-window > .rounded-title > :is(button.close, .close)::before,
+.rounded-window > .rounded-title > :is(button.close, .close)::after {
+  content: none;
 }
 
-: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;
+.rounded-window > .rounded-title > :is(button.close, .close):focus-visible {
+  outline: 1px dotted #ffffff;
+  outline-offset: 1px;
 }
 
-:where(.control-strip-module):disabled {
-  color: var(--clio-disabled);
-  opacity: 0.5;
+.rounded-window.inactive > .rounded-title {
+  background: #ffffff;
+  color: #000000;
 }
 
-/* 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;
+.rounded-window.inactive > .rounded-title > :is(button.close, .close) {
+  visibility: hidden;
+}
+
+/* ---- Placard ------------------------------------------------------------------
+   A framed strip for status at the foot of a window, beside the horizontal scroll
+   bar (Mac OS 8 HIG: "Placards"). The control came with the Appearance Manager;
+   before it, the eras draw a 1px frame on the paper (adapted). */
+:where(.placard) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 16px;
+  margin: 0;
+  padding: 0 4px;
+  border: 1px solid var(--clio-ink);
+  border-radius: 0;
+  background: var(--clio-paper);
   box-shadow: none;
+  color: var(--clio-ink);
+  font-family: var(--clio-font-small);
+  font-size: var(--clio-font-size-small, 9px);
+  line-height: 12px;
+  white-space: nowrap;
 }
 
-:where(.control-strip.is-collapsed)::before,
-:where(.control-strip.is-collapsed) > :not(.control-strip-handle) {
-  display: none;
+/* ---- Split bar and split line ---------------------------------------------------
+   <div class="split-view"> > .split-bar (above the vertical scroll bar), panes,
+   and a .split-line between two panes. Apple's guidelines (1992) give the split
+   bar as a control 5 pixels high by the width of the scroll bar, at its top, and
+   the split line as two lines with a one-pixel space; BBEdit 5.1 in Mac OS 9 draws
+   it 7 rows high (90-platinum.css). Moving it is the application's: clio.css only
+   draws it. */
+:where(.split-view) {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--clio-split-bg, var(--clio-pane-bg));
 }
 
-:where(.control-strip.is-collapsed) > .control-strip-handle {
+:where(.split-view) > :where(.split-bar) {
+  align-self: flex-end;
+}
+
+:where(.split-bar) {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--clio-scrollbar-size);
+  height: var(--clio-split-bar-height, 5px);
+  background: var(--clio-split-ink, var(--clio-ink));
+  cursor: row-resize;
+}
+
+:where(.split-line) {
+  --clio-split-line-1: 1px;
+  flex: none;
+  box-sizing: border-box;
+  height: var(--clio-split-bar-height, 5px);
+  margin: 0;
+  border: 0;
+  background:
+    linear-gradient(var(--clio-split-ink, var(--clio-ink)), var(--clio-split-ink, var(--clio-ink))) right top / var(--clio-scrollbar-size) 100% no-repeat,
+    linear-gradient(var(--clio-split-ink, var(--clio-ink)), var(--clio-split-ink, var(--clio-ink))) 0 var(--clio-split-line-1) / 100% 1px no-repeat,
+    linear-gradient(var(--clio-split-ink, var(--clio-ink)), var(--clio-split-ink, var(--clio-ink))) 0 calc(var(--clio-split-line-1) + 2px) / 100% 1px no-repeat,
+    var(--clio-split-bg, var(--clio-pane-bg));
+  cursor: row-resize;
+}
+
+/* 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 *) > .clio-sb-anchor > .clio-sb {
+  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 *) > .clio-sb-anchor > .clio-sb > .clio-sb-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 *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-track {
+  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 *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-track {
+  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 *) > .clio-sb-anchor > .clio-sb > .clio-sb-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 *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-thumb {
+  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 *) > .clio-sb-anchor > .clio-sb > .clio-sb-button:not(.clio-sb-never).clio-sb-dec,
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb > .clio-sb-button:not(.clio-sb-never).clio-sb-inc {
+  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), var(--clio-scrollbar-button-bevel);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-button.clio-sb-dec {
+  border-left: 1px solid var(--clio-ink);
+  border-bottom: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-up), var(--clio-scrollbar-button-bevel);
+}
+
+: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), var(--clio-scrollbar-button-bevel);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-button.clio-sb-inc {
+  border-left: 1px solid var(--clio-ink);
+  border-top: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-down), var(--clio-scrollbar-button-bevel);
+}
+
+: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), var(--clio-scrollbar-button-bevel);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-button.clio-sb-dec {
+  border-top: 1px solid var(--clio-ink);
+  border-right: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-left), var(--clio-scrollbar-button-bevel);
+}
+
+: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), var(--clio-scrollbar-button-bevel);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-button.clio-sb-inc {
+  border-top: 1px solid var(--clio-ink);
+  border-left: 1px solid var(--clio-ink);
+  background-image: var(--clio-scrollbar-right), var(--clio-scrollbar-button-bevel);
+}
+
+: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), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-button.clio-sb-dec.clio-held {
+  background-image: var(--clio-scrollbar-up-on), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+: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), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-button.clio-sb-inc.clio-held {
+  background-image: var(--clio-scrollbar-down-on), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+: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), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-button.clio-sb-dec.clio-held {
+  background-image: var(--clio-scrollbar-left-on), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+: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), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-button.clio-sb-inc.clio-held {
+  background-image: var(--clio-scrollbar-right-on), var(--clio-scrollbar-button-bevel-on, none);
+}
+
+/* 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);
+}
+
+:where(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb-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);
+  }
+}
+
+/* Scroll bars drawn by clio.js (optional): the same parts as the browser's
+   scroll bar, as elements, so the scroll box keeps its era's fixed length, an
+   arrow repeats while held and a dragged box can leave an outline behind.
+   The parts take every ::-webkit-scrollbar rule (the build copies each one onto
+   .clio-sb-*); this file only places them. clio.js sets each bar's geometry. */
+.clio-sb-host {
+  box-sizing: border-box;   /* the bar comes out of the box, as the browser's does (everything in a clio.css window already is) */
+  scrollbar-width: none;
+}
+
+.clio-sb-host::-webkit-scrollbar {
+  display: none;
+}
+
+/* The bar sits in the scroller's padding, which grows by the bar's width. */
+.clio-sb-host.clio-sb-y {
+  padding-right: calc(var(--clio-sb-pr, 0px) + var(--clio-scrollbar-size));
+}
+
+.clio-sb-host.clio-sb-x {
+  padding-bottom: calc(var(--clio-sb-pb, 0px) + var(--clio-scrollbar-size));
+}
+
+/* A zero-size first child that sticks to the scroller's corner, so the bars
+   inside it stay put while the content moves. */
+.clio-sb-anchor {
+  position: sticky;
+  top: var(--clio-sb-pt, 0px);
+  left: var(--clio-sb-pl, 0px);
+  z-index: 2;
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  float: none;
+}
+
+.clio-sb-anchor > :is(.clio-sb, .clio-sb-corner) {
+  position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.clio-sb-anchor > .clio-sb > * {
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.clio-sb-anchor > .clio-sb-v > .clio-sb-dec { top: 0; left: 0; }
+.clio-sb-anchor > .clio-sb-v > .clio-sb-inc { bottom: 0; left: 0; }
+.clio-sb-anchor > .clio-sb-v > .clio-sb-track { top: var(--clio-scrollbar-size); bottom: var(--clio-scrollbar-size); left: 0; right: 0; }
+.clio-sb-anchor > .clio-sb-v > .clio-sb-thumb { top: var(--clio-scrollbar-size); left: var(--clio-scrollbar-thumb-inset, 0px); right: 0; min-width: 0; }   /* the bar's min-width is the box's length */
+.clio-sb-anchor > .clio-sb-h > .clio-sb-dec { left: 0; top: 0; }
+.clio-sb-anchor > .clio-sb-h > .clio-sb-inc { right: 0; top: 0; }
+.clio-sb-anchor > .clio-sb-h > .clio-sb-track { left: var(--clio-scrollbar-size); right: var(--clio-scrollbar-size); top: 0; bottom: 0; }
+.clio-sb-anchor > .clio-sb-h > .clio-sb-thumb { left: var(--clio-scrollbar-size); top: var(--clio-scrollbar-thumb-inset, 0px); bottom: 0; min-height: 0; }
+
+/* Smart Scrolling (Mac OS 8/9, Appearance > Options): both arrows at the far
+   end, the up or left arrow first. */
+.clio-sb-anchor > .clio-sb-v.clio-sb-smart > .clio-sb-dec { top: auto; bottom: var(--clio-scrollbar-size); }
+.clio-sb-anchor > .clio-sb-v.clio-sb-smart > .clio-sb-track { top: 0; bottom: calc(2 * var(--clio-scrollbar-size)); }
+.clio-sb-anchor > .clio-sb-v.clio-sb-smart > .clio-sb-thumb { top: 0; }
+.clio-sb-anchor > .clio-sb-h.clio-sb-smart > .clio-sb-dec { left: auto; right: var(--clio-scrollbar-size); }
+.clio-sb-anchor > .clio-sb-h.clio-sb-smart > .clio-sb-track { left: 0; right: calc(2 * var(--clio-scrollbar-size)); }
+.clio-sb-anchor > .clio-sb-h.clio-sb-smart > .clio-sb-thumb { left: 0; }
+
+/* QuickDraw kept a lane's pattern in step with the screen (System 6.0.8, System
+   7.5.3): clio.js sets --clio-sb-px/-py on each bar to keep it in step with the
+   page. A rule, not a token: the offsets belong to each bar. Eras whose tracks
+   have their own rules (Drawing Board) place their layers themselves. */
+.clio-sb-anchor > .clio-sb > .clio-sb-track {
+  background-position: var(--clio-sb-px, 0px) var(--clio-sb-py, 0px);
+}
+
+/* The arrows lie over the box's ends and its shadow. */
+.clio-sb-anchor > .clio-sb > .clio-sb-button { z-index: 1; }
+
+/* Mac OS 8/9: the lane's top shading also falls just past the box's far end
+   (--clio-scrollbar-thumb-after, drawn only by clio.js's bars). */
+.clio-sb-anchor > .clio-sb > .clio-sb-thumb::after {
+  content: "";
+  position: absolute;
+  background: var(--clio-scrollbar-thumb-after, none);
+}
+
+.clio-sb-anchor > .clio-sb-v > .clio-sb-thumb::after { top: calc(100% + 1px); left: 0; right: 0; height: 2px; }   /* past the box's end line */
+.clio-sb-anchor > .clio-sb-h > .clio-sb-thumb::after { left: calc(100% + 1px); top: 0; bottom: 0; width: 2px; }
+
+/* Nothing to scroll: the lane stays, the box goes (as on the Mac). */
+.clio-sb-anchor > .clio-sb.clio-sb-off > .clio-sb-thumb {
+  display: none;
+}
+
+/* The outline a dragged scroll box leaves in System 6 and 7: the box's frame,
+   drawn over the lane, until the button comes up. */
+.clio-sb-anchor > .clio-sb > .clio-sb-ghost {
+  z-index: 1;
+  padding: 1px;
+  background: var(--clio-scrollbar-ghost, #000000);
+  background-position: calc(var(--clio-sb-px, 0px) + var(--clio-sb-gx, 0px)) calc(var(--clio-sb-py, 0px) + var(--clio-sb-gy, 0px));   /* in step with the lane's pattern */
+  mix-blend-mode: var(--clio-scrollbar-ghost-blend, normal);
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  pointer-events: none;
+}
+
+/* clio.js outlines (a dragged window, zoom rects): QuickDraw's grey pattern,
+   inverting what lies under it, in step with the screen. */
+.clio-outline {
+  /* The outline is the frame of the window's structure region (QuickDraw's
+     InsetRgn, rows and columns apart): the frame and its 1px shadow, which starts
+     --clio-drag-outline-shadow-inset in from the top-right and bottom-left corners,
+     so the region and the band step in there (all measured). e, k, w below. */
+  --e: var(--clio-drag-outline-extra, 0px);
+  --k: var(--clio-drag-outline-shadow-inset, 1px);
+  --w: var(--clio-drag-outline-width, 1px);
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  margin: 0;
+  /* gray inverts the pixels whose x + y is odd on the screen (System 6.0.8, 7.5.3
+     and Mac OS 9.0, measured); clio.js sets the position that keeps it to the page */
+  background: repeating-conic-gradient(#ffffff 0 25%, transparent 0 50%) 0 0 / 2px 2px;
+  mix-blend-mode: difference;
+  /* the band (box less content box), the region's two notches taken out and the
+     two pieces of the inset region they remove put back: every piece lies wholly
+     in or out of what is below it, so xor does each */
+  mask:
+    linear-gradient(#000 0 0) left 0 bottom 0 / var(--k) var(--e) no-repeat border-box exclude,
+    linear-gradient(#000 0 0) right 0 top 0 / var(--e) var(--k) no-repeat border-box exclude,
+    linear-gradient(#000 0 0) left var(--w) bottom var(--w) / var(--k) var(--e) no-repeat border-box exclude,
+    linear-gradient(#000 0 0) right var(--w) top var(--w) / var(--e) var(--k) no-repeat border-box exclude,
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0) border-box;
+  pointer-events: none;
+  image-rendering: pixelated;
+}
+
+/* clio.js: the move button of a movable window and the live region. Out of
+   sight but in reach; with keyboard focus the title bar shows the ring. */
+:is(.clio-move, .clio-live) {
+  /* !important: the title bar's own button rules (the close box's art and
+     place) must not reach it */
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.title-bar:has(> .clio-move:focus-visible) {
+  outline: var(--clio-focus-outline);
+  outline-offset: -1px;
+}
+
+
+/* clio.js: a movable window's title bar takes a finger's drag itself (on a
+   touch screen the browser would otherwise pan the page and cancel the drag). */
+.clio-drag-bar {
+  touch-action: none;
+}
+
+/* ---- clio.js: the insertion point --------------------------------------------
+   TextEdit inverted a 1px line for its caret, as tall as the line: white in a
+   difference blend inverts what is under it the same way. The field's own caret
+   is hidden only while clio.js draws this one. */
+.clio-caret {
+  position: absolute;
+  z-index: 2147483646;
+  width: 1px;
+  background: #ffffff;
+  mix-blend-mode: difference;
+  pointer-events: none;
+}
+
+.clio-caret-off,
+.clio-caret[hidden] {
+  visibility: hidden;
+}
+
+.clio-caret-field {
+  caret-color: transparent;
+}
+
+/* Forced colours repaint the line and may drop the blend: the system's caret instead. */
+@media (forced-colors: active) {
+  .clio-caret {
+    display: none;
+  }
+
+  .clio-caret-field {
+    caret-color: auto;
+  }
+}
+
+/* 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: var(--clio-cursor-arrow);
+}
+
+/* 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(:not([data-clio-off])),
+:where(.control-strip-module):not(:disabled):is(:active:where(:not([data-clio-off])), [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: var(--clio-cursor-arrow);
+}
+
+: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"] {
+  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 {
+  /* A raised edge: white along the top and left, #999 along the bottom and
+     right, the two other corners left to the face (windows, pop-up menus). */
+  --clio-p9-bevel:
+    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;
+  --clio-ink: #000000;
+  --clio-paper: #dddddd;
+  --clio-face: #dddddd;
+  --clio-disabled: #6f6f6f;
+  --clio-disabled-dither: none;
+  --clio-popup-disabled-mask: none;
+  --clio-caret-ticks: 48;   /* Mac OS 9.0 General Controls' middle setting: about 795 ms (measured) */
+  --clio-popup-disabled-fg: var(--clio-disabled);
+  /* 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;
+  /* List view (Finder, Mac OS 9.0): 21px bevelled headers, the sorted one sunk
+     dark; the sorted column's rows #ddd, the others #eee, 19px rows. Drawn
+     with background lines (List view rules), not tokens alone. */
+  --clio-list-view-bg: #eeeeee;
+  --clio-list-view-row: 19px;
+  --clio-list-view-header-height: 21px;
+  --clio-list-view-header-padding: 3px 4px 0;
+  --clio-list-view-sorted-decoration: none;
+  --clio-list-view-sorted-bg: #dddddd;
+  --clio-list-view-sort-width: 15px;
+  /* Separator (Mouse control panel, Mac OS 9.0): etched, #888 then white one
+     row lower and one column further right. */
+  --clio-separator-height: 2px;
+  --clio-separator-bg: linear-gradient(#888888, #888888) 0 0 / calc(100% - 1px) 1px no-repeat, linear-gradient(#ffffff, #ffffff) 1px 1px / calc(100% - 1px) 1px no-repeat;
+  /* Keyboard focus on a field or list: a 2px ring of the highlight colour's
+     dark (#6666cc for Purple), its outer corners left out (Date & Time). */
+  --clio-focus-ring-colour: #6666cc;
+  --clio-focus-ring: 0 -1px 0 1px var(--clio-focus-ring-colour), 0 1px 0 1px var(--clio-focus-ring-colour), -1px 0 0 1px var(--clio-focus-ring-colour), 1px 0 0 1px var(--clio-focus-ring-colour);
+  --clio-field-focus-shadow: var(--clio-focus-ring);
+  --clio-field-focus-outline: none;
+  --clio-list-focus-shadow: var(--clio-focus-ring);
+  /* Little arrows (Date & Time, Mac OS 9.0): 13x23; dimmed while their field is
+     not being edited. Held states were under the pointer and keep the normal. */
+  --clio-little-arrows-width: 13px;
+  --clio-little-arrows-height: 23px;
+  --clio-art-little-arrows: url("art/platinum/little-arrows.png");
+  --clio-art-little-arrows-up: url("art/platinum/little-arrows.png");
+  --clio-art-little-arrows-down: url("art/platinum/little-arrows.png");
+  --clio-art-little-arrows-disabled: url("art/platinum/little-arrows-disabled.png");
+  /* Disclosure triangle: 13px with its shadow (Finder list view, Mac OS 9.0). */
+  --clio-disclosure-size: 13px;
+  --clio-art-disclosure: url("art/platinum/disclosure.png");
+  --clio-art-disclosure-open: url("art/platinum/disclosure-open.png");
+  --clio-font-text: Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-size: 12px;
+  --clio-font-smoothing: none;
+  --clio-text-smoothing: auto;
+  --clio-text-smoothing-moz: 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;
+
+  /* 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: 15px;
+  /* Mac OS 9.0 Finder (frames hig/platinum9/finder-*): a 15-row box between
+     black lines, dragged live; the bar is its black line and 14px, the window's
+     frame closing it. The arrow boxes' light and shade stop a pixel short of
+     the far corners. */
+  --clio-scrollbar-thumb-length: 17px;
+  --clio-scrollbar-thumb-inset: 0px;
+  --clio-scrollbar-thumb-overlap: 1px;
+  --clio-scrollbar-thumb-after:
+    linear-gradient(#cccccc, #cccccc) 100% 0 / 1px 2px no-repeat,
+    linear-gradient(#bbbbbb, #bbbbbb) calc(100% - 1px) 1px / 1px 1px no-repeat,
+    linear-gradient(#777777, #777777) 0 0 / 100% 1px no-repeat,
+    linear-gradient(#777777, #777777) 0 0 / 1px 2px no-repeat,
+    #888888;
+  --clio-scrollbar-button-bevel: 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='M0 0h13v1H0zM0 1h1v12H0z'/%3E%3Cpath fill='%23bbb' d='M1 13h13v1H1zM13 1h1v12h-1z'/%3E%3C/svg%3E");
+  /* held: #555 along the top and left, #999 along the bottom and right, the two
+     other corners left the face's #777 (Mac OS 9.0 Finder, frame arrow-held) */
+  --clio-scrollbar-button-bevel-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23555' d='M0 0h13v1H0zM0 1h1v12H0z'/%3E%3Cpath fill='%23999' d='M1 13h13v1H1zM13 1h1v12h-1z'/%3E%3C/svg%3E");
+  --clio-scrollbar-thumb-tracking: live;
+  --clio-scrollbar-repeat-delay: 200ms;   /* Mac OS 9.0 Finder: one step, then a pause of about 0.2 s */
+  /* Mac OS 8 and 9 keep a clicked menu open (clio.js) */
+  --clio-menu-sticky: 1;
+  --clio-drag-outline-width: 2px;   /* Mac OS 9.0: a 2px band */
+  --clio-drag-outline-shadow-inset: 2px;   /* the shadow starts 2px in from the corners */
+  /* Zoom rects (Mac OS 9.0 opening Games, measured): 6 outlines in the 2px band at
+     1.4^(k - 7) of the way, all on screen until the window draws */
+  --clio-zoom-count: 6;
+  --clio-zoom-steps: 7;
+  --clio-zoom-ratio: 1.4;
+  --clio-zoom-offset: 0;
+  --clio-zoom-keep: 0;
+  --clio-scrollbar-track: #aaaaaa;
+  /* The lane: #777 and #888 along the top and left, #bbb and #ccc down the
+     right, nothing along the bottom (frames finder-scroll-*). */
+  --clio-scrollbar-track-shadow: inset -1px 0 #cccccc, inset 1px 1px #777777, inset -2px 0 #bbbbbb, inset 2px 2px #888888;
+  /* The box: light and shade a pixel short of the far corners, a #eee corner;
+     the grip rounds up and left, as QuickDraw's halving does. */
+  --clio-scrollbar-thumb-bg: var(--clio-art-p-grip-v) 50% calc(50% - 0.5px) / 8px 8px no-repeat,
+    linear-gradient(#eeeeee, #eeeeee) 0 0 / 1px 1px no-repeat,
+    linear-gradient(#ccccff, #ccccff) 1px 0 / calc(100% - 2px) 1px no-repeat,
+    linear-gradient(#ccccff, #ccccff) 0 1px / 1px calc(100% - 2px) no-repeat,
+    linear-gradient(#6666cc, #6666cc) 100% 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#6666cc, #6666cc) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    #9999ff;
+  --clio-scrollbar-thumb-bg-horizontal: var(--clio-art-p-grip-h) calc(50% - 0.5px) 50% / 8px 8px no-repeat,
+    linear-gradient(#eeeeee, #eeeeee) 0 0 / 1px 1px no-repeat,
+    linear-gradient(#ccccff, #ccccff) 1px 0 / calc(100% - 2px) 1px no-repeat,
+    linear-gradient(#ccccff, #ccccff) 0 1px / 1px calc(100% - 2px) no-repeat,
+    linear-gradient(#6666cc, #6666cc) 100% 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#6666cc, #6666cc) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    #9999ff;
+  --clio-scrollbar-thumb-border: 1px solid #000000;
+  --clio-scrollbar-thumb-shadow: none;
+  --clio-scrollbar-button-bg: #dddddd;
+  --clio-scrollbar-button-shadow: none;
+  --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,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAATUlEQVR42o3MwQ2AIBAEwIkdaC2UYAsWZw2UIjXQCn4gIcSA+7ydPeYJuGFboAfH6lNB7I8nrg+UxnWqRehQxj7CWMsyQy35D1LLOEMvsWESqM0p+dQAAAAASUVORK5CYII="); /* 10x8 */
+  --clio-art-p9-popup-open-arrows: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASBAMAAABLIvhaAAAAGFBMVEUAAAAAAABERERVVVVmZmZ3d3eIiIj////aSdSVAAAAAXRSTlMAQObYZgAAAFdJREFUeJxVjtENgDAIRF8LC7iCE3QCB3YXk07iBiRGaKmS+3i54whlZ8yt26ByLKTOnMCWKJLYwq4gLlCw61OLUZAGb1DBXLHQ6RPNzai5+buwPkvkfAD7IAw5cOa/LwAAAABJRU5ErkJggg=="); /* 19x18 */
+}
+
+/* ---- 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:
+    var(--clio-p9-bevel),
+    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);
+  /* The ridges are 12px tiles over an opaque bar: a hard stop to transparent in a
+     covering layer leaves WebKit's covering rows a hair translucent (±1 per channel). */
+  background:
+    repeating-linear-gradient(to bottom, #ffffff 0 1px, transparent 1px 2px) var(--clio-tb-close) 1px / var(--clio-tb-ridges) 12px no-repeat,
+    repeating-linear-gradient(to bottom, transparent 0 1px, #777777 1px 2px) calc(var(--clio-tb-close) + 1px) 1px / var(--clio-tb-ridges) 12px no-repeat,
+    linear-gradient(to bottom, #cccccc 0 17px, #999999 17px 18px) 0 0 / 100% 18px no-repeat,
+    #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:where(:not([data-clio-off])), .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:where(:not([data-clio-off])), .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 > *, .rounded-title > *, .control-strip *, .disclosure, .little-arrows > *, .help-button):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:where(:not([data-clio-off])) {
+  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:where(:not([data-clio-off])) {
+  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:where(:not([data-clio-off])) {
+  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:where(:not([data-clio-off])) {
+  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: 8px;   /* the art's first column is the glyph's (it used to start a column early) */
+  width: 10px;
+  height: 8px;
+  margin-top: -4px;
+  background: var(--clio-art-p-check) 0 0 / 10px 8px no-repeat;
+}
+
+:root :is(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active):where(:not([data-clio-blink]))::before,
+:root :is(.menu, [role="menu"]) > li > :is([aria-checked="true"], .checked):is(:hover, :focus-visible, .active):where(:not([data-clio-blink]))::before {
+  filter: invert(1);
+}
+
+/* The same check mark in an open pop-up menu drawn by the browser (base-select). */
+@supports (appearance: base-select) {
+  :root select option::checkmark {
+    left: 8px;
+    width: 10px;
+    background: var(--clio-art-p-check) 0 0 / 10px 8px no-repeat;
+  }
+
+  :root select option:is(:hover, :focus-visible)::checkmark {
+    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):where(:not([data-clio-blink]))::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:where(:not([data-clio-off])) {
+  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;
 }
 
-:where(.control-strip)[data-edge="right"]::before,
-:where(.control-strip)[data-edge="right"] > .control-strip-handle {
-  transform: scaleX(-1);
+/* ---- 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:horizontal {
+  background-position: 0 1px, 0 0;   /* the vertical boxes' art one pixel to the right, the horizontal one pixel down */
 }
 
-:where(.control-strip) > :focus-visible,
-:where(.control-strip-module):focus-visible {
-  outline: var(--clio-focus-outline);
-  outline-offset: -3px;
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-button {
+  background-position: 0 1px, 0 0;   /* the vertical boxes' art one pixel to the right, the horizontal one pixel down */
 }
 
-/* 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%;
+: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 0, 0 0;
+  background-size: 14px 14px, 100% 100%;
+}
 
-  --clio-border: 1px solid #000000;
-  --clio-control-height: 20px;
-  --clio-field-height: 22px;
-  --clio-focus-outline: 2px solid #6666cc;
-  --clio-focus-offset: 0px;
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb > .clio-sb-button {
+  background-position: 1px 0, 0 0;
+  background-size: 14px 14px, 100% 100%;
+}
 
-  /* [I] Solid base of AI System 6's azul tile; the tile itself is not shipped. */
-  --clio-desktop: #4a71ab;
+: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 {
+  /* Held (Mac OS 9.0 Finder, the down arrow held; frame arrow-held): a #777
+     face in --clio-scrollbar-button-bevel-on's #555 and #999 bevel. */
+  background-color: #777777;
+  box-shadow: none;
+}
 
-  /* 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;
+:root :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb > .clio-sb-button.clio-held {
+  /* Held (Mac OS 9.0 Finder, the down arrow held; frame arrow-held): a #777
+     face in --clio-scrollbar-button-bevel-on's #555 and #999 bevel. */
+  background-color: #777777;
+  box-shadow: none;
+}
 
-  /* 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;
+:root :is(fieldset) > legend {
+  background: var(--clio-pane-bg);
+}
 
-  /* 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;
+/* WebKit starts a fieldset's padding box below the whole legend (clientTop is the
+   legend's height), so the dots would fill the band between the drawn top line and
+   the legend's foot: the first layer covers that band with the pane in every engine. */
+:root fieldset {
+  background:
+    linear-gradient(var(--clio-pane-bg), var(--clio-pane-bg)) 1px 1px / calc(100% - 2px) calc(var(--clio-font-size) * 1.5) no-repeat border-box,
+    linear-gradient(var(--clio-pane-bg), var(--clio-pane-bg)) 0 0 / 100% 100% no-repeat 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 */
+}
 
-  /* 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;
+/* The title's gap opens 13px after the corner (General Controls, "Desktop"). */
+:root fieldset > legend {
+  margin-left: 2px;
+}
 
-  /* 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,
+/* 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;
-  --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;
+  background-clip: padding-box;
+  box-shadow: none;
+  color: #888888;
+  opacity: 1;
+  border-image-source: var(--clio-art-frame-p9-popup-disabled);
+}
 
-  /* 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;
+/* The face stays inside the frame, so the rounded corners show what is behind. */
+:root select {
+  background-clip: padding-box;
+}
 
-  /* 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;
+/* 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;
+}
 
-  /* 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;
+: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);
+}
 
-  /* 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;
+:root .window.inactive > .title-bar > :is(.title, h1, h2, h3)::after,
+:root .inactive-title-bar > :is(.title, h1, h2, h3)::after {
+  content: none;
+}
 
-  /* 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);
+/* ---- 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;
+}
 
-  /* 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);
+:root :is(.window.inactive > .title-bar, .inactive-title-bar) > :is(.title, h1, h2, h3) {
+  font-palette: --clio-aa-p9-title-inactive;
+}
 
-  /* 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");
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .rounded-title > *, .control-strip *, .disclosure, .little-arrows > *, .help-button) {
+  font-family: var(--clio-font-button);
+  font-palette: --clio-aa-p9-button;
+}
 
-  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");
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .rounded-title > *, .control-strip *, .disclosure, .little-arrows > *, .help-button):not(:disabled, .disabled):is(:active:where(:not([data-clio-off])), .active) {
+  font-palette: --clio-aa-p9-button-held;
 }
 
-/* ---- 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) {
+:root :is(button, .btn, .btn-default, input[type="button"], input[type="submit"], input[type="reset"]):not(.icon, [role="tab"], [role="menuitem"], .title-bar > *, .rounded-title > *, .control-strip *, .disclosure, .little-arrows > *, .help-button):is(:disabled, .disabled) {
+  font-palette: --clio-aa-p9-button-disabled;
+}
+
+/* ---- List view headers -----------------------------------------------------
+   Measured row by row (Finder list view, Mac OS 9.0). A header: #666 above,
+   white light along its top and left, #ccc, #888 shade and a #333 rule below;
+   the #666 column on its left is the divider. The sorted header is sunk:
+   #111 top and left, #444 right and below (#222 at the two odd corners), a
+   #555 then #aaa inner bevel round #888. The sort-direction cell adds an #888
+   shade on its right. */
+:root .list-view th {
   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);
+    linear-gradient(#666666, #666666) 0 0 / 100% 1px no-repeat,
+    linear-gradient(#666666, #666666) 0 0 / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#555555, #555555) 0 100% / 1px 1px no-repeat,
+    linear-gradient(#333333, #333333) 1px 100% / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 1px / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 1px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#888888, #888888) 2px calc(100% - 1px) / 100% 1px no-repeat,
+    #cccccc;
 }
 
-:root .window-pane {
-  border: 1px solid #000000;
-  background: var(--clio-pane-bg);
+:root .list-view th[aria-sort]:not([aria-sort="none"]) {
+  background:
+    linear-gradient(#222222, #222222) 100% 0 / 1px 1px no-repeat,
+    linear-gradient(#222222, #222222) 0 100% / 1px 1px no-repeat,
+    linear-gradient(#111111, #111111) 0 0 / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#111111, #111111) 0 0 / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#444444, #444444) 100% 1px / 1px 100% no-repeat,
+    linear-gradient(#444444, #444444) 1px 100% / 100% 1px no-repeat,
+    linear-gradient(#777777, #777777) calc(100% - 1px) 1px / 1px 1px no-repeat,
+    linear-gradient(#777777, #777777) 1px calc(100% - 1px) / 1px 1px no-repeat,
+    linear-gradient(#555555, #555555) 1px 1px / calc(100% - 3px) 1px no-repeat,
+    linear-gradient(#555555, #555555) 1px 1px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) calc(100% - 1px) 2px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) 2px calc(100% - 1px) / calc(100% - 3px) 1px no-repeat,
+    #888888;
+}
+
+:root .list-view th.sort-direction {
+  background:
+    linear-gradient(#888888, #888888) 100% 2px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#cccccc, #cccccc) 100% 1px / 1px 1px no-repeat,
+    linear-gradient(#666666, #666666) 0 0 / 100% 1px no-repeat,
+    linear-gradient(#666666, #666666) 0 0 / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#555555, #555555) 0 100% / 1px 1px no-repeat,
+    linear-gradient(#333333, #333333) 1px 100% / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 1px / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 1px / 1px calc(100% - 3px) no-repeat,
+    linear-gradient(#888888, #888888) 2px calc(100% - 1px) / 100% 1px no-repeat,
+    url("art/platinum/sort-direction.png") 4px 6px / 8px 7px no-repeat,
+    #cccccc;
 }
 
-:root .window > .title-bar + .window-pane,
-:root .window > .details-bar + .window-pane {
-  border-top: 0;
+: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):focus-visible {
+  box-shadow: var(--clio-field-focus-shadow);
 }
 
-:root .window > .details-bar {
-  border-left: 1px solid #000000;
-  border-right: 1px solid #000000;
+/* Secondary group box (Sound, "Settings for selected device"): one #888 line,
+   no light. */
+:root fieldset.secondary {
+  border: 1px solid #888888;
+  background: transparent;
+  box-shadow: none;
 }
 
-/* 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);
+/* ---- Utility window (Application Switcher, Mac OS 9.0) --------------------------
+   1px black outline and a 1px black drop; white light on the top and left,
+   #999 shade on the right; a 13-row title bar of #ccc with a 3px dot pattern
+   (white, #777 one down and right) in rows 3-10, 9x9 boxes, and a #999 rule
+   under it. */
+:root .window.utility {
+  --clio-utility-titlebar-height: 14px;
+  --clio-utility-box-size: 10px;
+  padding: 0;
+  border: 1px solid #000000;
   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,
+    linear-gradient(#ffffff, #ffffff) 0 0 / calc(100% - 1px) 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 0 0 / 1px 100% no-repeat,
+    linear-gradient(#999999, #999999) 100% 1px / 1px 100% no-repeat,
     #cccccc;
+  box-shadow: none;
+  isolation: isolate;
 }
 
-:root .window.inactive > .title-bar,
-:root .inactive-title-bar {
-  background: var(--clio-titlebar-inactive-bg);
+/* The drop: 1px of black right and below, from the second row and column. */
+:root .window.utility::before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  right: -2px;
+  bottom: -2px;
+  left: 1px;
+  z-index: -1;
+  background:
+    linear-gradient(#000000, #000000) 100% 0 / 1px 100% no-repeat,
+    linear-gradient(#000000, #000000) 0 100% / 100% 1px no-repeat;
 }
 
-/* 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. */
+:root .window.utility > .title-bar {
+  height: 13px;
+  margin: 1px 1px 0;
+  padding: 0 26px 0 12px;
+  border-bottom: 0;
   background:
-    repeating-linear-gradient(to bottom, transparent 0 1px, #777777 1px 2px) 0 0 / 1px 12px no-repeat,
+    linear-gradient(#999999, #999999) 0 100% / calc(100% - 1px) 1px no-repeat,
+    url("art/platinum/utility-dots.png") 0 2px / 3px 3px repeat-x,
+    url("art/platinum/utility-dots.png") 0 5px / 3px 3px repeat-x,
+    url("art/platinum/utility-dots.png") 0 8px / 3px 3px repeat-x,
     #cccccc;
-  overflow: clip;              /* still truncates with an ellipsis */
-  overflow-clip-margin: 1px;   /* but lets the column past the end show */
+  background-clip: padding-box, content-box, content-box, content-box, padding-box;
 }
 
-/* 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 .window.utility > .title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse) {
+  position: absolute;
+  grid-area: auto;
+  top: 1px;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  margin: 0;
+  border: 0;
+  background: url("art/platinum/utility-close.png") 0 0 / 10px 10px no-repeat;
+  box-shadow: none;
 }
 
-: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;
+:root .window.utility > .title-bar > :is(.resize, .resize-box, .zoom) {
+  left: auto;
+  right: 11px;
+  background-image: url("art/platinum/utility-zoom.png");
+  box-shadow: -4px 0 0 #cccccc, 1px 0 0 #cccccc;
 }
 
-/* Zoom: a six-pixel lower-left corner inside the frame. */
-:root .title-bar > :is(.resize, .resize-box, .zoom)::before {
+:root .window.utility > .title-bar > :is(.shade, .shade-box, .collapse) {
+  left: auto;
+  right: 0;
+  background-image: url("art/platinum/utility-collapse.png");
+}
+
+/* With no collapse box, the zoom box takes its place. */
+:root .window.utility > .title-bar:not(:has(> :is(.shade, .shade-box, .collapse))) > :is(.resize, .resize-box, .zoom) {
+  right: 0;
+}
+
+:root .window.utility > .title-bar > :is(button, .close, .resize, .zoom, .shade, .collapse)::before,
+:root .window.utility > .title-bar > :is(button, .close, .resize, .zoom, .shade, .collapse)::after {
+  content: none;
+}
+
+:root .window.utility > .title-bar > :is(.title, h1, h2, h3) {
+  height: 11px;
+  padding: 0 2px;
+  background: #cccccc;
+  font-size: 12px;
+  line-height: 11px;
+}
+
+/* The dots right of the title run from the right end (their phase differs
+   from the left run's by one column). */
+:root .window.utility > .title-bar::after {
+  content: "";
+  position: absolute;
   top: 0;
-  left: 0;
-  width: 6px;
-  height: 6px;
+  right: 25px;
+  bottom: 1px;
+  left: 50%;
   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;
+    url("art/platinum/utility-dots.png") right -1px top 2px / 3px 3px repeat-x,
+    url("art/platinum/utility-dots.png") right -1px top 5px / 3px 3px repeat-x,
+    url("art/platinum/utility-dots.png") right -1px top 8px / 3px 3px repeat-x,
+    #cccccc;
+  box-shadow: none;
 }
 
-/* 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;
+:root .window.utility > .title-bar > :is(.title, h1, h2, h3) {
+  position: relative;
+  z-index: 1;
+}
+
+/* ---- Movable modal window (Navigation Services "Open", Mac OS 9.0) --------------
+   A title bar with no close box over a dialog body: no frame band, the black
+   rule under the title bar runs the whole width, and the body has the modal
+   dialog's white light and #999/#555 shade inside the outline. */
+:root .window.movable-modal {
+  padding: 2px 0 0;
   background:
-    linear-gradient(#222222, #222222) left top / 9px 1px no-repeat,
-    linear-gradient(#222222, #222222) left bottom / 9px 1px no-repeat;
+    linear-gradient(#ffffff, #ffffff) 1px 22px / calc(100% - 3px) 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 1px 22px / 1px calc(100% - 23px) no-repeat,
+    linear-gradient(#999999, #999999) calc(100% - 1px) 23px / 1px calc(100% - 24px) no-repeat,
+    linear-gradient(#555555, #555555) 100% 22px / 1px calc(100% - 22px) no-repeat,
+    linear-gradient(#ffffff, #ffffff) 0 0 / 100% 1px no-repeat,
+    linear-gradient(#ffffff, #ffffff) 0 0 / 1px 19px no-repeat,
+    linear-gradient(#cccccc, #cccccc) 0 19px / 1px 1px no-repeat,
+    linear-gradient(#000000, #000000) 0 20px / 1px 1px no-repeat,
+    linear-gradient(#cccccc, #cccccc) 1px 1px / 100% 1px no-repeat,
+    #dddddd;
 }
 
-/* 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.movable-modal > .title-bar {
+  --clio-tb-close: 3px;
+  margin: 0 0 0 1px;
+  border-bottom: 1px solid #000000;
+  box-shadow: none;
 }
 
-:root .window.inactive > .title-bar,
-:root .inactive-title-bar {
-  border-bottom-color: #555555;
-  --clio-title-bg: #dddddd;
+/* the frame's light down the title bar's first column, above its #999 row */
+:root .window.movable-modal {
+  --clio-mm-light: linear-gradient(#ffffff, #ffffff) 1px 1px / 1px 19px no-repeat;
 }
 
-:root .window.inactive > .title-bar > :is(.title, h1, h2, h3),
-:root .inactive-title-bar > :is(.title, h1, h2, h3) {
-  background: #dddddd;
+:root .window.movable-modal > .window-pane {
+  border: 0;
+  background: transparent;
 }
 
-/* ---- Default button ring: 1px black, a #aaa bevel band, 1px gap. -------- */
-:root :is(.default, .btn-default) {
-  position: relative;
-  box-shadow: var(--clio-button-shadow);
+/* Safari's COLRv0 edge levels in white and dimmed text (src/00-fonts.css). */
+:root :is(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a, span):is([aria-expanded="true"], .active),
+:root :is(.menu-bar, [role="menubar"], [role="menu-bar"]) > li.open > :is(button, a, span),
+:root :is(.menu, [role="menu"]) > li:not(.disabled, [aria-disabled="true"], .separator, [role="separator"]):is(:hover, :focus-within, .active):where(:not([data-clio-blink])),
+:root :is(.menu, [role="menu"]) > li > :is(a, button):not([aria-disabled="true"], :disabled):is(:hover, :focus-visible, .active):where(:not([data-clio-blink])),
+:root .icon:is(.selected, [aria-selected="true"], [aria-pressed="true"]) > :is(figcaption, span, .icon-label) {
+  font-palette: --clio-aa-white;
+}
+
+:root :is(.menu, [role="menu"]) > li:is(.disabled, [aria-disabled="true"]),
+:root :is(.menu, [role="menu"]) > li > :is(a, button):is(:disabled, [aria-disabled="true"]) {
+  font-palette: --clio-aa-6f6f6f;
+}
+
+/* A submenu sits inside its parent's <li>, which stays chosen while the
+   pointer is in the submenu: its own items start from the black levels. */
+:root :is(.menu, [role="menu"]) :is(.menu, [role="menu"]) {
+  font-palette: normal;
+}
+
+/* ---- Side-title utility window (kWindowFloatSide*; Mac OS 9.0, the Appearance
+   SDK's sample "Side Utility Window", frames side3) ------------------------------
+   <div class="window utility side"> with the usual .title-bar (close box at the
+   top, collapse box at the foot; no title is drawn). The frame is the utility
+   window's: 1px black, white light on the top and left, #999 shade on the right
+   and the bottom, the drop from the second row and column. The bar is 10px of #ccc
+   down the left with the 3px dot pattern from 12px below its top to 12px above its
+   foot; the collapse box is the title-bar one transposed. */
+:root .window.utility.side {
+  flex-direction: row;
+  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) 100% 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#999999, #999999) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    #cccccc;
 }
 
-:root :is(.default, .btn-default):not(:disabled, .disabled):is(:active, .active) {
-  box-shadow: var(--clio-button-active-shadow);
+:root .window.utility.side > .title-bar {
+  display: block;
+  flex: none;
+  width: 10px;
+  height: auto;
+  margin: 1px 0 1px 1px;
+  padding: 0;
+  background: url("art/platinum/utility-dots.png") 1px 12px / 3px 3px repeat, #cccccc;
+  box-shadow: none;
 }
 
-:root :is(.default, .btn-default)::before {
+/* The dots keep to columns 1 to 9 and rows 12 to 12 above the foot: a #ccc frame
+   painted over the pattern's edges. */
+:root .window.utility.side > .title-bar::before {
   content: "";
   position: absolute;
-  border-width: 1px;                  /* longhands: the shorthand would reset the ring, which is a border-image */
+  inset: 0;
   border-style: solid;
-  border-color: transparent;
-  inset: -4px;
-  border-radius: 0;
-  box-shadow: none;
+  border-color: #cccccc;
+  border-width: 12px 0 12px 1px;
   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;
+:root .window.utility.side > .title-bar::after {
+  content: none;
 }
 
-/* ---- 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: "";
+:root .window.utility.side > .title-bar > :is(.title, h1, h2, h3) {
   position: absolute;
-  top: 0;
-  right: -3px;
-  width: 2px;
-  height: 4px;
-  background: var(--clio-art-p9-check-overhang) 0 0 / 2px 4px no-repeat;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-/* ---- 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;
+:root .window.utility.side > .title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom, .shade, .shade-box, .collapse) {
+  top: 0;
+  right: auto;
+  left: 0;
+  z-index: 1;
   box-shadow: none;
 }
 
-:root input[type="radio"]:checked {
-  background: var(--clio-art-p9-radio-on) 0 0 / 12px 12px no-repeat;
+:root .window.utility.side > .title-bar > :is(.shade, .shade-box, .collapse, .resize, .resize-box, .zoom) {
+  top: auto;
+  bottom: 0;
+  background-image: url("art/platinum/utility-collapse-side.png");
 }
 
-:root input[type="radio"]:not(:disabled):active {
-  background: var(--clio-art-p9-radio-pressed) 0 0 / 12px 12px no-repeat;
+:root .window.utility.side > .window-pane {
+  margin: 1px 1px 1px 0;
 }
 
-/* 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;
+/* In the background: a #555 frame and drop on flat #ddd; no boxes, no dots. */
+:root .window.utility.side.inactive {
+  border-color: #555555;
+  background: #dddddd;
 }
 
-/* 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 {
+:root .window.utility.side.inactive::before {
   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;
+    linear-gradient(#555555, #555555) 100% 0 / 1px 100% no-repeat,
+    linear-gradient(#555555, #555555) 0 100% / 100% 1px 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 .window.utility.side.inactive > .title-bar {
+  background: #dddddd;
 }
 
-:root :is(input[type="checkbox"], input[type="radio"]):disabled {
-  border-color: #888888;
-  opacity: 0.6;
+:root .window.utility.side.inactive > .title-bar::before {
+  content: none;
 }
 
-/* ---- Menus ------------------------------------------------------------------- */
-:root :is(.menu-bar, [role="menubar"], [role="menu-bar"]) > li > :is(button, a, span) {
-  font-weight: 700;
+/* ---- Placard (Mac OS 9.0, the Appearance SDK's CDEF Tester, frame placard) -----
+   1px black, white light on the top and left, #aaa shade on the right and the
+   bottom (the corners they would share stay #ddd), #ddd face. Disabled: a #555
+   frame on #eee, no light or shade (frame placard-disabled). */
+:root .placard {
+  border-color: #000000;
+  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(#aaaaaa, #aaaaaa) 100% 1px / 1px calc(100% - 1px) no-repeat,
+    linear-gradient(#aaaaaa, #aaaaaa) 1px 100% / calc(100% - 1px) 1px no-repeat,
+    #dddddd;
+  color: #000000;
 }
 
-: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 .placard:is(:disabled, [aria-disabled="true"], .window.inactive *) {
+  border-color: #555555;
+  background: #eeeeee;
+  color: #555555;
 }
 
-: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);
+/* ---- Split bar (BBEdit 5.1, Mac OS 9.0, frames bb3 and split-done) -------------
+   7 rows of black across the scroll bar's width; the split line puts its two
+   lines on the bar's fourth and sixth rows. */
+:root :is(.split-view, .split-bar, .split-line) {
+  --clio-split-bar-height: 7px;
+  --clio-split-bg: #ffffff;
+  --clio-split-ink: #000000;
 }
 
-: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 .split-line {
+  --clio-split-line-1: 3px;
 }
 
-: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);
+/* ---- Rounded-corner window (the Calculator, Mac OS 9.0 and 8.5) ----------------
+   The old window definition draws it as in System 7, its title in the system font
+   antialiased: white on black, black on white in the background (levels measured,
+   tooling/aa-palettes.py). */
+:root .rounded-window > .rounded-title {
+  font-family: Charcoal, "Charcoal CY", "Clio Sans '97 Title Exact", "Clio Sans '97 Title", "Clio Sans '97", "Clio Asap", Geneva, sans-serif;
+  padding-left: 16px;   /* Clio Sans '97 Title sets "Calculator" 2px narrower than the Mac's Charcoal: fitted to the capture */
+  font-size: 12px;
+  font-palette: --clio-aa-rdoc-title;
 }
 
-: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;
+:root .rounded-window.inactive > .rounded-title {
+  font-palette: --clio-aa-rdoc-title-inactive;
 }
 
-/* ---- Tabs: drawn from the measured Mac OS 9 tab (tooling/tab-art.py) ------ */
-:root :is([role="tablist"], .tabs) {
-  gap: 0;
-  padding: 0 4px;
+/* Mac OS 9 Platinum only (not Drawing Board, whose theme draws its own):
+   scroll-bar details read from the Mac OS 9.0 Finder (frames hig/platinum9/
+   finder-scroll-*). The build leaves this file out of clio.drawingboard.css. */
+
+/* ---- The scroll box's far side is the window's frame (Mac OS 9.0 Finder) --- */
+:is(:root) :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-thumb:vertical {
+  border-right-width: 0;
 }
 
-: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;
+:is(:root) :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-v > .clio-sb-thumb {
+  border-right-width: 0;
 }
 
-: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;
+:is(:root) :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *)::-webkit-scrollbar-thumb:horizontal {
+  border-bottom-width: 0;
 }
 
-: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;
+:is(:root) :is(.window-pane, .listbox, [role="listbox"], textarea, select[multiple], .clio-scroll, .clio-scrollbars *) > .clio-sb-anchor > .clio-sb.clio-sb-h > .clio-sb-thumb {
+  border-bottom-width: 0;
 }
 
-:root :is([role="tabpanel"], .tab-panel) {
-  border-top: 0;
-  box-shadow: inset 1px 0 0 #ffffff, inset -1px -1px 0 #888888;
+/* Smart Scrolling (clio.js bars): the up and left arrows move to the far end
+   and take their black line on the lane's side (frame finder-scroll-smart). */
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-v.clio-sb-smart > .clio-sb-dec {
+  border-top: 1px solid #000000;
+  border-bottom-width: 0;
 }
 
-/* ---- 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 .clio-sb-host > .clio-sb-anchor > .clio-sb-h.clio-sb-smart > .clio-sb-dec {
+  border-left: 1px solid #000000;
+  border-right-width: 0;
 }
 
-: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;
+/* Nothing to scroll (clio.js bars): a flat #eee lane and dimmed arrows, the
+   bevels gone (Finder, frame finder-scroll-fixed, its horizontal bar). */
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb.clio-sb-off > .clio-sb-track {
+  background: #eeeeee;
+  box-shadow: none;
 }
 
-:root :is(fieldset) > legend {
-  background: var(--clio-pane-bg);
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb.clio-sb-off > .clio-sb-button {
+  background-color: #eeeeee;
+  box-shadow: none;
 }
 
-:root fieldset {
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-v.clio-sb-off > .clio-sb-button.clio-sb-dec { background-image: var(--clio-art-p-up-off); }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-v.clio-sb-off > .clio-sb-button.clio-sb-inc { background-image: var(--clio-art-p-down-off); }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-h.clio-sb-off > .clio-sb-button.clio-sb-dec { background-image: var(--clio-art-p-left-off); }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-h.clio-sb-off > .clio-sb-button.clio-sb-inc { background-image: var(--clio-art-p-right-off); }
+
+/* ...and the lines between the arrows and the lane dim to #555, drawn as
+   shadows so the black line across keeps the corner. */
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-h.clio-sb-off > .clio-sb-button.clio-sb-dec { border-right-width: 0; box-shadow: inset -1px 0 #555555; }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-h.clio-sb-off > .clio-sb-button.clio-sb-inc { border-left-width: 0; box-shadow: inset 1px 0 #555555; background-position: 1px 1px; }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-v.clio-sb-off > .clio-sb-button.clio-sb-dec { border-bottom-width: 0; box-shadow: inset 0 -1px #555555; }
+:root .clio-sb-host > .clio-sb-anchor > .clio-sb-v.clio-sb-off > .clio-sb-button.clio-sb-inc { border-top-width: 0; box-shadow: inset 0 1px #555555; background-position: 1px 1px; }
+
+/* ---- Collapsed (WindowShade): the frame closes round the title bar --------
+   Mac OS 9.0, Games collapsed (frame collapsed): the title bar's last two rows
+   become the window's own #999 shade and black frame, which run under the side
+   bands too. */
+:root .window.collapsed {
+  padding-bottom: 1px;
+}
+
+/* the bevel only: the inner strip round the pane has gone with it */
+:root .window.collapsed:not(.inactive) {
   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 */
+    var(--clio-p9-bevel),
+    var(--clio-window-bg);
 }
 
-/* The title's gap opens 13px after the corner (General Controls, "Desktop"). */
-:root fieldset > legend {
-  margin-left: 2px;
+:root .window.collapsed > .title-bar {
+  height: calc(var(--clio-titlebar-height) - 2px);
+  border-bottom-width: 0;
 }
 
-/* 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;
+/* ---- The open pop-up menu (Mac OS 9.0, Appearance > Fonts, Large System Font
+   held; frame popup-open) ----------------------------------------------------
+   Laid with its top on the button's (the current item there), as wide as the
+   button less its arrows (20px), framed all round in black with a white and
+   #999 bevel whose other two corners stay #ddd, and its shadow starting 2px in
+   (the clip takes the first pixel of each end). The check mark sits 3px in,
+   the text 20px. */
+:root select {
+  --clio-popup-menu-trim: 20px;
+  --clio-popup-menu-align: top;
+}
+
+:root .clio-popup-menu {
+  border-top-width: 1px;
   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,
+    var(--clio-p9-bevel),
     #dddddd;
-  background-clip: padding-box;
-  box-shadow: none;
-  color: #888888;
-  opacity: 1;
-  border-image-source: var(--clio-art-frame-p9-popup-disabled);
+  box-shadow: 1px 1px 0 #222222;
+  clip-path: polygon(0 0, 100% 0, 100% 2px, calc(100% + 1px) 2px, calc(100% + 1px) calc(100% + 1px), 2px calc(100% + 1px), 2px 100%, 0 100%);
 }
 
-/* The face stays inside the frame, so the rounded corners show what is behind. */
-:root select {
-  background-clip: padding-box;
+:root .clio-popup-menu > li {
+  padding-left: 20px;
 }
 
-/* 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;
+/* Black on #ddd, every antialiasing level as the screen shows it (the push
+   buttons' palette: the same colours). */
+:root .clio-popup-menu > li:not(.disabled, .active, :hover) {
+  font-family: "Clio Sans '97 Exact", var(--clio-font-chrome);
+  font-palette: --clio-aa-p9-button;
 }
 
-: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 .clio-popup-menu > li:is(.checked, [aria-checked="true"])::before {
+  left: 3px;
 }
 
-:root .window.inactive > .title-bar > :is(.title, h1, h2, h3)::after,
-:root .inactive-title-bar > :is(.title, h1, h2, h3)::after {
-  content: none;
+/* The same menu where the browser draws it (base-select). */
+@supports (appearance: base-select) {
+  :root select::picker(select) {
+    min-width: calc(anchor-size(width) - 20px);
+    border-top-width: 1px;
+    background:
+      var(--clio-p9-bevel),
+      #dddddd;
+    box-shadow: 1px 1px 0 #222222;
+    clip-path: polygon(0 0, 100% 0, 100% 2px, calc(100% + 1px) 2px, calc(100% + 1px) calc(100% + 1px), 2px calc(100% + 1px), 2px 100%, 0 100%);
+  }
+
+  :root select option {
+    padding-left: 20px;
+  }
+
+  :root select option:not(:disabled, :hover, :focus-visible) {
+    font-family: "Clio Sans '97 Exact", var(--clio-font-chrome);
+    font-palette: --clio-aa-p9-button;
+  }
+
+  :root select option::checkmark {
+    left: 3px;
+  }
 }
 
-/* ---- 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). */
+/* While its menu is open the button's arrows are drawn pressed: a #444 top row,
+   #555 then a #666 face, the arrows white, #777 and #888 below and to the right
+   (frame fonts-popup-open). clio.js marks the select it opens a menu for. */
+:root select.clio-open {
+  background: var(--clio-art-p9-popup-open-arrows) right 0 top 0 / 19px 18px no-repeat, var(--clio-popup-arrow), var(--clio-popup-bg);
+  border-image-source: var(--clio-art-frame-p9-popup-open);   /* the arrows' corners pressed too */
+}
+
+@supports selector(:open) {
+  :root select:open {
+    background: var(--clio-art-p9-popup-open-arrows) right 0 top 0 / 19px 18px no-repeat, var(--clio-popup-arrow), var(--clio-popup-bg);
+    border-image-source: var(--clio-art-frame-p9-popup-open);
+  }
+}
+
+/* The title's line is 12px, not the 13px row: Charcoal's 11px ascent and 3px
+   descent then leave no half pixel above the baseline, which each browser
+   rounded its own way (Chromium up, WebKit and Firefox down a row). The box
+   keeps its 13px height. */
 :root .title-bar > :is(.title, h1, h2, h3) {
-  font-palette: --clio-aa-p9-title;
+  line-height: calc(var(--clio-titlebar-row) - 1px);
 }
 
-:root :is(.window.inactive > .title-bar, .inactive-title-bar) > :is(.title, h1, h2, h3) {
-  font-palette: --clio-aa-p9-title-inactive;
+/* The column just past the cut-out covers the ridges' #777 rows (their cut is a
+   pixel to the right of the white rows'). It used to be an ::after outside the
+   title, shown through overflow-clip-margin, which WebKit lacks; now the title
+   is a pixel wider into it (a -1px margin keeps it centred where it was) and
+   paints that column itself. */
+:root .title-bar:not(.inactive-title-bar, .window.inactive > .title-bar) > :is(.title, h1, h2, h3) {
+  margin-right: -1px;
+  padding-right: 4px;
+  background:
+    repeating-linear-gradient(to bottom, transparent 0 1px, #777777 1px 2px) 0 0 / 1px 12px no-repeat,
+    repeating-linear-gradient(to bottom, transparent 0 1px, #cccccc 1px 2px) right 0 top 0 / 1px 12px no-repeat,
+    linear-gradient(#cccccc, #cccccc) 0 0 / calc(100% - 1px) 100% no-repeat;
 }
 
-: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 .title-bar > :is(.title, h1, h2, h3)::after {
+  content: none;
 }
 
-: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;
+/* ---- The window's drop shadow starts 2px in -------------------------------
+   Mac OS 9.0 (Infinite HD, measured): the 1px black shadow runs down the right
+   from the frame's third row and along the foot from its third column; a
+   box-shadow could only start it 1px in. Two border lines on a pseudo-element
+   draw it (the box itself stays clear); its offsets count from the padding box,
+   inside the 1px frame. */
+:root .window {
+  box-shadow: none;
 }
 
-: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;
+:root .window::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  right: -2px;
+  bottom: -2px;
+  left: 1px;
+  border-right: 1px solid #000000;
+  border-bottom: 1px solid #000000;
+  pointer-events: none;
+}
+
+/* Behind another window the shadow turns #555555 and keeps the same notch
+   (Mac OS 9.0 Finder window, measured). */
+:root .window.inactive {
+  box-shadow: none;
+}
+
+:root .window.inactive::after {
+  border-color: #555555;
 }
 
 /* Adaptations the historical machines never needed. Historical sizes are
@@ -2668,3 +4770,141 @@
     box-shadow: none;
   }
 }
+
+/* Retina and other whole-number pixel ratios: every Mac pixel becomes a solid
+   2x2 or 3x3 block (nearest neighbour), as a 1x screen magnified would show it.
+   At fractional ratios (1.25, 1.5, browser zoom) the browser's smoothing stays:
+   nearest neighbour there gives uneven pixel widths. image-rendering inherits,
+   so the page's own pictures, video and canvas are handed back to smoothing. */
+@media (resolution: 2dppx), (resolution: 3dppx), (resolution: 4dppx) {
+  :root {
+    image-rendering: pixelated;
+  }
+
+  :where(img, picture, video, canvas, iframe, object, embed) {
+    image-rendering: auto;
+  }
+}
+
+/* Optional chrome faces for Platinum and Drawing Board:
+     data-clio-font="virtue"  Virtue 3.2.1, Marty P. Pfeiffer's 1997-99 TrueType
+                              reworking of Charcoal, (c) Scooter Graphics
+                              (https://www.scootergraphics.com/). Ships as
+                              fonts/Virtue.woff2, unchanged, with the author's
+                              permission (THIRD-PARTY.md).
+     data-clio-font="truth"   Truth FB, David Berlow's own 2005 expansion of
+                              Charcoal, sold by Font Bureau. Not shipped: install
+                              it or add your own @font-face.
+   Set the attribute on <html> or any ancestor. It changes Platinum and
+   Drawing Board only; System 6 and 7 keep Chicago. Clio Sans '97 stays as the
+   fallback. These are outline fonts drawn by the browser, not the measured
+   pixels. */
+@font-face {
+  font-family: Virtue;
+  src: local("Virtue"), url("fonts/Virtue.woff2") format("woff2");
+  font-display: swap;
+}
+
+[data-clio-font="virtue"]:root,
+[data-clio-font="virtue"] :root,
+:root [data-clio-font="virtue"] {
+  --clio-font-chrome: Virtue, "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-window-title: Virtue, "Clio Sans '97 Title", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-button: Virtue, "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+}
+
+[data-clio-font="truth"]:root,
+[data-clio-font="truth"] :root,
+:root [data-clio-font="truth"] {
+  --clio-font-chrome: "Truth FB", Truth, "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-window-title: "Truth FB", Truth, "Clio Sans '97 Title", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-button: "Truth FB", Truth, "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Chinese, Japanese and Korean (owner decisions 9 and 10, 2026-11-14).
+
+   Measured: KanjiTalk 7.5.3 and Mac OS 9.0 with the Chinese Language Kits draw CJK text
+   at the Roman geometry: 16px menu and text rows, the same baseline, 12px ideographs whose
+   ink runs from 10px above the baseline to 1px below (tooling/emulator/measure-cjk.sh).
+   So nothing moves; only the fonts change. A localized system's system font is the
+   script's font, Latin included (KanjiTalk draws "Infinite HD" and OK in Osaka), so the
+   CJK font leads every stack.
+
+   Each stack names the period bitmap interface font (Taipei, Beijing, Osaka, Seoul), then
+   Clio's stand-in, Fusion Pixel 12px proportional (OFL-1.1, THIRD-PARTY.md) cut to the
+   character set that bitmap font drew (Big5, GB 2312, JIS X 0208, KS X 1001), then an
+   outline family of the period. The outline families come after the stand-in because
+   current macOS still installs some of them (AppleGothic) as antialiased outlines.
+   A browser fetches a stand-in only for an element in that language that has text in
+   its unicode-range: pages without CJK text never load them. */
+@font-face {
+  font-family: "Clio Pixel TC";
+  src: url("fonts/FusionPixel12-TC.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+20-F7, U+391-451, U+2013-203E, U+2103-2199, U+2460-247D, U+2500-2642, U+3000-3129, U+32A3, U+4E00-7E9C, U+7F36-8B9E, U+8C37-9483, U+9577-9FA4, U+FA0C-FA0D, U+FE30-FE4F, U+FF01-FFE3;
+}
+
+@font-face {
+  font-family: "Clio Pixel SC";
+  src: url("fonts/FusionPixel12-SC.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+20-1DC, U+391-451, U+2015-203B, U+2103-2193, U+2312, U+2460-2642, U+3000-3129, U+3220-3229, U+4E00-7DAE, U+7E3B-8C98, U+8D1D-8ECE, U+8F66-91DC, U+9274-99A8, U+9A6C-9B54, U+9C7C-9CE2, U+9E1F-9FA0, U+FF01-FF5E, U+FFE0-FFE5;
+}
+
+@font-face {
+  font-family: "Clio Pixel JA";
+  src: url("fonts/FusionPixel12-JA.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+20-F7, U+391-451, U+2010-203B, U+2103-21D4, U+2312, U+2500-266F, U+3000-30FE, U+4E00-7E9C, U+7F36-8B9A, U+8C37-9481, U+9577-9FA0, U+FF01-FFE5;
+}
+
+@font-face {
+  font-family: "Clio Pixel KO";
+  src: url("fonts/FusionPixel12-KO.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+20-167, U+391-451, U+2015-21D4, U+2312, U+2460-266D, U+3000-318E, U+327F, U+4E00-7E9C, U+7F36-8B9A, U+8C37-947F, U+9577-9C57, U+9CE5-9F9C, U+AC00-D79D, U+F900-FA0B, U+FF01-FF5E, U+FFE0-FFE6;
+}
+
+:lang(zh) { --clio-font-cjk: Beijing, "Clio Pixel SC", Hei; }
+:is(:lang(zh-Hant), :lang(zh-TW), :lang(zh-HK), :lang(zh-MO)) { --clio-font-cjk: Taipei, "Clio Pixel TC", "Apple LiGothic"; }
+:lang(ja) { --clio-font-cjk: Osaka, "Clio Pixel JA"; }
+:lang(ko) { --clio-font-cjk: Seoul, "Clio Pixel KO", AppleGothic; }
+
+/* Declared beside --clio-font-cjk, on every element in the language, so var() resolves there. */
+:is(:lang(zh), :lang(ja), :lang(ko)) {
+  --clio-font-chrome: var(--clio-font-cjk), "Clio Sans '84", Chicago, "ChicagoFLF", Charcoal, Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-text: var(--clio-font-cjk), "Clio Text '84", Geneva, "Helvetica Neue", Arial, sans-serif;
+  /* Small text keeps the 9px Latin face: the stand-in is a 12px font (KanjiTalk's Finder
+     drew 8px kanji here, from a 9-point Osaka clio.css does not have). */
+  --clio-font-small: "Clio Text '84 9", var(--clio-font-cjk), Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-display: var(--clio-font-cjk), Chicago, "ChicagoFLF", Charcoal, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Pop-up items name "Clio Sans '97 Exact" ahead of the chrome stack for its palette
+   (91-platinum-only.css; Mac OS 9 only, as that file): in a CJK language the CJK fonts go first there too. */
+:root .clio-popup-menu > li:not(.disabled, .active, :hover):is(:lang(zh), :lang(ja), :lang(ko)) {
+  font-family: var(--clio-font-cjk), "Clio Sans '97 Exact", var(--clio-font-chrome);
+}
+
+@supports (appearance: base-select) {
+  :root select option:not(:disabled, :hover, :focus-visible):is(:lang(zh), :lang(ja), :lang(ko)) {
+    font-family: var(--clio-font-cjk), "Clio Sans '97 Exact", var(--clio-font-chrome);
+  }
+}
+
+/* CJK on the Appearance Manager eras: the same order as 96-cjk.css over the
+   Charcoal stacks. Measured on Mac OS 9.0 with the Chinese Language Kits: the Text
+   control panel's Script pop-up draws 繁體中文 and 简体中文 in 16px rows, ink 2px below
+   the row's top to 12px, 1-bit (frame p9-script-popup-open). */
+:is(:root :is(:lang(zh), :lang(ja), :lang(ko)), :root:is(:lang(zh), :lang(ja), :lang(ko))) {
+  --clio-font-chrome: var(--clio-font-cjk), Charcoal, "Charcoal CY", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-display: var(--clio-font-cjk), Charcoal, "Charcoal CY", "Clio Sans '97 Display", "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-window-title: var(--clio-font-cjk), 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: var(--clio-font-cjk), Charcoal, "Charcoal CY", "Clio Sans '97 Exact", "Clio Sans '97", "Clio Asap", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-text: var(--clio-font-cjk), Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-small: Geneva, var(--clio-font-cjk), "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+}