@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* The same tokens as the portfolio. Each project page then sets --accent and a data-look. */
:root {
  --teal: #008080;
  --paper: #f4f6f5;
  --ink: #0e1f1f;
  --grey: #c0c0c0;
  --red: #c8102e;
  --bg: #fbfcfb;
  --side: var(--paper);
  --text: var(--ink);
  --quiet: #4a5a5a;
  --rule: #d5dcda;
  --accent: var(--teal);
  --link-base: #000;
  --display: "Anybody", "Arial Black", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h-font: var(--display);
  --h-stretch: 125%;
  --radius: 6px;
  --code-bg: #eef2f1;
  --code-ink: var(--ink);
  --box-bg: var(--paper);
  --box-ink: var(--text);
  --box-border: 1px solid var(--rule);
  --box-shadow: none;
  color-scheme: light;
}
:root[data-mode="dark"] {
  --bg: #121a1a;
  --side: #0e1515;
  --text: #e3ebe9;
  --quiet: #a5b5b3;
  --rule: #2c3b3b;
  --code-bg: #1b2626;
  --code-ink: #e3ebe9;
  --box-bg: #1b2626;
  --link-base: #fff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #121a1a;
    --side: #0e1515;
    --text: #e3ebe9;
    --quiet: #a5b5b3;
    --rule: #2c3b3b;
    --code-bg: #1b2626;
    --code-ink: #e3ebe9;
    --box-bg: #1b2626;
    --link-base: #fff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link, var(--text)); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 30; padding: 10px 14px; background: var(--bg); color: var(--text); transform: translateY(-200%); }
.skip:focus { transform: none; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: var(--teal);
  color: #fff;
  border-bottom: 2px solid #005c5c;
}
.topbar a { color: #fff; }
.brand {
  font: 900 1.45rem/1 var(--display);
  font-stretch: 150%;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { font-stretch: 100%; font-weight: 500; }
.search-open {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: min(300px, 40vw);
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.search-open:hover { background: rgb(255 255 255 / 0.2); }
.search-open kbd { margin-left: auto; }
kbd {
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 0.8em var(--mono);
}
.top-links { display: flex; gap: 18px; font-size: 0.95rem; }
.top-links:first-child { margin-left: auto; }
.mode {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 6px;
  background: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ------------------------------------------------------------ layout */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 210px;
  max-width: 1440px;
  margin: 0 auto;
}
.sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 24px 16px 40px 24px;
  background: var(--side);
  border-right: 1px solid var(--rule);
  font-size: 0.95rem;
}
.sidebar summary { display: none; }
.sidebar h2 {
  margin: 22px 0 6px;
  color: var(--quiet);
  font: 700 0.8rem/1.3 var(--body);
  letter-spacing: 0.02em;
}
.sidebar h2:first-of-type { margin-top: 0; }
.sidebar ul { margin: 0; padding: 0; list-style: none; }
.sidebar a {
  display: block;
  padding: 5px 10px;
  border-left: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.sidebar a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.sidebar a[aria-current="page"] {
  border-left-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  font-weight: 700;
}

main { min-width: 0; padding: 36px clamp(16px, 4vw, 56px) 80px; }
main:focus { outline: none; }

.toc {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 36px 20px 40px 8px;
  font-size: 0.9rem;
}
.toc h2 { margin: 0 0 8px; font: 700 0.85rem/1.3 var(--body); color: var(--quiet); }
.toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 4px 12px; color: var(--quiet); text-decoration: none; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--text); }
.toc a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--teal); }

