/* ==========================================================================
   Theme
   ========================================================================== */

:root {
  --bg: #ffffff;
  --text: #111111;
  --text-light: #6b6b6b;
  --theme: #1a5fb4;
  --on-theme: #ffffff;
  --preprint: #b31b1b;
  --divider: rgba(0, 0, 0, 0.1);
  --card-bg: #ffffff;
  --code-bg: rgba(26, 95, 180, 0.05);
  --figure-bg: #ffffff;
  --signal: rgba(0, 0, 0, 0.22);
  --shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08);

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max-width: 930px;
  --nav-height: 57px;
  --aside: 9.5rem;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1c1c1d;
  --text: #e8e8e8;
  --text-light: #a0a0a0;
  --theme: #6cb4ee;
  --on-theme: #10202f;
  --preprint: #ec8b8b;
  --divider: #424246;
  --card-bg: #232427;
  --code-bg: rgba(108, 180, 238, 0.08);
  --signal: rgba(255, 255, 255, 0.22);
  --shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* No-JS fallback: follow the OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1c1c1d;
    --text: #e8e8e8;
    --text-light: #a0a0a0;
    --theme: #6cb4ee;
    --on-theme: #10202f;
    --preprint: #ec8b8b;
    --divider: #424246;
    --card-bg: #232427;
    --code-bg: rgba(108, 180, 238, 0.08);
    --signal: rgba(255, 255, 255, 0.22);
    color-scheme: dark;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

/* Column layout keeps the footer at the bottom of short pages. Positioned so the spitz layer
   can cover exactly the page. */
body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--nav-height);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
h4 {
  font-weight: 300;
  line-height: 1.2;
}

strong,
b {
  font-weight: 500;
}

a {
  color: var(--theme);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

p {
  margin: 0 0 1rem;
}

/* Raised without adding height to its line (keeps author lines with a * evenly spaced). */
sup {
  position: relative;
  top: -0.5em;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

img {
  max-width: 100%;
}

::selection {
  background: var(--theme);
  color: var(--on-theme);
}

:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 15px;
}

main.container {
  flex: 1 0 auto;
  padding-top: 3rem;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--theme);
  color: var(--on-theme);
  border-radius: 0.25rem;
}

.skip-link:focus {
  top: 0.5rem;
}

.rounded {
  border-radius: 0.25rem;
}

.z-depth-1 {
  box-shadow: var(--shadow);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: color-mix(in srgb, var(--bg) 95%, transparent);
  border-bottom: 1px solid var(--divider);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
}

/* The Japanese Spitz (spitz.js moves her). Her layer covers the whole page, so she scrolls with
   it, and clips her so she never stretches the page. Above the content, below the navbar and
   link cards, and never in the way of a click. */
.spitz-layer {
  position: absolute;
  inset: 0;
  z-index: 1020;
  overflow: hidden;
  pointer-events: none;
}

.spitz {
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: pixelated;
}

.navbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: calc(var(--nav-height) - 1px);
}

.navbar-brand {
  margin-right: auto;
  padding: 0.3125rem 0;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text);
  white-space: nowrap;
}

.navbar-brand:hover {
  color: var(--theme);
  text-decoration: none;
}

.first-name {
  font-weight: 700;
}

.navbar-menu {
  margin-left: auto;
}

.navbar-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem;
  color: var(--text);
}

.nav-link:hover {
  color: var(--theme);
  text-decoration: none;
}

.nav-item.active > .nav-link {
  color: var(--theme);
  font-weight: 500;
}

.theme-toggle {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin-left: 0.25rem;
  font-size: 1rem;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--theme);
}

.theme-toggle .icon {
  display: none;
}

/* Show the theme you'd switch to: a moon in light mode, a sun in dark mode. */
:root:not([data-theme="dark"]) .theme-toggle .icon-to-dark,
:root[data-theme="dark"] .theme-toggle .icon-to-light {
  display: block;
}

/* ==========================================================================
   Page headers
   ========================================================================== */

.post-header {
  margin-bottom: 1.5rem;
}

.post-title {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  font-weight: 300;
}

.desc {
  margin-bottom: 1.5rem;
}

/* A byline too long for its line breaks between its parts, not inside one. */
.desc-item {
  white-space: nowrap;
}

.post-description {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.section-heading {
  margin: 2.5rem 0 1rem;
  font-size: 2rem;
}

.section-heading a {
  color: inherit;
}

.section-heading a:hover {
  color: var(--theme);
  text-decoration: none;
}

.section-note {
  margin: -0.25rem 0 1.25rem;
  font-size: 0.875rem;
}

/* The faint signal under each section heading; it draws in left to right when scrolled into view. */
.signal {
  display: block;
  width: 100%;
  height: 14px;
  margin: -0.4rem 0 1.1rem;
  overflow: visible;
}

.signal path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1;
  stroke-linejoin: round;
}

