.ui-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -.23em;
}
.scroll-progress {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,#3081ff 0%,#885bff 72%,#cda6ff 100%);
  scale: 0 1;
  transform-origin: left;
  pointer-events: none;
}
.page-motion-setting {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38em;
  padding: 5px 9px;
  border: 1px solid var(--line,#d8e1f4);
  border-radius: 999px;
  background: transparent;
  color: #3e5487;
  font: 650 11px/1.5 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.page-motion-setting[hidden] { display: none; }
.page-motion-setting:hover { background: #eaf0ff; color: #244bbb; }
[data-spotlight] {
  --spot-x: 50%;
  --spot-y: 45%;
  --spot-glow: #8f99fa54;
  --spot-edge: #8ea3faaf;
  position: relative;
  isolation: isolate;
}
[data-spotlight]::before, [data-spotlight]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
}
[data-spotlight]::before {
  background: radial-gradient(290px circle at var(--spot-x) var(--spot-y), var(--spot-glow), transparent 100%);
}
[data-spotlight]::after {
  padding: 1px;
  background: radial-gradient(230px circle at var(--spot-x) var(--spot-y), var(--spot-edge), transparent 100%);
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: exclude;
}
[data-spotlight]:is(.spot-active,:focus-visible,:focus-within)::before,
[data-spotlight]:is(.spot-active,:focus-visible,:focus-within)::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not(.site-motion-on) [data-spotlight]::before,
  html:not(.site-motion-on) [data-spotlight]::after { transition: none; }
}
@media print { .page-motion-setting, .scroll-progress { display: none; } }