/* Web-side sizing for the shared Somatro living core.
   The component's geometry (160px mark, 760px ambient, ring pool) is frozen, so the
   whole stage is SCALED — the same technique the 720p variant uses — rather than
   re-authoring any radius. Nothing about the choreography changes. */
/* the connecting/verification variants carry the full 160px mark, so scale = target / 160.
   Box size matches the painted mark exactly, so the flow never sees an overflowing node. */
.slc-nav { width: 36px; height: 36px; }
.slc-nav .slc-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.225); }
.slc-nav-sm { width: 28px; height: 28px; }
.slc-nav-sm .slc-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.175); }
.slc-brand { width: 96px; height: 96px; }
.slc-brand .slc-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.60); }

/* Web-side INTENSITY only — same geometry, same beat table, same envelope.
   Scaling the stage down also shrank the halo and rings, which at TV alphas read
   almost invisible on a bright web navbar, so the ambient halo, the beat glow and
   the ring colour are lifted. The glow's per-frame opacity is still written by the
   component from the heartbeat envelope, so halo and ripples stay in sync. */
.slc-nav .slc-amb, .slc-nav-sm .slc-amb, .slc-brand .slc-amb {
  transform-origin: 50% 50%;
  scale: 1.75;
  background: radial-gradient(closest-side circle at 50% 50%, rgba(18,181,201,.58) 0%, rgba(30,150,220,.20) 20%, rgba(124,77,255,.09) 38%, rgba(124,77,255,.035) 58%, rgba(124,77,255,.012) 76%, transparent 92%);
  filter: blur(6px);
  mask-image: radial-gradient(closest-side circle at 50% 50%, #000 40%, rgba(0,0,0,.5) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 50%, #000 40%, rgba(0,0,0,.5) 70%, transparent 100%);
}
.slc-nav .slc-glow, .slc-nav-sm .slc-glow, .slc-brand .slc-glow {
  background: radial-gradient(closest-side circle at 50% 50%, rgba(163,240,250,.9) 0%, rgba(124,77,255,.24) 30%, rgba(124,77,255,.06) 54%, transparent 80%);
  filter: blur(3px);
}
.slc-nav .slc-rings i, .slc-nav-sm .slc-rings i, .slc-brand .slc-rings i {
  --rc: rgba(176,243,255,.92);
  --rc2: rgba(176,243,255,.36);
}

/* The stage is larger than the box it is scaled into, and grid safe-alignment
   start-aligns an overflowing item, which pushed the mark off centre. Centre it
   explicitly instead of relying on place-items. */
.slc-nav, .slc-nav-sm, .slc-brand { position: relative; }