.js .signal {
  clip-path: inset(0 100% 0 0);
}

.js .signal.drawn {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.8s cubic-bezier(0.3, 0, 0.2, 1);
}

/* ==========================================================================
   About
   ========================================================================== */

/* The photo beside the name, byline and bio: its top meets the name's cap height and its bottom
   the links' baseline (the margins trim the space Roboto leaves above and below the text). It
   fills that height, square at full width, and cropped at the sides where the text runs taller. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35%;
  column-gap: 1.5rem;
}

/* The byline's margin is the gap to the bio: it can't pass out of a grid item to meet this one. */
.about .post-header {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.profile {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  margin: 0.5625rem 0 0.35rem;
}

.profile img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.bio {
  grid-column: 1;
  grid-row: 2;
}

.contact p {
  margin-bottom: 0.4rem;
}

.profile-links {
  font-size: 0.875rem;
}

.profile-links .sep {
  margin: 0 0.35rem;
  color: var(--text-light);
}

.news table {
  width: 100%;
  border-collapse: collapse;
}

.news th,
.news td {
  padding: 0.4rem 0;
  vertical-align: top;
  text-align: left;
}

/* The date column matches the publication thumbnails' column, and the bullets hang in the gap,
   so news text starts at the same left edge as the publication text. */
.news ul {
  margin: 0;
  padding-left: 0;
}

.news li + li {
  margin-top: 0.3rem;
}

.news th {
  width: calc(var(--aside) + 1.25rem);
  padding-right: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Name, then photo, then bio: any narrower and beside the text the photo becomes a thin strip. */
@media (max-width: 767.98px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile {
    grid-column: 1;
    grid-row: 2;
    position: static;
    width: 65%;
    max-width: 260px;
    margin: 0 auto 1.5rem;
  }

  .profile img {
    position: static;
    height: auto;
  }

  .bio {
    grid-row: 3;
  }
}

@media (max-width: 575.98px) {
  .post-title {
    font-size: 2.1rem;
  }

  /* Each month above its items, so the items get the full width. */
  .news table,
  .news tbody,
  .news tr,
  .news th,
  .news td {
    display: block;
  }

  .news th {
    width: fit-content;
    padding: 0.5rem 0 0.2rem;
  }

  .news td {
    padding-top: 0;
  }

  .news ul {
    padding-left: 1.1rem;
  }

  .desc .sep {
    display: none;
  }

  .desc-item {
    display: block;
  }
}

/* ==========================================================================
   Privacy and legal pages (linked from the footer)
   ========================================================================== */

.legal {
  max-width: 44rem;
}

.legal h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
}

.legal ul {
  margin: 0;
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Publications
   ========================================================================== */

.publications {
  margin-top: 1rem;
}

ol.bibliography {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub {
  display: grid;
  grid-template-columns: var(--aside) minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Arriving from a link to one entry (/#han2026elf), it's marked for a moment. */
.pub:target {
  --mark: color-mix(in srgb, var(--theme) 10%, transparent);
  border-radius: 0.25rem;
  animation: pub-target 2.8s ease-out;
}

@keyframes pub-target {
  0%,
  40% {
    background-color: var(--mark);
    box-shadow: 0 0 0 0.75rem var(--mark);
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0.75rem transparent;
  }
}

.badge {
  display: inline-block;
  padding: 0.3em 0.5em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--on-theme);
  background-color: var(--theme);
  border-radius: 0.25rem;
}

abbr.badge {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: default;
}

.badge-preprint {
  background-color: var(--preprint);
}

:root[data-theme="dark"] .badge-preprint {
  color: #2b0d0d;
}

.preview-button {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  cursor: zoom-in;
}

/* Every thumbnail gets the same 4:3 box; figures are fitted inside it on the figure background. */
.pub .preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--figure-bg);
  border-radius: 0.25rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.preview-button:hover .preview {
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}

.pub .title {
  font-weight: 500;
  line-height: 1.35;
}

.pub .author {
  margin: 0.2rem 0 0.1rem;
}

.author em.self {
  font-style: normal;
  font-weight: 400;
  border-bottom: 1px solid;
}

.author .equal {
  margin-left: 0.05em;
}

.author-more {
  padding: 0;
  font: inherit;
  color: var(--theme);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--theme);
  cursor: pointer;
}

.author-more:hover {
  border-bottom-style: solid;
}

.pub .links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.btn {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 0.125rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn[aria-expanded="true"] {
  color: var(--theme);
  border-color: var(--theme);
  text-decoration: none;
}

.pub .hidden {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  font-size: 0.875rem;
  transition: max-height 0.2s ease, visibility 0s linear 0.2s;
}

.pub .hidden.open {
  max-height: 80em;
  visibility: visible;
  transition: max-height 0.25s ease, visibility 0s;
}

.pub .abstract p,
.pub .abstract ul {
  margin: 0.6rem 0 0.25rem;
  padding: 0.6rem 0.85rem;
  line-height: 1.5;
  border: 1px dashed var(--text);
}

.pub .abstract ul {
  padding-left: 2rem;
}

.pub .abstract li + li {
  margin-top: 0.3rem;
}

.pub .summary {
  margin: 0.2rem 0 0.1rem;
}

.pub .bibtex {
  position: relative;
}

.pub .bibtex pre {
  margin: 0.6rem 0 0.25rem;
  padding: 0.75rem 4.5rem 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--code-bg);
  border-radius: 0.25rem;
}

/* A long field wraps under the start of its value; --hang is set per line (eleventy.config.js). */
.bib-line {
  display: block;
  padding-left: var(--hang, 0ch);
  text-indent: calc(-1 * var(--hang, 0ch));
}

.copy-btn {
  position: absolute;
  top: 1.1rem;
  right: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--text-light);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 0.25rem;
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--theme);
  border-color: var(--theme);
}