/* ------------------------------------------------------------ article */
.doc {
  --link: color-mix(in oklab, var(--accent) 58%, var(--link-base));
  --focus: var(--link);
  max-width: 76ch;
  margin: 0 auto;
}
.js .doc:not(.current) { display: none; }
/* a page link scrolls to the very top, so the phone menu stays in view */
.js .doc { scroll-margin-top: 100vh; }
.doc + .doc { margin-top: 96px; }
.js .doc + .doc { margin-top: 0; }
.doc h2 {
  margin: 2.4em 0 0.5em;
  font: 800 1.6rem/1.15 var(--h-font);
  font-stretch: var(--h-stretch);
  scroll-margin-top: 84px;
}
.doc h3 { margin: 1.8em 0 0.4em; font-size: 1.1rem; }
.doc p, .doc li { max-width: 68ch; }
.doc .lede { font-size: 1.2rem; line-height: 1.5; }
.doc table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 0.95rem; }
.doc th, .doc td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th { font-weight: 700; }
.table-wrap { overflow-x: auto; }
.doc figure { margin: 28px 0; }
.doc figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: min(var(--radius), 12px); }
.doc figcaption { margin-top: 8px; color: var(--quiet); font-size: 0.9rem; }
.doc code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--code-bg); color: var(--code-ink); font: 0.88em var(--mono); }
.doc pre {
  position: relative;
  margin: 1em 0;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--code-ink);
  border: var(--box-border);
  font: 0.88rem/1.55 var(--mono);
}
.doc pre code { padding: 0; background: none; font-size: 1em; }
.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 4px;
  background: var(--code-bg);
  color: inherit;
  font: 0.75rem var(--body);
  cursor: pointer;
}
.note {
  margin: 1.2em 0;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.facts li { padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.85rem; }

/* "How it works" as a chain of boxes. Each look restyles the boxes. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 28px;
  margin: 1.2em 0 1.6em;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.flow li {
  position: relative;
  flex: 1 1 150px;
  max-width: none;
  padding: 12px 16px;
  border: var(--box-border);
  border-radius: min(var(--radius), 20px);
  background: var(--box-bg);
  color: var(--box-ink);
  box-shadow: var(--box-shadow);
  font-size: 0.92rem;
  line-height: 1.4;
}
.flow li strong { display: block; margin-bottom: 2px; }
.flow li + li::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -24px;
  width: 20px;
  color: var(--quiet);
  text-align: center;
  transform: translateY(-50%);
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 76ch; margin: 64px auto 0; }
.pager a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
}
.pager a:hover { border-color: var(--quiet); }
.pager small { display: block; color: var(--quiet); }
.pager .next { grid-column: 2; text-align: right; }

/* ------------------------------------------------------------ banners */
/* Every page opens with a banner drawn in its project's own look. The colours in a
   banner are fixed, like the project's, and never depend on light or dark mode. */
.banner {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  padding: clamp(24px, 5vw, 44px);
  border-radius: 10px;
  background: var(--banner-bg, var(--banner, var(--teal)));
  color: #fff;
}
.banner h1 {
  position: relative;
  margin: 0;
  font: 900 clamp(2.1rem, 6vw, 3.6rem)/0.98 var(--h-font);
  font-stretch: var(--h-stretch);
}
.banner .tagline { position: relative; max-width: 34em; margin: 14px 0 0; font-size: 1.1rem; line-height: 1.45; }
.banner .facts { position: relative; }
.banner-art { position: absolute; pointer-events: none; }

/* Get started: the portfolio's teal hero */
[data-look="home"] .banner { background: var(--teal); }
[data-look="home"] .banner h1 { font-stretch: 150%; font-size: clamp(2.6rem, 8vw, 4.6rem); }

/* Turntables: a record turning under the title */
[data-look="vinyl"] { --h-stretch: 110%; --radius: 999px; --box-border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
[data-look="vinyl"] .doc pre, [data-look="vinyl"] pre { border-radius: 10px; }
[data-look="vinyl"] .banner { --banner: linear-gradient(115deg, #2a1d14, #4a2f1d 60%, #6b4528); padding-right: clamp(24px, 34vw, 300px); }
[data-look="vinyl"] .banner-art {
  right: -60px;
  top: 50%;
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, #111 0 3%, var(--accent) 3.5% 17%, #0c0c0c 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #151515 0 2px, #232323 2px 3px),
    #111;
  box-shadow: 0 0 0 10px rgb(0 0 0 / 0.25), inset 0 0 40px rgb(255 255 255 / 0.06);
}
[data-look="vinyl"] .banner-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / 0.14) 12%, transparent 16% 55%, rgb(255 255 255 / 0.1) 60%, transparent 64%);
}
@media (max-width: 640px) { [data-look="vinyl"] .banner { padding-right: clamp(24px, 5vw, 44px); } [data-look="vinyl"] .banner-art { opacity: 0.35; } }

/* 8-bit: a pixel border and hard shadows */
[data-look="pixel"] { --h-font: var(--mono); --h-stretch: 100%; --radius: 0; --box-border: 3px solid var(--text); --box-shadow: 5px 5px 0 var(--accent); }
[data-look="pixel"] .banner {
  --banner: #1b1b2f;
  border-radius: 0;
  box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 12px #1b1b2f, inset 0 0 0 16px #fff;
  padding: 48px clamp(28px, 5vw, 52px);
  padding-right: clamp(28px, 18vw, 160px);
}
[data-look="pixel"] .banner h1 { font-weight: 800; letter-spacing: -0.02em; text-shadow: 4px 4px 0 var(--accent); }
[data-look="pixel"] .banner-art {
  right: 28px;
  bottom: 28px;
  width: 96px;
  height: 96px;
  background: conic-gradient(var(--accent) 25%, #fff 0 50%, var(--accent) 0 75%, #fff 0) 0 0 / 24px 24px;
  opacity: 0.85;
}
@media (max-width: 640px) { [data-look="pixel"] .banner-art { display: none; } }

/* Windows 98: the page opens as a window on the desktop */
[data-look="win98"] { --h-font: Tahoma, Verdana, "Segoe UI", sans-serif; --h-stretch: 100%; --radius: 0; --box-bg: #c0c0c0; --box-ink: #000; --box-border: 2px solid; --box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf; }
[data-look="win98"] .flow li { border-color: #fff #808080 #808080 #fff; }
[data-look="win98"] .banner { --banner: var(--teal); border-radius: 0; padding: clamp(18px, 4vw, 40px); }
[data-look="win98"] .window {
  position: relative;
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
}
[data-look="win98"] .titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 3px;
  padding: 3px 4px 3px 8px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font: 700 0.85rem/1.3 Tahoma, Verdana, sans-serif;
}
[data-look="win98"] .titlebar i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  margin-left: 2px;
  background: #c0c0c0;
  color: #000;
  font: 700 10px/1 Tahoma, sans-serif;
  font-style: normal;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080;
}
[data-look="win98"] .window-body { padding: clamp(14px, 3vw, 26px); }
[data-look="win98"] .banner .tagline { color: #000; }

/* Terminals: a shell window with a prompt */
[data-look="terminal"] { --h-font: var(--mono); --h-stretch: 100%; --code-bg: #0f1412; --code-ink: #d6e4dc; --box-bg: #0f1412; --box-ink: #d6e4dc; --box-border: 1px solid #2c3a33; }
[data-look="terminal"] .doc h2::before { content: "# "; color: var(--link); }
[data-look="terminal"] .copy { border-color: #4b5b53; }
[data-look="terminal"] .banner { --banner: #0f1412; border: 1px solid #2c3a33; padding-top: 52px; font-family: var(--mono); }
[data-look="terminal"] .banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: radial-gradient(circle at 18px 16px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 38px 16px, #febc2e 5px, transparent 6px), radial-gradient(circle at 58px 16px, #28c840 5px, transparent 6px), #1d2522;
}
[data-look="terminal"] .prompt { position: relative; margin: 0 0 10px; color: var(--accent); }
[data-look="terminal"] .banner h1 { font-weight: 800; font-size: clamp(1.9rem, 5vw, 3rem); }
[data-look="terminal"] .banner h1::after { content: "▌"; margin-left: 0.1em; color: var(--accent); }
[data-look="terminal"] .banner .tagline { color: #b9c8c0; }

/* Liquid glass: a frosted pane over a colourful field */
[data-look="glass"] { --radius: 14px; --box-bg: color-mix(in srgb, var(--accent) 10%, var(--bg)); --box-border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); --box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 6px 18px rgb(0 0 0 / 0.08); }
[data-look="glass"] .banner { --banner: radial-gradient(circle at 15% 20%, var(--glow-1, #6ee7f9), transparent 45%), radial-gradient(circle at 85% 30%, var(--glow-2, #f472b6), transparent 45%), radial-gradient(circle at 50% 100%, var(--accent), transparent 60%), #1e293b; border-radius: 22px; }
[data-look="glass"] .pane {
  position: relative;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 18px;
  background: rgb(15 23 42 / 0.52);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.6), inset -1px -1px 0 rgb(255 255 255 / 0.2), 0 18px 40px rgb(0 0 0 / 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

/* Spot: his lawn (or floor), with his red collar along the bottom */
[data-look="spot"] { --h-stretch: 120%; --radius: 10px; --box-border: 1px solid var(--rule); --box-shadow: inset 0 -4px 0 var(--red); }
[data-look="spot"] .banner { --banner: linear-gradient(#9ed0f0 0 38%, #69a84f 38% 100%); padding-bottom: 64px; color: #12201a; }
[data-look="spot"] .banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 14px;
  background: radial-gradient(circle at 78% 50%, #e6c229 9px, transparent 10px), #d7263d;
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
}
[data-look="spot"] .card { position: relative; display: inline-block; max-width: 40em; padding: 18px 22px; border-radius: 12px; background: rgb(255 255 255 / 0.92); }
[data-look="spot"] .banner h1 { color: #1c1b20; }

/* iPod: the screen of an iPod Classic, with the click wheel beside it */
[data-look="ipod"] { --h-font: "Helvetica Neue", Helvetica, Arial, sans-serif; --h-stretch: 100%; --radius: 10px; }
[data-look="ipod"] .banner { --banner: linear-gradient(160deg, #f3f3f3, #c9cbcf); color: #111; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
[data-look="ipod"] .screen { border: 3px solid #2b2b2b; border-radius: 8px; background: linear-gradient(#fdfdfd, #dfe7ef); overflow: hidden; }
[data-look="ipod"] .screen-top { padding: 3px 10px; background: linear-gradient(#f4f6f8, #b9c3cd); border-bottom: 1px solid #8b96a1; font: 700 0.8rem/1.4 "Helvetica Neue", Arial, sans-serif; text-align: center; }
[data-look="ipod"] .screen-body { padding: 16px 18px 20px; }
[data-look="ipod"] .wheel { width: 132px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #e8e8e8 0 26%, #9a9a9a 27%, #fafafa 28% 100%); box-shadow: inset 0 0 0 1px #aaa, 0 4px 10px rgb(0 0 0 / 0.15); }
@media (max-width: 640px) { [data-look="ipod"] .banner { grid-template-columns: 1fr; } [data-look="ipod"] .wheel { display: none; } }

/* audiocheck: a spectrogram with the cutoff line */
[data-look="spectrum"] { --h-stretch: 100%; --box-border: 1px solid var(--rule); --box-shadow: inset 4px 0 0 var(--accent); }
[data-look="spectrum"] .banner {
  /* the spectrum is drawn in pixels from the bottom, so wrapped text never reaches it */
  --banner: linear-gradient(to top, rgb(14 14 30 / 0) 0 96px, #0e0e1e 124px), repeating-linear-gradient(90deg, rgb(0 0 0 / 0.25) 0 2px, transparent 2px 7px), linear-gradient(to top, #fde047, #f97316 28px, #be123c 56px, #3b0764 84px, #0e0e1e 124px);
  padding-bottom: 136px;
}
[data-look="spectrum"] .banner-art { left: 0; right: 0; bottom: 60px; border-top: 2px dashed #e0f2fe; }
[data-look="spectrum"] .banner-art::after { content: "16.6 kHz"; position: absolute; right: 12px; top: -26px; color: #e0f2fe; font: 0.8rem var(--mono); }

/* Paper: a quiet serif page */
[data-look="paper"] { --h-font: Charter, "Iowan Old Style", Georgia, serif; --h-stretch: 100%; --radius: 999px; --box-border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
[data-look="paper"] .doc pre { border-radius: 12px; }
[data-look="paper"] .banner { --banner: #f5f4ed; color: var(--accent); border: 1px solid #e3e1d6; }
[data-look="paper"] .banner h1 { font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.4rem); }
[data-look="paper"] .banner .tagline { color: #3a3a33; }

/* A blank note with its caret */
[data-look="note"] { --h-font: var(--body); --h-stretch: 100%; --radius: 4px; }
[data-look="note"] .banner { --banner: #fff; color: #1b1b1b; border: 1px solid #e2e2e2; }
[data-look="note"] .banner h1 { font-weight: 700; }
[data-look="note"] .banner h1::after { content: ""; display: inline-block; width: 3px; height: 0.9em; margin-left: 0.08em; background: var(--accent); vertical-align: -0.08em; }
[data-look="note"] .banner .tagline { color: #444; }

/* An intertitle card from a 1930s cartoon */
[data-look="reel"] { --h-font: Georgia, "Times New Roman", serif; --h-stretch: 100%; --radius: 0; --box-border: 3px double var(--text); }
[data-look="reel"] .banner { --banner: #14110c; color: #f1e6c8; text-align: center; border-radius: 0; box-shadow: inset 0 0 0 10px #14110c, inset 0 0 0 13px #f1e6c8, inset 0 0 0 17px #14110c, inset 0 0 0 18px #f1e6c8, inset 0 0 90px rgb(0 0 0 / 0.8); padding: 56px 40px; }
[data-look="reel"] .banner .tagline { margin-inline: auto; font-style: italic; }
[data-look="reel"] .banner .facts { justify-content: center; }

/* Finder-style windows: a light window with a sidebar */
[data-look="finder"] { --h-font: -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --h-stretch: 100%; --radius: 8px; --box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
[data-look="finder"] .banner { --banner: linear-gradient(135deg, var(--glow-1, #c7d2fe), var(--glow-2, #fbcfe8)); padding: clamp(18px, 4vw, 36px); }
[data-look="finder"] .mac-window { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; border-radius: 12px; background: #fff; color: #1d1d1f; box-shadow: 0 20px 50px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(0 0 0 / 0.08); }
[data-look="finder"] .mac-side { padding: 36px 14px 18px; background: rgb(240 242 248 / 0.85); color: #6e6e73; font-size: 0.82rem; line-height: 2; }
[data-look="finder"] .mac-side::before { content: ""; position: absolute; top: 14px; left: 14px; width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 26px 6px, #febc2e 5px, transparent 6px), radial-gradient(circle at 46px 6px, #28c840 5px, transparent 6px); }
[data-look="finder"] .mac-main { padding: clamp(20px, 4vw, 34px); }
[data-look="finder"] .banner h1 { font-weight: 700; letter-spacing: -0.02em; }
[data-look="finder"] .banner .tagline { color: #3a3a3c; }
@media (max-width: 640px) { [data-look="finder"] .mac-window { grid-template-columns: 1fr; } [data-look="finder"] .mac-side { display: none; } }

/* ------------------------------------------------------------ search */
.search {
  width: min(640px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  margin-top: 10vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.3);
}
.search::backdrop { background: rgb(14 31 31 / 0.45); }
.search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.search input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; font: inherit; font-size: 1.1rem; }
.search input:focus-visible { outline: none; }
.search ul { margin: 0; padding: 8px; list-style: none; overflow-y: auto; max-height: calc(min(70vh, 560px) - 120px); }
.search li a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); text-decoration: none; }
.search li a small { display: block; color: var(--quiet); }
.search li a:hover, .search li a:focus-visible, .search li a.active { background: color-mix(in srgb, var(--teal) 14%, transparent); outline: none; }
.search p { margin: 0; padding: 10px 18px 14px; color: var(--quiet); font-size: 0.85rem; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .topbar { gap: 10px; }
  .top-links { display: none; }
  .search-open { min-width: 0; }
  .search-open span, .search-open kbd { display: none; }
  .search-open::before { content: "Search"; }
  .layout { display: block; }
  .sidebar { position: static; height: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .sidebar summary { display: block; padding: 12px 16px; font-weight: 700; cursor: pointer; }
  .sidebar details > div { padding: 0 16px 20px; }
  main { padding-top: 24px; }
  .flow { flex-direction: column; gap: 22px; }
  .flow li + li::before { content: "↓"; top: -22px; left: 50%; transform: translateX(-50%); }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  [data-look="glass"] .pane { background: rgb(30 41 59 / 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .banner { border: 1px solid CanvasText; }
}