@layer components {
  .model-row { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; align-items: start; margin-bottom: 8px; }
  .model-row .section-head { grid-column: 1; margin-bottom: 0; }

  .families { position: relative; display: grid; grid-template-columns: auto 200px auto; width: fit-content; margin: 0 auto; column-gap: 24px; row-gap: 16px; }
  .families-head { grid-column: 2; grid-row: 1; justify-self: center; white-space: nowrap; margin: 40px 0 8px; text-align: center; }
  .families-head h3 { font-size: 26px; letter-spacing: -0.02em; }
  .families-head p { margin-top: 10px; font-size: 16px; color: var(--muted); }
  .families-lines { position: absolute; inset: 0; pointer-events: none; stroke: var(--line-2); stroke-width: 1; fill: none; transition: opacity 0.55s var(--ease); }
  .families-hub {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    justify-self: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: var(--bg-2);
    color: var(--accent);
    display: grid;
    place-items: center;
  }
  .families-hub svg { width: 22px; height: 22px; }
  .family {
    position: relative;
    display: grid;
    grid-template-columns: 80px auto;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    transform-origin: left center;
    transition: transform 0.55s var(--ease), filter 0.55s var(--ease), opacity 0.55s var(--ease);
  }
  .family:nth-of-type(odd) { grid-column: 1; grid-template-columns: auto 80px; justify-items: end; text-align: right; transform-origin: right center; }
  .family:nth-of-type(odd) .family-mark { order: 2; }
  .family:nth-of-type(even) { grid-column: 3; }
  .family:nth-of-type(-n + 2) { grid-row: 2; }
  .family:nth-of-type(n + 3) { grid-row: 3; }
  .family-mark { width: 80px; height: 80px; color: var(--ghost); transition: color 0.6s var(--ease), transform 0.6s var(--ease); }
  .family-mark svg { display: block; width: 100%; height: 100%; stroke-width: 6; }
  .family-name {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(28px, 3.1vw, 44px);
    letter-spacing: -0.05em;
    line-height: 0.95;
    transition: color 0.5s var(--ease);
  }
  .families:hover .family { filter: blur(3px); opacity: 0.45; }
  .families:hover .families-lines { opacity: 0; }
  .families:hover .family:hover { filter: none; opacity: 1; transform: scale(1.03); }
  .family:hover .family-name { color: var(--accent); }
  .family:hover .family-mark { color: var(--line-2); transform: translateY(-6px); }

  @media (max-width: 1024px) {
    .families { grid-template-columns: minmax(0, 1fr); width: auto; gap: 0; }
    .families-head { grid-column: 1; white-space: normal; }
    .families-hub, .families-lines { display: none; }
    .family, .family:nth-of-type(odd), .family:nth-of-type(even) { grid-column: 1; grid-row: auto; grid-template-columns: 40px minmax(0, 1fr); justify-items: start; text-align: left; gap: 16px; padding: 14px 0; }
    .family:nth-of-type(odd) .family-mark { order: 0; }
    .family-mark { width: 40px; height: 40px; }
    .family-name { font-size: 28px; }
  }
  @media (max-width: 900px) {
    .model-row { grid-template-columns: minmax(0, 1fr); }
  }
}