@media (max-width: 575.98px) {
  .pub {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  abbr.badge {
    display: inline-block;
    width: auto;
    min-width: 4.5rem;
  }

  .preview-button {
    display: none;
  }
}

/* ==========================================================================
   Figure lightbox (figures.js)
   ========================================================================== */

.lightbox {
  width: fit-content;
  max-width: min(94vw, 1100px);
  max-height: 94vh;
  padding: 0;
  color: var(--text);
  background-color: var(--card-bg);
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.lightbox[open] {
  animation: lightbox-in 0.2s ease-out;
}

/* No blur behind: with a moving figure open, the browser would redo it on every frame. */
.lightbox::backdrop {
  background: rgba(12, 14, 18, 0.62);
  animation: fade-in 0.2s ease-out;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.lightbox figure {
  margin: 0;
  padding: 1.25rem 1.25rem 1rem;
}

.lightbox-media {
  position: relative;
}

.lightbox-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  background-color: var(--figure-bg);
  border-radius: 0.25rem;
}

.lightbox-media img.vector {
  width: min(68vh, 84vw, 560px);
}

.lightbox-note {
  width: min(560px, 84vw);
  margin: 0;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-light);
}

/* Zero width + min-width keeps the caption from widening the dialog past the figure. */
.lightbox figcaption {
  width: 0;
  min-width: 100%;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.lightbox-caption strong {
  font-weight: 500;
}

.lightbox-title {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-light);
}

.lightbox-caption:empty + .lightbox-title {
  margin-top: 0;
}

.lightbox-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-light);
  background: var(--card-bg);
  border: 1px solid var(--divider);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-close:hover {
  color: var(--text);
}

/* "Show the paper's figure" / "Show the moving figure" */
.lightbox-swap {
  display: block;
  margin-top: 0.5rem;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--theme);
  background: none;
  border: 0;
  cursor: pointer;
}

.lightbox-swap:hover {
  text-decoration: underline;
}

.lightbox-swap[hidden] {
  display: none;
}

/* ==========================================================================
   Moving figures (flows.js): each paper's diagram, redrawn in the site's colors
   ========================================================================== */

.flow {
  --f-ink: var(--text);
  --f-muted: var(--text-light);
  --f-line: color-mix(in srgb, var(--text) 40%, transparent);
  --f-edge: color-mix(in srgb, var(--text) 17%, transparent);
  --f-surface: color-mix(in srgb, var(--text) 3%, var(--card-bg));
  --f-accent: var(--theme);
  --f-blue: #2f74c9;
  --f-green: #4a9a2c;
  --f-coral: #d8613a;
  --f-red: #d64545;
  --f-violet: #8559cf;
  --f-amber: #d1950f;
  --f-cyan: #2595bd;
  display: block;
  font-family: var(--font);
  background-color: var(--card-bg);
}

:root[data-theme="dark"] .flow {
  --f-blue: #7aaff0;
  --f-green: #8cc96a;
  --f-coral: #f0956f;
  --f-red: #f07c7c;
  --f-violet: #b79cf2;
  --f-amber: #f0c45a;
  --f-cyan: #74c7e6;
}

.flow text {
  font-size: 13px;
  fill: var(--f-ink);
}

