/* Preview only: the supplied Home signature and one compact navigation capsule. */
:root body > .preview-header.preview-header {
  display:flex!important;
  justify-content:space-between;
  gap:12px!important;
}
:root .preview-header .preview-wordmark {
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  text-decoration:none;
}
:root .preview-header .preview-wordmark > img {
  display:block;
  width:160px;
  height:auto;
  max-width:none;
}
.preview-header-controls {
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  flex:none;
  height:30px;
  padding:0 8px 0 4px;
  border-radius:15px;
  background:var(--preview-cream);
  color:var(--preview-plum);
  box-sizing:border-box;
}
:root .preview-header .eva-audio-player {
  width:44px;
  height:44px;
  flex:0 0 44px;
}
:root .preview-header .eva-melody-button {
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  border-radius:22px;
}
:root .preview-header .eva-melody-mark {
  width:18px;
  height:23px;
}
:root .preview-header .preview-menu-toggle {
  display:block;
  width:72px;
  min-height:44px;
  padding:10px 12px;
  border-radius:22px;
  background:transparent;
  color:var(--preview-plum);
  font-size:14px;
  text-decoration:none;
}
:root .preview-header .preview-nav {
  position:absolute;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-area:auto!important;
  gap:4px 10px!important;
  top:calc(100% + 8px);
  left:auto!important;
  right:0!important;
  width:min(340px,calc(100vw - 40px))!important;
  max-width:none!important;
  max-height:calc(100dvh - 96px);
  margin:0;
  padding:14px 16px!important;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:14px;
  font-size:17px!important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  translate:0 -6px;
  transition:opacity 180ms ease,translate 220ms cubic-bezier(.22,.72,.24,1),visibility 0s linear 220ms;
}
:root .preview-header[data-menu-open] .preview-nav {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  translate:0 0;
  transition-delay:0s;
}
:root .preview-header .preview-nav a {
  min-height:44px;
  padding:10px 12px!important;
  font-size:17px;
  justify-content:flex-start;
}
:root .preview-header .preview-nav a[aria-current] {
  text-decoration:none;
  background:#d798ac26;
}
@media(max-width:1280px) {
  :root .preview-header .preview-wordmark > img { width:136px; }
  .preview-header-controls { height:28px;border-radius:14px; }
  :root .preview-header .preview-nav { max-height:calc(100dvh - 82px); }
}
@media(max-width:360px) {
  /* At 320px, the stable scrollbar leaves 305px: 120 + 130 + 15px gap. */
  :root .preview-header .preview-wordmark > img { width:120px; }
}
@media(prefers-reduced-motion:reduce) {
  :root .preview-header .preview-nav {
    translate:0 0!important;
    transition:opacity 120ms ease,visibility 0s linear 120ms!important;
  }
  :root .preview-header[data-menu-open] .preview-nav { transition-delay:0s!important; }
}

/* Shared preview interaction styling: no exterior focus rings on controls,
   photos or anchor targets. Keep keyboard location visible through soft fill. */
:root body :is(:focus,:focus-visible),
:root body :is(:focus,:focus-visible) :is(.eva-video-play,.video-action) {
  outline:none!important;
  outline-offset:0!important;
}
:root .preview-header-controls:has(:focus-visible) {
  background:#eedde1;
}
:root .preview-header .preview-nav a:focus-visible {
  background:#d798ac26;
}
:root .preview-header .preview-wordmark:focus-visible {
  opacity:.8;
}
:root body :is(button,summary):focus-visible:not(.preview-menu-toggle):not(.eva-melody-button):not(.eva-video-play) {
  background-color:#d798ac26;
}