#viewerKeepsakeFrame { position: fixed; inset: 0; display: block; width: 100%; height: 100vh; height: 100dvh; padding: 0; border: 0; background: #f8f0ef; }
#viewerKeepsakeFrame[hidden] { display: none; }

/* Reuse Love Lock's entry card, then keep one compact master sound control. */
.l4u-keepsake-sound {
  position: fixed;
  z-index: 80;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.25rem);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d9bdca;
  border-radius: 50%;
  background: #fff8f0f5;
  color: #694651;
  box-shadow: 0 2px 12px #38203016;
  cursor: pointer;
  touch-action: manipulation;
}
.l4u-keepsake-sound[hidden] { display: none; }
.l4u-keepsake-sound svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.l4u-keepsake-sound[aria-pressed=false] .l4u-keepsake-sound-waves,
.l4u-keepsake-sound[aria-pressed=true] .l4u-keepsake-sound-muted { display: none; }
.l4u-keepsake-sound:hover { background: #fff; }
.l4u-keepsake-sound:focus-visible { outline: 2px solid #9f5f77; outline-offset: 3px; }
.l4u-keepsake-volume-gate {
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  overflow: auto;
  color: #402d38;
}
.l4u-keepsake-volume-gate::backdrop {
  background: rgba(29, 18, 31, .46);
  backdrop-filter: blur(10px) saturate(.9);
}
.l4u-keepsake-volume-gate .l4u-letter-volume-card { max-width: 100%; }
.l4u-keepsake-volume-label {
  display: block;
  margin-top: .85rem;
  color: #694f5b;
  font-size: .7rem;
  font-weight: 600;
}
#viewerKeepsakeVolume {
  display: block;
  width: min(100%, 17.5rem);
  min-height: 32px;
  margin: .1rem auto 0;
  accent-color: #9f5f77;
}
.l4u-keepsake-volume-gate .l4u-letter-volume-button { margin-top: .45rem; }
.l4u-keepsake-enter-muted {
  display: block;
  min-height: 44px;
  margin: .3rem auto 0;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #694f5b;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.l4u-keepsake-volume-gate :is(button, input):focus-visible { outline: 2px solid #9f5f77; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .l4u-keepsake-volume-gate .l4u-letter-volume-card,
  .l4u-keepsake-volume-gate .l4u-letter-volume-emblem i,
  .l4u-keepsake-volume-gate .l4u-letter-volume-equalizer i { animation: none; }
}