/* The workshop look. Every project page loads this after its own style.css,
   so the shared palette, the one sticky bar, the measure and the cards win
   when they disagree. Accents stay per project. Type is the system face:
   nothing here asks a font CDN for the visit. */

/* A length, not a ch, so it is resolved once against the body face and
   inherited as pixels. Otherwise a heading's own 68ch is wider than the
   frame, the paragraph's is not, and margin:auto centres them on
   different left edges. */
@property --prose {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  color-scheme: dark;
  --eco-gateway: #b69aff;
  --eco-voice: #ffbc52;
  --eco-protoke: #71e5d2;
  --eco-tools: #ff765f;
  --eco-preflight: #9ae66e;
  --eco-siphon: #7aa7ff;
  --eco-autosort: #e79bd8;
  --eco-interpreter: #4fd0f0;
  --eco-polyglot: #ffd84f;
  --eco-voicecore: #e8a878;
  --eco-sitecore: #b9c3d0;
  --eco-companion: #ff8ab8;
  --eco-speechcore: #6ed9a0;
  --eco-workshopcore: #d9bf8f;
  --eco-current: var(--eco-protoke);
  --ground: #121212;
  --surface: #1c1c1e;
  --raise: #2c2c2e;
  --ink: #f5f5f7;
  --chalk: #f5f5f7;
  --muted: #c7c7cc;
  --line: rgba(255, 255, 255, 0.12);
  --body: #d2d2d6;
  --body-2: #d2d2d6;
  --faint: #c7c7cc;
  --whisper: #c7c7cc;
  --code: #f5f5f7;
  --paper: #1c1c1e;
  --paper-2: #2c2c2e;
  --plate: #1c1c1e;
  --well: #161616;
  --sunken: #161616;
  --nav-bg: rgba(18, 18, 18, 0.88);
  --on-accent: #121212;
  --grid-line: transparent;
  --eco-copy: var(--ink);
  --measure: 68ch;
  --eco-bar: 56px;
  --eco-frame: 1080px;
  --eco-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --eco-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: var(--eco-sans);
  --sans: var(--eco-sans);
}

