:root {
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-bg: #ffffff;
  --tt-fg: #2f2f2f;
}

.t-tt-wrap {
  position: relative;
  display: inline-block;
}
.t-tt {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 0) scale(var(--tt-scale));
  transform-origin: 50% 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tt-bg);
  color: var(--tt-fg);
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.05),
    0 4px 42px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  /* Default rule controls the LEAVE state. transition-delay
     stays unset so leaving plays without delay. */
  transition:
    opacity   var(--tt-out-dur) var(--tt-out-ease),
    transform var(--tt-out-dur) var(--tt-out-ease);
}
/* The 50ms delay belongs ONLY to the hover rule so leaving
   the trigger snaps the delay back to 0 and the disappear
   plays immediately. */
.t-tt-wrap:hover .t-tt,
.t-tt-trigger:focus-visible + .t-tt {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-duration: var(--tt-in-dur);
  transition-timing-function: var(--tt-in-ease);
  transition-delay: var(--tt-delay);
}

@media (prefers-reduced-motion: reduce) {
  .t-tt { transition: none !important; }
}

.record--interactive{min-width:0}.record--interactive[hidden]{display:none}.record--interactive h3 a{color:inherit;text-decoration:none}.record--interactive h3 a:hover{text-decoration:underline;text-underline-offset:4px}.record--interactive .record-art{position:relative;overflow:visible;aspect-ratio:1}.record-cover-link{display:block;width:100%;height:100%;overflow:hidden}.record-cover-link>img{display:block;width:100%;height:100%;object-fit:cover}.record-platforms{position:absolute;bottom:12px;left:50%;transform:translate(-50%,0);display:flex;gap:6px;padding:6px;border:1px solid #ffffff66;border-radius:32px;background:rgba(255,255,255,.95);box-shadow:0 4px 20px #0002;z-index:3}.record-platform{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#111;background:transparent}.record-platform img{width:22px;height:22px;object-fit:contain}.record-platform:hover,.record-platform:focus-visible{background:#e8c65d}.record-platform:focus-visible,.record-cover-link:focus-visible{outline:2px solid #ae8625;outline-offset:3px}.record-platforms .t-tt{font:500 12px/1.3 Inter,sans-serif;z-index:5}.record--interactive .cover-glare{pointer-events:none}
@media(hover:hover) and (pointer:fine){.record-platforms{opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity 160ms ease-out,transform 160ms ease-out}.record--interactive:hover .record-platforms,.record--interactive:focus-within .record-platforms{opacity:1;transform:translate(-50%,0);pointer-events:auto}}
@media(max-width:520px){.record-platforms{position:relative;left:auto;bottom:auto;transform:none;justify-content:flex-start;flex-wrap:wrap;gap:0;padding:4px 0;background:transparent;border:0;box-shadow:none;opacity:1;pointer-events:auto;border-radius:0}.record--interactive .record-art{aspect-ratio:auto}.record-cover-link{aspect-ratio:1;height:auto}.record-platform{width:40px;height:44px}.record-platform img{width:20px;height:20px}.record--interactive:hover .record-platforms,.record--interactive:focus-within .record-platforms{transform:none}.record--interactive h3{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.record-platforms{transition:none;transform:translate(-50%,0)} }
@media(max-width:520px) and (prefers-reduced-motion:reduce){.record-platforms{transform:none}}