/* ProcessLama website, built on Meridian, the design system the app uses,
   with the Devmil Lama from the brand repository (assets/lama, vendored by
   scripts/generate-brand-assets.py; never edit those files by hand).
   Tokens are Meridian's shared core with the ProcessLama brand (signal blue
   accent, Geist and Geist Mono, radii 3/6/8/10/13), copied from
   meridian_ui tokens/meridian.tokens.json and tokens/brands/processlama.json.
   Components follow the web rendition in meridian_ui
   design/project/components/bundle.css (the `.mr-*` classes there). */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Medium.ttf") format("truetype");
  font-weight: 500 700;
  font-display: swap;
}

/* Meridian colour tokens, light. The window sketch can force either theme
   with data-theme, so each theme is also a selector. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --ground: #e8ecee;
  --ground-hover: #dce2e5;
  --pane: #ffffff;
  --pane-alt: #f6f8f9;
  --pane-hover: #eef2f4;
  --raised: #ffffff;
  --ink: #0f1b21;
  --ink-muted: #52616a;
  --ink-faint: #8795a0;
  --line: #d8dfe3;
  --line-strong: #c3ccd1;
  --control-edge: #85929a;
  --success: #16733a;
  --success-bg: #e6f4ea;
  --warning: #9a5b00;
  --warning-bg: #fdf1dc;
  --danger: #b42318;
  --danger-bg: #fceaea;
  --series-1: #1f6fd6;
  --series-2: #0b8a7a;
  --series-3: #b26a00;
  --series-4: #d4521e;
  --series-5: #c7306b;
  --series-6: #7a55d3;
  --series-7: #0784a8;
  --series-8: #5d8a12;

  --accent: #2e69e6;
  --on-accent: #ffffff;
  --on-accent-muted: #f2f6ff;
  --accent-soft: #e3ecfe;
  --accent-ink: #2a5fd0;
  --focus: #2e69e6;
  --brand: #16505f;

  --shadow-pane: 0 0 0 1px rgba(15, 27, 33, 0.07), 0 1px 2px rgba(15, 27, 33, 0.05);
  --shadow-float: 0 0 0 1px rgba(15, 27, 33, 0.09), 0 16px 40px -12px rgba(15, 27, 33, 0.28);
  --shadow-control: 0 1px 0 rgba(15, 27, 33, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ground: #0b151a;
    --ground-hover: #13222a;
    --pane: #122027;
    --pane-alt: #0f1b21;
    --pane-hover: #1a2b34;
    --raised: #1a2a32;
    --ink: #e4ecef;
    --ink-muted: #93a5ae;
    --ink-faint: #5e717b;
    --line: #21323b;
    --line-strong: #2c414b;
    --control-edge: #667a84;
    --success: #4ac26b;
    --success-bg: #0f2e1c;
    --warning: #e3a948;
    --warning-bg: #3a2a10;
    --danger: #ff6b61;
    --danger-bg: #3a1a1b;
    --series-1: #6aaeff;
    --series-2: #3dd6c0;
    --series-3: #f2c14e;
    --series-4: #ff8a5b;
    --series-5: #ff6b9a;
    --series-6: #b49bff;
    --series-7: #4cc9f0;
    --series-8: #a3d65c;

    --accent: #4c82fb;
    --on-accent: #050c1c;
    --on-accent-muted: #081a40;
    --accent-soft: #1d2a45;
    --accent-ink: #86aeff;
    --focus: #86aeff;
    --brand: #1f6f78;

    --shadow-pane: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    --shadow-control: 0 1px 0 rgba(0, 0, 0, 0.3);
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0b151a;
  --ground-hover: #13222a;
  --pane: #122027;
  --pane-alt: #0f1b21;
  --pane-hover: #1a2b34;
  --raised: #1a2a32;
  --ink: #e4ecef;
  --ink-muted: #93a5ae;
  --ink-faint: #5e717b;
  --line: #21323b;
  --line-strong: #2c414b;
  --control-edge: #667a84;
  --success: #4ac26b;
  --success-bg: #0f2e1c;
  --warning: #e3a948;
  --warning-bg: #3a2a10;
  --danger: #ff6b61;
  --danger-bg: #3a1a1b;
  --series-1: #6aaeff;
  --series-2: #3dd6c0;
  --series-3: #f2c14e;
  --series-4: #ff8a5b;
  --series-5: #ff6b9a;
  --series-6: #b49bff;
  --series-7: #4cc9f0;
  --series-8: #a3d65c;

  --accent: #4c82fb;
  --on-accent: #050c1c;
  --on-accent-muted: #081a40;
  --accent-soft: #1d2a45;
  --accent-ink: #86aeff;
  --focus: #86aeff;
  --brand: #1f6f78;

  --shadow-pane: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-control: 0 1px 0 rgba(0, 0, 0, 0.3);
}

:root {
  /* ProcessLama brand radii. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 13px;
  --radius-pill: 999px;

  /* Meridian spacing: a 2px grid, 8px working unit, 6px island gutter. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 48px;

  /* Meridian motion. */
  --motion-hover: 80ms;
  --motion-hover-out: 160ms;
  --motion-press: 60ms;
  --motion-quick: 100ms;
  --motion-select: 120ms;
  --motion-layout: 200ms;
  --motion-emphasized: 240ms;
  --motion-highlight: 320ms;
  --motion-hold: 900ms;
  --motion-pulse: 1600ms;
  --motion-stagger: 18ms;
  --curve-standard: cubic-bezier(0.2, 0, 0, 1);
  --curve-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --curve-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --spring-snappy: linear(0, 0.0172, 0.0613, 0.1234, 0.1962, 0.2742, 0.3536, 0.4312, 0.5051, 0.5739, 0.6369, 0.6937, 0.7441, 0.7885, 0.827, 0.8602, 0.8883, 0.9121, 0.9319, 0.9483, 0.9616, 0.9724, 0.981, 0.9878, 0.993, 0.9969, 0.9998, 1.0019, 1.0034, 1.0043, 1.0048, 1.005, 1.005, 1.0048, 1.0045, 1.0042, 1.0038, 1.0034, 1.003, 1.0026, 1.0023, 1.002, 1.0017, 1.0014, 1.0012, 1);
  --spring-snappy-duration: 360ms;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ProcessLama's own tokens (ProcessLamaTheme in the app): the process tree art
     uses the teal and amber categorical colours for branches and leaves. */
  --tree-branch: var(--series-2);
  --tree-leaf: var(--series-3);
  --row-heat: var(--accent);

  /* Lama brand colours (Devmil brand.json). Ivory and graphite stay inside
     the artwork; the hero and the Lama stages sit on the app's brand ground
     in both appearances. --prop is the pulse line of the app icon's scene. */
  --ivory: #fff8eb;
  --graphite: #17171e;
  --brand-ground: #16505f;
  --prop: #7fd6e0;

  --content: 1160px;
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background: var(--ground);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-ink);
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
}

