.visualizer-row {
  position: relative;
}

#visualizer-canvas,
#visualizer-texture-canvas,
#visualizer-color-mask-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#visualizer-canvas {
  z-index: 3;
}

#visualizer-texture-canvas {
  z-index: 4;
  pointer-events: none;
  opacity: 1;
}

#visualizer-color-mask-canvas {
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.hero-brand {
  z-index: 6;
}

.hero-brand h2 {
  color: transparent;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text-primary) 96%, var(--accent-color) 4%) 0%,
      color-mix(in srgb, var(--text-primary) 82%, var(--accent-color) 18%) 52%,
      color-mix(in srgb, var(--text-primary) 70%, var(--accent-color) 30%) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent-color) 26%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color) 44%, transparent));
  text-shadow:
    0 0 2px color-mix(in srgb, var(--text-primary) 78%, transparent),
    0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent),
    0 0 28px color-mix(in srgb, var(--accent-color) 28%, transparent),
    0 18px 26px color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.hero-brand h2 span {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent-color) 42%, transparent);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent-color) 58%, transparent),
    0 0 24px color-mix(in srgb, var(--accent-color) 42%, transparent),
    0 10px 18px color-mix(in srgb, var(--bg-primary) 64%, transparent);
}

.layer-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.header-accordion {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex-shrink: 0;
}

.header-accordion.is-open {
  gap: 0.35rem;
}

.header-accordion-drawer {
  display: inline-flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 170ms ease;
}

.header-accordion.is-open .header-accordion-drawer {
  width: auto;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}

.header-drawer-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.18rem 0.4rem;
  border: 0;
  border-radius: var(--radius-base);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  width: max-content;
  max-width: min(92vw, 68rem);
  overflow-x: auto;
}

#header-fx-button[aria-expanded='true'],
#header-mood-button[aria-expanded='true'],
#header-visualizer-button[aria-expanded='true'],
#header-quality-button[aria-expanded='true'],
#header-contrast-button[aria-expanded='true'] {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.header-accordion--right {
  flex-direction: row-reverse;
}

.header-range-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #999);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}

.header-range-slider {
  --seek-fill-ratio: 50%;
  --seek-fill-dark-a: color-mix(in srgb, var(--accent-color) 28%, var(--bg-primary));
  --seek-fill-dark-b: color-mix(in srgb, var(--accent-color) 42%, var(--bg-primary));
  --seek-track-base: color-mix(in srgb, var(--bg-tertiary) 78%, var(--bg-primary));
  -webkit-appearance: none;
  appearance: none;
  width: clamp(5rem, 10vw, 8rem);
  height: 0.96rem;
  background: transparent;
  cursor: pointer;
}

.header-range-slider::-webkit-slider-runnable-track {
  height: 0.34rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, white 12%, transparent), color-mix(in srgb, black 18%, transparent)),
    repeating-linear-gradient(135deg, var(--seek-fill-dark-a) 0 8px, var(--seek-fill-dark-b) 8px 16px),
    linear-gradient(180deg, var(--seek-track-base), color-mix(in srgb, var(--seek-track-base) 62%, black));
  background-size: var(--seek-fill-ratio) 100%, var(--seek-fill-ratio) 100%, 100% 100%;
  background-repeat: no-repeat;
}

.header-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  margin-top: -0.26rem;
  border: 1px solid color-mix(in srgb, var(--accent-color) 72%, var(--border-color));
  background: var(--accent-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

.header-range-slider::-moz-range-track {
  height: 0.34rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
  background: linear-gradient(180deg, var(--seek-track-base), color-mix(in srgb, var(--seek-track-base) 62%, black));
}

.header-range-slider::-moz-range-progress {
  height: 0.34rem;
  border-radius: 999px;
  background-image:
    linear-gradient(180deg, color-mix(in srgb, white 12%, transparent), color-mix(in srgb, black 18%, transparent)),
    repeating-linear-gradient(135deg, var(--seek-fill-dark-a) 0 8px, var(--seek-fill-dark-b) 8px 16px);
}

.header-range-slider::-moz-range-thumb {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 72%, var(--border-color));
  background: var(--accent-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

.header-range-value {
  font-size: 0.7rem;
  min-width: 2.6rem;
  text-align: center;
  color: var(--text-secondary, #999);
  white-space: nowrap;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.app-header,
.app-footer {
  filter: contrast(var(--page-contrast, 1));
}

.main-row.app-content {
  filter: contrast(var(--page-contrast-soft, 1));
}

.app-song-backdrop,
.app-theme-clean-mask {
  filter: contrast(var(--page-contrast-soft, 1));
}

#toggle-copyright-overlay[data-copyright-overlay-state='on'] {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.visualizer-copyright-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.6rem);
  pointer-events: auto;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px) saturate(90%);
  -webkit-backdrop-filter: blur(18px) saturate(90%);
}

.visualizer-copyright-overlay[hidden] {
  display: none !important;
}

.visualizer-copyright-overlay__text {
  margin: 0;
  max-width: min(94vw, 62rem);
  position: relative;
  text-align: center;
  display: inline-grid;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.34;
  letter-spacing: 0.012em;
  word-spacing: 0.02em;
  color: color-mix(in srgb, var(--text-primary) 94%, var(--accent-color) 6%);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--bg-primary) 74%, transparent),
    0 0 26px color-mix(in srgb, var(--bg-primary) 70%, transparent);
}

