/* AI System 6 - official site. Static, zero JS.
   Visual vocabulary is cribbed from the app's own System 6 recipes
   (styles/00-foundation.css, styles/10-windows.css): Chicago faces,
   striped title bars, 50% dither desk. */

@font-face {
  font-family: Chicago;
  src: url("fonts/ChicagoFLF.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Chicago_12;
  src: url("fonts/ChiKareGo2.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Monaco;
  src: url("fonts/monaco.woff2") format("woff2");
  font-display: swap;
}
/* The same Charcoal stand-in the app itself wears, carried over so 1999 has
   one face here and in the product instead of a different one per platform.
   Charcoal is on no current system; Asap's width axis at 113 was fitted to a
   measured Charcoal sample's x-height and advance width. OFL 1.1, see
   fonts/Asap-OFL.txt and apps/desktop/assets/fonts/platinum/README.md. */
@font-face {
  font-family: "Platinum Asap";
  src: url("fonts/Asap-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* ==========================================================================
   Era type: the six system faces, defined once.

   These are worn in three places, so they live here and nowhere else: the era
   skins at the bottom of this file (as --site-font), the specimen list in the
   argument scene, which sets all six at the same time, and the share card,
   which reads them back off the document. The dates are the point of that
   scene, so each stack carries the evidence for its own.

     1984  Chicago         the system face of System 1 through 7
     1997  Charcoal        arrives with Mac OS 8 and the Platinum appearance,
                           on Chicago's metrics. On no current system at all,
                           so the readout says which face you really see.
     2001  Lucida Grande   10.0 through 10.9, the longest reign
     2009  Menlo           replaces Monaco in Terminal, on Bitstream Vera Sans
                           Mono, the parent of DejaVu Sans Mono
     2014  Helvetica Neue  10.10 only. Never -apple-system here: that is San
                           Francisco, which is 10.11 and 2015.
     2015  PingFang 苹方   the Chinese system face from 10.11. Before it,
                           华文黑体 STHeiti; before that, 宋体.

   Chicago and Monaco are hosted in site/fonts, so 1988 reads the same on every
   machine. The rest are Apple faces nobody can ship, so each stack ends in the
   nearest face other platforms actually have. Chicago stays out of Platinum on
   purpose: with it there, 1999 looks exactly like 1988 off a Mac, and the
   whole argument of the timeline disappears.
   ========================================================================== */
:root {
  --face-classic: Chicago_12, Chicago, Geneva, Verdana, "Songti SC", STSong, SimSun, serif;
  --face-classic-title: Chicago, Geneva, Verdana, "Songti SC", STSong, SimSun, serif;
  /* Specimen aliases. These eras share a page theme with a parent (eras.js
     `page`), but each Appearances row has to wear its own face while the
     rest of the page is standing in another year. */
  --face-system-7: var(--face-classic);
  /* Noto Sans before Tahoma: fontconfig maps Tahoma and Verdana to DejaVu
     Sans, which is what Aqua gets, so Linux would show two eras in one face. */
  --face-platinum: Charcoal, "Charcoal CY", "Platinum Asap", Geneva, "Noto Sans", Tahoma, Verdana, "Songti SC", STSong, SimSun, sans-serif;
  --face-drawing-board: var(--face-platinum);
  --face-aqua: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", STHeiti, "Heiti SC", SimHei, sans-serif;
  --face-tiger: var(--face-aqua);
  --face-snow-leopard: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", STHeiti, "Heiti SC", SimHei, sans-serif;
  --face-lion: var(--face-snow-leopard);
  --face-nextstep: Helvetica, Arial, "Liberation Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --face-big-sur: var(--face-liquid-glass);
  --face-yosemite: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Hiragino Sans GB", "Heiti SC", STHeiti, SimHei, sans-serif;
  --face-liquid-glass: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --face-liquid-glass-title: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --face-mono-monaco: Monaco, "Courier New", monospace;
  --face-mono-menlo: Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Consolas, monospace;
  --face-mono-courier: Courier, "Courier New", "Liberation Mono", monospace;
  --face-mono-sf: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Noto Sans Mono", monospace;
}

:root {
  --ink: #000;
  --paper: #fff;
  --ui-font: var(--face-classic);
  --display-font: var(--face-classic-title);
  --mono-font: var(--face-mono-monaco);
  /* 2x2 checkerboard = the System 6 50% gray desk pattern. */
  --desk-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect width="2" height="2" fill="%23ffffff"/><rect width="1" height="1" fill="%23000000"/><rect x="1" y="1" width="1" height="1" fill="%23000000"/></svg>');
  --menu-bar-height: 26px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body {
  font-family: var(--site-font, var(--ui-font));
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--desk-bg, #808080);
}

/* The desk pattern lives on a fixed layer, not the scrolling body: a 2px
   tile repainted across the whole document on every scroll frame is what
   makes long pages smear gray. A fixed layer rasterizes once. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--desk-image, var(--desk-pattern));
  background-size: var(--desk-size, 2px 2px);
}

/* ---------- Menu bar ---------- */

.menu-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--menu-bar-height);
  padding: 0 14px;
  background: var(--bar-bg, var(--paper));
  -webkit-backdrop-filter: var(--bar-blur, none);
  backdrop-filter: var(--bar-blur, none);
  border-bottom: 1px solid var(--bar-border, var(--ink));
  white-space: nowrap;
  /* No overflow clipping here: the pull-down menus hang below the bar. */
}

.menu-apple.s6-mark { vertical-align: -3px; }
.menu-title { font-weight: normal; }
.menu-spacer { flex: 1; }

/* ---------- Pull-down menus ---------- */

details.menu { position: relative; }
details.menu > summary {
  list-style: none;
  cursor: default;
  padding: 3px 10px;
  white-space: nowrap;
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary {
  background: var(--ink);
  color: var(--paper);
}

.menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 218px;
  list-style: none;
  background: var(--menu-bg, var(--paper));
  -webkit-backdrop-filter: var(--menu-blur, none);
  backdrop-filter: var(--menu-blur, none);
  border: 1px solid var(--menu-border, var(--ink));
  border-top: 0;
  border-radius: var(--menu-radius, 0);
  box-shadow: var(--menu-shadow, 1px 1px 0 var(--ink));
  padding: 3px 0;
}
.menu-list a,
.menu-list .menu-dim {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 3px 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.menu-list a:hover,
.menu-list a:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.menu-dim { color: #6f6f6f; }
.menu-dim kbd { font-family: var(--ui-font); }
.menu-sep {
  height: 1px;
  margin: 3px 1px;
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  background-size: 2px 1px;
}

.menu-link {
  color: var(--ink);
  text-decoration: none;
  padding: 2px 6px;
}
.menu-link:hover,
.menu-link:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Desk & windows ---------- */

.desk {
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 16px 48px;
}

.window {
  background: var(--win-bg, var(--paper));
  border: 1px solid var(--win-border, var(--ink));
  border-radius: var(--win-radius, 0);
  box-shadow: var(--win-shadow, none);
  -webkit-backdrop-filter: var(--win-blur, none);
  backdrop-filter: var(--win-blur, none);
  overflow: hidden;
  margin: 0 0 34px;
}

/* System 6 drags an inverted dotted outline, then the window jumps once. */
.drag-outline {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  border: 1px dashed var(--paper);
  mix-blend-mode: difference;
}


/* Title bar: the app's racing-stripe recipe, 1px black lines every 2px,
   title on a white plate that interrupts the stripes. */
.tbar {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--tbar-border, var(--ink));
  background-color: transparent;
  background-image: var(--tbar-bg, linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px));
  background-size: var(--tbar-bg-size, 100% 2px);
  background-origin: var(--tbar-bg-origin, content-box);
  background-clip: var(--tbar-bg-origin, content-box);
}

.tbar h1,
.tbar h2,
.tbar h3 {
  font-family: var(--site-font, var(--ui-font));
  font-size: 18px;
  font-weight: normal;
  line-height: 19px;
  background: var(--tbar-title-bg, var(--paper));
  color: var(--tbar-ink, var(--ink));
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 60px);
}

.close-box {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
}

.wbody { padding: 20px 22px 24px; }
.wbody > p + p { margin-top: 12px; }



/* The product's own menu mark: a 1-bit happy Macintosh, drawn pixel by pixel.
   Copied from the app's .apple::before/::after recipe (00-foundation.css):
   AI System 6 does not wear the Apple logo. */
.s6-mark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}
.s6-mark::before,
.s6-mark::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.s6-mark::before {
  transform: translate(-8px, -8px);
  box-shadow:
    2px 0 0 currentColor, 4px 0 0 currentColor, 6px 0 0 currentColor,
    8px 0 0 currentColor, 10px 0 0 currentColor, 12px 0 0 currentColor,
    14px 0 0 currentColor,
    0 2px 0 currentColor, 14px 2px 0 currentColor,
    0 4px 0 currentColor, 14px 4px 0 currentColor,
    0 6px 0 currentColor, 6px 6px 0 currentColor, 8px 6px 0 currentColor, 14px 6px 0 currentColor,
    0 8px 0 currentColor, 14px 8px 0 currentColor,
    0 10px 0 currentColor, 2px 10px 0 currentColor, 4px 10px 0 currentColor,
    6px 10px 0 currentColor, 8px 10px 0 currentColor, 10px 10px 0 currentColor,
    12px 10px 0 currentColor, 14px 10px 0 currentColor,
    6px 12px 0 currentColor, 8px 12px 0 currentColor,
    4px 14px 0 currentColor, 6px 14px 0 currentColor, 8px 14px 0 currentColor, 10px 14px 0 currentColor;
}
.s6-mark::after {
  transform: translate(-5px, -4px);
  box-shadow:
    8px 0 0 currentColor,
    2px 4px 0 currentColor,
    8px 4px 0 currentColor,
    4px 6px 0 currentColor,
    6px 6px 0 currentColor;
}

/* ---------- Buttons ---------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin: 4px 0 24px;
}

.btn {
  /* One push-button size, everywhere. HIG: buttons in a group share their
     height and width; labels never resize the control. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 200px;
  font-family: var(--site-font, var(--ui-font));
  font-size: 16px;
  color: var(--btn-ink, var(--ink));
  text-decoration: none;
  background: var(--btn-bg, var(--paper));
  border: 1px solid var(--btn-border, var(--ink));
  border-radius: var(--btn-radius, 7px);
  box-shadow: var(--btn-shadow, none);
  padding: 3px 20px 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
html[data-theme] .btn { padding: 0 20px; }
.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
/* Touch screens fire :hover on tap and leave it stuck, so the inverted
   hover state only exists where a pointer can actually hover. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--ink);
    color: var(--paper);
  }
}
.btn:active { transform: translateY(1px); }

/* Default button: the System 6 heavy outer ring. The ring is drawn in the
   row gap; the control itself keeps the shared size and axis. */
.btn-default {
  position: relative;
}
.btn-default::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid var(--ink);
  border-radius: 11px;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  color: var(--footer-ink, var(--paper));
  font-size: 16px;
  text-shadow: var(--footer-shadow, 1px 1px 0 var(--ink));
  padding: 8px 0 20px;
}
.site-footer a { color: inherit; }
.site-footer p { margin-bottom: 8px; }