button {
  font: inherit;
}

.icon-sprite,
[hidden] {
  display: none !important;
}

/* Lucide at Meridian's 16px, 2px stroke; 18px with a 1.75 stroke in toolbars. */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 20;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Platform and distribution marks, painted as masks so they take the text
   colour. Sources are listed in assets/platform/README.md. */

.os-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.os-apple {
  -webkit-mask-image: url("assets/platform/apple.svg");
  mask-image: url("assets/platform/apple.svg");
}

.os-linux {
  -webkit-mask-image: url("assets/platform/linux.svg");
  mask-image: url("assets/platform/linux.svg");
}

.os-windows {
  -webkit-mask-image: url("assets/platform/windows.svg");
  mask-image: url("assets/platform/windows.svg");
}

.os-fedora {
  -webkit-mask-image: url("assets/platform/fedora.svg");
  mask-image: url("assets/platform/fedora.svg");
}

.os-debian {
  -webkit-mask-image: url("assets/platform/debian.svg");
  mask-image: url("assets/platform/debian.svg");
}

.os-ubuntu {
  -webkit-mask-image: url("assets/platform/ubuntu.svg");
  mask-image: url("assets/platform/ubuntu.svg");
}

.os-package {
  -webkit-mask-image: url("assets/platform/package.svg");
  mask-image: url("assets/platform/package.svg");
}

.os-archive {
  -webkit-mask-image: url("assets/platform/archive.svg");
  mask-image: url("assets/platform/archive.svg");
}

/* Header: chrome sits straight on the ground. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--content);
  height: 56px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand,
.nav-links {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.brand-mark {
  width: 26px;
  height: 26px;
}

.nav-links {
  gap: var(--space-2);
}

.nav-links a {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-hover-out) linear, color var(--motion-hover-out) linear;
}

.nav-links a:hover {
  background: var(--ground-hover);
  color: var(--ink);
  transition-duration: var(--motion-hover);
}

.nav-links .nav-cta {
  margin-left: var(--space-3);
  background: var(--accent);
  color: var(--on-accent);
}

.nav-links .nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
  filter: brightness(1.06);
}

/* Buttons: Meridian's button at landing-page size. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-6);
  background: var(--pane);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-hover-out) linear,
    border-color var(--motion-hover-out) linear,
    transform var(--spring-snappy-duration) var(--spring-snappy);
}

.button:hover {
  background: var(--pane-hover);
  transition-duration: var(--motion-hover), var(--motion-hover), var(--spring-snappy-duration);
}

.button:active {
  transform: scale(0.97);
  transition: transform var(--motion-press) var(--curve-exit);
}

.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: none;
  color: var(--on-accent);
}

.button.primary:hover {
  filter: brightness(1.06);
}

/* Section eyebrow: a rule, a number and an overline, as on Meridian's page. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 14px;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 24px;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

.eyebrow b {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Hierarchy through weight: the second line of a headline is muted. */
.soft {
  display: block;
  color: var(--ink-muted);
  font-weight: 400;
}

