/* ============================================================================
   AI Ecologist - storytelling site
   Graph of Life brand, dark instrument mode. Color carries meaning:
   teal = connection, green = living signal, coral = risk/keystone, amber = caution.
   ========================================================================== */
@import url("./vendor/fonts.css");

:root {
  /* ground */
  --bg: #06141f;
  --bg-2: #081b29;
  --panel: #0b2030;
  --panel-2: #0e2738;
  --navy: #0e2a47;
  --abyss: #08203a;
  --hairline: #15293a;
  --hairline-2: #1d3447;
  --grid: #102234;

  /* ink */
  --text: #eaf2f2;
  --muted: #8fa3ad;
  --faint: #5c6e78;

  /* semantic accents */
  --teal: #1aa89b;
  --teal-bright: #2bd4c4;
  --green: #3ad6a3;
  --coral: #e8694d;
  --amber: #f2a24e;
  --purple: #a78bfa;
  --sand: #e9e1cc;

  /* class colors (Anatomy instrument) */
  --c-hub: #1aa89b;
  --c-producer: #3ad6a3;
  --c-connector: #a78bfa;
  --c-apex: #e8694d;
  --c-background: #586b77;

  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* layout */
  --maxw: 1280px;
  --header-h: 58px;
  --claim-h: 34px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* prevents horizontal scroll without creating a scroll container (keeps position:sticky working) */
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: var(--teal-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* skip-nav (works on mobile where rail is hidden) */
.skip-nav {
  position: fixed; left: 8px; top: 8px; z-index: 200;
  background: var(--panel); color: var(--text);
  padding: 8px 12px; border: 1px solid var(--teal); border-radius: 6px;
  transform: translateY(-150%); transition: transform 0.18s var(--ease);
  font-family: var(--mono); font-size: 12px;
}
.skip-nav:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Header lockup
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  z-index: 100;
  background: linear-gradient(180deg, rgba(6, 20, 31, 0.92), rgba(6, 20, 31, 0.55));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.lockup { display: flex; align-items: center; gap: 11px; }
.glyph { width: 26px; height: 26px; display: block; }
.lockup__name { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.lockup__name .gol { color: var(--muted); font-weight: 400; }
.lockup__sep { color: var(--faint); }
.lockup__product { color: var(--text); }
.header-nav { display: flex; gap: 20px; align-items: center; }
.header-nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.header-nav a:hover { color: var(--teal-bright); text-decoration: none; }
.header-nav .nav-cta {
  color: var(--bg); background: var(--green);
  padding: 6px 13px; border-radius: 6px; font-weight: 600;
}
.header-nav .nav-cta:hover { background: var(--teal-bright); }
@media (max-width: 760px) {
  .header-nav a:not(.nav-cta) { display: none; }
}

/* ============================================================================
   Scene scaffold: tall section + sticky stage + copy card
   ========================================================================== */
.scene {
  position: relative;
  height: 220vh; /* sticky stage pins for ~1.2 viewport of scroll -> progress 0..1 */
}
.scene--short { height: 160vh; }
.scene--tall { height: 260vh; }
.scene__stage {
  position: sticky; top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.scene__canvas { position: absolute; inset: 0; }
.scene__canvas canvas { display: block; }

/* glassmorphic copy card */
.copy {
  position: absolute;
  z-index: 6;
  max-width: 440px;
  padding: 22px 24px 24px;
  background: linear-gradient(180deg, rgba(11, 32, 48, 0.82), rgba(8, 22, 34, 0.74));
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--teal);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2, 8, 14, 0.5);
}
.copy--tl { top: calc(var(--header-h) + 4vh); left: clamp(16px, 4vw, 56px); }
.copy--tr { top: calc(var(--header-h) + 4vh); right: clamp(16px, 4vw, 56px); }
.copy--bl { bottom: calc(var(--claim-h) + 5vh); left: clamp(16px, 4vw, 56px); }
.copy--br { bottom: calc(var(--claim-h) + 5vh); right: clamp(16px, 4vw, 56px); }
.copy--center {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; border-left: none; border-top: 2px solid var(--teal);
  max-width: 540px;
}
/* the readout row is built for side-anchored cards; in the centred hero it
   wraps to one item per line, and flex-start then left-aligns the short one
   while the long ones fill their row and read as centred. Stack and centre. */
.copy--center .readouts {
  flex-direction: column; align-items: center; gap: 15px; margin-top: 22px;
}
.copy--center .readout { align-items: center; gap: 3px; }
.copy--center .readout__k { max-width: 34ch; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-bright);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.eyebrow .node { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.copy h2 {
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; margin-bottom: 12px;
  text-wrap: balance;
}
.copy h2 em { color: var(--green); font-style: normal; }
.copy__body { color: #cdd9dd; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; text-wrap: pretty; }
.copy__body strong { color: var(--text); font-weight: 600; }

/* readouts */
.readouts {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  margin-top: 18px;
}
.readout { display: flex; flex-direction: column; gap: 2px; }
.readout__v {
  font-family: var(--mono); font-size: 22px; font-weight: 600;
  color: var(--green); font-variant-numeric: tabular-nums; line-height: 1;
}
.readout__v.is-teal { color: var(--teal-bright); }
.readout__v.is-coral { color: var(--coral); }
.readout__v.is-amber { color: var(--amber); }
.readout__k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}

/* data-honesty badge */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge.is-real { color: var(--green); }
.badge.is-real .dot { background: var(--green); box-shadow: 0 0 7px var(--green); }
.badge.is-illustrative { color: var(--muted); }
.badge.is-illustrative .dot { background: var(--faint); border: 1px solid var(--muted); }

/* definition chips (hero) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; justify-content: center; }
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(11, 32, 48, 0.6); color: var(--muted);
}
.chip b { color: var(--text); font-weight: 600; }

/* ============================================================================
   Anatomy instrument (signature scene) - split stage
   ========================================================================== */
.stage--anatomy { display: flex; }
.anatomy__viz { position: absolute; inset: 0; }
/* class filter chips over the canvas */
.classbar {
  position: absolute; z-index: 7;
  top: calc(var(--header-h) + 16px); left: clamp(14px, 3vw, 30px);
  display: flex; flex-wrap: wrap; gap: 8px; max-width: 52%;
}
.classchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(8, 22, 34, 0.78); border: 1px solid var(--hairline);
  color: var(--text); cursor: pointer; transition: border-color 0.15s var(--ease), opacity 0.15s;
}
.classchip:hover { border-color: var(--teal); }
.classchip[aria-pressed="true"] { border-color: var(--teal-bright); background: rgba(26, 168, 155, 0.12); }
.classchip .sw { width: 9px; height: 9px; border-radius: 50%; }
.classchip .ct { color: var(--muted); font-variant-numeric: tabular-nums; }

/* the right-hand structural integrity panel */
.si-panel {
  position: absolute; z-index: 8;
  top: calc(var(--header-h) + 14px); right: clamp(14px, 2.5vw, 28px);
  bottom: calc(var(--claim-h) + 14px);
  width: clamp(320px, 33vw, 430px);
  padding: 20px 20px 18px;
  background: linear-gradient(180deg, rgba(10, 28, 42, 0.92), rgba(7, 20, 31, 0.92));
  border: 1px solid var(--hairline); border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2, 8, 14, 0.55);
  overflow-y: auto;
}
.si-panel__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal-bright);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.si-panel__eyebrow .node { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.si-panel__eyebrow .sub { color: var(--muted); }
.si-score { display: flex; align-items: baseline; gap: 12px; }
.si-score__big {
  font-family: var(--mono); font-weight: 600; font-size: 58px; line-height: 0.9;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.si-score__note { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.si-tier {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--amber); color: var(--amber);
}
.si-desc { font-size: 13px; color: #bccad0; line-height: 1.55; margin-top: 14px; }
.si-desc strong { color: var(--text); }

/* gradient tier bar */
.si-bar { margin-top: 16px; }
.si-bar__track {
  position: relative; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, var(--coral) 0%, var(--amber) 35%, var(--amber) 50%, var(--green) 78%, var(--teal-bright) 100%);
}
.si-bar__marker {
  position: absolute; top: -3px; width: 3px; height: 15px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,0.7);
  transform: translateX(-50%);
}
.si-bar__scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: 0.04em;
}