.flow .t-title {
  font-weight: 500;
}

.flow .t-sub {
  font-size: 11px;
  fill: var(--f-muted);
}

.flow .t-section {
  font-size: 12px;
  font-weight: 500;
  fill: var(--f-muted);
}

.flow .t-mono {
  font-family: var(--mono);
  font-size: 11px;
}

/* The site's fonts have no Greek or math symbols. */
.flow .t-math {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", serif;
  font-size: 15px;
  font-style: italic;
}

.flow .t-math.small {
  font-size: 13px;
  fill: var(--f-muted);
}

.flow .subscript {
  font-size: 0.68em;
}

.flow .value {
  font-style: normal;
  font-weight: 500;
  fill: var(--c);
}

.flow .quote {
  font-style: italic;
}

.flow .box {
  fill: var(--f-surface);
  stroke: var(--f-edge);
  stroke-width: 1.2;
}

.flow .box.ghost {
  fill: var(--card-bg);
}

.flow .box.frame {
  fill: color-mix(in srgb, var(--text) 2%, var(--card-bg));
}

.flow .box.pill {
  fill: var(--card-bg);
}

.flow .box.tint {
  fill: color-mix(in srgb, var(--c) 9%, var(--card-bg));
  stroke: color-mix(in srgb, var(--c) 60%, var(--card-bg));
}

/* A layer of the box's own color whose strength the figure sets. */
.flow .wash {
  fill: var(--c);
  stroke: none;
  opacity: 0;
}

.flow .bar,
.flow .dot,
.flow .token,
.flow .cell {
  fill: var(--c, var(--f-accent));
}

.flow .axis,
.flow .zoom {
  fill: none;
  stroke: var(--f-edge);
}

.flow .now {
  fill: none;
  stroke: var(--f-edge);
  stroke-dasharray: 3 3;
}

.flow .wire .line {
  fill: none;
  stroke: var(--c, var(--f-line));
  stroke-width: 1.4;
}

.flow .wire .head {
  fill: var(--c, var(--f-line));
}

.flow .wire.dashed .line {
  stroke-dasharray: 5 4;
}

.flow .wave {
  fill: none;
  stroke: var(--c, var(--f-ink));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow .wave.fan {
  stroke: var(--f-muted);
  stroke-width: 1;
}

.flow .wave.reference {
  stroke: var(--f-muted);
  stroke-dasharray: 4 3;
}

.flow .wave.out {
  stroke-width: 2;
}

.flow .band {
  fill: var(--c);
  opacity: 0.18;
}

.flow .head {
  transition: opacity 0.3s ease;
}

.flow .t-small {
  font-size: 11.5px;
}

.flow .t-note {
  font-size: 11px;
  fill: var(--f-muted);
}

.flow .t-badge {
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--card-bg);
}

.flow .t-mono.accent {
  fill: var(--f-accent);
}

/* Code reads light on dark in either theme, as in the papers. */
.flow .code {
  fill: #1d2331;
}

.flow .t-code {
  font-size: 10px;
  fill: #e4e9f0;
}

:root[data-theme="dark"] .flow .code {
  fill: #121519;
}

/* Things the task views mark on the record. */
.flow .view {
  opacity: 0;
}

.flow .mark {
  fill: color-mix(in srgb, var(--f-accent) 7%, transparent);
  stroke: var(--f-accent);
  stroke-dasharray: 4 3;
}

.flow .mark.beat,
.flow .mark.span {
  fill: color-mix(in srgb, var(--f-amber) 24%, transparent);
  stroke: none;
}

.flow .leader {
  fill: none;
  stroke: var(--f-muted);
}

.flow .tick,
.flow .interval {
  stroke: var(--f-accent);
  stroke-width: 1.5;
}

.flow .interval {
  stroke-width: 1;
  opacity: 0.6;
}

.flow .veil {
  fill: var(--f-surface);
  opacity: 0.88;
}