/* Hero: on the brand ground, a drawn process tree (site.js) grows from a
   live pulse line, and the Lama stands on that line. The hero redefines the
   Meridian surface tokens it uses, so the tree, the labels and the status
   dot read on teal in both appearances. */

.hero {
  --ink: var(--ivory);
  --ink-muted: rgba(255, 248, 235, 0.74);
  --raised: #0f3c47;
  --line-strong: rgba(255, 248, 235, 0.2);
  --tree-branch: var(--prop);
  --tree-leaf: #f2c14e;
  --tree-lit: var(--ivory);
  --success: #6fdc8c;
  --danger: #ff8a80;
  --focus: var(--ivory);
  /* Distance from the hero's bottom edge to the pulse line. */
  --pulse-base: 76px;
  --lama-size: clamp(220px, 25vw, 330px);

  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  min-height: clamp(600px, 88svh, 860px);
  background:
    radial-gradient(90% 70% at 78% 100%, rgba(127, 214, 224, 0.14), transparent 70%),
    var(--brand-ground);
  color: var(--ink);
}

/* A faint dot grid behind the tree. */
.hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 248, 235, 0.13) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  -webkit-mask-image: radial-gradient(70% 80% at 70% 80%, #000 0%, transparent 80%);
  mask-image: radial-gradient(70% 80% at 70% 80%, #000 0%, transparent 80%);
}

.hero-tree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 72px var(--gutter) 120px;
  pointer-events: none;
}

.hero-copy {
  max-width: 620px;
}

.hero-copy a {
  pointer-events: auto;
}

.hero .eyebrow {
  color: var(--ink-muted);
}

.hero .eyebrow::before {
  background: rgba(255, 248, 235, 0.4);
}

.eyebrow-maker {
  color: var(--prop);
}

.hero h1 {
  margin-bottom: var(--space-8);
  font-size: clamp(40px, 4.6vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.hero .soft {
  color: var(--prop);
}

.lede {
  max-width: 470px;
  margin-bottom: var(--space-9);
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 27px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* On the brand ground the primary action is ivory with graphite ink, and the
   secondary one is an outline, so neither competes with the accent blue. */
.hero .button {
  border-color: rgba(255, 248, 235, 0.42);
  background: transparent;
  box-shadow: none;
  color: var(--ivory);
}

.hero .button:hover {
  background: rgba(255, 248, 235, 0.1);
}

.hero .button.primary {
  border-color: var(--ivory);
  background: var(--ivory);
  color: var(--graphite);
}

.hero .button.primary:hover {
  background: var(--ivory);
  filter: brightness(0.96);
}

/* Facts in overline caps, like Meridian's "4 brands · 230 icons" row. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-9) 0 0;
  padding: 0;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 14px;
  list-style: none;
  text-transform: uppercase;
}

.hero-facts b {
  color: var(--ink);
  font-weight: 600;
}

/* The Lama's feet are 92% down its 120-unit artwork, so the box hangs that
   far below the pulse line. site.js reads this box to find the line. */
.hero-lama {
  position: absolute;
  z-index: 1;
  right: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
  bottom: calc(var(--pulse-base) - var(--lama-size) * 0.0804);
  width: var(--lama-size);
  height: var(--lama-size);
  transform-origin: 55% 92%;
}

.hero-lama .pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--motion-emphasized) var(--curve-standard);
}

.hero-lama .hello,
.hero-lama.is-hello .proud {
  opacity: 0;
}

.hero-lama.is-hello .hello {
  opacity: 1;
}

/* A pulse passing under its feet makes the Lama hop. */
@media (prefers-reduced-motion: no-preference) {
  .hero-lama.is-hopping {
    animation: lama-hop 560ms var(--curve-standard);
  }
}

@keyframes lama-hop {
  0% {
    transform: none;
  }

  18% {
    transform: scale(1.03, 0.96);
  }

  45% {
    transform: translateY(-9%) scale(0.98, 1.03);
  }

  78% {
    transform: scale(1.02, 0.98);
  }

  100% {
    transform: none;
  }
}

.hero-caption {
  position: absolute;
  z-index: 1;
  left: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
  bottom: calc(var(--pulse-base) - 34px);
  margin: 0;
  pointer-events: none;
}

/* MeridianStatusDot: live dots pulse (MM-69); a static halo under reduced motion. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 14px;
}

.status .dot {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--success);
}

.status.live .dot::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  content: "";
  opacity: 0.4;
  transform: scale(2.2);
}

.status.accent .dot {
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .status.live .dot::after {
    animation: pulse var(--motion-pulse) var(--curve-standard) infinite;
  }
}

@keyframes pulse {
  from {
    opacity: 0.5;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Sections */

.section {
  max-width: var(--content);
  margin: 0 auto;
  padding: 120px var(--gutter) 0;
}

.section-head {
  max-width: 600px;
  margin-bottom: var(--space-10);
}

.section-head h2 {
  margin-bottom: var(--space-6);
  font-size: clamp(30px, 3.8vw, 44px);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.section-lede {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 25px;
}

/* Entrances (MeridianEntrance): fade while rising 6px, staggered 18ms. */
.js .reveal {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--motion-highlight) var(--curve-enter),
    transform var(--motion-highlight) var(--curve-enter);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
    transition: opacity 100ms linear;
  }
}