/* Same hues as the dark accents, taken down until each clears 4.5:1 on the
   light ground. Decorative mark colours stay the vivid set; these are for
   text, eyebrows and card glyphs. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --eco-coat: 0.06;
    color-scheme: light;
    --eco-gateway: #723cff;
    --eco-voice: #955b00;
    --eco-protoke: #157565;
    --eco-tools: #cd1d00;
    --eco-preflight: #387614;
    --eco-siphon: #1f5fbf;
    --eco-interpreter: #00687f;
    --eco-autosort: #b52b9a;
    --eco-polyglot: #6b5600;
    --eco-voicecore: #8f4718;
    --eco-sitecore: #475366;
    --eco-companion: #a04e6e;
    --eco-speechcore: #0f7923;
  --eco-workshopcore: #7a5a22;
    --eco-workshopcore: #7a5a22;
    --ground: #f5f5f7;
    --surface: #ffffff;
    --raise: #e8e8ed;
    --ink: #1d1d1f;
    --chalk: #1d1d1f;
    --muted: #3a3a3c;
    --line: rgba(0, 0, 0, 0.1);
    --body: #3a3a3c;
    --body-2: #3a3a3c;
    --faint: #3a3a3c;
    --whisper: #3a3a3c;
    --code: #1d1d1f;
    --paper: #ffffff;
    --paper-2: #e8e8ed;
    --plate: #f5f5f7;
    --well: #f0f0f2;
    --sunken: #e8e8ed;
    --nav-bg: rgba(245, 245, 247, 0.9);
    --on-accent: #f5f5f7;
    --grid-line: transparent;
  }
}
:root[data-theme="light"] {
  --eco-coat: 0.06;
  color-scheme: light;
  --eco-gateway: #723cff;
  --eco-voice: #955b00;
  --eco-protoke: #157565;
  --eco-tools: #cd1d00;
  --eco-preflight: #387614;
  --eco-siphon: #1f5fbf;
  --eco-interpreter: #00687f;
  --eco-autosort: #b52b9a;
  --eco-polyglot: #6b5600;
  --eco-voicecore: #8f4718;
  --eco-sitecore: #475366;
  --eco-companion: #a04e6e;
  --eco-speechcore: #0f7923;
  --ground: #f5f5f7;
  --surface: #ffffff;
  --raise: #e8e8ed;
  --ink: #1d1d1f;
  --chalk: #1d1d1f;
  --muted: #3a3a3c;
  --line: rgba(0, 0, 0, 0.1);
  --body: #3a3a3c;
  --body-2: #3a3a3c;
  --faint: #3a3a3c;
  --whisper: #3a3a3c;
  --code: #1d1d1f;
  --paper: #ffffff;
  --paper-2: #e8e8ed;
  --plate: #f5f5f7;
  --well: #f0f0f2;
  --sunken: #e8e8ed;
  --nav-bg: rgba(245, 245, 247, 0.9);
  --on-accent: #f5f5f7;
  --grid-line: transparent;
}

body[data-project="gateway-forge"] { --eco-current: var(--eco-gateway); }
body[data-project="voice-forge"] { --eco-current: var(--eco-voice); }
body[data-project="protoke"] { --eco-current: var(--eco-protoke); }
body[data-project="tools-core"] { --eco-current: var(--eco-tools); }
body[data-project="media-preflight"] { --eco-current: var(--eco-preflight); }
body[data-project="siphon"] { --eco-current: var(--eco-siphon); }
body[data-project="auto-sort"] { --eco-current: var(--eco-autosort); }
body[data-project="interpreter-forge"] { --eco-current: var(--eco-interpreter); }
body[data-project="companion-forge"] { --eco-current: var(--eco-companion); }
body[data-project="voice-polyglot"] { --eco-current: var(--eco-polyglot); }
body[data-project="voice-core"] { --eco-current: var(--eco-voicecore); }
body[data-project="speech-core"] { --eco-current: var(--eco-speechcore); }
body[data-project="site-core"] { --eco-current: var(--eco-sitecore); }
body[data-project="workshop-core"] { --eco-current: var(--eco-workshopcore); }
/* Set where the accent is, not on :root: a var() resolves where it is
   declared, so on :root every page would glow in the default accent. */
body { --eco-glow: var(--eco-current); }

body {
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--eco-sans);
  font-size: 17px;
  --prose: 68ch;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--eco-sans); letter-spacing: -0.022em; }
h1 { font-size: clamp(40px, 5vw, 56px); font-weight: 600; line-height: 1.05; margin: 18px 0 0; }
h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 600; line-height: 1.15; margin: 0 0 16px; }
h3 { margin: 28px 0 12px; }
.wrap {
  width: min(var(--eco-frame), calc(100% - 48px));
  max-width: var(--eco-frame);
  margin-inline: auto;
}
/* One left edge for eyebrows, headings, prose and captions. The column is
   the body's 68ch, so a 36px heading does not centre a different box.
   Figures, tables and the card grid stay on the frame. */
.wrap > section > :is(p, h2, h3, ul, ol),
.wrap > section > .eyebrow {
  max-width: var(--prose, 68ch);
  margin-left: 0;
  margin-right: 0;
}
.wrap > section > h2 { margin-bottom: 16px; }
.wrap > section > h3 { margin-top: 28px; margin-bottom: 12px; }
.subhead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.headmeta { margin-top: 28px; }
.headmeta span { font-size: 13px; color: var(--muted); }
section { padding: 72px 0; }
/* A wide table scrolls inside the section. It must not push the page sideways. */
.wrap > section { overflow-x: auto; }
section[id], header[id], h2[id], .fold[id], .ecosystem-more {
  scroll-margin-top: calc(var(--eco-bar) + 18px);
}

/* Small labels were 7–11px and grey. 12px is the floor, and --muted clears
   4.5:1 on both grounds. */