/* metric card grid */
.si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.si-card {
  padding: 11px 12px; border-radius: 9px;
  background: rgba(14, 39, 56, 0.55); border: 1px solid var(--hairline);
}
.si-card__v { font-family: var(--mono); font-weight: 600; font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.si-card__k { font-size: 11.5px; color: var(--text); margin-top: 3px; font-weight: 600; }
.si-card__d { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }

/* honesty callout */
.callout {
  margin-top: 16px; padding: 12px 14px; border-radius: 9px;
  background: rgba(232, 105, 77, 0.09); border: 1px solid rgba(232, 105, 77, 0.32);
  border-left: 3px solid var(--coral);
  font-size: 12.5px; line-height: 1.5; color: #d7c9bf;
}
.callout strong { color: var(--coral); }

/* keystone highlight card (floating, bottom-left of anatomy) */
.keynote {
  position: absolute; z-index: 7; bottom: calc(var(--claim-h) + 16px); left: clamp(14px, 3vw, 30px);
  max-width: 360px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(11,32,48,0.86), rgba(8,22,34,0.8));
  border: 1px solid var(--hairline); border-left: 2px solid var(--coral); border-radius: 11px;
  backdrop-filter: blur(8px);
}
.keynote h3 { font-size: 15px; margin-bottom: 7px; }
.keynote p { font-size: 12.5px; color: #c2d0d5; line-height: 1.5; }
.keynote .lede { color: var(--green); font-weight: 600; }

@media (max-width: 980px) {
  .si-panel { position: absolute; top: auto; bottom: calc(var(--claim-h) + 10px); right: 10px; left: 10px; width: auto; max-height: 56vh; }
  .classbar { max-width: none; top: calc(var(--header-h) + 10px); }
  .keynote { display: none; }
}

/* ============================================================================
   Atlas scene tooltip
   ========================================================================== */
.atlas-tip {
  position: fixed; z-index: 95; pointer-events: none; opacity: 0;
  padding: 10px 12px; border-radius: 9px; max-width: 240px;
  background: rgba(8, 22, 34, 0.95); border: 1px solid var(--teal);
  font-size: 12px; transition: opacity 0.12s; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.atlas-tip h4 { font-size: 13px; margin: 0 0 5px; }
.atlas-tip .row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.atlas-tip .row b { color: var(--text); font-weight: 600; }
.lens-toggle {
  position: absolute; z-index: 7; top: calc(var(--header-h) + 16px); right: clamp(14px, 3vw, 30px);
  display: flex; gap: 0; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden;
}
.lens-toggle button {
  font-family: var(--mono); font-size: 11px; padding: 7px 12px;
  background: rgba(8,22,34,0.8); color: var(--muted); border: none; cursor: pointer;
}
.lens-toggle button[aria-pressed="true"] { background: rgba(26,168,155,0.16); color: var(--teal-bright); }

/* ============================================================================
   Fragility slider control (inside anatomy panel or its own)
   ========================================================================== */
.removal-ctrl { margin-top: 16px; }
.removal-ctrl label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px;
}
.removal-ctrl input[type="range"] { width: 100%; accent-color: var(--coral); }
.removal-ctrl .live {
  display: flex; gap: 16px; margin-top: 10px; font-family: var(--mono); font-size: 12px;
}
.removal-ctrl .live b { color: var(--coral); font-weight: 600; }

/* ============================================================================
   Progress rail (right edge)
   ========================================================================== */
.rail {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 14px;
}
.rail button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--faint); background: transparent; transition: all 0.2s var(--ease);
  position: relative;
}
.rail button[aria-current="true"] { background: var(--teal-bright); border-color: var(--teal-bright); box-shadow: 0 0 10px var(--teal); transform: scale(1.25); }
.rail button:hover::after {
  content: attr(data-label); position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--text);
  background: rgba(8,22,34,0.95); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--hairline);
}
@media (max-width: 900px) { .rail { display: none; } }