/* Islands: work sits on the ground in panes whose shadow is their edge. */
.island {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--pane);
  box-shadow: var(--shadow-pane);
}

/* MeridianChip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 22px;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.chip.accent {
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent-ink);
}

.chip.warning {
  background: var(--warning-bg);
  box-shadow: none;
  color: var(--warning);
}

/* The window: a sketch of the app's Meridian layout that site.js keeps
   ticking. Each piece mirrors the widget the app uses (named per rule). */

.app-figure {
  margin: 0;
}

.app-window {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--ground);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  transition: background-color var(--motion-layout) linear;
}

.app-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 52px;
  padding: 0 var(--space-5) 0 var(--space-6);
}

.lights {
  display: flex;
  flex: none;
  gap: 7px;
}

.lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}

.lights i:nth-child(2) {
  background: #febc2e;
}

.lights i:nth-child(3) {
  background: #28c840;
}

/* The title block: app name over the live source. */
.app-title {
  display: grid;
  flex: none;
  margin-left: var(--space-4);
  line-height: 15px;
}

.app-title strong {
  font-weight: 600;
}

.app-title small {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
}

/* MeridianTextField, search style, with the match-case and whole-word toggles. */
.app-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 320px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: var(--pane-alt);
  color: var(--ink-muted);
}

.app-search:focus-within {
  border-color: var(--focus);
  background: var(--pane);
  box-shadow: 0 0 0 1px var(--focus);
}

.app-search .icon {
  width: 14px;
  height: 14px;
}

.app-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  outline: 0;
}

.app-search input::placeholder {
  color: var(--ink-faint);
}

.app-search input::-webkit-search-cancel-button {
  display: none;
}

.app-search output {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.field-tools,
.ibtns {
  display: flex;
  flex: none;
  gap: var(--space-3);
  color: var(--ink-muted);
}

.ibtns {
  gap: var(--space-5);
}

/* MeridianSelect trigger. */
.app-select {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 120px;
  height: 28px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4) 0 var(--space-5);
  background: var(--pane);
  box-shadow: var(--shadow-control);
  font-size: 12px;
}

.app-select .icon {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
}

/* MeridianToolbarButton: icon over a caption label. */
.app-tools {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.tbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 48px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--ink);
  transition: background-color var(--motion-hover-out) linear;
}

.tbtn .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.tbtn span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

button.tbtn {
  cursor: pointer;
}

button.tbtn:hover {
  background: var(--ground-hover);
  transition-duration: var(--motion-hover);
}

button.tbtn:hover span {
  color: var(--ink);
}

.tbtn.on,
.tbtn[aria-pressed="true"] {
  background: var(--ground-hover);
}

.tbtn[aria-pressed="true"] span,
.tbtn.on span {
  color: var(--ink);
}

.app-body {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 320px;
  gap: var(--space-3);
  height: 540px;
  padding: 0 var(--space-3);
}

/* MeridianNavSection and MeridianNavRow on the ground. */
.app-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0 var(--space-3);
}

/* The family signature: the resting Lama at 16px in ink-faint, at the foot
   of the sidebar, opening About (navigation_rail.dart). It is painted as a
   mask so it takes the text colour, like the app's colour filter. */
.signature {
  display: inline-block;
  flex: none;
  width: 17.23px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("assets/lama/lama-signature.svg") center / contain no-repeat;
  mask: url("assets/lama/lama-signature.svg") center / contain no-repeat;
}

.nav-signature {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: auto;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background-color var(--motion-hover-out) linear, color var(--motion-hover-out) linear;
}

.nav-signature:hover,
.nav-signature:focus-visible {
  background: var(--ground-hover);
  color: var(--ink-muted);
  transition-duration: var(--motion-hover);
}

