/* Teo's Research Notebook. One column, system type, greys plus one accent.
   The accent is reserved for data and active state inside figures. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #111111;
  --fg-2: #545454;
  --fg-3: #8a8a8a;
  --line: #ececec;
  --line-2: #d4d4d4;
  --subtle: #f5f5f4;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);

  --hl-comment: #8a8a8a;
  --hl-keyword: #111111;
  --hl-string: #2e6b3c;
  --hl-number: #1d4fa8;
  --hl-type: #545454;

  /* Thumbnail palette */
  --th-blue: #2563eb;
  --th-blue-soft: rgba(37, 99, 235, 0.14);
  --th-emerald: #059669;
  --th-emerald-soft: rgba(5, 150, 105, 0.14);
  --th-red: #dc2626;
  --th-red-soft: rgba(220, 38, 38, 0.14);
  --th-amber: #d97706;
  --th-amber-soft: rgba(217, 119, 6, 0.15);
  --th-purple: #7c3aed;
  --th-purple-soft: rgba(124, 58, 237, 0.14);
  --th-cyan: #0891b2;
  --th-cyan-soft: rgba(8, 145, 178, 0.14);
  --th-coral: #ea580c;
  --th-board: #f7f1e6;
  --th-board-line: #d8c7af;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --col: 640px;
  --gutter: 24px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0f;
  --fg: #ececec;
  --fg-2: #a3a3a3;
  --fg-3: #6f6f72;
  --line: #222225;
  --line-2: #36363a;
  --subtle: #18181a;
  --accent: #6ea2ff;
  --accent-soft: rgba(110, 162, 255, 0.16);

  --hl-comment: #6f6f72;
  --hl-keyword: #ececec;
  --hl-string: #8fc79a;
  --hl-number: #8db4ff;
  --hl-type: #a3a3a3;

  /* Thumbnail palette */
  --th-blue: #60a5fa;
  --th-blue-soft: rgba(96, 165, 250, 0.22);
  --th-emerald: #34d399;
  --th-emerald-soft: rgba(52, 211, 153, 0.22);
  --th-red: #f87171;
  --th-red-soft: rgba(248, 113, 113, 0.22);
  --th-amber: #fbbf24;
  --th-amber-soft: rgba(251, 191, 36, 0.22);
  --th-purple: #c084fc;
  --th-purple-soft: rgba(192, 132, 252, 0.22);
  --th-cyan: #38bdf8;
  --th-cyan-soft: rgba(56, 189, 248, 0.22);
  --th-coral: #fb923c;
  --th-board: #252019;
  --th-board-line: #4a4032;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(16.5px, 15px + 0.25vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

.site-header, main, .site-footer {
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

::selection { background: var(--accent-soft); }

a { color: inherit; }

.link-icon {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  margin-inline-end: 0.35em;
  vertical-align: -0.13em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

img, svg { max-width: 100%; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -40px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 14px;
  z-index: 10;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- chrome */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
  font-size: 15px;
  line-height: 1.4;
}

.site-name {
  flex-shrink: 0;
  max-width: 100%;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav { display: flex; flex-shrink: 0; align-items: center; gap: 14px; margin-left: auto; }
.site-nav a { color: var(--fg-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--fg); }
.site-nav > .nav-github { display: inline-flex; align-items: center; }

.theme-toggle, .search-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}
.theme-toggle[hidden], .search-toggle[hidden] { display: none; }
.theme-toggle:hover, .search-toggle:hover { color: var(--fg); background: var(--subtle); }
.theme-toggle svg, .search-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-toggle path { fill: currentColor; stroke: none; }
.search-toggle { margin-right: 0; }
.search-toggle svg { stroke-linecap: round; }

main { padding-top: 32px; padding-bottom: 96px; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--fg-3);
}
.site-footer a { color: var(--fg-3); text-decoration: none; }
.site-footer a { white-space: nowrap; }
.site-footer a:hover, .site-footer a[aria-current] { color: var(--fg); }

/* ------------------------------------------------------------------ home */
.home > p { color: var(--fg-2); margin: 0 0 48px; max-width: 34em; }

.post-search { margin: 0 0 24px; }
.post-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--fg-3);
}
.post-search-field:focus-within { border-color: var(--fg-2); }
.post-search-field > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.post-search input {
  min-width: 0;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: 16px/1.5 var(--sans);
  appearance: none;
}
.post-search input::placeholder { color: var(--fg-3); opacity: 1; }
.post-search input:focus-visible { outline-offset: 4px; }
.post-search input::-webkit-search-cancel-button { appearance: none; }
.search-clear { flex: none; min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: none; color: var(--fg-2); font: 13px/1.5 var(--sans); cursor: pointer; }
.search-clear:hover { color: var(--fg); }
.search-shortcut { padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font: 12px/1.6 var(--mono); }
.home > .search-status { margin: -12px 0 20px; max-width: none; font-size: 13px; overflow-wrap: anywhere; }
.home > .search-status:empty { margin: 0; }
.home > .search-empty { margin: 0 0 24px; font-size: 15px; }

