/* The existing SysML star supplies the shared texture and cool blue identity. */
.brand-star {
  flex: none;
  object-fit: contain;
  animation: stellar-spin 150s linear infinite;
}
.footer-wordmark { display: inline-flex; gap: 12px; align-items: center; }
.horizon-list .brand-star { width: 42px; height: 42px; margin-top: 3px; }
.icon-family { margin: 38px 0 62px; }
.icon-family h2 { margin-bottom: 25px; }
.icon-family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.icon-family-grid figure { margin: 0; padding: 24px 20px; border: 1px solid #2a3442; border-radius: 8px; background: #0e141e; }
.icon-family-grid .icon-display { display: grid; place-items: center; height: 150px; }
.icon-family-grid .icon-display img { width: 126px; height: 126px; }
.icon-family-grid figcaption { margin-top: 16px; font-size: 16px; font-weight: 500; }
.icon-family-grid p { color: #a8b6c7; font-size: 12px; line-height: 1.6; margin: 10px 0 18px; }
.icon-sizes { display: flex; align-items: center; gap: 16px; border-top: 1px solid #2a3442; padding-top: 18px; }
.icon-family-note { color: #9daabd; font-size: 12px; line-height: 1.8; margin-top: 20px; }
@media (max-width: 1000px) { .icon-family-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .icon-family-grid { gap: 14px; } .icon-family-grid figure { padding: 16px 12px; } .icon-family-grid .icon-display { height: 108px; } .icon-family-grid .icon-display img { width: 94px; height: 94px; } .icon-sizes { gap: 10px; } .icon-family-grid figcaption { font-size: 15px; } .icon-family-grid p { font-size: 11px; } }
.live-star { --stellar-filter: none; --spin-duration: 100s; }
.live-star::after { content: none; }
.live-star::before {
  inset: -9%;
  background: url('assets/sysml-stellar-reference.png') center / cover no-repeat;
  border-radius: 50%;
  opacity: .55;
  mask-image: radial-gradient(circle, transparent 43%, #000 51%, transparent 69%);
  filter: var(--stellar-filter) blur(5px);
  animation: stellar-spin var(--spin-duration) linear infinite;
}
.live-star .stellar-core {
  inset: 9%;
  background: #000;
  border: max(3px, calc(var(--size, 140px) * .028)) solid #000;
  box-shadow: 0 0 0 max(3px, calc(var(--size, 140px) * .022)) #000;
}
.live-star .stellar-core img {
  width: 100%;
  height: 100%;
  max-width: none;
  top: 0;
  left: 0;
  border-radius: 50%;
  filter: var(--stellar-filter);
  mask-image: radial-gradient(circle, #000 53%, #000 61%, transparent 71%);
  animation: stellar-spin var(--spin-duration) linear infinite;
}
.live-star.amber { --stellar-filter: hue-rotate(185deg) saturate(1.25); --spin-duration: 112s; }
.live-star.violet { --stellar-filter: hue-rotate(47deg) saturate(.8); --spin-duration: 92s; }
.live-star.teal { --stellar-filter: hue-rotate(-43deg) saturate(.9); --spin-duration: 124s; }
.sysml-node { --size: 230px; left: 40%; top: 17%; }
.cli-node { --size: 128px; left: 3%; top: 48%; }
.codbase-node { --size: 72px; top: 7%; left: 12%; }
.swaml-node { --size: 78px; top: 69%; left: 65%; }
.large-star { --size: 390px; }
.identity-star { --size: 250px; }
.star-label { margin-top: 7px; }
.brand-star:not(.in-view),
.live-star:not(.in-view)::before,
.live-star:not(.in-view) .stellar-core img {
  animation-play-state: paused;
}
@media (max-width: 1000px) {
  .sysml-node { --size: 190px; left: 37%; top: 19%; }
  .cli-node { --size: 109px; left: 1%; }
  .codbase-node { --size: 63px; left: 6%; }
  .swaml-node { --size: 68px; left: 65%; }
  .large-star { --size: 305px; }
}
@media (max-width: 680px) {
  .brand .brand-star { width: 32px; height: 32px; }
  .sysml-node { --size: 179px; left: 41%; top: 25%; }
  .cli-node { --size: 112px; left: 1%; top: 54%; }
  .codbase-node { --size: 65px; left: 9%; top: 10%; }
  .swaml-node { --size: 68px; left: 67%; top: 74%; }
  .large-star { --size: 288px; }
  .identity-star { --size: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-star, .live-star::before, .live-star .stellar-core img { animation: none; }
}