/* A sketch of the About dialog (about_dialog.dart) over the window. */
.sketch-scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sketch-dialog {
  width: min(320px, 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  background: var(--raised);
  box-shadow: var(--shadow-float);
}

@media (prefers-reduced-motion: no-preference) {
  .sketch-scrim:not([hidden]) .sketch-dialog {
    animation: dialog-in var(--motion-emphasized) var(--curve-enter);
  }
}

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

.sketch-dialog h3 {
  margin-bottom: var(--space-6);
  font-size: 15px;
  line-height: 20px;
}

.about-ground {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--brand-ground);
}

.about-ground img {
  display: block;
  width: 96px;
  height: 96px;
}

.sketch-dialog p {
  display: grid;
  margin: var(--space-4) 0 0;
}

.sketch-dialog p small {
  color: var(--ink-muted);
  font-size: 11px;
}

.sketch-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.button.small {
  height: 28px;
  padding: 0 var(--space-5);
  font-size: 13px;
}

.nav-sec {
  display: flex;
  align-items: center;
  height: 26px;
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 14px;
  text-transform: uppercase;
}

.nav-sec:first-child {
  margin-top: 0;
}

.nav-hint {
  padding: 0 var(--space-4);
  color: var(--ink-muted);
  font-size: 12px;
}

.nrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 24px;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  white-space: nowrap;
}

.nrow .icon {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
}

.nrow .name {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.nrow small {
  color: var(--ink-muted);
  font-size: 11px;
}

.nrow.selected {
  background: var(--accent-soft);
}

.app-island {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  transition: box-shadow var(--motion-select) var(--curve-standard);
}

/* Focus is a place: the island that owns the keyboard carries a halo, and
   only its selection is solid accent. */
.app-island.focused {
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-pane);
}

/* Thin scrollbars, as MeridianScrollbar draws them. */
.tree-rows,
.inspector-body {
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

/* MeridianColumnHeader: hairline dividers, the sorted column in ink with
   its arrow. */
.tree-head,
.tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 96px 88px;
  align-items: center;
}

.tree-head {
  flex: none;
  height: 30px;
  margin: 0 var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.tree-head span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  height: 18px;
  padding: 0 var(--space-4);
  box-shadow: -1px 0 0 var(--line);
}

.tree-head span:first-child {
  justify-content: flex-start;
  box-shadow: none;
}

.tree-head .sorted {
  color: var(--ink);
  font-weight: 600;
}

.tree-head .icon {
  width: 12px;
  height: 12px;
}

.tree-rows {
  overflow: auto;
  flex: 1;
  padding: var(--space-2) 0 var(--space-3);
}

