/* Tech Labs is isolated from the existing homepage stylesheet. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; display: grid; place-items: center; background: #10172c; }
/* The complete artwork always remains visible; icons scale with it.
   On tall screens, matching dark margins frame the illustration. */
.lab-scene { position: relative; width: 100%; max-width: calc(100svh * 2048 / 1294); aspect-ratio: 2048 / 1294; isolation: isolate; }
.lab-background { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.lab-icon { position: absolute; left: var(--x); top: var(--y); width: var(--width); padding: 0; margin: 0; border: 0; background: transparent; appearance: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lab-icon img { display: block; width: 100%; height: auto; user-select: none; transition: transform 220ms ease, filter 220ms ease; transform-origin: 50% 80%; }
.lab-icon:hover, .lab-icon:focus-visible { z-index: 2; }
@media (hover: hover) {
  .lab-icon:hover img { transform: translateY(-3%) scale(1.07); filter: drop-shadow(0 0 7px #ffe78ecc) drop-shadow(0 5px 8px #060b3066); }
}
.lab-icon:focus-visible { outline: 2px solid #fff3b3; outline-offset: 5px; border-radius: 8px; }
.lab-icon:focus-visible img { transform: translateY(-3%) scale(1.07); filter: drop-shadow(0 0 7px #ffe78ecc); }
@media (prefers-reduced-motion: reduce) {
 .lab-icon img { transition: none; }
 .lab-icon:hover img, .lab-icon:focus-visible img { transform: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ICON POSITIONS — edit these three values to move or resize any icon.
   --x = distance from left edge; --y = distance from top edge;
   --width = icon width. All are percentages of the artwork canvas.
   Each image retains its own proportions automatically. */
.icon--gear { --x: 39.8496%; --y: 26.5522%; --width: 4.3442%; }
.icon--music { --x: 48.2874%; --y: 26.5522%; --width: 6.2657%; }
.icon--led { --x: 55.8062%; --y: 27.4769%; --width: 3.9265%; }
.icon--speaker { --x: 18.2122%; --y: 39.4980%; --width: 8.2707%; }
.icon--squid { --x: 31.7460%; --y: 57.0674%; --width: 9.0226%; }
.icon--water { --x: 41.7711%; --y: 48.7450%; --width: 8.7719%; }
.icon--bag { --x: 56.8087%; --y: 51.6513%; --width: 9.1896%; }
.icon--brain { --x: 67.2515%; --y: 52.9723%; --width: 15.3718%; }