/* Scoped to optional companions in the isolated six-product starter. */
.ex-stage.le-starter-appearance, .le-starter-targets { --ex-quasar: var(--ex-quasar-mint, #A2E1CF); }
.le-starter-product { position: absolute; z-index: 3; pointer-events: none; isolation: isolate; }
.le-starter-product[hidden], .le-starter-target[hidden] { display: none !important; }
.le-starter-product > img { display: block; width: 100%; height: auto; max-width: none; max-height: none; }
.le-starter-glass-rear { position: absolute; left: 23%; top: 2%; width: 77%; aspect-ratio: 868 / 537; border-radius: 3.3% / 5.3%; background: url("../img/metstrade/stand/quasar-glass-10in.jpg") center / 103.7% 105.6% no-repeat; }
.le-starter-glass > img { position: absolute; z-index: 1; left: 0; bottom: 0; width: 40%; }
.le-starter-wires { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Share the artwork clock; route points use its unanimated measured box. */
.ex-stage.ex-ready:not(.ex-overview-open):not(.ex-measuring) .le-starter-wires-focused {
  animation: ex-art-float 7s ease-in-out var(--float-delay, 0ms) infinite;
}
.le-starter-wire, .le-starter-wire-glow { fill: none; stroke: var(--ex-quasar, #A2E1CF); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Match STAR-Tank's quiet data link: static dashes without a continuous halo. */
.le-starter-wire-glow { display: none; }
.le-starter-wire { stroke-width: 2; stroke-dasharray: 3 9; opacity: .5; }
.le-starter-targets { position: fixed; inset: 0; z-index: 69; pointer-events: none; }
.le-starter-target { position: absolute; transform: translateX(-50%); border: 0; padding: 0; background: transparent; color: var(--ex-ink, #eaf2fd); pointer-events: auto; cursor: default; font: inherit; font-weight: 600; font-size: 13px; line-height: 1.3; }
.le-starter-target > span {
  position: absolute; top: var(--starter-label-top, 100%); left: 50%; transform: translateX(-50%);
  width: calc(var(--starter-base-label-width, 188px) * var(--starter-label-width, 1)); min-height: calc(48px * var(--overview-ui-scale, 1));
  display: flex; flex-direction: column; justify-content: center; gap: calc(5px * var(--overview-ui-scale, 1)); box-sizing: border-box;
  padding: calc(6px * var(--overview-ui-scale, 1)) calc(10px * var(--overview-ui-scale, 1));
  border: 1px solid color-mix(in srgb, var(--ex-quasar, #A2E1CF) 30%, #20304a); border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ex-quasar, #A2E1CF) 10%, #0e1a2b), #0b1422 80%);
  box-shadow: 0 12px 24px -12px #000, inset 0 1px rgba(255,255,255,.07), 0 0 24px color-mix(in srgb, var(--ex-quasar, #A2E1CF) 12%, transparent);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.le-starter-target:focus-visible { outline: 2px solid #8fc5ff; outline-offset: 5px; border-radius: 10px; }
.le-editing .le-starter-target { cursor: grab; touch-action: none; }
.le-editing .le-starter-target:active { cursor: grabbing; }
.le-editing .le-starter-target.le-selected { outline: 1px dashed #aad0ff; outline-offset: 7px; border-radius: 14px; }
.le-starter-target:focus-visible > span { transform: translate(-50%, -3px); border-color: var(--ex-quasar, #A2E1CF); box-shadow: 0 12px 32px -12px #000, 0 0 20px color-mix(in srgb, var(--ex-quasar, #A2E1CF) 15%, transparent); }
@media (hover: hover) {
  .le-starter-target:hover > span { transform: translate(-50%, -3px); border-color: var(--ex-quasar, #A2E1CF); box-shadow: 0 12px 32px -12px #000, 0 0 20px color-mix(in srgb, var(--ex-quasar, #A2E1CF) 15%, transparent); }
}
/* One gentle photo zoom in either direction; cable blends read this timing. */
@media (prefers-reduced-motion: no-preference) {
  .ex-stage.le-starter-appearance.ex-ready:not(.ex-mobile) .ex-world.ex-spring {
    transition-duration: .72s;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ex-stage.ex-ready .le-starter-wires-focused { animation: none !important; }
  .le-starter-target > span { transition: none; }
  .le-starter-target:hover > span, .le-starter-target:focus-visible > span { transform: translateX(-50%); }
}
/* Name, category and label width are independent of image and cable geometry. */
.ex-stage.le-starter-appearance .ex-overview-product > span { flex: 0 0 auto; width: calc(100% * var(--starter-label-width, 1)); max-width: none; height: auto; }
.ex-stage.le-starter-appearance .ex-overview-product strong,
.le-starter-appearance .le-starter-target strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.ex-stage.le-starter-appearance:not(.ex-mobile) .ex-overview-product strong { font-size: calc(14px * var(--overview-ui-scale, 1) * var(--starter-name-size, 1)); }
.ex-stage.le-starter-appearance:not(.ex-mobile) .ex-overview-product[data-overview-cell="storage"] strong { font-size: calc(16px * var(--overview-ui-scale, 1) * var(--starter-name-size, 1)); }
.ex-stage.le-starter-appearance:not(.ex-mobile) .ex-overview-product em { font-size: calc(10px * var(--overview-ui-scale, 1) * var(--starter-category-size, 1)); }
.ex-stage.le-starter-appearance.ex-mobile .ex-overview-product strong { font-size: calc(12px * var(--starter-name-size, 1)); }
.ex-stage.le-starter-appearance .ex-overview-product em[hidden],
.le-starter-appearance .le-starter-target em[hidden] { display: none !important; }
.le-starter-appearance .le-starter-target strong { font-size: calc(14px * var(--overview-ui-scale, 1) * var(--starter-name-size, 1)); font-weight: 600; }
.le-starter-appearance .le-starter-target em { font: calc(10px * var(--overview-ui-scale, 1) * var(--starter-category-size, 1))/1.2 var(--mono, monospace); font-style: normal; text-transform: uppercase; color: var(--ex-quasar, #A2E1CF); letter-spacing: .12em; white-space: normal; overflow-wrap: anywhere; }
.le-starter-appearance.le-starter-mobile .le-starter-target > span { min-height: 44px; padding: 5px; gap: 3px; border-radius: 7px; }
.le-starter-appearance.le-starter-mobile .le-starter-target strong { font-size: calc(12px * var(--starter-name-size, 1)); line-height: 1.15; }
.le-starter-appearance.le-starter-mobile .le-starter-target em { display: none; }