/* Rows: compact 24px, heat-tinted by tree CPU, the selection an inset bar. */
.tree-row {
  width: calc(100% - 2 * var(--space-3));
  height: 24px;
  margin: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0;
  background: color-mix(in srgb, var(--row-heat) calc(var(--heat, 0) * 12%), transparent);
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.tree-row:hover {
  background: var(--pane-hover);
}

.tree-row[hidden] {
  display: none;
}

.tree-row:focus-visible {
  outline-offset: -2px;
}

.tree-row .num {
  overflow: hidden;
  padding: 0 var(--space-4);
  text-align: right;
  white-space: nowrap;
}

.tree-row .name {
  display: flex;
  overflow: hidden;
  align-items: center;
  min-width: 0;
  padding-left: calc(var(--space-3) + var(--depth, 0) * 14px);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  white-space: nowrap;
}

.marker,
.twist {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
}

.marker .icon {
  width: 12px;
  height: 12px;
}

.marker.spawned {
  color: var(--success);
}

.marker.terminated {
  color: var(--danger);
}

.twist {
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
}

.twist:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.twist .icon {
  width: 14px;
  height: 14px;
}

/* MeridianAvatar: a series colour picked by a hash of the name. */
.avatar {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  margin: 0 var(--space-4) 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--av, var(--series-1));
  color: var(--pane);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.avatar.large {
  width: 28px;
  height: 28px;
  margin: 0;
  font-size: 11px;
}

.tree-row .label {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
}

.tree-row.terminated .label {
  text-decoration: line-through;
}

.tree-row .count {
  flex: none;
  margin-left: var(--space-3);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.spark {
  flex: none;
  overflow: visible;
  width: 52px;
  height: 14px;
  margin-left: var(--space-4);
}

.spark path {
  fill: none;
  stroke: var(--series-1);
  stroke-linecap: round;
  stroke-width: 1;
}

.spark circle {
  fill: var(--accent);
}

.pin {
  display: grid;
  flex: none;
  width: 22px;
  place-items: center;
  margin: 0 var(--space-2);
  color: var(--ink-muted);
  visibility: hidden;
}

.pin .icon {
  width: 13px;
  height: 13px;
}

.tree-row:hover .pin,
.tree-row.selected .pin {
  visibility: visible;
}

/* The CPU cell: a MeridianMeter and the value, bold from 10%, warning from 50%. */
.tree-row .cpu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.meter {
  overflow: hidden;
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.meter i {
  display: block;
  width: calc(var(--v, 0) * 100%);
  height: 100%;
  background: var(--accent);
}

.meter.warning i {
  background: var(--warning);
}

.tree-row .cpu .num {
  flex: none;
  width: 44px;
  padding: 0;
}

.tree-row .strong {
  font-weight: 600;
}

.tree-row .warn {
  color: var(--warning);
}

/* Tree search: the matching row takes warning-bg, the match a warning tint. */
.tree-row.match {
  background: var(--warning-bg);
}

.tree-row mark {
  background: color-mix(in srgb, var(--warning) 28%, transparent);
  color: inherit;
}

.app-island.focused .tree-row.selected {
  background: var(--accent);
  color: var(--on-accent-muted);
}

.app-island.focused .tree-row.selected .name,
.app-island.focused .tree-row.selected .twist,
.app-island.focused .tree-row.selected .count,
.app-island.focused .tree-row.selected .pin {
  color: var(--on-accent);
}

.app-island.focused .tree-row.selected .spark path {
  stroke: var(--on-accent);
}

.app-island.focused .tree-row.selected .spark circle,
.app-island.focused .tree-row.selected .meter i {
  fill: var(--on-accent);
  background: var(--on-accent);
}

.app-island.focused .tree-row.selected .meter {
  background: color-mix(in srgb, var(--on-accent) 25%, transparent);
}

.app-island.focused .tree-row.selected .warn {
  color: inherit;
}

/* The inspector island. */
.inspector-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.inspector-head div {
  display: grid;
  min-width: 0;
}

.inspector-head strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-head div span {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
}

/* MeridianTabs with the accent rule under the current tab. */
.tabs {
  display: flex;
  flex: none;
  overflow: hidden;
  height: 34px;
  border-bottom: 1px solid var(--line);
  padding: 0 var(--space-2);
}

.tabs span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tabs .on {
  color: var(--ink);
  font-weight: 600;
}

.tabs .on::after {
  position: absolute;
  right: 5px;
  bottom: -1px;
  left: 5px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  content: "";
}

.inspector-body {
  overflow: auto;
  flex: 1;
  padding: var(--space-6);
}

/* Metric tiles: an overline over a mono value on a pane-alt inset, two per row. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.tile {
  min-width: 0;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--pane-alt);
}

.tile small {
  display: block;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 14px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tile b {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 20px;
}

.tile b.warn {
  color: var(--warning);
}

/* History chart cards: label and value, a scale column, 60 bars. */
.chart-card {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--pane-alt);
}

.chart-top {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.chart-top div {
  display: grid;
  flex: 1;
  min-width: 0;
}

.chart-top strong {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.chart-top small {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

.chart-top b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.chart-plot {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-3);
}

.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 10px;
  text-align: right;
  white-space: nowrap;
}

.chart-bars {
  position: relative;
}

.chart-bars svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-bars rect {
  fill: var(--series-1);
  opacity: 0.55;
}

.chart-bars rect.low {
  fill: var(--series-2);
}

.chart-bars rect.latest {
  opacity: 1;
}

.chart-bars rect.latest:not(.low) {
  fill: var(--accent);
}

.chart-card.diverging .chart-bars rect.latest:not(.low) {
  fill: var(--series-1);
}

.chart-bars line {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The hovered sample's value, a small raised label. */
.chart-tip {
  position: absolute;
  top: -4px;
  z-index: 1;
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  background: var(--raised);
  box-shadow: var(--shadow-float);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* MeridianStatusBar on the ground. */
.app-status {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 26px;
  padding: 0 var(--space-5);
  color: var(--ink-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.status.neutral .dot {
  background: var(--ink-faint);
}

.app-status .spacer {
  flex: 1;
}

.app-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-6);
  color: var(--ink-muted);
  font-size: 13px;
}

/* MeridianSegmented */
.seg {
  display: inline-flex;
  gap: var(--space-1);
  height: 28px;
  border-radius: var(--radius-md);
  padding: var(--space-1);
  background: var(--ground-hover);
}

.seg button {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: color var(--motion-hover-out) linear;
}

.seg button:hover {
  color: var(--ink);
}

.seg.sm {
  height: 24px;
  background: var(--pane-alt);
  box-shadow: inset 0 0 0 1px var(--line);
}

.seg.sm button {
  padding: 0 var(--space-4);
  font-size: 12px;
}

.seg button[aria-pressed="true"] {
  background: var(--pane);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-control);
  color: var(--ink);
}

/* Features, laid out as a tree: a trunk with one branch per feature, in the
   same teal and amber as the hero. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}

.split .section-head {
  position: sticky;
  top: 104px;
  margin-bottom: 0;
}

.ftree {
  --grow: 0;

  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftree::before,
.ftree::after {
  position: absolute;
  top: 8px;
  bottom: 40px;
  left: 5px;
  width: 2px;
  border-radius: var(--radius-pill);
  content: "";
}

.ftree::before {
  background: var(--line);
}

.ftree::after {
  background: var(--tree-branch);
  transform: scaleY(var(--grow));
  transform-origin: top;
}

.fnode {
  position: relative;
  padding: 0 0 var(--space-9) 48px;
}

.fnode:last-child {
  padding-bottom: 0;
}

/* The branch from the trunk to the feature. */
.fnode::before {
  position: absolute;
  top: 11px;
  left: 6px;
  width: 26px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--line);
  content: "";
  transition: background-color var(--motion-highlight) var(--curve-standard) 120ms;
}

.fnode::after {
  position: absolute;
  top: 7px;
  left: 28px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  content: "";
  transition:
    background-color var(--motion-highlight) var(--curve-standard) 200ms,
    box-shadow var(--motion-highlight) var(--curve-standard) 200ms;
}

.fnode.is-in::before {
  background: var(--tree-branch);
}

.fnode.is-in::after {
  background: var(--tree-leaf);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tree-leaf) 18%, transparent);
}

.fnode h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.ftag {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.fnode p {
  max-width: 520px;
  margin: 0;
  color: var(--ink-muted);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 72px 0 0;
}

.facts div {
  padding: var(--space-7) var(--space-8);
}

.facts dt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.facts dt .icon {
  color: var(--ink-muted);
}

.facts dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 22px;
}

/* Downloads */

.release-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-8);
  color: var(--ink-muted);
  font-size: 13px;
}