.eyebrow, .badge, .card .num, th, .tag, .phone-line .lang,
.ecosystem-kicker, .ecosystem-card__index {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.eyebrow {
  color: var(--eco-current);
  font-family: var(--eco-mono);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.badge {
  color: var(--muted);
  font-family: var(--eco-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}
.caption, .shot figcaption, .figure figcaption, .window figcaption, figcaption {
  display: block;
  margin: 12px 0 28px;
  max-width: var(--prose, 68ch);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.card h3, .ecosystem-card h3, .tool-card h3, .principle h3, .lab h3, .project h3 {
  margin-top: 0;
}

/* ---------------------------------------------------------------- the bar */
.ecosystem-page-top { display: block; width: 0; height: 0; }
.ecosystem-progress {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.ecosystem-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--eco-current);
  transform: scaleX(0);
  transform-origin: left;
}
.ecosystem-rail {
  position: sticky;
  z-index: 1000;
  top: 0;
  height: auto;
  min-height: var(--eco-bar);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  color: var(--ink);
  font-family: var(--eco-sans);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.ecosystem-rail__inner {
  position: relative;
  width: min(var(--eco-frame), calc(100% - 48px));
  height: auto;
  min-height: var(--eco-bar);
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.ecosystem-rail.is-managed {
  height: var(--eco-bar);
}
.ecosystem-rail.is-managed .ecosystem-rail__inner {
  flex-wrap: nowrap;
  height: 100%;
  padding-block: 0;
}
.ecosystem-rail__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}
.ecosystem-rail__home:focus-visible,
.ecosystem-rail__brand:focus-visible,
.ecosystem-rail__jumps a:focus-visible,
.ecosystem-rail__more-btn:focus-visible,
.ecosystem-rail__more-panel a:focus-visible,
.ecosystem-rail__links a:focus-visible {
  outline: 2px solid var(--eco-current);
  outline-offset: 3px;
  border-radius: 4px;
}
.ecosystem-rail__identity {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.011em;
  text-transform: none;
}
.ecosystem-rail__identity-path {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.ecosystem-rail__identity i { font-style: normal; color: color-mix(in srgb, var(--muted) 65%, transparent); }
.ecosystem-rail__identity strong {
  color: var(--eco-current);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.ecosystem-rail__jumps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-width: 0;
  flex: 1 1 auto;
  margin-left: 12px;
  overflow: visible;
}
.ecosystem-rail.is-managed .ecosystem-rail__jumps {
  flex-wrap: nowrap;
  overflow: hidden;
}
.ecosystem-rail__jumps a {
  flex: 0 0 auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.ecosystem-rail__more:not([hidden]) {
  position: relative;
  flex: 0 0 auto;
}
.ecosystem-rail__more-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 8px 4px;
  background: transparent;
  color: var(--muted);
  font: 500 13px/1 var(--eco-sans);
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
}
.ecosystem-rail__more-btn:hover,
.ecosystem-rail.is-sections .ecosystem-rail__more-btn { color: var(--ink); }
.ecosystem-rail__more-panel[hidden] { display: none; }
.ecosystem-rail__more-panel:not([hidden]) {
  position: absolute;
  z-index: 3;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.ecosystem-rail__more-panel a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.ecosystem-rail__more-panel a:hover { background: color-mix(in srgb, var(--eco-current) 14%, transparent); }
.ecosystem-rail__jumps a:hover { color: var(--ink); }
.ecosystem-rail__home + .ecosystem-rail__brand { margin-left: auto; }
.ecosystem-rail__brand {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 8px 2px 8px 12px;
  background: transparent;
  color: inherit;
  font: 600 13px/1 var(--eco-sans);
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  cursor: pointer;
}
.ecosystem-rail__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.ecosystem-rail.is-open .ecosystem-rail__chevron { transform: translateY(2px) rotate(225deg); }
.ecosystem-rail__links {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(640px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ecosystem-rail.is-open .ecosystem-rail__links {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ecosystem-rail__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.ecosystem-rail__links a::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--project-accent, var(--eco-current));
}
.ecosystem-rail__links a:hover,
.ecosystem-rail__links a[aria-current="page"] {
  background: color-mix(in srgb, var(--project-accent, var(--eco-current)) 14%, transparent);
}

/* ---------------------------------------------------------- the snow leopard */
/* The paw in the bar glows in --eco-glow: the page's own accent on a project
   page, and on the hub an ease through every accent. */
.ecosystem-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}
.ecosystem-mark__art { display: block; width: 100%; height: 100%; overflow: visible; }
.ecosystem-mark__paw { fill: var(--eco-glow); animation: ecosystem-breathe 7s ease-in-out infinite; }
@keyframes ecosystem-breathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ecosystem-mark__paw { animation: none; } }

/* The coat: a few dark rosettes on the page itself, near the top, fading out
   before the reading starts. Tone on tone, so it is felt more than seen. */
.ecosystem-coat {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 620px;
  pointer-events: none;
  opacity: var(--eco-coat, 0.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='300' viewBox='0 0 360 300'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%2862 58%29 rotate%28-20%29'%3E%3Cpath stroke-width='7.3' d='M19.5 6.4L17.3 10.5L14.8 14.5L11.7 18.4L7.6 21.6L2.6 23.5'/%3E%3Cpath stroke-width='8.8' d='M-7.8 21.5L-11.7 18.3L-14.7 14.6L-17.1 10.8L-19.3 6.8L-21.2 2.5'/%3E%3Cpath stroke-width='6.9' d='M-21.4 -10.3L-18.6 -14.5L-14.7 -17.5L-10.3 -19.2L-5.8 -20.0L-1.4 -20.2L2.8 -20.2'/%3E%3Cpath stroke-width='6.9' d='M11.9 -18.8L17.0 -16.1L20.7 -11.6L22.4 -6.0L22.1 -0.3'/%3E%3C/g%3E%3Cg transform='translate%28196 40%29 rotate%2825%29'%3E%3Cpath stroke-width='7.3' d='M16.1 10.2L13.7 13.8L10.1 16.3L6.0 17.4L1.9 17.3L-1.9 16.6L-5.5 15.6L-9.1 14.4L-12.7 12.7L-15.9 10.0'/%3E%3Cpath stroke-width='5.9' d='M-19.2 1.2L-18.3 -2.8L-16.5 -6.4L-14.1 -9.3L-11.5 -11.9L-8.9 -14.3L-5.8 -16.6L-2.2 -18.4L1.8 -19.1'/%3E%3Cpath stroke-width='6.9' d='M7.3 -17.9L11.1 -15.1L13.7 -11.2L15.2 -7.2L16.3 -3.2L17.1 0.9'/%3E%3C/g%3E%3Cg transform='translate%28300 96%29 rotate%28-35%29'%3E%3Cpath stroke-width='9.1' d='M22.3 0.9L20.4 5.8L17.5 9.9L14.2 13.2L10.7 16.2L6.9 19.0'/%3E%3Cpath stroke-width='8.5' d='M0.2 21.9L-5.3 22.0L-10.5 19.9L-14.4 16.1L-16.9 11.4L-18.3 6.6'/%3E%3Cpath stroke-width='8.5' d='M-19.6 -0.1L-20.0 -5.1L-19.2 -10.3L-16.7 -15.2L-12.5 -18.8L-7.3 -20.5'/%3E%3Cpath stroke-width='7.2' d='M-1.1 -20.3L3.5 -19.2L7.9 -17.7L12.3 -15.9L16.6 -13.2L20.2 -9.4'/%3E%3C/g%3E%3Cg transform='translate%28118 150%29 rotate%2810%29'%3E%3Cpath stroke-width='6.6' d='M15.5 13.0L11.6 15.5L7.3 16.8L3.2 17.3L-0.9 17.5'/%3E%3Cpath stroke-width='8.0' d='M-11.8 15.8L-16.3 12.4L-18.9 7.4L-19.1 1.8'/%3E%3Cpath stroke-width='8.3' d='M-15.7 -7.6L-13.6 -11.5L-10.8 -15.4L-7.0 -18.6L-2.2 -20.4'/%3E%3Cpath stroke-width='8.6' d='M7.5 -17.9L11.0 -14.6L13.7 -10.9L16.1 -7.2L18.2 -3.1'/%3E%3C/g%3E%3Cg transform='translate%28236 182%29 rotate%2840%29'%3E%3Cpath stroke-width='8.4' d='M18.6 12.5L15.9 17.5L11.7 21.7L6.3 24.0L0.4 24.0L-5.1 22.2L-9.7 19.3'/%3E%3Cpath stroke-width='9.2' d='M-14.4 15.5L-18.0 12.2L-21.3 8.2L-23.8 3.3L-24.7 -2.3'/%3E%3Cpath stroke-width='7.9' d='M-22.0 -10.3L-18.4 -14.3L-14.0 -17.1L-9.6 -19.0L-5.2 -20.6L-0.5 -21.9L4.5 -22.6'/%3E%3Cpath stroke-width='8.1' d='M17.1 -17.9L20.3 -13.2L21.7 -7.8L21.7 -2.5L21.1 2.5'/%3E%3C/g%3E%3Cg transform='translate%2852 238%29 rotate%28-50%29'%3E%3Cpath stroke-width='5.3' d='M13.5 10.7L11.2 14.1L7.9 16.6L3.9 17.7L-0.1 17.3L-3.8 16.0L-7.0 14.1'/%3E%3Cpath stroke-width='5.6' d='M-13.6 9.1L-16.0 6.3L-17.8 2.8L-18.3 -1.1L-17.5 -4.9L-15.4 -8.3L-12.6 -10.8L-9.6 -12.7L-6.5 -14.2L-3.4 -15.6'/%3E%3Cpath stroke-width='6.3' d='M1.8 -17.0L5.6 -16.9L9.4 -15.7L12.5 -13.2L14.6 -9.9L15.6 -6.1L15.8 -2.5L15.6 1.0L15.2 4.4'/%3E%3C/g%3E%3Cg transform='translate%28318 250%29 rotate%2815%29'%3E%3Cpath stroke-width='5.9' d='M15.0 2.0L13.8 5.1L12.4 8.1L10.7 11.1L8.4 13.9L5.4 16.1L1.7 17.2'/%3E%3Cpath stroke-width='5.5' d='M-6.4 14.7L-9.2 12.1L-11.4 9.3L-13.4 6.5L-15.2 3.3L-16.4 -0.4L-16.5 -4.4'/%3E%3Cpath stroke-width='6.9' d='M-14.3 -9.4L-11.4 -11.9L-8.0 -13.5L-4.5 -14.3L-1.2 -14.7L2.2 -14.9L5.8 -14.7L9.4 -13.7L12.7 -11.6L15.0 -8.5'/%3E%3C/g%3E%3Cg transform='translate%28170 262%29 rotate%28-5%29'%3E%3Cpath stroke-width='5.6' d='M14.6 3.2L13.1 6.0L11.0 8.3L8.5 10.0L6.1 11.4L3.5 12.6L0.8 13.6L-2.3 14.2L-5.5 13.9L-8.5 12.5'/%3E%3Cpath stroke-width='6.4' d='M-12.6 5.6L-12.9 2.6L-12.9 -0.3L-12.7 -3.2L-12.2 -6.1L-11.1 -9.1L-9.2 -11.8'/%3E%3Cpath stroke-width='4.8' d='M-4.7 -14.2L-1.1 -14.4L2.1 -13.5L5.0 -12.0L7.6 -10.4L10.1 -8.6L12.5 -6.3'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='130' cy='70' r='3.2'/%3E%3Ccircle cx='262' cy='128' r='2.6'/%3E%3Ccircle cx='30' cy='140' r='2.8'/%3E%3Ccircle cx='186' cy='112' r='2.2'/%3E%3Ccircle cx='90' cy='284' r='2.6'/%3E%3Ccircle cx='280' cy='30' r='2.4'/%3E%3Ccircle cx='338' cy='178' r='2.8'/%3E%3Ccircle cx='210' cy='232' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 300px repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
}

header.mast, header#top {
  border-bottom: 0;
  padding: 36px 0 8px;
}

/* ------------------------------------------------------- the foundations */
/* Repositories, not pages: a compact list under the cards, with no artwork,
   saying where each one is used and that its link leaves for GitHub. */
.ecosystem-foundations {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.ecosystem-foundations__head { display: grid; gap: 6px; margin-bottom: 18px; max-width: 64ch; }
.ecosystem-foundations__head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ecosystem-foundations ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ecosystem-foundation {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  background: var(--ground);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-left: 2px solid var(--card-accent);
}
.ecosystem-foundation:hover,
.ecosystem-foundation:focus-visible { background: color-mix(in srgb, var(--card-accent) 7%, var(--ground)); }
.ecosystem-foundation__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 600 15px/1.3 var(--eco-mono);
  color: var(--card-accent);
}
.ecosystem-foundation__out { color: var(--muted); font: 500 12px/1 var(--eco-sans); white-space: nowrap; }
.ecosystem-foundation__what { color: var(--ink); font-size: 14px; line-height: 1.5; }
.ecosystem-foundation__used { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ------------------------------------------------------------- the folds */
.folds > h2 { margin-bottom: 8px; }
.fold { border-top: 1px solid var(--line); }
.fold:last-of-type { border-bottom: 1px solid var(--line); }
.fold > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title mark" "teaser mark";
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: "+";
  grid-area: mark;
  align-self: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font: 400 18px/26px var(--eco-mono);
  text-align: center;
  transition: transform 160ms ease;
}
.fold[open] > summary::after { content: "−"; }
.fold > summary:hover::after,
.fold > summary:focus-visible::after { color: var(--eco-current); border-color: currentColor; }
.fold > summary:focus-visible { outline: 2px solid var(--eco-current); outline-offset: 4px; }
.fold__title { grid-area: title; font-size: 20px; font-weight: 600; line-height: 1.3; }
.fold__teaser { grid-area: teaser; color: var(--muted); font-size: 15px; line-height: 1.5; }
.fold__body { padding: 0 0 28px; }
.fold__body > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .fold > summary::after { transition: none; } }

/* -------------------------------------------------------------- the cards */
.ecosystem-more {
  position: relative;
  padding: clamp(56px, 8vw, 88px) 0;
  border-bottom: 1px solid var(--line);
}
.ecosystem-more__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  align-items: end;
  gap: 28px 40px;
  margin-bottom: 28px;
}
.ecosystem-kicker {
  margin: 0 0 12px;
  color: var(--eco-current);
  font: 600 12px/1.4 var(--eco-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ecosystem-more h2 { margin: 0; max-width: 18ch; }
.ecosystem-more__intro {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: stretch;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.ecosystem-card {
  --card-accent: var(--eco-current);
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 280px;
  padding: 22px 22px 20px;
  display: grid;
  grid-template-rows: 2.9em 56px auto minmax(4.6em, 1fr) auto;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
}
.ecosystem-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 60%);
}
.ecosystem-card:hover::before,
.ecosystem-card:focus-visible::before { opacity: 1; }
.ecosystem-card[aria-current="page"] { box-shadow: inset 3px 0 0 var(--card-accent); }
.ecosystem-card__index {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  color: var(--card-accent);
  font: 600 12px/1.35 var(--eco-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ecosystem-card__index span:last-child {
  color: var(--muted);
  letter-spacing: 0.02em;
  font-size: 12px;
  text-align: left;
  text-transform: none;
}
.ecosystem-card__glyph {
  margin: 0;
  align-self: end;
  height: 56px;
  display: flex;
  align-items: flex-end;
  color: var(--card-accent);
  font: 400 clamp(18px, 8cqw, 30px)/1 var(--eco-mono);
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
}
.ecosystem-card { container-type: inline-size; }
.ecosystem-card h3 {
  margin: 14px 0 8px;
  color: inherit;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.15;
}
.ecosystem-card p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.ecosystem-card__go {
  margin-top: 18px;
  align-self: end;
  color: var(--card-accent);
  font: 600 13px/1.3 var(--eco-sans);
  letter-spacing: 0;
}

.contact-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  margin: 28px 0 8px;
  border: 1px solid var(--line);
  background: var(--line);
}
.contact-card a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 22px 24px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
.contact-card a span {
  color: var(--muted);
  font-weight: 450;
  font-size: 13px;
  font-family: var(--eco-mono);
  overflow-wrap: anywhere;
}
.contact-card a:hover,
.contact-card a:focus-visible { color: var(--eco-current); }
.contact-card a:hover span,
.contact-card a:focus-visible span { color: var(--eco-current); }

/* ------------------------------------------------- tools-core, same system */
body[data-project="tools-core"]::before { content: none; display: none; }
/* header#top sets padding with an id, which beats a class. Repeat the id. */
body[data-project="tools-core"] header#top.hero {
  min-height: 0;
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line);
}
body[data-project="tools-core"] .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-right: 0;
  min-height: 0;
}
body[data-project="tools-core"] h1 {
  max-width: 14ch;
  margin: 0 0 20px;
  font-family: var(--eco-sans);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
body[data-project="tools-core"] h1 em { font-style: normal; color: var(--eco-current); }
body[data-project="tools-core"] h2 {
  font-family: var(--eco-sans);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
body[data-project="tools-core"] .intro {
  max-width: 42rem;
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.5;
}
body[data-project="tools-core"] #contact :is(.eyebrow, h2, p) {
  max-width: var(--prose, 68ch);
  margin-left: 0;
  margin-right: 0;
}
body[data-project="tools-core"] .hero-note {
  max-width: 46rem;
  border-top: 0;
  padding-top: 0;
  color: var(--muted);
  font: 400 15px/1.55 var(--eco-sans);
}
body[data-project="tools-core"] .hero-note strong {
  margin-bottom: 10px;
  color: var(--ink);
  font: 600 12px/1.4 var(--eco-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-project="tools-core"] .section-head { align-items: start; gap: 16px 40px; }
body[data-project="tools-core"] .section-copy { color: var(--muted); font-size: 16px; line-height: 1.5; }
body[data-project="tools-core"] .project {
  min-height: 0;
  align-items: stretch;
  background: var(--surface);
}
body[data-project="tools-core"] .project h3 { margin: 12px 0 12px; }
body[data-project="tools-core"] .project p { max-width: 46ch; }
body[data-project="tools-core"] .project-media {
  min-height: 0;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--eco-current) 7%, var(--surface));
}
body[data-project="tools-core"] .project-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: none;
  border-radius: 8px;
}
body[data-project="tools-core"] .project:hover .project-media img { opacity: 1; transform: none; }
body[data-project="tools-core"] .project-media::after { content: none; }
body[data-project="tools-core"] .tools-plate { aspect-ratio: auto; min-height: 200px; }
body[data-project="tools-core"] .face-plate,
body[data-project="tools-core"] .tool-tree {
  width: min(100%, 460px);
  color: var(--ink);
  font: 500 15px/1.6 var(--eco-mono);
}
body[data-project="tools-core"] .face-plate b,
body[data-project="tools-core"] .tool-tree b,
body[data-project="tools-core"] .tool-tree strong { color: var(--eco-current); font-weight: 650; }
body[data-project="tools-core"] .project-no,
body[data-project="tools-core"] .project-meta,
body[data-project="tools-core"] .tool-card .tag,
body[data-project="tools-core"] .copy,
body[data-project="tools-core"] .lab-status,
body[data-project="tools-core"] .beat-readout,
body[data-project="tools-core"] .principle .n,
body[data-project="tools-core"] .safety {
  font-size: 12px !important;
  line-height: 1.45;
  color: var(--muted);
}
body[data-project="tools-core"] .project-no { color: var(--eco-current); }
body[data-project="tools-core"] .tool-card h3 { margin: 16px 0 12px; }
body[data-project="tools-core"] .tool-card p { min-height: 0; margin-bottom: 16px; }
body[data-project="tools-core"] .wrap {
  width: min(var(--eco-frame), calc(100% - 48px));
  max-width: var(--eco-frame);
}

@media (max-width: 900px) {
  body[data-project="tools-core"] header#top.hero { padding: 28px 0 40px; }
  .ecosystem-more__head,
  body[data-project="tools-core"] .hero-grid,
  body[data-project="tools-core"] .section-head,
  body[data-project="tools-core"] .project { grid-template-columns: 1fr; }
  .ecosystem-rail__identity-path { display: none; }
  .wrap, .ecosystem-rail__inner { width: min(var(--eco-frame), calc(100% - 32px)); }
}
@media (max-width: 640px) {
  .ecosystem-rail__links { left: 16px; right: 16px; width: auto; grid-template-columns: 1fr; }
  .ecosystem-card { min-height: 0; }
  h1 { font-size: clamp(36px, 10vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-card::before,
  .ecosystem-rail__links,
  .ecosystem-rail__chevron { transition: none; }
  html { scroll-behavior: auto; }
}