/* The mode scene is decorative; music geometry stays in the foreground. */
#explore-view.has-mode-art .ring-panel,
#explore-view.has-mode-art .score-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #18263d;
  border-color: rgba(255,255,255,.36);
}

#explore-view.has-mode-art .ring-panel::before,
#explore-view.has-mode-art .score-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mode-art) var(--mode-art-position,left center)/cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

#explore-view.has-mode-art .ring-panel::after,
#explore-view.has-mode-art .score-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(8,19,36,.49) 0%,rgba(8,19,36,.13) 36%,rgba(8,19,36,.5) 69%,rgba(8,19,36,.77) 100%);
  pointer-events: none;
  z-index: 0;
}

#explore-view.has-mode-art .ring-panel > *,
#explore-view.has-mode-art .score-panel > * {
  position: relative;
  z-index: 1;
}

#explore-view.has-mode-art .panel-heading h2,
#explore-view.has-mode-art .panel-heading small,
#explore-view.has-mode-art .score-panel .eyebrow {
  color: #fff;
  text-shadow: 0 1px 5px rgba(2,9,22,.9);
}

#explore-view.has-mode-art .ring-panel .segmented {
  border-color: rgba(255,255,255,.64);
  background: rgba(7,17,32,.36);
  backdrop-filter: blur(5px);
}

#explore-view.has-mode-art .ring-panel .segmented button {
  color: #fff;
  border-color: transparent;
  background: transparent;
}

#explore-view.has-mode-art .ring-panel .segmented button[aria-pressed=true] {
  color: #14233b;
  background: #fff;
}

/* Every ring frame has a dark contour around its bright stroke. */
#explore-view.has-mode-art .ring-lines .outer-dodecagon {
  stroke: rgba(255,255,255,.82);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 1.5px #071427) drop-shadow(0 0 1px #071427);
}

#explore-view.has-mode-art .ring-lines .inner-scale {
  fill: rgba(255,255,255,.055);
  stroke: #fff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 1.8px #071427) drop-shadow(0 0 1px #071427);
}

#explore-view.has-mode-art .ring-foreground {
  stroke: #ffe1a0;
  stroke-width: 2;
  filter: drop-shadow(0 0 1.8px #071427) drop-shadow(0 0 1px #071427);
}

#explore-view.has-mode-art .ring-journey-trail,
#explore-view.has-mode-art .ring-journey-active,
#explore-view.has-mode-art .ring-journey-cursor,
#explore-view.has-mode-art .ring-comet-haze,
#explore-view.has-mode-art .ring-comet-tail,
#explore-view.has-mode-art .ring-cursor-spoke,
#explore-view.has-mode-art .ring-cursor-progress,
#explore-view.has-mode-art .ring-cursor-core {
  filter: drop-shadow(0 0 1.8px #071427) drop-shadow(0 0 1px #071427);
}

#explore-view.has-mode-art .ring-note.playing::after {
  filter: drop-shadow(0 0 1.8px #071427) drop-shadow(0 0 1px #071427);
}

#explore-view.has-mode-art .ring-note,
#explore-view.has-mode-art .ring-note:not(.member),
#explore-view.has-mode-art .ring-note.member,
#explore-view.has-mode-art .ring-note.tonic,
#explore-view.has-mode-art .ring-note.feature,
#explore-view.has-mode-art .ring-note.playing {
  background: transparent !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#explore-view.has-mode-art .ring-note::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
}

#explore-view.has-mode-art .ring-note,
#explore-view.has-mode-art .ring-note:not(.member),
#explore-view.has-mode-art .ring-note.member,
#explore-view.has-mode-art .ring-note.tonic,
#explore-view.has-mode-art .ring-note.feature {
  color: #fff;
  text-shadow: 0 1px 3px #071427;
}

#explore-view.has-mode-art .ring-note::before,
#explore-view.has-mode-art .ring-note:not(.member)::before {
  border: 1.5px solid rgba(255,255,255,.68);
  background: rgba(6,17,33,.16);
  box-shadow: 0 0 0 1.4px #071427,0 1px 5px rgba(0,0,0,.6);
}

#explore-view.has-mode-art .ring-note.member::before {
  border: 1.8px solid #fff;
  background: rgba(6,17,33,.25);
  box-shadow: 0 0 0 1.4px #071427,0 1px 6px rgba(0,0,0,.6);
}

#explore-view.has-mode-art .ring-note.tonic::before {
  border: 2px solid #fff;
  background: rgba(6,17,33,.72);
  box-shadow: 0 0 0 1.4px #071427,0 0 0 4px rgba(255,255,255,.3),0 1px 8px rgba(0,0,0,.6);
}

#explore-view.has-mode-art .ring-note.feature { color: #ffe1a0; }

#explore-view.has-mode-art .ring-note.feature::before {
  border: 2px solid #ffe1a0;
  background: rgba(6,17,33,.28);
  box-shadow: 0 0 0 1.4px #071427,0 1px 6px rgba(0,0,0,.6);
}

#explore-view.has-mode-art .ring-note.playing::before {
  box-shadow: 0 0 0 1.4px #071427,0 0 0 4px rgba(255,225,160,.54),0 0 11px #ffe1a0;
}

#explore-view.has-mode-art .ring-legend,
#explore-view.has-mode-art .ring-caption {
  color: #fff;
  text-shadow: 0 1px 4px rgba(2,9,22,.9);
}

#explore-view.has-mode-art .score-panel .score-presentation {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#explore-view.has-mode-art .score-panel .score-description,
#explore-view.has-mode-art .score-panel .scroll-hint {
  color: #fff;
  text-shadow: 0 1px 4px rgba(2,9,22,.9);
}

#explore-view.has-mode-art .score-presentation:not(.compact) .degree-buttons button {
  color: #fff;
  background: rgba(6,17,33,.3);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1.4px #071427,0 1px 5px rgba(0,0,0,.6);
  text-shadow: 0 1px 3px #071427;
}

#explore-view.has-mode-art .score-presentation:not(.compact) .degree-buttons button.feature {
  color: #ffe1a0;
  border-color: #ffe1a0;
}

#explore-view.has-mode-art .score-presentation:not(.compact) .degree-buttons button small {
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px #071427;
}

#explore-view.has-mode-art .score-panel .mobile-compact-score svg,
#explore-view.has-mode-art .score-panel .score-scroll svg {
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,.75));
}

#explore-view.has-mode-art .score-panel .mobile-compact-score .feature,
#explore-view.has-mode-art .score-panel .score-scroll .feature,
#explore-view.has-mode-art .score-panel .score-feature-key { color: #ffe1a0; }

#explore-view.has-mode-art .score-panel .note-readout {
  color: #fff;
  border-top-color: rgba(255,255,255,.65);
  text-shadow: 0 1px 4px rgba(2,9,22,.9);
}

@media (max-width:760px) {
  #explore-view.has-mode-art .score-panel .note-readout { margin-bottom: 2px; }
}
.share-entry-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;padding:12px 16px;border:1px solid #d7a842;border-radius:12px;background:#fff8e5;color:#302817;font-size:14px;line-height:1.5}
.share-entry-notice button{flex:none;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;padding:7px 12px;font:inherit;cursor:pointer}