.pix-hdr-button {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
  width: 264px;
  max-width: 100%;
  height: 72px;
  padding: 0 22px 0 64px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg,#e9bfd1,#c99aaf);
  color: #493745;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 28px #160d1724;
  -webkit-tap-highlight-color: transparent;
}
.pix-hdr-button:focus-visible { outline: 3px solid #e6abc6; outline-offset: 6px; }
.pix-hdr-button:disabled { cursor: default; }
.pix-hdr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pix-hdr-button .pix-hdr-label { position: relative; pointer-events: none; }
.pix-hdr-fallback-flower { position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; fill: #fff0f7; pointer-events: none; }
.pix-hdr-ready .pix-hdr-fallback-flower { visibility: hidden; }

/* Decorations use small transparent canvases, never a page-sized HDR overlay. */
.pix-hdr-album-mark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  vertical-align: middle;
  pointer-events: none;
}
.pix-hdr-album-mark .pix-hdr-fallback-flower,
.pix-hdr-spark .pix-hdr-fallback-flower {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #d899b5;
}
.pix-hdr-album-mark.is-active .pix-hdr-fallback-flower { fill: #f2c2d8; }
.pix-hdr-spark {
  position: fixed;
  width: 56px;
  height: 56px;
  z-index: 1100;
  pointer-events: none;
}

.pix-hdr-album-mark .pix-hdr-fallback-flower {
  transition: fill 420ms cubic-bezier(.22,1,.36,1);
}

/* A small tinted glass selection. Blur the material, never the HDR canvas. */
html:root a.pix-hdr-highlight-host,
html:root .left_menu_box li[class*='current-'] a.pix-hdr-highlight-host {
  position: relative;
  background: transparent;
  color: #503c4c;
  box-shadow: none;
}
.pix-hdr-highlight-host::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 56%), rgb(250 228 240 / 24%) 48%, rgb(255 255 255 / 14%)),
    rgb(220 177 202 / 42%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 1px 0 0 rgb(255 255 255 / 32%),
    inset -1px 0 0 rgb(255 255 255 / 25%),
    inset 0 -1px 0 rgb(120 78 108 / 10%),
    0 8px 20px -12px rgb(112 70 97 / 30%),
    0 2px 5px rgb(112 70 97 / 5%);
}
html:root.dark a.pix-hdr-highlight-host,
html:root.dark .left_menu_box li[class*='current-'] a.pix-hdr-highlight-host { color: #f5e8f0; }
.dark .pix-hdr-highlight-host::before {
  background:
    linear-gradient(145deg, rgb(255 240 249 / 13%), rgb(222 182 207 / 7%) 50%, rgb(255 255 255 / 3%)),
    rgb(103 73 94 / 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 239 249 / 30%),
    inset 1px 0 0 rgb(255 235 246 / 10%),
    inset -1px 0 0 rgb(255 235 246 / 8%),
    inset 0 -1px 0 rgb(12 6 16 / 25%),
    0 8px 20px -10px rgb(8 3 12 / 35%);
}
.pix-hdr-highlight-host > :is(i, img, .nav_title, .pix-hdr-album-mark) { position: relative; z-index: 1; }
.pix-hdr-highlight {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.pix-hdr-highlight-fallback {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 24% at 70% 0%, rgb(255 250 255 / 25%), transparent),
    radial-gradient(ellipse 24% 35% at 100% 15%, rgb(255 248 253 / 14%), transparent),
    radial-gradient(ellipse 30% 14% at 18% 100%, rgb(227 250 245 / 11%), transparent);
}
.pix-hdr-highlight.pix-hdr-ready .pix-hdr-highlight-fallback { visibility: hidden; }
@media (hover: none), (pointer: coarse) {
  .pix-hdr-highlight-host::before {
    -webkit-backdrop-filter: blur(6px) saturate(125%);
    backdrop-filter: blur(6px) saturate(125%);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .pix-hdr-highlight-host::before { background: #ead5e1; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dark .pix-hdr-highlight-host::before { background: #51404e; }
}
@media (prefers-reduced-motion: reduce) {
  .pix-hdr-album-mark .pix-hdr-fallback-flower { transition: none; }
}

/* Immediate pointer feedback also works before the HDR module is ready. */
.pix-hdr-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 18% 42% at var(--pix-hdr-pointer-x, 68%) 0%,
    rgb(255 253 255 / 78%), rgb(255 243 251 / 28%) 36%, transparent 80%);
  opacity: var(--pix-hdr-pointer-active, 0);
  transition: opacity 180ms cubic-bezier(.22,1,.36,1);
}
.pix-hdr-highlight.pix-hdr-ready::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pix-hdr-highlight::after { transition: none; }
}