loading-state-zoo 0.3.0 → 0.4.0

package/dist/theme.css

@@ -161,44 +161,32 @@
     opacity: var(--lz-orb-fade, 0.88);
   }
 }
-@keyframes lz-blob-morph {
-  0% {
-    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
-    transform: rotate(0deg) scale(1);
+@keyframes lz-ios-glow {
+  0%, 100% {
+    opacity: var(--lz-ios-fade, 0.2);
+    transform: scale(var(--lz-ios-min, 0.5));
   }
-  25% {
-    border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
-    transform: rotate(6deg) scale(1.06);
+  35% {
+    opacity: 1;
+    transform: scale(var(--lz-ios-peak, 1.25));
   }
   50% {
-    border-radius: 46% 54% 48% 52% / 48% 55% 45% 52%;
-    transform: rotate(-5deg) scale(0.95);
-  }
-  75% {
-    border-radius: 55% 45% 52% 48% / 46% 52% 48% 55%;
-    transform: rotate(3deg) scale(1.05);
-  }
-  100% {
-    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
-    transform: rotate(0deg) scale(1);
-  }
-}
-@keyframes lz-siri-sheen {
-  0% {
-    transform: translate3d(-24%, -14%, 0) rotate(0deg);
-  }
-  100% {
-    transform: translate3d(24%, 14%, 0) rotate(360deg);
+    opacity: 1;
+    transform: scale(var(--lz-ios-peak, 1.25));
   }
 }
-@keyframes lz-dot-orb {
+@keyframes lz-ai-sparkle {
   0%, 100% {
-    opacity: var(--lz-orb-fade, 0.14);
-    transform: scale(var(--lz-dot-min, 0.7));
+    opacity: 0;
+    transform: scale(0.1) rotate(0deg);
   }
-  50% {
+  20% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) rotate(8deg);
+  }
+  45% {
+    opacity: 0;
+    transform: scale(1.35) rotate(14deg);
   }
 }
 @keyframes lz-waveform {
@@ -235,10 +223,10 @@
 }
 @keyframes lz-needle-bob {
   0%, 100% {
-    transform: rotate(38deg);
+    transform: rotate(22deg);
   }
   50% {
-    transform: rotate(43deg);
+    transform: rotate(27deg);
   }
 }
 .lz-bouncing-dots {
@@ -396,20 +384,57 @@
   border-radius: 50%;
   border: 1px solid var(--lz-track, rgba(255, 255, 255, 0.12));
 }
+.lz-scan-sweep .lz-dial {
+  position: absolute;
+  inset: 0.075em;
+  border-radius: 50%;
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  animation: lz-spin-reverse calc(10s * var(--lz-speed, 1)) linear infinite;
+}
 .lz-scan-sweep .lz-ring-inner {
   position: absolute;
-  inset: 0.28em;
+  inset: 0.27em;
   border-radius: 50%;
   border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
 }
-.lz-scan-sweep .lz-core {
+.lz-scan-sweep .lz-tick-slot {
   position: absolute;
-  width: 0.14em;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+}
+.lz-scan-sweep .lz-tick {
+  position: absolute;
+  left: -0.025em;
+  top: 0;
+  width: 0.05em;
   height: 0.14em;
-  left: 0.43em;
-  top: 0.43em;
+  border-radius: 1px;
+  background: var(--lz-color-weak, rgba(245, 245, 247, 0.8));
+}
+.lz-scan-sweep .lz-tick.short {
+  height: 0.09em;
+}
+.lz-scan-sweep .lz-core-ring {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.26em;
+  height: 0.26em;
+  margin: -0.13em 0 0 -0.13em;
+  border-radius: 50%;
+  border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
+}
+.lz-scan-sweep .lz-core {
+  position: absolute;
+  width: 0.1em;
+  height: 0.1em;
+  left: 0.45em;
+  top: 0.45em;
   border-radius: 50%;
   background: var(--lz-color-weak, rgba(245, 245, 247, 0.8));
+  box-shadow: 0 0 0.18em 0.03em color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent);
 }
 .lz-scan-sweep .lz-sweep {
   position: absolute;
@@ -419,12 +444,34 @@
     conic-gradient(
       from 0deg,
       var(--lz-color, #f5f5f7) 0deg,
-      var(--lz-color-sweep, rgba(245, 245, 247, 0.08)) 60deg,
-      transparent 90deg);
+      var(--lz-color-sweep, rgba(245, 245, 247, 0.08)) 8deg,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 5%, transparent) 55deg,
+      transparent 95deg);
   -webkit-mask: radial-gradient(closest-side, #000 100%);
   mask: radial-gradient(closest-side, #000 100%);
   animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
 }
+.lz-scan-sweep .lz-sweep-edge {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      var(--lz-color, #f5f5f7) 0deg,
+      transparent 5deg);
+  -webkit-mask:
+    radial-gradient(
+      farthest-side,
+      transparent calc(100% - 0.07em),
+      #000 calc(100% - 0.07em));
+  mask:
+    radial-gradient(
+      farthest-side,
+      transparent calc(100% - 0.07em),
+      #000 calc(100% - 0.07em));
+  animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
+}
 .lz-orbit-dots {
   position: relative;
   width: var(--lz-size, 44px);
@@ -755,209 +802,151 @@
       transparent);
   animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
 }
-.lz-pulsing-orb {
-  width: var(--lz-size, 44px);
-  height: var(--lz-size, 44px);
-  border-radius: 50%;
-  background:
-    radial-gradient(
-      circle at 35% 32%,
-      var(--lz-accent, #0a84ff) 0%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 55%,
-      transparent 72%);
-  box-shadow: 0 0 calc(0.5 * var(--lz-size, 44px)) color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent);
-  animation: lz-orb-breathe calc(2.2s * var(--lz-speed, 1)) ease-in-out infinite;
-}
-.lz-morphing-orb {
-  width: var(--lz-size, 44px);
-  height: var(--lz-size, 44px);
-  background:
-    radial-gradient(
-      circle at 34% 30%,
-      var(--lz-accent, #0a84ff) 0%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 60%, transparent) 62%,
-      transparent 78%);
-  box-shadow: 0 0 calc(0.55 * var(--lz-size, 44px)) color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
-  animation: lz-blob-morph calc(3.4s * var(--lz-speed, 1)) ease-in-out infinite;
-}
-.lz-siri-orb {
-  position: relative;
-  overflow: hidden;
-  width: var(--lz-size, 44px);
-  height: var(--lz-size, 44px);
-  border-radius: 50%;
-  background:
-    radial-gradient(
-      circle at 30% 28%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white) 0%,
-      transparent 60%);
-  animation: lz-orb-breathe calc(2.6s * var(--lz-speed, 1)) ease-in-out infinite;
-}
-.lz-siri-orb .lz-sheen {
-  position: absolute;
-  width: calc(2.4 * var(--lz-size, 44px));
-  height: calc(2.4 * var(--lz-size, 44px));
-  left: 50%;
-  top: 50%;
-  margin: -1.2em 0 0 -1.2em;
-  background:
-    conic-gradient(
-      from 0deg at 50% 50%,
-      transparent 0deg,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 55%, transparent) 40deg,
-      transparent 90deg,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent) 150deg,
-      transparent 200deg,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 50%, transparent) 270deg,
-      transparent 360deg);
-  animation: lz-siri-sheen calc(5s * var(--lz-speed, 1)) linear infinite;
-  opacity: 0.9;
-}
-.lz-dot-orb {
+.lz-ios-27-orb {
   position: relative;
   width: var(--lz-size, 44px);
   height: var(--lz-size, 44px);
 }
-.lz-dot-orb .lz-slot {
+.lz-ios-27-orb .lz-slot {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 0;
   height: 0;
 }
-.lz-dot-orb .lz-dot {
+.lz-ios-27-orb .lz-dot {
   position: absolute;
-  left: -0.08em;
-  top: -0.08em;
-  width: 0.16em;
-  height: 0.16em;
   border-radius: 50%;
-  background: var(--lz-color, #f5f5f7);
-  animation: lz-dot-orb calc(2s * var(--lz-speed, 1)) ease-in-out infinite;
+  background: currentColor;
+  box-shadow: 0 0 0.12em 0.05em currentColor;
+  animation: lz-ios-glow calc(3.2s * var(--lz-speed, 1)) ease-in-out infinite;
 }
-.lz-dot-orb .lz-slot:nth-child(1) {
-  transform: rotate(0deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(2) {
-  transform: rotate(45deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(3) {
-  transform: rotate(90deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(4) {
-  transform: rotate(135deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(5) {
-  transform: rotate(180deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(6) {
-  transform: rotate(225deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(7) {
-  transform: rotate(270deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(8) {
-  transform: rotate(315deg) translateY(-0.32em);
-}
-.lz-dot-orb .lz-slot:nth-child(odd) .lz-dot {
-  animation-delay: -0.25s;
-}
-.lz-planet-orb {
+.lz-ai-orb {
   position: relative;
   width: var(--lz-size, 44px);
   height: var(--lz-size, 44px);
 }
-.lz-planet-orb .lz-core {
+.lz-ai-orb .lz-orb {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 0.42em;
-  height: 0.42em;
-  margin: -0.21em 0 0 -0.21em;
+  inset: 0.08em;
   border-radius: 50%;
   background:
     radial-gradient(
-      circle at 35% 30%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, white) 0%,
-      var(--lz-accent, #0a84ff) 50%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent) 100%);
-  box-shadow: 0 0 calc(0.3em) color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent);
+      circle at 34% 32%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 18%, white) 0%,
+      var(--lz-accent, #0a84ff) 40%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 74%,
+      transparent 100%);
+  box-shadow: 0 0 0.5em color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
   animation: lz-orb-breathe calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
 }
-.lz-planet-orb .lz-orbit {
+.lz-ai-orb .lz-orbit {
   position: absolute;
   inset: 0;
-  animation: lz-spin calc(2.2s * var(--lz-speed, 1)) linear infinite;
+  animation: lz-spin calc(4.5s * var(--lz-speed, 1)) linear infinite;
 }
-.lz-planet-orb .lz-moon {
+.lz-ai-orb .lz-light {
   position: absolute;
   left: 50%;
-  top: 50%;
-  width: 0.14em;
-  height: 0.14em;
-  margin: -0.07em 0 0 -0.07em;
+  top: calc(50% - 0.46em);
+  width: 0.13em;
+  height: 0.13em;
+  margin-left: -0.065em;
   border-radius: 50%;
   background: var(--lz-color, #f5f5f7);
-  box-shadow: 0 0 calc(0.16em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
+  box-shadow: 0 0 0.22em 0.05em color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, transparent);
+  animation: lz-pulse-breath calc(1.1s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-ai-orb .lz-sparkle {
+  position: absolute;
+  width: 0.28em;
+  height: 0.28em;
+  animation: lz-ai-sparkle calc(3s * var(--lz-speed, 1)) ease-in-out infinite;
 }
-.lz-planet-orb .lz-moon:nth-child(1) {
-  transform: rotate(0deg) translateX(0.36em);
+.lz-ai-orb .lz-sparkle::before,
+.lz-ai-orb .lz-sparkle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--lz-color, #f5f5f7);
 }
-.lz-planet-orb .lz-moon:nth-child(2) {
-  transform: rotate(180deg) translateX(0.36em);
+.lz-ai-orb .lz-sparkle::before {
+  clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
 }
-.lz-planet-orb .lz-moon:nth-child(3) {
-  transform: rotate(120deg) translateX(0.36em);
+.lz-ai-orb .lz-sparkle::after {
+  clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
+  transform: rotate(90deg);
 }
-.lz-planet-orb .lz-moon:nth-child(4) {
-  transform: rotate(240deg) translateX(0.36em);
+.lz-ai-orb .lz-sparkle.a {
+  right: 0.01em;
+  top: -0.01em;
 }
-.lz-planet-orb .lz-moon:nth-child(5) {
-  transform: rotate(72deg) translateX(0.36em);
+.lz-ai-orb .lz-sparkle.b {
+  left: -0.01em;
+  bottom: 0.02em;
+  animation-delay: -1.5s;
 }
-.lz-aura-orb {
+.lz-ai-thinking {
   position: relative;
-  width: var(--lz-size, 44px);
-  height: var(--lz-size, 44px);
+  width: 2.1em;
+  height: 0.66em;
+  font-size: var(--lz-size, 40px);
 }
-.lz-aura-orb .lz-layer {
+.lz-ai-thinking .lz-field {
   position: absolute;
   inset: 0;
-  animation: lz-spin calc(3s * var(--lz-speed, 1)) linear infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.32em;
+  border-radius: 999px;
+  background: var(--lz-surface, rgba(255, 255, 255, 0.07));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lz-color, #f5f5f7) 12%, transparent);
 }
-.lz-aura-orb .lz-layer.a {
-  animation-duration: calc(2.6s * var(--lz-speed, 1));
+.lz-ai-thinking .lz-dot {
+  width: 0.16em;
+  height: 0.16em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  animation: lz-typing-pulse calc(1s * var(--lz-speed, 1)) cubic-bezier(0.28, 0.1, 0.25, 1.15) infinite;
 }
-.lz-aura-orb .lz-layer.b {
-  animation-name: lz-spin-reverse;
-  animation-duration: calc(3.4s * var(--lz-speed, 1));
+.lz-ai-thinking .lz-field .lz-dot:nth-child(2) {
+  animation-delay: -0.2s;
 }
-.lz-aura-orb .lz-orb {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 0.78em;
-  height: 0.78em;
-  margin: -0.39em 0 0 -0.39em;
-  border-radius: 50%;
-  transform: translateX(0.14em);
+.lz-ai-thinking .lz-field .lz-dot:nth-child(3) {
+  animation-delay: -0.4s;
 }
-.lz-aura-orb .lz-layer.a .lz-orb {
+.lz-ai-thinking .lz-aura {
+  position: absolute;
+  inset: -0.16em;
+  border-radius: 999px;
+  border: 2px solid transparent;
   background:
-    radial-gradient(
-      circle at 35% 30%,
-      color-mix(in srgb, var(--lz-color, #f5f5f7) 90%, transparent) 0%,
-      color-mix(in srgb, var(--lz-color, #f5f5f7) 40%, transparent) 62%,
-      transparent 76%);
+    conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      var(--lz-accent, #0a84ff) 8deg,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 30%, transparent) 34deg,
+      transparent 92deg) border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: lz-spin calc(1.9s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-ai-neural {
+  display: grid;
+  grid-template-columns: repeat(5, 1em);
+  gap: var(--lz-grid-gap, 10px);
+  font-size: var(--lz-size, 6px);
 }
-.lz-aura-orb .lz-layer.b .lz-orb {
-  background:
-    radial-gradient(
-      circle at 35% 30%,
-      var(--lz-accent, #0a84ff) 0%,
-      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 62%,
-      transparent 76%);
-  opacity: 0.9;
+.lz-ai-neural .lz-dot {
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  animation: lz-grid-dot-wave calc(1.5s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
 }
 .lz-waveform {
   display: flex;
@@ -985,40 +974,122 @@
   position: absolute;
   inset: 0;
   border-radius: 50%;
+  overflow: hidden;
   background:
     repeating-radial-gradient(
       circle at 50% 50%,
-      rgba(255, 255, 255, 0.06) 0 1px,
+      rgba(255, 255, 255, 0.055) 0 1px,
       transparent 1px 4px),
     radial-gradient(
       circle at 50% 50%,
-      var(--lz-accent, #0a84ff) 0 13%,
-      rgba(0, 0, 0, 0.88) 14% 100%);
+      rgba(255, 255, 255, 0.05) 0 17%,
+      rgba(0, 0, 0, 0.22) 17% 18%,
+      transparent 18% 20%,
+      rgba(255, 255, 255, 0.045) 20% 21%,
+      transparent 21% 100%),
+    radial-gradient(circle at 50% 50%, #141216 0 100%);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  animation: lz-spin calc(3.5s * var(--lz-speed, 1)) linear infinite;
+  animation: lz-spin calc(3.2s * var(--lz-speed, 1)) linear infinite;
 }
-.lz-vinyl .lz-needle {
+.lz-vinyl .lz-disc::before {
+  content: "";
   position: absolute;
-  top: 0.08em;
-  right: 0.18em;
-  width: 0.06em;
-  height: 0.7em;
-  border-radius: 3px;
-  background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 30%, transparent));
-  transform: rotate(38deg);
+  inset: 0;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      112deg,
+      transparent 26%,
+      rgba(255, 255, 255, 0.17) 40%,
+      rgba(255, 255, 255, 0.04) 49%,
+      transparent 62%);
+}
+.lz-vinyl .lz-label {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.5em;
+  height: 0.5em;
+  margin: -0.25em 0 0 -0.25em;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 36% 30%,
+      rgba(255, 255, 255, 0.35) 0 5%,
+      transparent 6%),
+    radial-gradient(
+      circle at 63% 68%,
+      rgba(0, 0, 0, 0.4) 0 7%,
+      transparent 8%),
+    var(--lz-accent, #0a84ff);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
+}
+.lz-vinyl .lz-spindle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.09em;
+  height: 0.09em;
+  margin: -0.045em 0 0 -0.045em;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.9);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+.lz-vinyl .lz-arm {
+  position: absolute;
+  top: 0.05em;
+  right: 0.06em;
+  width: 0.8em;
+  height: 0.8em;
   transform-origin: top right;
   animation: lz-needle-bob calc(1.8s * var(--lz-speed, 1)) ease-in-out infinite;
 }
-.lz-vinyl .lz-needle .lz-tip {
+.lz-vinyl .lz-post {
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0.1em;
-  height: 0.1em;
-  margin-left: -0.05em;
-  transform: translateY(0.1em);
+  right: -0.01em;
+  top: -0.01em;
+  width: 0.13em;
+  height: 0.13em;
   border-radius: 50%;
-  background: var(--lz-accent, #0a84ff);
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      var(--lz-color, #f5f5f7) 0 42%,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent) 100%);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
+.lz-vinyl .lz-shaft {
+  position: absolute;
+  right: 0.045em;
+  top: 0.02em;
+  width: 0.06em;
+  height: 0.48em;
+  border-radius: 3px;
+  background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 35%, transparent));
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
+  transform-origin: top center;
+  transform: rotate(24deg);
+}
+.lz-vinyl .lz-shaft::before {
+  content: "";
+  position: absolute;
+  top: -0.035em;
+  left: -0.04em;
+  width: 0.14em;
+  height: 0.14em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+.lz-vinyl .lz-shaft::after {
+  content: "";
+  position: absolute;
+  bottom: -0.05em;
+  left: 0.005em;
+  width: 0.05em;
+  height: 0.1em;
+  border-radius: 0 0 3px 3px;
+  background: color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white);
 }
 .lz-sonar {
   position: relative;
@@ -1054,25 +1125,51 @@
 }
 .lz-music-note {
   display: flex;
-  align-items: baseline;
-  gap: 0.45em;
+  align-items: center;
+  gap: 0.5em;
   font-size: var(--lz-size, 32px);
   line-height: 1;
 }
 .lz-music-note .lz-note {
+  position: relative;
   display: inline-block;
-  line-height: 1;
-  color: var(--lz-color, #f5f5f7);
+  width: 0.42em;
+  height: 0.88em;
   animation: lz-note-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
 }
-.lz-music-note .lz-note:nth-child(2) {
-  animation-delay: -0.5s;
+.lz-music-note .lz-head {
+  position: absolute;
+  left: 0;
+  bottom: 0.06em;
+  width: 0.3em;
+  height: 0.24em;
+  border-radius: 55% 45% 50% 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: inset -0.045em -0.02em 0 color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, #000);
+  transform: rotate(-18deg);
 }
-.lz-music-note .lz-note:nth-child(3) {
-  animation-delay: -0.9s;
+.lz-music-note .lz-stem {
+  position: absolute;
+  left: 0.175em;
+  bottom: 0.13em;
+  width: 0.045em;
+  height: 0.6em;
+  border-radius: 2px;
+  background: var(--lz-color, #f5f5f7);
 }
-.lz-music-note .lz-note:nth-child(4) {
-  animation-delay: -0.3s;
+.lz-music-note .lz-flag {
+  position: absolute;
+  left: 0.22em;
+  bottom: 0.61em;
+  width: 0.24em;
+  height: 0.2em;
+  border: 0.045em solid var(--lz-color, #f5f5f7);
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 0.14em 0.02em / 0 0 0.26em 0.02em;
+}
+.lz-music-note .lz-note.second .lz-head {
+  background: color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, var(--lz-accent, #0a84ff));
 }
 .lz-activity-rings {
   width: var(--lz-size, 44px);