.controls.customize-invitation-active #music-credit{opacity:0!important}
html[data-theme] .controls #customize-invite{
  position:absolute;right:calc(100% + 18px);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  width:max-content;max-width:calc(100vw - 158px);height:auto;min-height:44px;
  padding:6px 0;border:0;border-radius:4px;background:transparent;
  color:var(--custom-control-ink,#191b1c);font-size:14px;line-height:1.5;
  text-align:right;opacity:0;pointer-events:none;transition:opacity .3s ease;
  filter:var(--utility-icon-shadow,drop-shadow(0 1px 2px #0003));
}
html[data-theme="night"] .controls #customize-invite{color:var(--custom-control-ink,#efeee9)}
html[data-theme] .controls #customize-invite[data-visible="true"]{opacity:1;pointer-events:auto}
html[data-theme] .controls #customize-invite:is(:hover,:focus-visible){background:transparent;color:var(--theme-top-icon-highlight,#00bce8)}
.controls #customize-invite svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:480px){html[data-theme] .controls #customize-invite{right:calc(100% + 10px);font-size:13px;gap:5px}}
@media(prefers-reduced-motion:reduce){html[data-theme] .controls #customize-invite{transition:none}}

/* A single sweep carries attention from the words to the existing gear outline. */
#customize-invite .customize-invite-label{position:relative}
#customize-invite .customize-invite-label::after{content:attr(data-shimmer-label);position:absolute;inset:0;pointer-events:none;color:transparent;background:linear-gradient(90deg,transparent 44%,#ffffffeb 49%,#ffffffeb 51%,transparent 56%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;opacity:0}
.customize-invitation-active #customize-invite .customize-invite-label::after{animation:customize-text-shimmer var(--shimmer-duration,1.5s) ease-out .4s 1 both}
.controls.customize-invitation-active #settings-open::before{animation:settings-border-shimmer var(--shimmer-duration,1.5s) ease-out calc(.4s + var(--shimmer-duration,1.5s)) 1 both}
@keyframes customize-text-shimmer{0%{background-position:100% 0;opacity:0}12%{opacity:1}85%{opacity:1}100%{background-position:0% 0;opacity:0}}
html[data-shimmer="off"] #customize-invite .customize-invite-label::after{animation:none!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){#customize-invite .customize-invite-label::after{animation:none!important;opacity:0!important}}