.visualizer-copyright-overlay__line {
  display: block;
  width: 100%;
}

.visualizer-copyright-overlay__line--primary {
  font-size: clamp(0.94rem, 1.32vw, 1.08rem);
  font-weight: 550;
}

.visualizer-copyright-overlay__line--meta {
  font-size: clamp(0.7rem, 0.98vw, 0.8rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.78;
}

.visualizer-copyright-overlay__line--snapshot {
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  width: auto;
  font-size: clamp(0.5rem, 0.72vw, 0.58rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.62;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.visualizer-copyright-overlay__line--dedication {
  margin-top: clamp(1rem, 2.1vw, 1.55rem);
  font-size: clamp(1rem, 1.7vw, 1.24rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  font-style: italic;
  display: inline-grid;
  justify-items: center;
  gap: 0.42rem;
}

.visualizer-copyright-overlay__dedication-text {
  display: inline-block;
}

.visualizer-copyright-overlay__heart-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visualizer-copyright-overlay__name {
  font-style: italic;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text-primary) 92%, var(--accent-color) 8%);
  text-shadow: 0 0 10px color-mix(in srgb, var(--bg-primary) 62%, transparent);
}

.visualizer-copyright-overlay__heart-svg {
  width: clamp(16px, 1.35vw, 21px);
  height: clamp(16px, 1.35vw, 21px);
  display: block;
  fill: #ff3355;
  stroke: color-mix(in srgb, #ff8da2 34%, #ff3355);
  stroke-width: 0.6;
  filter: drop-shadow(0 0 10px color-mix(in srgb, #ff2b57 78%, transparent));
}

@media (max-width: 720px) {
  .visualizer-copyright-overlay__text {
    max-width: min(95vw, 36rem);
    gap: 0.25rem;
  }

  .visualizer-copyright-overlay__line--primary {
    font-size: clamp(0.85rem, 2.45vw, 0.98rem);
  }

  .visualizer-copyright-overlay__line--meta {
    font-size: clamp(0.64rem, 2vw, 0.74rem);
  }

  .visualizer-copyright-overlay__line--snapshot {
    bottom: -0.9rem;
    font-size: clamp(0.45rem, 1.5vw, 0.54rem);
  }

  .visualizer-copyright-overlay__line--dedication {
    margin-top: clamp(0.8rem, 3vw, 1.05rem);
    font-size: clamp(0.93rem, 2.9vw, 1.12rem);
  }
}

.layer-control {
  min-height: var(--header-chip-size, 2.2rem);
  height: var(--header-chip-size, 2.2rem);
  max-width: 11.5rem;
  font-size: 0.75rem;
  padding: 0 2rem 0 0.85rem;
  border-radius: 999px;
}

.layer-control-button {
  min-height: var(--header-chip-size, 2.2rem);
  padding: 0 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}

.layer-control-button:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
}

.layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: var(--header-chip-size, 2.2rem);
  height: var(--header-chip-size, 2.2rem);
  padding: 0 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-tertiary) 94%, var(--bg-primary));
  color: var(--text-primary);
  font-size: 0.75rem;
  line-height: 1;
  user-select: none;
  cursor: pointer;
}

.layer-toggle input {
  margin: 0;
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--accent-color);
}

.color-control {
  width: 2.15rem;
  min-width: 2.15rem;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}

.color-control::-webkit-color-swatch-wrapper {
  padding: 0;
  background: transparent;
}

.color-control::-webkit-color-swatch {
  border: none;
  border-radius: 999px;
}

.color-control::-moz-color-swatch {
  border: none;
  border-radius: 999px;
}

.color-control::-moz-focus-inner {
  border: 0;
}

@media (max-width: 1200px) {
  .layer-controls {
    justify-content: flex-end;
  }

  .layer-control {
    max-width: 9.6rem;
  }

  .header-accordion.is-open .header-accordion-drawer {
    width: auto;
  }
}

@media (max-width: 1360px) {
  .toolbar-group-right {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

@media (max-width: 900px) {
  .layer-controls {
    justify-content: flex-start;
  }

  .header-accordion {
    width: 100%;
  }

  .header-accordion.is-open .header-accordion-drawer {
    width: 100%;
    flex: 1 1 auto;
  }

  .header-drawer-controls {
    width: 100%;
    flex-wrap: wrap;
  }
}