.time-emblem {
  --time-emblem-a: var(--laser-a, #ff4fd8);
  --time-emblem-b: var(--laser-b, #35e7ff);
  --time-emblem-a-rgb: var(--laser-a-rgb, 255 79 216);
  --time-emblem-b-rgb: var(--laser-b-rgb, 53 231 255);

  align-items: center;
  aspect-ratio: 1;
  display: inline-flex;
  flex: 0 0 1em;
  height: 1em;
  isolation: isolate;
  justify-content: center;
  max-height: 1em;
  max-width: 1em;
  min-height: 1em;
  min-width: 1em;
  opacity: 0.82;
  pointer-events: none;
  position: relative;
  transform: scale(0.96);
  transform-origin: center;
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
  user-select: none;
  vertical-align: middle;
  width: 1em;
}

.time-emblem::before {
  background:
    radial-gradient(
      circle at 38% 34%,
      rgb(var(--time-emblem-a-rgb) / 0.2),
      transparent 38%
    ),
    radial-gradient(
      circle,
      rgb(2 7 18 / 0.68) 0 42%,
      rgb(2 7 18 / 0.32) 62%,
      transparent 74%
    );
  border: 1px solid rgb(var(--time-emblem-b-rgb) / 0.26);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0.16em rgb(var(--time-emblem-a-rgb) / 0.18),
    0 0 0.14em rgb(var(--time-emblem-b-rgb) / 0.14);
  content: '';
  inset: 0.08em;
  opacity: 0.76;
  position: absolute;
  transform: scale(0.92);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
  z-index: 0;
}

.time-emblem__svg {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  max-block-size: 100%;
  max-inline-size: 100%;
  overflow: visible;
  pointer-events: none;
  position: relative;
  shape-rendering: geometricPrecision;
  z-index: 1;
}

.time-emblem__svg *,
.time-emblem__svg *::before,
.time-emblem__svg *::after {
  pointer-events: none;
}


.time-emblem__rail,
.time-emblem__beam,
.time-emblem__core,
.time-emblem__glass,
.time-emblem__ghost,
.time-emblem__spark {
  paint-order: stroke fill markers;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
  vector-effect: non-scaling-stroke;
}

.time-emblem__rail {
  fill: none;
  opacity: 0.48;
  stroke: var(--time-emblem-b);
  stroke-width: 1.15;
}

.time-emblem__beam {
  fill: none;
  mix-blend-mode: screen;
  opacity: 0.7;
  stroke: var(--time-emblem-a);
  stroke-width: 1.45;
}

.time-emblem__glass {
  opacity: 0.72;
  stroke: var(--time-emblem-b);
  stroke-width: 0.9;
}

.time-emblem__ghost {
  opacity: 0.36;
}

.time-emblem__ghost:not(.time-emblem__halo) {
  fill: rgb(var(--time-emblem-b-rgb) / 0.055);
  stroke: rgb(var(--time-emblem-a-rgb) / 0.5);
  stroke-width: 0.72;
}

.time-emblem__halo {
  stroke: none;
}

.time-emblem__core {
  fill: rgb(255 255 255 / 0.94);
  opacity: 0.9;
  stroke: var(--time-emblem-a);
  stroke-width: 0.72;
}

.time-emblem__spark {
  fill: #fff;
  mix-blend-mode: screen;
  opacity: 0.88;
  stroke: var(--time-emblem-b);
  stroke-width: 0.62;
}


.time-emblem__pulse {
  animation: time-emblem-pulse 5.6s ease-in-out infinite;
}

.time-emblem__drift {
  animation: time-emblem-drift 8.4s ease-in-out infinite alternate;
}

.time-emblem__flicker {
  animation: time-emblem-flicker 6.8s ease-in-out infinite;
}

.time-emblem__orbit {
  animation: time-emblem-orbit 18s linear infinite;
  transform-box: view-box;
  transform-origin: center;
}

.time-emblem__pulse:nth-of-type(2n),
.time-emblem__drift:nth-of-type(2n),
.time-emblem__flicker:nth-of-type(2n) {
  animation-delay: -2.35s;
}

.time-emblem__orbit:nth-of-type(2n) {
  animation-direction: reverse;
  animation-duration: 23s;
}

.time-emblem[data-time-emblem-paused] .time-emblem__pulse,
.time-emblem[data-time-emblem-paused] .time-emblem__drift,
.time-emblem[data-time-emblem-paused] .time-emblem__flicker,
.time-emblem[data-time-emblem-paused] .time-emblem__orbit {
  animation-play-state: paused;
}

@keyframes time-emblem-pulse {
  0%, 100% {
    opacity: 0.68;
    transform: scale(0.96);
  }

  48% {
    opacity: 0.98;
    transform: scale(1.035);
  }
}

@keyframes time-emblem-drift {
  0%, 100% {
    opacity: 0.62;
    transform: translate3d(-0.55px, 0.65px, 0);
  }

  50% {
    opacity: 0.9;
    transform: translate3d(0.8px, -0.7px, 0);
  }
}

@keyframes time-emblem-flicker {
  0%, 18%, 100% {
    opacity: 0.62;
    transform: scale(0.98);
  }

  39% {
    opacity: 0.92;
    transform: scale(1.025);
  }

  43% {
    opacity: 0.76;
    transform: scale(1);
  }

  67% {
    opacity: 0.98;
    transform: scale(1.04);
  }
}

@keyframes time-emblem-orbit {
  from {
    opacity: 0.58;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.86;
  }

  to {
    opacity: 0.58;
    transform: rotate(360deg);
  }
}


.time-slice-section:focus-within .time-emblem,
.time-slice-section:has(.active-slice-input) .time-emblem {
  opacity: 1;
  transform: scale(1.025);
}

.time-slice-section:focus-within .time-emblem::before,
.time-slice-section:has(.active-slice-input) .time-emblem::before {
  opacity: 0.96;
  transform: scale(0.98);
}

.time-slice-section:focus-within .time-emblem__rail,
.time-slice-section:has(.active-slice-input) .time-emblem__rail {
  opacity: 0.76;
}

.time-slice-section:focus-within .time-emblem__beam,
.time-slice-section:has(.active-slice-input) .time-emblem__beam {
  opacity: 0.96;
}

.time-slice-section:focus-within .time-emblem__glass,
.time-slice-section:has(.active-slice-input) .time-emblem__glass {
  opacity: 0.9;
}

.time-slice-section:focus-within .time-emblem__ghost,
.time-slice-section:has(.active-slice-input) .time-emblem__ghost {
  opacity: 0.52;
}

.time-slice-section:focus-within .time-emblem__core,
.time-slice-section:has(.active-slice-input) .time-emblem__core,
.time-slice-section:focus-within .time-emblem__spark,
.time-slice-section:has(.active-slice-input) .time-emblem__spark {
  opacity: 1;
  transform: scale(1.055);
}


@media (max-width: 768px) {
  .time-emblem {
    flex-basis: 1em;
    max-block-size: 1em;
    max-inline-size: 1em;
  }
}

@media (max-width: 360px), (max-height: 420px) {
  .time-emblem__rail,
  .time-emblem__beam,
  .time-emblem__core,
  .time-emblem__glass,
  .time-emblem__ghost,
  .time-emblem__spark {
    stroke-width: 1;
  }

  .time-emblem__ghost {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .time-emblem,
  .time-emblem::before,
  .time-emblem__rail,
  .time-emblem__beam,
  .time-emblem__core,
  .time-emblem__glass,
  .time-emblem__ghost,
  .time-emblem__spark {
    transition: none;
  }

  .time-emblem__pulse,
  .time-emblem__drift,
  .time-emblem__flicker,
  .time-emblem__orbit {
    animation: none !important;
    transform: none;
  }

  .time-slice-section:focus-within .time-emblem,
  .time-slice-section:has(.active-slice-input) .time-emblem {
    transform: none;
  }

  .time-slice-section:focus-within .time-emblem::before,
  .time-slice-section:has(.active-slice-input) .time-emblem::before {
    transform: none;
  }
}

@media (forced-colors: active) {
  .time-emblem {
    color: CanvasText;
    forced-color-adjust: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .time-emblem::before {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  .time-emblem__rail,
  .time-emblem__beam,
  .time-emblem__ghost {
    fill: none;
    opacity: 0.82;
    stroke: currentColor;
  }

  .time-emblem__glass {
    fill: Canvas;
    opacity: 1;
    stroke: currentColor;
  }

  .time-emblem__core,
  .time-emblem__spark {
    fill: Highlight;
    opacity: 1;
    stroke: Highlight;
  }

  .time-emblem__pulse,
  .time-emblem__drift,
  .time-emblem__flicker,
  .time-emblem__orbit {
    animation: none !important;
    transform: none;
  }
}