.release-line .mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.os-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.os-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow var(--motion-select) var(--curve-standard);
}

.os-card.is-yours {
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-pane);
}

.os-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-7) var(--space-5);
}

.os-mark {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--pane-alt);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 22px;
}

.os-head > div {
  min-width: 0;
}

.os-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
}

.os-head p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
}

.os-head .chip {
  align-self: flex-start;
  margin-left: auto;
}

/* Files are list rows inside the island. */
.file-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  list-style: none;
}

.file {
  min-width: 0;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-hover-out) linear;
}

.file:hover,
.file:focus-within {
  background: var(--pane-hover);
  transition-duration: var(--motion-hover);
}

.file-link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  color: var(--ink);
  text-decoration: none;
}

.file-link:focus-visible {
  outline-offset: -2px;
}

.file-icons {
  display: flex;
  flex: none;
  gap: var(--space-3);
  justify-content: center;
  min-width: 42px;
  color: var(--ink-muted);
  font-size: 18px;
  transition: color var(--motion-hover-out) linear;
}

.file:hover .file-icons {
  color: var(--ink);
  transition-duration: var(--motion-hover);
}

.file-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.file-main strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.file-main span {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
}

.file-size {
  flex: none;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The download affordance: an icon button that takes the accent on hover,
   because that is where the intent is. */
.file-get {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  transition: background-color var(--motion-hover-out) linear, color var(--motion-hover-out) linear;
}

.file:hover .file-get,
.file-link:focus-visible .file-get {
  background: var(--accent);
  color: var(--on-accent);
  transition-duration: var(--motion-hover);
}

/* MM-07: the icon nudges 2px toward its meaning, then springs back. */
.file-get .icon {
  transition: transform var(--spring-snappy-duration) var(--spring-snappy);
}

@media (prefers-reduced-motion: no-preference) {
  .file:hover .file-get .icon {
    transform: translateY(2px);
    transition: transform 90ms var(--curve-standard);
  }
}

.os-note {
  margin: auto 0 0;
  border-top: 1px solid var(--line);
  padding: var(--space-5) var(--space-7) var(--space-6);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.dl-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  margin: var(--space-8) 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.dl-more a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
  text-decoration: none;
}

.dl-more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  max-width: var(--content);
  margin: 120px auto 0;
  padding: var(--space-8) var(--gutter) 40px;
  box-shadow: 0 -1px 0 var(--line);
  color: var(--ink-muted);
  font-size: 13px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink);
  font-weight: 600;
}

.footer-maker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.footer-maker .signature {
  color: var(--ink-faint);
}

.footer-links {
  display: flex;
  gap: var(--space-6);
}

.footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
}

/* Downloads page (rendered by scripts/lib/website_release.py). */

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ground) 30%, var(--pane-alt) 100%);
  box-shadow: 0 1px 0 var(--line);
}