/* ============================================================================
   Persistent claim strip
   ========================================================================== */
.claimbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--claim-h); z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(14px, 4vw, 40px);
  background: rgba(6, 17, 26, 0.95); border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  backdrop-filter: blur(6px);
}
.claimbar .tag {
  color: var(--green); border: 1px solid rgba(58, 214, 163, 0.4); border-radius: 5px;
  padding: 3px 8px; letter-spacing: 0.08em; white-space: nowrap;
}
.claimbar .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claimbar .snap { margin-left: auto; color: var(--faint); white-space: nowrap; }
@media (max-width: 640px) { .claimbar .snap { display: none; } }

/* ============================================================================
   Closing / ask section (normal flow, not sticky)
   ========================================================================== */
.ask {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, var(--bg) 0%, var(--abyss) 100%);
  padding: clamp(60px, 9vh, 110px) clamp(16px, 5vw, 40px) calc(var(--claim-h) + 70px);
  border-top: 1px solid var(--hairline);
}
.ask__wrap { max-width: var(--maxw); margin: 0 auto; }
.instruments {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  margin-bottom: 50px;
}
.instr { background: var(--bg-2); padding: 18px 18px 20px; }
.instr h4 { font-size: 14px; margin-bottom: 6px; color: var(--text); }
.instr h4 .ic { color: var(--teal); }
.instr p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.ask__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .ask__grid { grid-template-columns: 1fr; gap: 30px; } }
.ask h2 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; margin-bottom: 18px; }
.ask h2 em { color: var(--green); font-style: normal; }
.ask__lede { font-size: 17px; color: #cdd9dd; line-height: 1.6; max-width: 48ch; }
.engage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
@media (max-width: 520px) { .engage { grid-template-columns: 1fr; } }
.engage .opt { padding: 14px 15px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-2); }
.engage .opt h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--teal-bright); margin: 0 0 6px; }
.engage .opt p { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.btn--primary { background: var(--green); color: #052017; }
.btn--primary:hover { background: var(--teal-bright); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--teal); text-decoration: none; }

/* factsheet */
.factsheet { background: var(--bg-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px 22px 18px; }
.factsheet h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 16px; }
.fact-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.fact-row:last-child { border-bottom: none; }
.fact-row .k { font-size: 12.5px; color: var(--muted); }
.fact-row .v { font-family: var(--mono); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.fact-row .v small { color: var(--faint); font-size: 10.5px; display: block; }
.factsheet .snapnote { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

.builtby { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 70ch; }
.builtby strong { color: var(--text); }

/* ============================================================================
   Reduced motion: scenes still scroll, canvases render one static frame
   (handled in JS by not looping; here we ensure no transition jank)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .copy, .si-panel, .keynote { backdrop-filter: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; }
}

/* noscript */
.noscript-banner {
  position: fixed; inset: 0; z-index: 999; background: var(--bg); color: var(--text);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px;
}

/* ---- instrument set (capability map), scene: instruments ------------------ */
.iset {
  position: absolute; right: 2.5vw; top: 50%; transform: translateY(-50%);
  width: min(560px, 46vw); max-height: 84vh;
  display: flex; flex-direction: column; gap: 10px; z-index: 3;
}
.iset__tier {
  border: 1px solid var(--hairline); border-radius: 12px; background: rgba(11,32,48,.85);
  padding: 11px 13px 12px; outline: none; cursor: default;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.iset__tier.is-active { background: rgba(14,42,63,.94); border-color: rgba(143,163,173,.34); transform: translateX(-4px); }
.iset__tier.is-ax1 { border-left: 3px solid var(--green); }
.iset__tier.is-ax2 { border-left: 3px solid var(--teal); }
.iset__tier.is-ax3 { border-left: 3px solid var(--purple); }
.iset__tier.is-ax4 { border-left: 3px solid var(--amber); }
.iset__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.iset__head b { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text); }
.iset__head span { font-size: 11px; color: var(--muted); }
.iset__items { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.iset__tier.is-ax1 .iset__items { grid-template-columns: 1fr 1fr; }
.iset__item { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; align-items: baseline; }
.iset__item b { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.25; }
.iset__item span { grid-column: 1 / 2; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.iset__src {
  grid-column: 2 / 3; grid-row: 1 / 2; font-style: normal;
  font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 999px; white-space: nowrap;
}
.iset__src.is-pub { color: var(--teal); border: 1px solid rgba(26,168,155,.42); }
.iset__src.is-ours { color: var(--amber); border: 1px solid rgba(242,162,78,.42); }
.iset__note { font-size: 11px; color: var(--muted); line-height: 1.5; padding: 0 2px; }
@media (max-width: 1100px) {
  .iset { position: static; transform: none; width: auto; max-height: none; margin: 22px 0 0; }
  .iset__items { grid-template-columns: 1fr; }
}