/* Shared hover feedback. Independent scale preserves existing transforms. */
.ambient-rainbow-ring {
  position: fixed;
  z-index: 2147483647;
  box-sizing: border-box;
  padding: 1px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  border-radius: 8px;
  transition: opacity 360ms ease;
  contain: strict;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ambient-rainbow-ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rainbow-size);
  height: var(--rainbow-size);
  background: conic-gradient(from 25deg, #b76075, #cb9163, #c7b66e, #70ab8e, #68aebe, #7b8cba, #aa7db0, #f2f8ff 92%, #b76075);
  animation: ambient-rainbow-orbit 5s linear infinite;
}
.ambient-rainbow-ring.is-visible { opacity: .9; }

@keyframes ambient-rainbow-orbit {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-rainbow-ring { transition: none; }
  .ambient-rainbow-ring::before { animation: none; transform: translate(-50%, -50%); }
}
@media (forced-colors: active), print {
  .ambient-rainbow-ring { display: none; }
}
:where(a[href]) {
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root :is(a[href], button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"], input[type="range"], select, summary, label[for], [role="button"], [role="link"], [role="tab"], [onclick]) {
    transition: scale 180ms ease, transform 200ms ease, color 200ms ease,
      background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
  }

  :is(a[href], button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"], input[type="range"], select, summary, label[for], [role="button"], [role="link"], [role="tab"], [onclick]):not(:disabled):not([aria-disabled="true"]):hover {
    scale: 1.03;
  }

  /* Nested controls grow individually, without compounding their parent's scale. */
  :is(a[href], button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"], input[type="range"], select, summary, label[for], [role="button"], [role="link"], [role="tab"], [onclick]):has(:is(a[href], button, input[type="button"], input[type="submit"], input[type="reset"], input[type="image"], input[type="checkbox"], input[type="radio"], input[type="range"], select, summary, label[for], [role="button"], [role="link"], [role="tab"], [onclick]):hover):hover {
    scale: 1;
  }
}

/* Keep the dominant text colour, with a subtle animated spectrum in the glyphs. */
@property --ambient-text-angle {
  syntax: '<angle>';
  initial-value: 25deg;
  inherits: true;
}
html:root body :is(#ambient-text-ink, :is(.ambient-rainbow-text, .ambient-rainbow-selected, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"], .active, .is-active, .selected, summary:where(details[open] > summary)) [data-ambient-label], input.ambient-rainbow-text, input.ambient-rainbow-selected) {
  color: #193f43 !important;
  text-shadow: none !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-image: conic-gradient(from var(--ambient-text-angle),
    color-mix(in srgb, currentColor 58%, #b76075),
    color-mix(in srgb, currentColor 58%, #cb9163),
    color-mix(in srgb, currentColor 58%, #c7b66e),
    color-mix(in srgb, currentColor 58%, #70ab8e),
    color-mix(in srgb, currentColor 58%, #68aebe),
    color-mix(in srgb, currentColor 58%, #7b8cba),
    color-mix(in srgb, currentColor 58%, #aa7db0),
    color-mix(in srgb, currentColor 58%, #b76075)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: ambient-rainbow-text-orbit 5s linear infinite !important;
}
@keyframes ambient-rainbow-text-orbit {
  to { --ambient-text-angle: 385deg; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body :is(#ambient-text-ink, :is(.ambient-rainbow-text, .ambient-rainbow-selected, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"], .active, .is-active, .selected, summary:where(details[open] > summary)) [data-ambient-label], input.ambient-rainbow-text, input.ambient-rainbow-selected) { animation: none !important; }
}
@media (forced-colors: active), print {
  html:root body :is(#ambient-text-ink, :is(.ambient-rainbow-text, .ambient-rainbow-selected, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"], .active, .is-active, .selected, summary:where(details[open] > summary)) [data-ambient-label], input.ambient-rainbow-text, input.ambient-rainbow-selected) {
    background-image: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
  }
}