.page-hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
  mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.page-hero .page {
  position: relative;
  padding-top: 64px;
  padding-bottom: 56px;
}

.page-hero h1 {
  margin-bottom: var(--space-6);
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.page-hero .lede {
  max-width: 600px;
  margin: 0;
}

.release-page {
  padding-top: var(--space-10);
}

.release-card + .release-card,
.release-card + .release-empty,
.release-empty + .release-card {
  margin-top: 56px;
}

.release-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.release-card-heading h2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 30px);
  letter-spacing: -0.03em;
}

.release-meta {
  margin: var(--space-4) 0 var(--space-8);
  color: var(--ink-muted);
  font-size: 14px;
}

.release-empty {
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  background: var(--pane-alt);
  color: var(--ink-muted);
}

.release-empty h2 {
  display: inline;
  margin: 0 var(--space-4) 0 0;
  color: var(--ink);
  font-size: 15px;
}

.release-empty p {
  display: inline;
  margin: 0;
}

/* On this page each system is a full-width island: mark and note on the
   left, file rows on the right with the checksum and command under each. */

.os-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.os-list .os-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.os-list .os-card.is-yours {
  order: -1;
}

.os-list .os-head {
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--space-7);
  background: var(--pane-alt);
}

.os-list .os-head .chip {
  margin-left: 0;
}

.os-list .os-note {
  flex-basis: 100%;
  margin: 0;
  border: 0;
  padding: 0;
}

.os-list .file-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
}

.os-list .file-list > .file:only-child {
  grid-column: 1 / -1;
}

.os-list .file {
  box-shadow: inset 0 0 0 1px var(--line);
}

.file-extra {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}

.copy-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.copy-row code {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A small secondary Meridian button; its success state holds (MM-04). */
.copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: var(--pane);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background-color var(--motion-hover-out) linear, color var(--motion-quick) var(--curve-standard);
}

.copy:hover {
  background: var(--pane-hover);
  transition-duration: var(--motion-hover), var(--motion-quick);
}

.copy.is-done {
  border-color: transparent;
  background: var(--success-bg);
  box-shadow: none;
  color: var(--success);
}

/* Without JavaScript the copy buttons cannot work, so they stay hidden. */
html:not(.js) .copy {
  display: none;
}

.release-history {
  margin-top: 56px;
}

.release-history h2 {
  margin-bottom: var(--space-5);
  font-size: 17px;
}

.release-history ul {
  margin: 0;
  padding: var(--space-3);
  list-style: none;
}

.release-history li {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: baseline;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  transition: background-color var(--motion-hover-out) linear;
}

.release-history li:hover {
  background: var(--pane-hover);
  transition-duration: var(--motion-hover);
}

.history-version {
  display: grid;
  font-weight: 600;
}

.history-version span {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.history-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.history-files a {
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--motion-hover-out) linear;
}

.history-files a:hover {
  background: var(--pane);
  transition-duration: var(--motion-hover);
}

/* Responsive */

@media (max-width: 1180px) {
  .app-body {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .app-nav,
  .ibtns,
  .field-tools {
    display: none;
  }
}

@media (max-width: 960px) {
  .os-grid {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split .section-head {
    position: static;
  }

  .app-body {
    grid-template-columns: 1fr;
  }

  .app-inspector,
  .app-select,
  .tbtn span {
    display: none;
  }

  .app-search {
    margin-left: auto;
  }

  .tbtn {
    min-width: 36px;
    height: 36px;
  }

  .os-list .os-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  /* The tree and the Lama move below the text, and the hero makes room. */
  .hero {
    --lama-size: 168px;
    --pulse-base: 56px;

    align-items: flex-start;
    min-height: 0;
  }

  .hero::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 85%);
    mask-image: linear-gradient(180deg, transparent 40%, #000 85%);
  }

  .hero-inner {
    padding: 56px var(--gutter) 380px;
  }

  .hero-caption {
    bottom: calc(var(--pulse-base) - 30px);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  .brand-name {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .section {
    padding-top: 88px;
  }

  .app-title,
  .app-tools .tbtn:not(button) {
    display: none;
  }

  .app-toolbar {
    padding-left: var(--space-5);
  }

  .app-body {
    height: 440px;
  }

  .tree-head,
  .tree-row {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .tree-head span:nth-child(2),
  .tree-head span:nth-child(4),
  .tree-row .pid,
  .tree-row .rss,
  .spark,
  .pin {
    display: none;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .fnode {
    padding-left: 40px;
  }

  .fnode::before {
    width: 18px;
  }

  .fnode::after {
    left: 20px;
  }

  .os-list .file-list {
    grid-template-columns: 1fr;
  }

  .release-history li {
    grid-template-columns: 1fr;
  }

  .site-footer {
    margin-top: 88px;
  }
}