.flow .rule {
  stroke: color-mix(in srgb, var(--f-accent) 60%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.flow .wave.thin {
  stroke-width: 0.8;
}

/* Where the ECG is cut into patches. */
.flow .cut {
  fill: none;
  stroke: var(--f-red);
  stroke-dasharray: 3 2.5;
  opacity: 0.75;
}

.flow .t-math.small-ink {
  font-size: 13px;
}

.flow .t-big {
  font-size: 22px;
  font-weight: 500;
}

.flow .rim {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.2;
}

.flow .leader.dashed {
  stroke-dasharray: 4 3;
}

.flow .box.zone {
  fill: color-mix(in srgb, var(--text) 4%, var(--card-bg));
  stroke: none;
}

.flow .wire.faint .line {
  stroke-dasharray: 2 3;
}

.flow .route {
  transition: opacity 0.3s ease;
}

/* The camera view of the growing plant, and its growth curve. */
.flow .box.photo {
  fill: color-mix(in srgb, var(--text) 2%, var(--card-bg));
}

.flow .grid {
  fill: none;
  stroke: var(--f-edge);
  stroke-width: 0.8;
}

.flow .cell.plant {
  fill: color-mix(in srgb, var(--f-green) 45%, var(--card-bg));
  stroke: color-mix(in srgb, var(--f-green) 75%, var(--card-bg));
  stroke-width: 0.8;
}

.flow .outline {
  fill: none;
  stroke: var(--f-ink);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  opacity: 0.7;
}

.flow .measure {
  fill: none;
  stroke: var(--f-red);
  stroke-width: 2;
  stroke-linejoin: round;
}

.flow .measure-end {
  fill: var(--card-bg);
  stroke: var(--f-red);
  stroke-width: 1.6;
}

.flow .measure-tip {
  fill: var(--f-red);
}

.flow .axis.strong {
  stroke: var(--f-line);
}

.flow .trend {
  fill: none;
  stroke: var(--f-green);
  stroke-width: 1.6;
}

.flow .error {
  stroke: var(--f-green);
  opacity: 0.6;
}

.flow .today {
  fill: none;
  stroke: var(--f-accent);
  stroke-width: 2;
}

.flow-thumb .measure {
  stroke-width: 1.6;
}

/* A cursor's path: dark where the button is held, light where it only moves. */
.flow .trail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow .trail.drags {
  stroke: var(--f-accent);
  stroke-width: 2.2;
}

.flow .trail.moves {
  stroke: color-mix(in srgb, var(--f-accent) 38%, var(--card-bg));
  stroke-width: 1.3;
}

.flow .trail.thin {
  stroke-width: 1.4;
}

.flow .trail-start {
  fill: var(--card-bg);
  stroke: color-mix(in srgb, var(--f-accent) 38%, var(--card-bg));
  stroke-width: 1.2;
}

.flow .pressed {
  fill: color-mix(in srgb, var(--f-accent) 25%, transparent);
  stroke: var(--f-accent);
}

.flow .cursor {
  fill: var(--f-ink);
  stroke: var(--card-bg);
  stroke-width: 1.2;
}

.flow .pen,
.flow .rail-tick {
  fill: none;
  stroke: var(--f-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.flow .rail-tick {
  stroke: var(--f-accent);
  stroke-width: 1.4;
}

.flow .check-mark {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow .reading-value {
  font-variant-numeric: tabular-nums;
  fill: var(--f-ink);
}

.flow .route-path {
  fill: none;
  stroke: none;
}

.flow-thumb .trail.drags {
  stroke-width: 1.5;
}

.flow-thumb .trail.moves {
  stroke-width: 0.9;
}

/* Thumbnails: the same drawing, smaller and without words. */
.pub .flow-thumb {
  background-color: var(--card-bg);
}

.flow-thumb .box {
  stroke-width: 1;
}

.flow-thumb .wire .line,
.flow-thumb .wave {
  stroke-width: 1.2;
}

.flow-thumb .wave.out {
  stroke-width: 1.5;
}

/* The enlarged figure and its control. */
.flow-stage {
  width: min(960px, 88vw);
}

.flow-full {
  width: 100%;
  height: auto;
  max-height: 72vh;
  border-radius: 0.25rem;
}

.flow-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.flow-controls-label {
  margin-right: 0.3rem;
  color: var(--text-light);
}

.flow-choice {
  padding: 0.25rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: none;
  border: 1px solid var(--divider);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.flow-choice:hover {
  color: var(--theme);
  border-color: var(--theme);
}

.flow-choice[aria-pressed="true"] {
  color: var(--on-theme);
  background-color: var(--theme);
  border-color: var(--theme);
}

.flow-range {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 0.5rem;
  color: var(--text-light);
}

.flow-range input {
  width: min(16rem, 40vw);
  accent-color: var(--theme);
}

.flow-range output {
  min-width: 1.5rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.flow-choice:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
}

/* ==========================================================================
   Link preview cards (previews.js)
   ========================================================================== */

.link-preview {
  position: fixed;
  z-index: 1050;
  width: 300px;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--card-bg);
  border: 1px solid var(--divider);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-raised);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.link-preview.visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.link-preview img,
.lp-figure {
  display: block;
  width: 100%;
  height: 120px;
  padding: 0.5rem;
  object-fit: contain;
  background-color: var(--figure-bg);
  border-bottom: 1px solid var(--divider);
}

/* The moving figures' own background (.flow), rather than the white the papers' images need. */
.lp-figure {
  background-color: var(--card-bg);
}

.lp-figure svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-body {
  padding: 0.7rem 0.85rem 0.75rem;
}

.lp-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--text-light);
}

.lp-meta .badge {
  font-size: 0.65rem;
}

.lp-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.lp-text {
  display: -webkit-box;
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--text-light);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.lp-host {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-light);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  margin-top: 4rem;
  padding: 1.5rem 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-light);
  border-top: 1px solid var(--divider);
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--theme);
}