.footer-shutdown {
  font-family: var(--display-font);
  margin-top: 18px;
  font-size: 18px;
}

/* ---------- Boot and shutdown ---------- */
/* The product's own startup and shutdown screens, ported from the app's
   00-foundation.css: the CSS-drawn happy Mac (box-shadow pixel face, awake
   and sleeping states), the stepped progress bar, and the startup ledger. */

.boot-screen,
.shutdown-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding: 24px;
  background:
    radial-gradient(rgba(0, 0, 0, 0.24) 1.5px, transparent 1.5px) 0 0 / 20px 20px,
    var(--desk-bg, #808080);
  transition: opacity 0.25s steps(3, end);
}
.shutdown-screen { z-index: 210; }
.boot-screen.boot-done { opacity: 0; pointer-events: none; }
.boot-screen[hidden],
.shutdown-screen[hidden] { display: none; }

.happy-mac {
  width: 112px;
  height: 108px;
  border: 4px solid var(--ink);
  border-radius: 2px;
  background:
    linear-gradient(var(--ink), var(--ink)) 16px 84px / 11px 4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 57px 84px / 40px 4px no-repeat,
    var(--paper);
  position: relative;
  margin: 10px 0 34px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
  transform: scale(1.15);
  transform-origin: center center;
}
.happy-mac::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -22px;
  height: 14px;
  border: 4px solid var(--ink);
  background: var(--paper);
}
.happy-mac-face {
  position: absolute;
  left: 12px;
  top: 18px;
  width: 84px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
}
.happy-mac-face::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background: transparent;
  box-shadow:
    20px 18px 0 var(--ink),
    20px 23px 0 var(--ink),
    62px 18px 0 var(--ink),
    62px 23px 0 var(--ink),
    43px 10px 0 var(--ink),
    43px 15px 0 var(--ink),
    43px 20px 0 var(--ink),
    43px 25px 0 var(--ink),
    43px 30px 0 var(--ink),
    38px 30px 0 var(--ink),
    38px 35px 0 var(--ink),
    26px 40px 0 var(--ink),
    31px 45px 0 var(--ink),
    36px 45px 0 var(--ink),
    41px 45px 0 var(--ink),
    46px 45px 0 var(--ink),
    51px 45px 0 var(--ink),
    56px 45px 0 var(--ink),
    61px 40px 0 var(--ink);
}
.happy-mac.is-sleeping .happy-mac-face::before {
  box-shadow:
    18px 15px 0 var(--ink),
    28px 15px 0 var(--ink),
    23px 20px 0 var(--ink),
    18px 25px 0 var(--ink),
    28px 25px 0 var(--ink),
    56px 15px 0 var(--ink),
    66px 15px 0 var(--ink),
    61px 20px 0 var(--ink),
    56px 25px 0 var(--ink),
    66px 25px 0 var(--ink),
    43px 10px 0 var(--ink),
    43px 15px 0 var(--ink),
    43px 20px 0 var(--ink),
    43px 25px 0 var(--ink),
    43px 30px 0 var(--ink),
    38px 30px 0 var(--ink),
    38px 35px 0 var(--ink),
    31px 43px 0 var(--ink),
    36px 43px 0 var(--ink),
    41px 43px 0 var(--ink),
    46px 43px 0 var(--ink),
    51px 43px 0 var(--ink),
    56px 43px 0 var(--ink);
}

