.tuner-object{left:1024px;top:796px;width:238px;height:133px;clip-path:polygon(9.6639% 0%,97.0588% 19.5489%,100% 27.8195%,94.5378% 92.4812%,89.916% 100%,4.2017% 75.188%,0% 66.1654%,6.7227% 8.2707%)}
/* The anchor owns its photograph-aligned bounds. Its SVG uses that same local
   coordinate system and draws only the display, leaving the tuner case intact. */
.tuner-object .tuner-display {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  color: var(--tuner-screen-light, #c9ef9b);
  fill: currentColor;
  fill-opacity: .3;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

/* Optional screen layers: keep the backlight translucent so photographic
   texture and reflections remain visible; redraw digits only if needed. */
.tuner-display .tuner-backlight {
  fill: currentColor;
  fill-opacity: .3;
  filter: drop-shadow(0 0 2px #d1f9a940);
}
.tuner-display .tuner-readout {
  color: var(--tuner-screen-ink, #24351b);
  fill: var(--tuner-screen-ink, #24351b);
  fill-opacity: .88;
}

/* Keyboard navigation retains the existing .object focus ring at every size. */
.tuner-object:focus-visible .tuner-display { opacity: 1; }

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .tuner-object:hover .tuner-display { opacity: 1; }
}

/* Motion preferences remove the fade; the native link and lit state still work. */
html[data-motion=off] .tuner-object .tuner-display { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tuner-object .tuner-display { transition: none; }
}