/* ==========================================================================
   Meadow (meadow.js): the crayon drawing the page turns into when you click the dog
   ========================================================================== */

:root[data-meadow] {
  --bg: #fffefa;
  --text: #2d2b30;
  --text-light: #55505c;
  --theme: #1f6fd6;
  --on-theme: #ffffff;
  --preprint: #e23b2c;
  --divider: rgba(45, 43, 48, 0.25);
  --card-bg: #fffefa;
  --code-bg: rgba(255, 254, 250, 0.8);
  --figure-bg: #ffffff;
  --shadow: none;
  --shadow-raised: 0 6px 18px rgba(31, 111, 214, 0.2);
  --font: "Yusei Magic", "Comic Sans MS", system-ui, sans-serif;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --sunshine: #ffe066;
  --on-sunshine: #2d2b30;
  --highlight: var(--sunshine);
  --nav-line: #87c9ef;
  --heading-1: #e23b2c;
  --heading-2: #1f6fd6;
  --heading-3: #8a4fd8;
  --line: #4fb52f;
  /* Boxes that look drawn by hand rather than ruled. */
  --wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobbly-wide: 14px 26px 12px 30px / 26px 12px 30px 14px;
  color-scheme: light;
}

/* Night in the meadow (the dark theme): dark blue crayon sky and moonlit colors. */
:root[data-meadow][data-theme="dark"] {
  --bg: #1a2350;
  --text: #f4f0e3;
  --text-light: #b9bfdc;
  --theme: #9dd2ff;
  --on-theme: #15204a;
  --preprint: #ff8f7e;
  --divider: rgba(244, 240, 227, 0.25);
  --card-bg: #202a5a;
  --code-bg: rgba(26, 35, 80, 0.85);
  --shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sunshine: #ffe27a;
  --on-sunshine: #1a2350;
  --highlight: rgba(255, 226, 122, 0.16);
  --nav-line: #4f60a8;
  --heading-1: #ff8f7e;
  --heading-2: #9dd2ff;
  --heading-3: #c9a6ff;
  --line: #8fd86a;
  color-scheme: dark;
}

/* The sky is crayon scribbled on paper; it stays put while the page scrolls over it. */
:root[data-meadow] body {
  padding-bottom: 5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
}

:root[data-meadow] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) url("/assets/img/meadow/sky.png");
  pointer-events: none;
}

:root[data-meadow][data-theme="dark"] body::before {
  background-image: url("/assets/img/meadow/sky-night.png");
}

.meadow-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.meadow-sky,
.meadow-ground,
.meadow-critters {
  display: none;
  position: fixed;
  pointer-events: none;
}

.meadow-sky svg,
.meadow-critters svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The whole drawing sits under the page's text, the way words written over a picture would, so
   nothing in it ever covers what you're reading; only the dog walks in front. The sky stays put
   while the page scrolls; the field is the bottom of the page, so it comes into view at the end.
   Same layer, so they stack in the order meadow.js adds them: sky, field, critters. */
:root[data-meadow] .meadow-sky {
  display: block;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

:root[data-meadow] .meadow-ground {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  line-height: 0;
}

/* The butterflies and fireflies live on the page, so they scroll with it (like the dog). */
:root[data-meadow] .meadow-critters {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.meadow-sun,
.meadow-moon {
  position: absolute;
  top: calc(var(--nav-height) - 24px);
  left: -28px;
  width: 210px;
}

/* By day: sun, birds, butterflies. By night: moon, stars, fireflies, and a dimmer field. */
.meadow-moon,
.meadow-stars,
.meadow-firefly,
:root[data-theme="dark"] .meadow-sun,
:root[data-theme="dark"] .meadow-birds,
:root[data-theme="dark"] .meadow-butterfly {
  display: none;
}

:root[data-theme="dark"] .meadow-moon,
:root[data-theme="dark"] .meadow-stars,
:root[data-theme="dark"] .meadow-firefly {
  display: block;
}

:root[data-theme="dark"] .meadow-ground {
  filter: brightness(0.62) saturate(0.85);
}

:root[data-theme="dark"] .meadow-cloud {
  filter: brightness(0.5) saturate(0.6);
  opacity: 0.6;
}

/* Moonlight, centered on the crescent rather than its bite. */
.meadow-moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 58%, rgba(255, 240, 170, 0.22), rgba(255, 240, 170, 0) 55%);
}