.boot-msg,
.shutdown-ledger p {
  margin: 0;
  text-align: center;
  font-family: var(--ui-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.boot-msg { background: var(--paper); padding: 2px 14px; }

.boot-progress {
  width: min(420px, calc(100vw - 48px));
  height: 20px;
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 3px;
}
.boot-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
  transition: width 0.18s steps(4, end);
}

.boot-ledger,
.shutdown-ledger {
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 48px));
  padding: 14px 20px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--ui-font);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}
.shutdown-ledger { gap: 16px; justify-items: center; text-align: center; }
.boot-ledger span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boot-ledger span::before { content: "\25A1"; margin-right: 6px; }
.boot-ledger span.is-ready::before { content: "\25C6"; }
.boot-ledger span.is-standby::before { content: "\25C7"; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boot-screen,
  .shutdown-screen,
  .boot-progress span { transition: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .menu-extra { display: none; }
  /* A real System 6 menu bar has no app-name label; the hero names the
     product, so the narrow bar keeps Apple, Special, and the two links. */
  .menu-title { display: none; }
  /* The hero's default button already opens the live desktop; the menu-bar
     copy of that link is the one item 375px cannot afford. */
  .menu-link-live { display: none; }
  .menu-link-notes { display: none; }
  .menu-bar { gap: 8px; }
}

@media (max-width: 700px) {
  .wbody { padding: 16px 14px 18px; }
  body { font-size: 17px; }
}

/* ==========================================================================
   Appearances: the six release eras, token-only like the app's era skins.
   Classic (System 6) is the bare :root; each era swaps tokens and, where an
   era genuinely drew different chrome, a few structural rules follow.
   ========================================================================== */

/* ---------- Platinum (Mac OS 8/9): embossed grays, horizontal pinstripes */
html[data-theme="platinum"] {
  --site-font: var(--face-platinum);
  --display-font: var(--face-platinum);
  /* The width the app fitted to its Charcoal sample. Ignored by every
     non-variable face in the stack, so an installed Charcoal is unaffected. */
  font-variation-settings: "wdth" 113;
  --desk-bg: #666a6e;
  --desk-image: none;
  --win-bg: #dddddd;
  --tbar-bg: linear-gradient(to bottom, #b3b3b3 0 1px, transparent 1px 3px);
  --tbar-bg-size: 100% 3px;
  --tbar-title-bg: #dddddd;
  --tbar-border: #555;
  --btn-bg: linear-gradient(#f2f2f2, #cfcfcf);
  --btn-radius: 5px;
  --btn-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8a8a8a;
  --menu-bg: #dddddd;
  --bar-bg: #dddddd;
}

/* ---------- Aqua (Mac OS X 10.0): pinstripes and gel ---------- */
html[data-theme="aqua"] {
  --site-font: var(--face-aqua);
  --display-font: var(--face-aqua);
  --desk-bg: #31599e;
  --desk-image: linear-gradient(165deg, #7db2e8 0%, #4a7fc4 45%, #274d8f 100%);
  --desk-size: 100% 100%;
  --win-bg: repeating-linear-gradient(to bottom, #f4f4f4 0 3px, #e9e9e9 3px 6px);
  --win-border: #8a8a8a;
  --win-radius: 8px;
  --win-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --tbar-bg: linear-gradient(#fdfdfd, #d2d2d2);
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-border: #9a9a9a;
  --btn-bg: linear-gradient(#ffffff, #dbe9fb 55%, #b5d3f6);
  --btn-border: #7f9db9;
  --btn-radius: 14px;
  --btn-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.25);
  --menu-bg: rgba(248, 248, 248, 0.96);
  --menu-radius: 0 0 6px 6px;
  --menu-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  --bar-bg: linear-gradient(#fefefe, #d8d8d8);
  --bar-border: #999;
}

/* ---------- Snow Leopard (10.6): brushed gray, quiet blue ---------- */
html[data-theme="snow-leopard"] {
  /* The face does not change here. The monospace does, and that is the
     whole 2009 story: Menlo took Terminal from Monaco. */
  --site-font: var(--face-snow-leopard);
  --display-font: var(--face-snow-leopard);
  --mono-font: var(--face-mono-menlo);
  --desk-bg: #26364d;
  --desk-image: linear-gradient(170deg, #4a5f80 0%, #26364d 55%, #131c2b 100%);
  --desk-size: 100% 100%;
  --win-bg: #e8e8e8;
  --win-border: #6f6f6f;
  --win-radius: 6px;
  --win-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  --tbar-bg: linear-gradient(#f2f2f2, #c6c6c6);
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-ink: #3a3a3a;
  --tbar-border: #8e8e8e;
  --btn-bg: linear-gradient(#ffffff, #d6d6d6);
  --btn-border: #8e8e8e;
  --btn-radius: 12px;
  --btn-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  --menu-bg: rgba(246, 246, 246, 0.97);
  --menu-radius: 0 0 5px 5px;
  --menu-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  --bar-bg: linear-gradient(#f4f4f4, #cfcfcf);
  --bar-border: #909090;
}

/* ---------- Yosemite (10.10): flat, translucent, hairlines ---------- */
html[data-theme="yosemite"] {
  --ink: #2b2b2b;
  --site-font: var(--face-yosemite);
  --display-font: var(--face-yosemite);
  --mono-font: var(--face-mono-menlo);
  --desk-bg: #4568dc;
  --desk-image: linear-gradient(160deg, #b06ab3 0%, #7b5bb8 45%, #4568dc 100%);
  --desk-size: 100% 100%;
  --win-bg: #f6f6f6;
  --win-border: #c9c9c9;
  --win-radius: 8px;
  --win-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --tbar-bg: linear-gradient(#f6f6f6, #ececec);
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-ink: #4a4a4a;
  --tbar-border: #d6d6d6;
  --btn-bg: #ffffff;
  --btn-border: #c8c8c8;
  --btn-ink: #0a60ff;
  --btn-radius: 6px;
  --menu-bg: rgba(252, 252, 252, 0.92);
  --menu-radius: 0 0 6px 6px;
  --menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --bar-bg: rgba(250, 250, 250, 0.85);
  --bar-blur: blur(12px);
  --bar-border: #d9d9d9;
}

/* Big Sur: rounded opaque windows; temporary shared Yosemite artwork. */
html[data-theme="big-sur"] {
  --ink: #2b2b2b;
  --site-font: var(--face-liquid-glass);
  --display-font: var(--face-liquid-glass);
  --mono-font: var(--face-mono-menlo);
  --desk-bg: #4568dc;
  --desk-image: linear-gradient(145deg, #ec6278, #f8a27c 30%, #4b619a 60%, #153b70);
  --desk-size: 100% 100%;
  --win-bg: #f6f6f6;
  --win-border: #c9c9c9;
  --win-radius: 10px;
  --win-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --tbar-bg: #f0efee;
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-ink: #4a4a4a;
  --tbar-border: #d6d6d6;
  --btn-bg: #ffffff;
  --btn-border: #c8c8c8;
  --btn-ink: #0a60ff;
  --btn-radius: 6px;
  --menu-bg: rgba(252, 252, 252, 0.92);
  --menu-radius: 7px;
  --menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --bar-bg: rgba(250, 250, 250, 0.85);
  --bar-blur: blur(12px);
  --bar-border: #d9d9d9;
}

/* ---------- Liquid Glass: refraction, depth, pill geometry ---------- */
html[data-theme="liquid-glass"] {
  --ink: #1c1c1e;
  /* Whatever system face the visitor's own machine wears today, which is the
     true parallel of what Apple does here. */
  --site-font: var(--face-liquid-glass);
  --display-font: var(--face-liquid-glass-title);
  --mono-font: var(--face-mono-sf);
  --desk-bg: #aab6c8;
  --desk-image: linear-gradient(140deg, #f6d5c3 0%, #dcd0e8 35%, #c9d6f0 65%, #9fb3cd 100%);
  --desk-size: 100% 100%;
  --win-bg: rgba(255, 255, 255, 0.58);
  --win-border: rgba(255, 255, 255, 0.65);
  --win-radius: 18px;
  --win-shadow: 0 18px 48px rgba(40, 55, 80, 0.35);
  --win-blur: blur(22px) saturate(1.5);
  --tbar-bg: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15));
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-ink: #33383f;
  --tbar-border: rgba(255, 255, 255, 0.4);
  --btn-bg: rgba(255, 255, 255, 0.65);
  --btn-border: rgba(255, 255, 255, 0.8);
  --btn-radius: 999px;
  --btn-shadow: 0 2px 10px rgba(40, 55, 80, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --menu-bg: rgba(255, 255, 255, 0.75);
  --menu-radius: 0 0 14px 14px;
  --menu-blur: blur(30px) saturate(1.8);
  --menu-border: rgba(255, 255, 255, 0.55);
  --footer-ink: #1c2733;
  --footer-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  --menu-shadow: 0 8px 24px rgba(40, 55, 80, 0.3);
  --bar-bg: rgba(255, 255, 255, 0.55);
  --bar-blur: blur(18px) saturate(1.6);
  --bar-border: rgba(255, 255, 255, 0.5);
}

/* ---------- NeXTSTEP 3.3 (1995): the branch the Mac grew from ----------
   Released in 1.0.55 as a branch, not a stop: it has its own Special-menu
   group and list row, and the 1988-2026 dissolve never visits it. Evidence
   is the same as the app's 69-nextstep-appearance.css: NeXT's Release 3.3
   Visual Guide. Gray bevels everywhere, a black title bar on the key window
   with white centred Helvetica, square corners, no shadow falling on the
   desk, and a close box on the right of the bar. */
html[data-theme="nextstep"] {
  --ink: #000;
  --paper: #fff;
  --site-font: Helvetica, Arial, "Liberation Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display-font: var(--site-font);
  --mono-font: "Ohlfs", Courier, "Courier New", monospace;
  --desk-bg: #555555;
  --desk-image: none;
  --win-bg: #aaaaaa;
  --win-border: #000;
  --win-radius: 0;
  --win-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #555555;
  --tbar-bg: linear-gradient(#000, #000);
  --tbar-bg-size: 100% 100%;
  --tbar-bg-origin: border-box;
  --tbar-title-bg: transparent;
  --tbar-ink: #fff;
  --tbar-border: #000;
  --btn-bg: #aaaaaa;
  --btn-border: #000;
  --btn-radius: 0;
  --btn-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #555555;
  --menu-bg: #aaaaaa;
  --menu-radius: 0;
  --menu-shadow: inset 1px 1px 0 #ffffff, 2px 2px 0 rgba(0, 0, 0, 0.5);
  --bar-bg: #aaaaaa;
  --bar-border: #000;
  --sel-bg: #fff;
  --card-bg: #bbbbbb;
}
html[data-theme="nextstep"] .tbar { height: 23px; }
html[data-theme="nextstep"] .tbar h1,
html[data-theme="nextstep"] .tbar h2,
html[data-theme="nextstep"] .tbar h3 { font-size: 13px; font-weight: 700; }
/* The close box sits at the right end of a NeXT title bar, beveled, with an
   X. Miniaturize lives at the left; a page has nothing to miniaturize. */
html[data-theme="nextstep"] .close-box {
  left: auto;
  right: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  background: #aaaaaa;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #555;
}
html[data-theme="nextstep"] .close-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background:
    linear-gradient(45deg, transparent 44%, #000 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #000 44% 56%, transparent 56%);
}
/* Selected text and the pressed button invert to white on NeXT, not blue. */
html[data-theme="nextstep"] .btn:focus-visible { background: #fff; color: #000; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="nextstep"] .btn:hover { background: #fff; color: #000; }
}
html[data-theme="nextstep"] .btn-default::after { content: none; }
/* The default button carries the Return glyph after its label. */
html[data-theme="nextstep"] .btn-default::before { content: "\21B5"; order: 2; margin-left: 10px; }

/* Aqua-lineage eras close with traffic lights, not a close box. */
html[data-theme="aqua"] .close-box,
html[data-theme="snow-leopard"] .close-box,
html[data-theme="yosemite"] .close-box,
html[data-theme="big-sur"] .close-box,
html[data-theme="liquid-glass"] .close-box {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 19px 0 0 #febc2e, 38px 0 0 #28c840;
}
html[data-theme="aqua"] .tbar,
html[data-theme="snow-leopard"] .tbar,
html[data-theme="yosemite"] .tbar,
html[data-theme="big-sur"] .tbar,
html[data-theme="liquid-glass"] .tbar {
  height: 30px;
}
html[data-theme="aqua"] .tbar h1, html[data-theme="aqua"] .tbar h2,
html[data-theme="snow-leopard"] .tbar h1, html[data-theme="snow-leopard"] .tbar h2,
html[data-theme="yosemite"] .tbar h1, html[data-theme="yosemite"] .tbar h2,
html[data-theme="big-sur"] .tbar h1, html[data-theme="big-sur"] .tbar h2,
html[data-theme="liquid-glass"] .tbar h1, html[data-theme="liquid-glass"] .tbar h2,
html[data-theme="aqua"] .tbar h3, html[data-theme="snow-leopard"] .tbar h3,
html[data-theme="yosemite"] .tbar h3, html[data-theme="big-sur"] .tbar h3,
html[data-theme="liquid-glass"] .tbar h3 {
  font-size: 15px;
  font-weight: 600;
}
html[data-theme="platinum"] .tbar h1,
html[data-theme="platinum"] .tbar h2,
html[data-theme="platinum"] .tbar h3 {
  font-size: 15px;
}

/* Modern body text sizes down a step; Chicago needed the extra height. */
html[data-theme="yosemite"] body,
html[data-theme="big-sur"] body,
html[data-theme="liquid-glass"] body,
html[data-theme="aqua"] body,
html[data-theme="snow-leopard"] body {
  font-size: 16px;
}

/* The default button's heavy System 6 ring reads wrong off-era. */
html[data-theme] .btn-default::after { border-width: 2px; border-radius: calc(var(--btn-radius, 7px) + 4px); }
html[data-theme="yosemite"] .btn-default::after,
html[data-theme="liquid-glass"] .btn-default::after { content: none; }
html[data-theme="yosemite"] .btn-default { background: #0a60ff; color: #fff; border-color: #0a60ff; }
html[data-theme="liquid-glass"] .btn-default { background: rgba(20, 40, 80, 0.75); color: #fff; border-color: transparent; }

/* Appearance menu checkmark. */
.menu-check {
  display: inline-block;
  width: 1.1em;
  visibility: hidden;
}
.menu-list a.is-active .menu-check { visibility: visible; }