/* Retrofitting: one desktop, two eras. The era is a data attribute on <html>;
   everything below re-skins from variables, plus a few per-era rules. */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap;
  src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap;
  src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap;
  src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap;
  src: url("fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: swap;
  src: url("fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- Aqua (default) */
:root {
  --font-body: "Source Sans 3", "Lucida Grande", "Segoe UI", system-ui, sans-serif;
  --font-chrome: var(--font-body);
  --font-display: var(--font-body);

  --ink: #1b1b1d;
  --ink-soft: #4a4a52;
  --link: #0a4fb8;
  --disabled-ink: #5b5b63;

  --desk: repeating-linear-gradient(0deg, #ededed 0 2px, #e1e1e1 2px 4px);
  --menubar-h: 28px;
  --menubar-bg: linear-gradient(#fefefe, #e6e6e6);
  --menubar-line: #9c9c9c;
  --menubar-ink: #151517;

  --win-bg: repeating-linear-gradient(0deg, #f6f6f6 0 2px, #ececec 2px 4px);
  --win-border: #7e7e84;
  --win-radius: 9px;
  --win-shadow: 0 16px 34px -8px rgba(0, 0, 0, .42), 0 3px 7px rgba(0, 0, 0, .25);
  --tb-h: 28px;
  --tb-bg: linear-gradient(#f5f5f5 0%, #dcdcdc 48%, #cfcfcf 52%, #dedede 100%);
  --tb-line: #9a9aa0;
  --tb-ink: #26262a;

  --btn-bg: linear-gradient(#ffffff 0%, #e7ecf4 46%, #cfd8e6 54%, #eef2f8 100%);
  --btn-border: #6f7686;
  --btn-radius: 999px;
  --btn-ink: #17171a;
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .35);
  --btn-bg-primary: linear-gradient(#5b9bf0 0%, #2468d4 45%, #1a55b8 55%, #3a7fe0 100%);
  --btn-border-primary: #123f8f;
  --btn-ink-primary: #ffffff;
  --btn-shadow-primary: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 3px rgba(10, 40, 100, .45);

  --sel-bg: #b9d6ff;
  --sel-ink: #0b0b0d;
  --list-bg: #ffffff;
  --list-line: #d6d6dc;
  --list-sel-bg: linear-gradient(#6aa7f5, #2f78e0);
  --list-sel-ink: #ffffff;

  --wm-size: clamp(3.2rem, 7.4vw, 5.4rem);
  --wm-ink: #1f2430;
  --wm-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  --wm-track: -0.025em;

  --accent: #1f66cc;
  --glyph-a: #6aa7f5;
  --glyph-b: #1a55b8;
  --glyph-line: #12356f;
  --focus: 3px solid rgba(46, 124, 240, .65);
  --sb-thumb: #8fb3e6;
  --sb-track: #e4e4e8;

  --tag-ok: #1e7b34;
  --tag-wip: #8a5a00;
}

/* ------------------------------------------------------------ Classic (Mac OS 9 Platinum) */
[data-era="classic"] {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  --font-chrome: "Pixelify Sans", "Geneva", "Chicago", monospace;
  --font-display: "Pixelify Sans", "Geneva", monospace;

  --ink: #000000;
  --ink-soft: #2e2e2e;
  --link: #1a1a8c;
  --disabled-ink: #555555;

  --desk: conic-gradient(#a0a9c3 25%, #c1c8db 0 50%, #a0a9c3 0 75%, #c1c8db 0) 0 0 / 2px 2px;
  --menubar-h: 24px;
  --menubar-bg: #ffffff;
  --menubar-line: #000000;
  --menubar-ink: #000000;

  --win-bg: #dddddd;
  --win-border: #000000;
  --win-radius: 0;
  --win-shadow: 3px 4px 5px rgba(0, 0, 0, .4);
  --tb-h: 22px;
  --tb-bg: repeating-linear-gradient(0deg, #ffffff 0 1px, #9a9a9a 1px 2px);
  --tb-line: #000000;
  --tb-ink: #000000;

  --btn-bg: linear-gradient(#ffffff, #c9c9c9);
  --btn-border: #000000;
  --btn-radius: 7px;
  --btn-ink: #000000;
  --btn-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8a8a8a;
  --btn-bg-primary: linear-gradient(#ffffff, #c9c9c9);
  --btn-border-primary: #000000;
  --btn-ink-primary: #000000;
  --btn-shadow-primary: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8a8a8a;

  --sel-bg: #b4b4e6;
  --sel-ink: #000000;
  --list-bg: #ffffff;
  --list-line: #b5b5b5;
  --list-sel-bg: #9c9ccf;
  --list-sel-ink: #000000;

  --wm-size: clamp(2rem, 4.1vw, 3.3rem);
  --wm-ink: #000000;
  --wm-shadow: 1px 1px 0 rgba(255, 255, 255, .85);
  --wm-track: 0;

  --accent: #6a6ab8;
  --glyph-a: #ffffff;
  --glyph-b: #9c9ccf;
  --glyph-line: #000000;
  --focus: 2px solid #000000;
  --sb-thumb: #9c9ccf;
  --sb-track: #dddddd;

  --tag-ok: #0b5a1c;
  --tag-wip: #6b4400;
}

/* ------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menubar-h) + 12px); scrollbar-color: var(--sb-thumb) var(--sb-track); }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  caret-color: var(--accent);
  accent-color: var(--accent);
}
::selection { background: var(--sel-bg); color: var(--sel-ink); }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
img { display: block; max-width: 100%; }
code { font: 600 .92em/1 ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; background: rgba(255, 255, 255, .7); border: 1px solid var(--list-line); padding: .12em .4em; border-radius: 4px; }
[data-era="classic"] code { background: #fff; border-color: #000; border-radius: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: .5em 1em; background: #fff; color: #000; border: 1px solid #000; }
.skip:focus { top: 8px; }

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 3px solid var(--sb-track); border-radius: 999px; }
[data-era="classic"] ::-webkit-scrollbar-thumb { border: 1px solid #000; border-radius: 0; box-shadow: inset 1px 1px 0 #fff; }

/* ---------------------------------------------------------------------- menu bar */
.menubar {
  position: sticky; top: 0; z-index: 60;
  height: var(--menubar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .5rem;
  background: var(--menubar-bg);
  border-bottom: 1px solid var(--menubar-line);
  color: var(--menubar-ink);
  font: 600 .92rem/1 var(--font-chrome);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
[data-era="classic"] .menubar { font-weight: 700; font-size: .95rem; box-shadow: none; }
.menus { display: flex; align-items: stretch; height: 100%; min-width: 0; }
.menus a, .app-menu {
  display: flex; align-items: center; padding: 0 .7rem; color: inherit; text-decoration: none; white-space: nowrap;
}
.app-menu { font-weight: 700; }
.menus a:hover, .menus a:focus-visible { background: var(--list-sel-bg); color: var(--list-sel-ink); outline-offset: -2px; }
.menu-status { display: flex; gap: .9rem; align-items: center; font-weight: 400; padding-right: .5rem; }
.era-name { opacity: .75; }
.clock { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- windows */
.win {
  position: relative;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-radius: var(--win-radius);
  box-shadow: var(--win-shadow);
  overflow: hidden;
}
[data-era="classic"] .win { outline: 1px solid #fff; outline-offset: -2px; }
.titlebar {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: var(--tb-h);
  padding-inline: .8rem;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-line);
  color: var(--tb-ink);
  font: 600 .9rem/1 var(--font-chrome);
  user-select: none;
}
.title { font: inherit; margin: 0; position: relative; z-index: 1; }
[data-era="classic"] .title { background: #ddd; padding: 3px 12px 2px; font-weight: 700; letter-spacing: .02em; }
.ctl { position: absolute; display: block; }
/* Aqua traffic lights */
[data-era="aqua"] .ctl { top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .6); }
[data-era="aqua"] .ctl-close { left: 10px; background: radial-gradient(circle at 50% 28%, #ffc9c0 0, #f2604e 45%, #c4301f 100%); }
[data-era="aqua"] .ctl-min { left: 30px; background: radial-gradient(circle at 50% 28%, #fff1b3 0, #f5c43a 45%, #c58f0b 100%); }
[data-era="aqua"] .ctl-zoom { left: 50px; background: radial-gradient(circle at 50% 28%, #d4f7c0 0, #5fc23f 45%, #2f8f1c 100%); }
/* Platinum close and zoom boxes */
[data-era="classic"] .ctl { top: 50%; width: 13px; height: 13px; margin-top: -6.5px; background: #ddd; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888; z-index: 2; }
[data-era="classic"] .ctl-close { left: 7px; }
[data-era="classic"] .ctl-zoom { right: 7px; }
[data-era="classic"] .ctl-min { display: none; }
.win-body { padding: 1.4rem 1.5rem 1.5rem; }

/* ---------------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 42px; padding: .5em 1.5em;
  font: 600 1rem/1.1 var(--font-chrome);
  color: var(--btn-ink); text-decoration: none; text-align: center;
  background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow); cursor: pointer;
}
[data-era="aqua"] .btn { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.92); transform: translateY(1px); }
.btn-primary { background: var(--btn-bg-primary); border-color: var(--btn-border-primary); color: var(--btn-ink-primary); box-shadow: var(--btn-shadow-primary); }
[data-era="aqua"] .btn-primary { text-shadow: 0 -1px 0 rgba(0, 30, 90, .55); }
[data-era="classic"] .btn-primary { outline: 2px solid #000; outline-offset: 2px; border-radius: 7px; margin: 2px; }
[data-era="classic"] .btn:active { transform: none; background: #9a9a9a; box-shadow: inset 1px 1px 0 #555; }
.btn[disabled] { filter: none; cursor: not-allowed; color: var(--disabled-ink); background: var(--btn-bg); border-color: var(--btn-border); box-shadow: none; text-shadow: none; transform: none; opacity: .85; }
[data-era="classic"] .btn[disabled] { border-style: dotted; }

/* ----------------------------------------------------------------- the desktop (hero) */
.desktop { position: relative; padding: 1.5rem 1rem 2rem; display: grid; gap: 1.4rem; }
.win-about .win-body { padding-top: 1.7rem; }
.wordmark {
  font: 700 var(--wm-size)/.95 var(--font-display);
  letter-spacing: var(--wm-track);
  color: var(--wm-ink); text-shadow: var(--wm-shadow);
  margin-bottom: .55em;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.lede { font-size: 1.22rem; line-height: 1.45; max-width: 34ch; margin-bottom: 1.5rem; text-wrap: balance; }
.note { color: var(--ink-soft); font-size: .98rem; margin-top: .9rem; max-width: 46ch; }
.fine { color: var(--ink-soft); font-size: .95rem; margin-top: 1rem; max-width: 62ch; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* era switch */
.era-switch { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.era-switch legend { padding: 0; margin-bottom: .5rem; font: 600 .86rem/1 var(--font-chrome); color: var(--ink-soft); letter-spacing: .02em; }
.era-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.era-switch legend { grid-column: 1 / -1; }
.era-opt { position: relative; display: block; cursor: pointer; }
.era-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.era-face {
  display: grid; gap: .15rem; align-content: center; min-height: 64px; padding: .55rem .9rem;
  background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: calc(var(--btn-radius) > 20px ? 14px : var(--btn-radius));
  box-shadow: var(--btn-shadow); color: var(--btn-ink); text-align: center;
}
.era-title { font: 700 1.12rem/1.1 var(--font-chrome); }
.era-sub { font: 400 .84rem/1.2 var(--font-body); color: var(--ink-soft); }
.era-opt input:checked + .era-face { background: var(--btn-bg-primary); border-color: var(--btn-border-primary); color: var(--btn-ink-primary); box-shadow: var(--btn-shadow-primary); }
.era-opt input:checked + .era-face .era-sub { color: inherit; opacity: .92; }
[data-era="aqua"] .era-opt input:checked + .era-face .era-title { text-shadow: 0 -1px 0 rgba(0, 30, 90, .55); }
[data-era="classic"] .era-opt input:checked + .era-face { background: #9c9ccf; box-shadow: inset 1px 1px 0 #555, inset -1px -1px 0 #e8e8f8; }
.era-opt input:focus-visible + .era-face { outline: var(--focus); outline-offset: 2px; }
.era-opt:hover .era-face { filter: brightness(1.05); }

/* the drawn app window */
.win-app figcaption { text-align: right; text-wrap: balance; padding: .6rem 1rem .8rem 3.2rem; font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--list-line); }
.app-mock { display: grid; gap: .7rem; font: 400 .94rem/1.3 var(--font-chrome); padding: 1rem 1.1rem 1rem; }
[data-era="classic"] .app-mock { font-size: .9rem; }
.mock-row { display: flex; align-items: center; gap: .6rem; }
.mock-label { font-weight: 600; }
.mock-field { flex: 1; background: #fff; border: 1px solid var(--btn-border); border-radius: 3px; padding: .3rem .55rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.mock-head { font-weight: 600; }
.mock-list { background: var(--list-bg); border: 1px solid var(--btn-border); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.mock-cols, .mock-item { display: grid; grid-template-columns: 1.5fr .8fr 1fr; gap: .5rem; padding: .32rem .6rem; }
.mock-cols { font-weight: 600; background: linear-gradient(#fafafa, #dcdcdc); border-bottom: 1px solid var(--btn-border); }
[data-era="classic"] .mock-cols { background: #ddd; }
.mock-item { border-bottom: 1px solid var(--list-line); }
.mock-item:last-child { border-bottom: 0; }
.mock-item.is-selected { background: var(--list-sel-bg); color: var(--list-sel-ink); }
.mock-buttons { display: flex; gap: .6rem; }
.mock-btn { padding: .32rem 1.1rem; background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); font-weight: 600; }
.mock-btn.is-default { background: var(--btn-bg-primary); color: var(--btn-ink-primary); border-color: var(--btn-border-primary); }
[data-era="classic"] .mock-btn.is-default { color: #000; outline: 2px solid #000; outline-offset: 1px; margin: 2px; }
.mock-bar { height: 15px; border: 1px solid var(--btn-border); border-radius: 999px; background: #fff; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.mock-bar span { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #4a8df0 0 6px, #2f78e0 6px 12px); }
[data-era="classic"] .mock-bar { border-radius: 0; }
[data-era="classic"] .mock-bar span { background: repeating-linear-gradient(90deg, #6a6ab8 0 6px, #9c9ccf 6px 8px); }
.mock-status { color: var(--ink-soft); font-size: .9rem; }
.mock-save { display: flex; gap: .5rem; color: var(--ink-soft); font-size: .88rem; }

/* desktop icons */
.desk-icon { display: none; position: absolute; width: 112px; text-align: center; text-decoration: none; color: var(--ink); font: 600 .86rem/1.2 var(--font-chrome); gap: .35rem; justify-items: center; }
.desk-icon span { padding: .1rem .4rem; border-radius: 3px; background: rgba(255, 255, 255, .55); }
[data-era="classic"] .desk-icon span { background: #fff; border-radius: 0; border: 1px solid #000; }
.desk-icon:hover span { background: var(--list-sel-bg); color: var(--list-sel-ink); }
.desk-icon img.icon-os9, .side-item img.icon-os9, th img.icon-os9 { image-rendering: pixelated; }
.doc-body { fill: #fff; stroke: #5a5a62; stroke-width: 2; }
.doc-fold { fill: #d9d9de; stroke: #5a5a62; stroke-width: 2; }
.doc-lines { stroke: #8f8f98; stroke-width: 2.5; fill: none; }
[data-era="classic"] .doc-body, [data-era="classic"] .doc-fold { stroke: #000; }

/* era-specific images: show only the matching icon */
[data-era="aqua"] .icon-os9 { display: none; }
[data-era="classic"] .icon-aqua { display: none; }
[data-era="classic"] .desk-icon-app .icon-os9 { width: 64px; height: 64px; }

/* ----------------------------------------------------------------- sections / bands */
.band { padding: 1.4rem 1rem; }
.win-wide, .win-mid, .win-doc { width: 100%; margin-inline: auto; }

.finder { display: grid; }
.side { list-style: none; margin: 0; padding: .6rem; background: var(--list-bg); border-bottom: 1px solid var(--list-line); display: flex; gap: .4rem; flex-wrap: wrap; }
.side-item { display: flex; align-items: center; gap: .55rem; padding: .35rem .7rem; font: 600 .95rem/1.2 var(--font-chrome); border-radius: 4px; }
.side-item.is-active { background: var(--list-sel-bg); color: var(--list-sel-ink); }
.side-item.is-dim { color: var(--disabled-ink); font-weight: 400; }
.side-dot { width: 10px; height: 10px; border: 1px dashed currentColor; border-radius: 50%; }
.detail { padding: 1.3rem 1.2rem 1.4rem; }
.detail-head h3 { font: 700 1.7rem/1.1 var(--font-display); margin-bottom: .5rem; }
[data-era="classic"] .detail-head h3 { font-size: 1.5rem; }
.detail-head p { max-width: 60ch; margin-bottom: 1.2rem; }

.table-wrap { background: var(--list-bg); border: 1px solid var(--btn-border); }
.compare { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare thead th { text-align: left; vertical-align: bottom; padding: .9rem 1rem; background: linear-gradient(#fafafa, #e1e1e5); border-bottom: 1px solid var(--btn-border); }
[data-era="classic"] .compare thead th { background: #ddd; }
.compare thead th span { display: inline-grid; margin-left: .7rem; vertical-align: middle; font: 700 1.05rem/1.15 var(--font-chrome); }
.compare thead th img { display: inline-block; vertical-align: middle; }
.compare thead small { font: 400 .84rem/1.2 var(--font-body); color: var(--ink-soft); }
.compare tbody th, .compare tbody td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--list-line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody th { font: 600 .98rem/1.35 var(--font-chrome); width: 12rem; color: var(--ink-soft); }
.compare tbody td { min-width: 14rem; }
.compare tbody tr:nth-child(even) { background: rgba(0, 0, 0, .035); }
.tag { display: inline-block; margin: 0 .4rem .2rem 0; padding: .05rem .55rem; font: 700 .82rem/1.4 var(--font-chrome); border-radius: 999px; border: 1px solid currentColor; }
[data-era="classic"] .tag { border-radius: 0; }
.tag-ok { color: var(--tag-ok); }
.tag-wip { color: var(--tag-wip); }

/* tabs */
.tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.tab { font: 600 .98rem/1 var(--font-chrome); padding: .6rem 1.2rem; min-height: 40px; color: var(--btn-ink); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--btn-bg-primary); color: var(--btn-ink-primary); border-color: var(--btn-border-primary); box-shadow: var(--btn-shadow-primary); }
[data-era="aqua"] .tab[aria-selected="true"] { text-shadow: 0 -1px 0 rgba(0, 30, 90, .55); }
[data-era="classic"] .tab { border-radius: 6px 6px 0 0; margin-bottom: -1px; }
[data-era="classic"] .tab[aria-selected="true"] { background: #dddddd; color: #000; border-bottom-color: #dddddd; box-shadow: inset 1px 1px 0 #fff; font-weight: 700; }
[data-era="classic"] .tabs { margin-bottom: 0; }
[data-era="classic"] .panel { border: 1px solid #000; padding: 1.1rem; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888; }
.panel[hidden] { display: none; }
.panel h3 { font: 700 1.25rem/1.2 var(--font-display); margin: 1.5rem 0 .6rem; }
.get-main { display: grid; gap: .5rem; justify-items: start; }
.get-main .note { margin-top: .2rem; }
.steps { padding-left: 1.35rem; display: grid; gap: .7rem; max-width: 64ch; }
.steps li::marker { font-weight: 700; color: var(--accent); }
.cmd { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; flex-wrap: wrap; }
.cmd code { font-size: .98rem; padding: .5em .75em; }
.copy { font: 600 .86rem/1 var(--font-chrome); padding: .5rem .9rem; min-height: 36px; color: var(--btn-ink); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); cursor: pointer; }
[data-era="classic"] .copy { border-radius: 6px; }
.copy:hover { filter: brightness(1.06); }

/* read me */
.doc { max-width: 66ch; padding: 1.6rem 1.6rem 1.9rem; }
.doc p { margin-bottom: 1rem; }
.doc h3 { font: 700 1.25rem/1.2 var(--font-display); margin: 1.6rem 0 .6rem; }
.doc ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin-bottom: 1rem; }

/* dock / control strip */
.dock-wrap { padding: 2.2rem 1rem 2.4rem; text-align: center; }
.dock { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .7rem 1rem .8rem; }
[data-era="aqua"] .dock { border-radius: 18px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(205, 218, 238, .7)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
[data-era="classic"] .dock { background: #ddd; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888; gap: .3rem; }
.dock-item { display: grid; justify-items: center; gap: .3rem; width: 92px; padding: .5rem .3rem; color: var(--ink); text-decoration: none; font: 600 .84rem/1.15 var(--font-chrome); border-radius: 10px; }
.dock-item svg { width: 44px; height: 44px; overflow: visible; }
.dock-item:hover { background: rgba(255, 255, 255, .6); }
[data-era="classic"] .dock-item { border-radius: 0; }
[data-era="classic"] .dock-item:hover { background: #9c9ccf; }
.g-a { fill: var(--glyph-a); stroke: var(--glyph-line); stroke-width: 1.5; }
.g-b { fill: var(--glyph-b); stroke: var(--glyph-line); stroke-width: 1.5; }
.g-line { fill: none; stroke: var(--glyph-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.legal { max-width: 70ch; margin: 1.6rem auto 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }

/* ----------------------------------------------------------------- era change */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------ tablet and up: a real desktop */
@media (min-width: 640px) {
  .win-body { padding: 1.7rem 1.9rem 1.8rem; }
  .finder { grid-template-columns: 220px 1fr; }
  .side { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--list-line); padding: .8rem; min-height: 260px; }
  .detail { padding: 1.6rem 1.8rem 1.8rem; }
}
@media (min-width: 960px) {
  .desktop { display: block; height: clamp(720px, 88vh, 820px); padding: 0; }
  .desktop .win { position: absolute; }
  .win-about { left: 5%; top: 44px; width: min(540px, 44%); z-index: 2; }
  .win-app { left: 47.5%; top: 92px; width: min(660px, 49%); z-index: 1; }
  .desk-icon { display: grid; }
  .desk-icon-app { left: 3.2%; bottom: 26px; }
  .desk-icon-doc { left: calc(3.2% + 118px); bottom: 26px; }
  .desktop [data-draggable] .titlebar { cursor: grab; }
  .desktop [data-draggable].is-dragging .titlebar { cursor: grabbing; }
  .desktop [data-draggable].is-dragging { box-shadow: 0 26px 46px -10px rgba(0, 0, 0, .5), 0 4px 9px rgba(0, 0, 0, .28); }
  [data-era="classic"] .desktop [data-draggable].is-dragging { box-shadow: 6px 8px 8px rgba(0, 0, 0, .4); }
  .band { padding: 1.8rem 5%; }
  .win-wide { max-width: 1120px; }
  .win-mid { max-width: 820px; margin-left: 8%; margin-right: auto; }
  .win-doc { max-width: 700px; margin-left: auto; margin-right: 9%; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 639px) {
  .menu-status { display: none; }
  .menus a, .app-menu { padding: 0 .55rem; }
  .menu-ext { display: none !important; }
  .compare thead td { display: none; }
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; min-width: 0; }
  .compare thead tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .compare thead th { border-right: 1px solid var(--list-line); }
  .compare thead th span { display: grid; margin: .4rem 0 0; }
  .compare thead th img { display: none; }
  .compare thead th { align-self: end; }
  .compare tbody tr { padding: .7rem 1rem; border-bottom: 1px solid var(--list-line); }
  .compare tbody th, .compare tbody td { padding: .15rem 0; border: 0; width: auto; }
  .compare tbody td[data-label]::before { content: attr(data-label) ": "; font: 700 .86rem/1.2 var(--font-chrome); color: var(--ink-soft); display: block; margin-top: .3rem; }
  .actions .btn { flex: 1 1 100%; }
  .era-switch { grid-template-columns: 1fr; }
  .dock-item { width: 78px; }
}