.meadow-stars {
  position: absolute;
  inset: 0;
}

.meadow-star {
  position: absolute;
  translate: -50% -50%;
}

.meadow-star.twinkle {
  animation: twinkle ease-in-out infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 0.7;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Positioned by its center; a bright core in a soft glow that comes and goes. */
.meadow-firefly {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 2.5px, #eaff7d 3.5px, rgba(214, 255, 110, 0.5) 5.5px, rgba(214, 255, 110, 0) 14px);
  animation: glow ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes glow {
  0%,
  35%,
  100% {
    opacity: 0.12;
  }
  55%,
  75% {
    opacity: 1;
  }
}

.meadow-cloud {
  position: absolute;
  left: 0;
  width: calc(230px * var(--scale));
  animation: cloud-drift linear infinite;
  will-change: transform;
}

@keyframes cloud-drift {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100vw);
  }
}

/* Out in the open sky to the right of the page where there's room. */
.meadow-birds {
  position: absolute;
  top: 24%;
  left: 62%;
  width: 72px;
}

/* Positioned by its center. */
.meadow-butterfly {
  position: absolute;
  top: -20px;
  left: -23px;
  width: 46px;
  height: 40px;
  will-change: transform;
}

/* The wings and the body on top of them. */
.meadow-butterfly > * {
  position: absolute;
  inset: 0;
}

.meadow-butterfly .wings {
  animation: flap 0.15s ease-in-out infinite alternate;
  will-change: transform;
}

.meadow-butterfly.resting .wings {
  animation: flap-resting 2.6s ease-in-out infinite;
}

@keyframes flap {
  to {
    transform: scaleX(0.3);
  }
}

@keyframes flap-resting {
  0%,
  55%,
  100% {
    transform: none;
  }
  75% {
    transform: scaleX(0.45);
  }
}

@media (min-width: 1120px) {
  .meadow-birds {
    top: 30%;
    left: auto;
    right: max(12px, calc((100% - var(--max-width)) / 4 - 36px));
  }
}