.post-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-index > li[hidden] { display: none; }
.post-index li {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
}
.post-index-body { min-width: 0; overflow-wrap: anywhere; }
.post-index mark { color: inherit; background: var(--line); border-radius: 2px; }
.post-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.post-index-link { text-decoration: none; color: inherit; }
.post-index-link::after { content: ""; position: absolute; inset: 0; }
.post-index-link:focus-visible { outline: none; }
.post-index-link:focus-visible .post-index-title { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.post-index-title {
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  text-wrap: balance;
}
.post-index li:hover:not(:has(.meta-links a:hover)) .post-index-title,
.post-index-link:focus-visible .post-index-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.post-index time { flex: none; font-size: 14px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.post-index-excerpt {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.post-index-meta { margin-top: 9px; font-size: 13.5px; line-height: 1.45; }
.post-index-meta .meta-links a { position: relative; z-index: 1; }
.post-index-figs { transition: color 0.15s; }
.home.figs-active .post-index-figs { color: var(--accent); font-weight: 500; }

/* Minimal schematic thumbnails on the index */
.post-thumb-wrap { margin-top: 3px; }
.post-thumb { display: block; width: 100%; height: auto; overflow: visible; }
.post-thumb .thumb-bg {
  fill: var(--subtle);
  stroke: var(--line-2);
  stroke-width: 1;
  transition: fill 0.2s, stroke 0.2s;
}
.post-thumb .thumb-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.post-thumb .thumb-wire {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.post-thumb .thumb-wire-dash {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 2 2.5;
  stroke-linecap: round;
}
.post-thumb .thumb-ink {
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.post-thumb .thumb-ink-box { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.15; }
.post-thumb .thumb-nodes { fill: var(--fg-3); opacity: 0.7; }
.post-thumb .thumb-bars { fill: var(--line-2); }
.post-thumb .thumb-piece { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.25; }
.post-thumb .thumb-piece-act { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.post-thumb .thumb-stone-b { fill: var(--fg-2); }
.post-thumb .thumb-stone-w { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1.2; }
.post-thumb .thumb-accent {
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.25s ease;
}
.post-thumb .thumb-scrub { transform: translateX(var(--scrub, 0px)); }
.post-thumb .thumb-frustum {
  transform-origin: 43px 39px;
  transform: rotate(var(--scrub-deg, 0deg));
  transition: transform 0.15s ease-out;
}
.post-thumb .thumb-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.2s ease;
}
.post-thumb .thumb-flow-thin {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
}
.post-thumb .thumb-soft { fill: var(--accent-soft); }
.post-thumb .thumb-halo {
  fill: var(--accent-soft);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 0.22s, transform 0.25s ease;
}
.post-thumb .thumb-node-act { fill: var(--accent); }
.post-thumb .thumb-node-ring { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.post-thumb .thumb-node-box { fill: var(--bg); stroke: var(--accent); stroke-width: 1.25; }
.post-thumb .thumb-puct { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.3; }

/* Thumbnail color utilities */
.post-thumb .c-blue { fill: var(--th-blue); color: var(--th-blue); }
.post-thumb .c-emerald { fill: var(--th-emerald); color: var(--th-emerald); }
.post-thumb .c-red { fill: var(--th-red); color: var(--th-red); }
.post-thumb .c-amber { fill: var(--th-amber); color: var(--th-amber); }
.post-thumb .c-purple { fill: var(--th-purple); color: var(--th-purple); }
.post-thumb .c-cyan { fill: var(--th-cyan); color: var(--th-cyan); }
.post-thumb .c-coral { fill: var(--th-coral); color: var(--th-coral); }

.post-thumb .s-blue { stroke: var(--th-blue); }
.post-thumb .s-emerald { stroke: var(--th-emerald); }
.post-thumb .s-red { stroke: var(--th-red); }
.post-thumb .s-amber { stroke: var(--th-amber); }
.post-thumb .s-purple { stroke: var(--th-purple); }
.post-thumb .s-cyan { stroke: var(--th-cyan); }
.post-thumb .s-coral { stroke: var(--th-coral); }

.post-thumb .soft-blue { fill: var(--th-blue-soft); }
.post-thumb .soft-emerald { fill: var(--th-emerald-soft); }
.post-thumb .soft-red { fill: var(--th-red-soft); }
.post-thumb .soft-amber { fill: var(--th-amber-soft); }
.post-thumb .soft-purple { fill: var(--th-purple-soft); }
.post-thumb .soft-cyan { fill: var(--th-cyan-soft); }

.post-thumb .board-bg { fill: var(--th-board) !important; stroke: var(--th-board-line) !important; }
.post-thumb .board-line { stroke: var(--th-board-line); }

.post-index li:hover .post-thumb .thumb-bg,
.post-index li:focus-within .post-thumb .thumb-bg,
.home.figs-active .post-thumb .thumb-bg {
  fill: var(--bg);
  stroke: var(--fg-3);
}
.post-index li:hover .post-thumb .thumb-accent,
.post-index li:focus-within .post-thumb .thumb-accent,
.home.figs-active .post-thumb .thumb-accent {
  opacity: 1;
}
.post-index li:hover .post-thumb .thumb-flow,
.post-index li:focus-within .post-thumb .thumb-flow,
.home.figs-active .post-thumb .thumb-flow {
  stroke-width: 1.55;
}
.post-index li:hover .post-thumb .thumb-halo,
.post-index li:focus-within .post-thumb .thumb-halo,
.home.figs-active .post-thumb .thumb-halo {
  opacity: 1;
  transform: scale(1);
}
@keyframes thumb-breathe {
  0%, 100% { transform: scale(0.85); opacity: 0.75; }
  50% { transform: scale(1.22); opacity: 1; }
}
.home.figs-active .post-thumb .thumb-halo {
  animation: thumb-breathe 2.2s ease-in-out infinite;
}

/* ----------------------------------------------------------------- posts */
.post-head { margin-bottom: 40px; }
.post-head h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.022em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.meta { margin: 0; font-size: 14px; color: var(--fg-3); }
.meta > * + *::before, .meta-links > a + a::before { content: "·"; margin: 0 8px; color: var(--fg-3); }
.meta a { color: var(--fg-2); text-decoration: none; }
.meta-links a { display: inline-block; white-space: nowrap; }
.meta a:hover { color: var(--fg); }

.post-content { counter-reset: figure; hanging-punctuation: first last; overflow-wrap: anywhere; }
.post-content p, .post-content li { text-wrap: pretty; }
::target-text { background: var(--accent-soft); }
.post-content > :first-child { margin-top: 0; }
.post-content p, .post-content ul, .post-content ol, .post-content blockquote, .post-content table { margin: 0 0 1.2em; }
.post-content h2, .post-content h3 { position: relative; text-wrap: balance; }
.post-content h2 { margin: 2.6em 0 0.6em; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
.post-content h3 { margin: 2em 0 0.4em; font-size: 17px; line-height: 1.4; font-weight: 600; }
.post-content ul, .post-content ol { padding-left: 1.2em; }
.post-content li { margin: 0.35em 0; padding-left: 0.2em; }
.post-content li::marker { color: var(--fg-3); }
.post-content strong { font-weight: 600; }
.post-content a {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s;
}
.post-content a:hover { text-decoration-color: currentColor; }
.post-content blockquote { padding-left: 1em; border-left: 2px solid var(--line-2); color: var(--fg-2); }
.post-content hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

.post-content table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.post-content th, .post-content td { padding: 8px 12px 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.post-content th { font-weight: 500; color: var(--fg-3); }

.heading-anchor {
  position: absolute;
  right: 100%;
  padding-right: 0.4em;
  color: var(--fg-3);
  font-weight: 400;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity 0.15s;
}
.post-content h2:hover .heading-anchor, .post-content h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
@media (hover: none) { .heading-anchor { display: none; } }

/* Prose that drives a figure: a dashed underline, as in Tangle. */
.post-content a.act, .home a.act {
  color: var(--accent);
  text-decoration: underline dashed;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  cursor: pointer;
}
.post-content a.act:hover, .home a.act:hover, .home a.act[aria-pressed="true"] {
  text-decoration-style: solid;
}

/* Instructions that match the reader's pointer. */
@media (hover: none) { .only-hover { display: none; } }
@media (hover: hover) { .only-touch { display: none; } }

.swatch {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin: 0 0.3em 0 0.1em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  vertical-align: 0.06em;
}

.footnotes { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--line); font-size: 15px; color: var(--fg-2); }
.footnotes ol { padding-left: 1.2em; }
sup a.footnote { text-decoration: none; font-size: 0.8em; padding: 0 0.1em; }

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.post-nav a { text-decoration: none; }
.post-nav a span { display: block; font-size: 13px; color: var(--fg-3); }
.post-nav a[rel="next"] { grid-column: 2; text-align: right; }
.post-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ----------------------------------------------------------------- code */
code, pre { font-family: var(--mono); }
:not(pre) > code {
  font-size: 0.86em;
  padding: 0.12em 0.32em;
  border-radius: 4px;
  background: var(--subtle);
  overflow-wrap: anywhere;
}
div.highlight { position: relative; margin: 0 0 1.4em; }
pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  background: var(--subtle);
  border-radius: 8px;
  tab-size: 2;
}
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .cp, .highlight .cd { color: var(--hl-comment); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kc, .highlight .kp { color: var(--hl-keyword); font-weight: 600; }
.highlight .kt, .highlight .nc { color: var(--hl-type); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .se, .highlight .sx, .highlight .sr, .highlight .dl { color: var(--hl-string); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .il { color: var(--hl-number); }

.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: var(--bg);
  color: var(--fg-3);
  font: 12px/1.5 var(--sans);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
div.highlight:hover .copy-code, .copy-code:focus-visible { opacity: 1; }
.copy-code:hover { color: var(--fg); }
@media (hover: none) { .copy-code { opacity: 1; } }

/* --------------------------------------------------------------- figures */
.post-content figure { margin: 2.6em 0; scroll-margin-top: 24px; }
/* Reserve room for figures that fill in after their data loads. */
.post-content figure.fig[data-src]:not(.ready) { min-height: var(--reserve, 0); }
.post-content figure > svg { display: block; width: 100%; height: auto; }
.post-content .fig-controls .group { flex-wrap: wrap; max-width: 100%; }
.post-content .fig-controls .tabs { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.post-content .fig-controls .slider { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.post-content .fig-controls .slider input { flex: 1 1 90px; min-width: 60px; max-width: 100%; }
.post-content .fig-controls .slider output { flex: none; }
.post-content figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.post-content figure.fig { counter-increment: figure; }
.post-content figure.fig > figcaption::before {
  content: "Figure " counter(figure) ". ";
  color: var(--fg);
  font-weight: 600;
}
@media (min-width: 900px) {
  .post-content figure.wide { margin-inline: -80px; }
}

/* Contents rail, only where there is room beside the widest figure. */
.toc { display: none; }
@media (min-width: 1320px) {
  .toc {
    display: block;
    position: fixed;
    top: 132px;
    left: calc(50% + var(--col) / 2 + 120px);
    width: 180px;
    font-size: 13px;
    line-height: 1.45;
  }
  .toc ol { list-style: none; margin: 0; padding: 0; }
  .toc li { margin: 0 0 9px; }
  .toc li.h3 { padding-left: 12px; }
  .toc a { color: var(--fg-3); text-decoration: none; transition: color 0.15s; }
  .toc a:hover, .toc a.active { color: var(--fg); }
}

/* ------------------------------------------------- controls (for figures) */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.tabs button {
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--fg-3);
  font: 14px/1.5 var(--sans);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tabs button:hover { color: var(--fg-2); }
.tabs button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--fg); }

.btn {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: 13.5px/1 var(--sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--subtle); }
.btn:active { background: var(--line); }
.btn.icon { width: 30px; padding: 0; }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fg-2); cursor: pointer; user-select: none; }
.check input { margin: 0; accent-color: var(--fg); }

/* Fingers need bigger targets than cursors. */
@media (pointer: coarse) {
  .btn { min-height: 40px; padding: 0 14px; }
  .btn.icon { width: 40px; }
  .tabs button { padding: 8px 0; }
  .check { min-height: 40px; }
  input[type="range"] { height: 40px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]:focus-visible { outline-offset: 3px; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); border-radius: 1px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-2); border-radius: 1px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--fg);
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--fg); }

/* ---------------------------------------------------------------- small */
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  body { font-size: 16.5px; }
  .site-header { padding-top: 20px; padding-bottom: 20px; }
  main { padding-top: 16px; }
  .post-head { margin-bottom: 32px; }
  .post-index li { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .post-index-head { flex-direction: column; gap: 2px; }
  .meta-links { display: block; margin-top: 2px; }
  .meta > .meta-links::before { content: none; }
}

@media (pointer: coarse) {
  .site-nav > a { display: grid; align-items: center; min-height: 44px; }
  .search-toggle, .theme-toggle { min-width: 44px; min-height: 44px; }
  .search-shortcut { display: none; }
}

@media (max-width: 380px) {
  .site-header { gap: 8px 12px; }
  .site-nav { gap: 6px; }
  .site-nav > .nav-github { justify-content: center; min-width: 30px; }
  .nav-github .link-label { display: none; }
  .nav-github .link-icon { margin-inline-end: 0; }
  .post-index li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 380px) and (pointer: coarse) {
  .site-nav > .nav-github { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .toc, .copy-code, .theme-toggle, .post-search, .search-status, .search-empty { display: none !important; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}