@media (max-width: 575.98px) {
  .meadow-sun,
  .meadow-moon {
    top: calc(var(--nav-height) - 20px);
    left: auto;
    right: -34px;
    width: 140px;
  }

  .meadow-birds {
    top: 30%;
    left: 12%;
  }

  /* Phones are mostly text, so fewer, smaller stars behind it. */
  .meadow-star.twinkle:nth-child(n + 6),
  .meadow-star:not(.twinkle):nth-child(even) {
    display: none;
  }

  .meadow-star.twinkle {
    scale: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meadow-cloud,
  .meadow-butterfly .wings,
  .meadow-star,
  .meadow-firefly {
    animation-play-state: paused;
  }
}

/* Handwriting, crayon colors, and hand-drawn boxes. */
:root[data-meadow] .navbar {
  background-color: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 0;
}

:root[data-meadow] .navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  background: var(--nav-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='6'%3E%3Cpath d='M0 3Q35 0.5 70 3T140 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='6'%3E%3Cpath d='M0 3Q35 0.5 70 3T140 3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
}

:root[data-meadow] .post-title,
:root[data-meadow] .section-heading,
:root[data-meadow] .navbar-brand,
:root[data-meadow] .nav-link,
:root[data-meadow] .news th,
:root[data-meadow] .badge,
:root[data-meadow] .btn,
:root[data-meadow] .legal h2,
:root[data-meadow] .site-footer {
  font-family: var(--hand);
  font-weight: 400;
}

:root[data-meadow] .first-name {
  font-weight: inherit;
}

:root[data-meadow] .nav-link {
  font-size: 1.2rem;
}

:root[data-meadow] .legal h2 {
  font-size: 1.6rem;
}

:root[data-meadow] .post-title {
  font-size: 3.6rem;
  filter: url(#crayon);
}

:root[data-meadow] .section-heading {
  font-size: 2.7rem;
  filter: url(#crayon);
}

:root[data-meadow] .section-heading:nth-of-type(1) {
  color: var(--heading-1);
}

:root[data-meadow] .section-heading:nth-of-type(2) {
  color: var(--heading-2);
}

:root[data-meadow] .section-heading:nth-of-type(3) {
  color: var(--heading-3);
}

:root[data-meadow] .signal {
  color: var(--line);
  filter: url(#crayon);
}

:root[data-meadow] .signal path {
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
}

:root[data-meadow] a:hover {
  text-decoration: underline wavy #f7a521;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The handwriting has one weight, so emphasis is a stroke of yellow crayon instead. */
:root[data-meadow] strong {
  font-weight: 400;
  background: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 92%, transparent 92%);
}

/* At night, emphasis glows moon-yellow instead. */
:root[data-meadow][data-theme="dark"] strong {
  color: var(--sunshine);
}

:root[data-meadow] .pub .title {
  font-weight: 700;
}

:root[data-meadow] ::selection {
  background: var(--sunshine);
  color: var(--on-sunshine);
}

:root[data-meadow] .profile img {
  border: 4px solid #ffcb2e;
  border-radius: var(--wobbly);
  rotate: 1.5deg;
}

:root[data-meadow] .news th {
  font-size: 1.2rem;
  line-height: 1.3;
}

/* Little flowers for bullets. */
:root[data-meadow] .news ul {
  list-style: none;
}

:root[data-meadow] .news li {
  position: relative;
}

:root[data-meadow] .news li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.3em;
  width: 0.85rem;
  height: 0.85rem;
  filter: url(#crayon);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23f6619d'%3E%3Ccircle cy='-6.5' r='5'/%3E%3Ccircle cx='6.2' cy='-2' r='5'/%3E%3Ccircle cx='3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-6.2' cy='-2' r='5'/%3E%3C/g%3E%3Ccircle r='3.6' fill='%23ffd23a'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-meadow] .news li:nth-child(3n + 2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%239b62e3'%3E%3Ccircle cy='-6.5' r='5'/%3E%3Ccircle cx='6.2' cy='-2' r='5'/%3E%3Ccircle cx='3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-6.2' cy='-2' r='5'/%3E%3C/g%3E%3Ccircle r='3.6' fill='%23ffd23a'/%3E%3C/svg%3E");
}

:root[data-meadow] .news li:nth-child(3n + 3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23ffcb2e'%3E%3Ccircle cy='-6.5' r='5'/%3E%3Ccircle cx='6.2' cy='-2' r='5'/%3E%3Ccircle cx='3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-3.8' cy='5.3' r='5'/%3E%3Ccircle cx='-6.2' cy='-2' r='5'/%3E%3C/g%3E%3Ccircle r='3.6' fill='%23f7841f'/%3E%3C/svg%3E");
}

:root[data-meadow] .badge {
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border-radius: var(--wobbly);
}

:root[data-meadow] .badge-preprint {
  color: var(--on-theme);
}

:root[data-meadow] .pub .preview {
  border: 3px solid var(--text);
  border-radius: var(--wobbly);
}

:root[data-meadow] .pub:nth-child(odd) .preview {
  rotate: -1.5deg;
}

:root[data-meadow] .pub:nth-child(even) .preview {
  rotate: 1.2deg;
}

:root[data-meadow] .btn {
  padding: 0.1rem 0.85rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--bg);
  border: 2px solid var(--text);
  border-radius: var(--wobbly);
}

:root[data-meadow] .btn:hover,
:root[data-meadow] .btn[aria-expanded="true"] {
  color: var(--on-sunshine);
  background: var(--sunshine);
  border-color: var(--text);
}

:root[data-meadow] .pub .abstract p,
:root[data-meadow] .pub .abstract ul,
:root[data-meadow] .pub .bibtex pre {
  background: var(--code-bg);
  border: 2px dashed var(--text);
  border-radius: var(--wobbly-wide);
}

:root[data-meadow] .copy-btn {
  border-radius: var(--wobbly);
}

:root[data-meadow] .link-preview,
:root[data-meadow] .lightbox {
  border: 2px solid var(--text);
  border-radius: 1.25rem 0.5rem 1.5rem 0.6rem / 0.6rem 1.4rem 0.5rem 1.2rem;
}

:root[data-meadow] .site-footer {
  font-size: 1rem;
  color: var(--text-light);
  border-top: 0;
}

/* While the pointer is over the dog (spitz.js). */
:root.spitz-hover,
:root.spitz-hover * {
  cursor: pointer;
}

/* ==========================================================================
   Misc
   ========================================================================== */

/* Theme and meadow switches (main.js, meadow.js): the new look is revealed by a clip-path
   animation, not a crossfade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

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

@media print {
  body::before,
  .meadow-sky,
  .meadow-ground,
  .meadow-critters,
  .spitz-layer,
  .navbar,
  .site-footer,
  .links,
  .link-preview,
  .lightbox {
    display: none;
  }

  body {
    padding: 0;
  }
}