@soba-so/react 0.0.20 → 0.0.22

package/dist/styles.css

@@ -12,11 +12,18 @@
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   
-  --sc-tray: var(--sc-raised, #f6f6f7);
+  --sc-danger: #c2452d;
+  
+  --sc-warn-dot: #d9a21b;
+  
+  
+  --sc-tray: #f3f3f2;
   --sc-tray-card: var(--sc-sheet, #ffffff);
-  --sc-tray-sunk: var(--sc-raised, #f6f6f7);
+  --sc-tray-sunk: #efefed;
   
   --sc-font-size: 15px;
+  
+  --sc-scale: 1;
   --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
   
   --sc-fs-small: max(12px, calc(var(--sc-font-size) * 0.87));
@@ -200,10 +207,6 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-tone-absent {
-  color: var(--sc-faint, #a1a1aa);
-}
-
 .sc-error {
   color: var(--sc-warn, #b06f14);
   font-size: var(--sc-fs-body);
@@ -252,10 +255,11 @@ a.sc-btn {
 
 .sc-tray {
   display: grid;
-  gap: 8px;
-  padding: 6px;
-  border-radius: 18px;
-  background: var(--sc-tray, #f6f6f7);
+  
+  gap: calc(16px * var(--sc-scale, 1));
+  padding: calc(16px * var(--sc-scale, 1));
+  border-radius: calc(18px * var(--sc-scale, 1));
+  background: var(--sc-tray, #f3f3f2);
 }
 
 .sc-group {
@@ -265,16 +269,17 @@ a.sc-btn {
 .sc-group-cap {
   display: flex;
   align-items: center;
-  gap: 4px;
-  min-height: 24px;
-  padding: 0 2px 3px 12px;
+  gap: calc(4px * var(--sc-scale, 1));
+  min-height: calc(22px * var(--sc-scale, 1));
+  
+  padding: 0 0 calc(8px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
 }
 
 .sc-cap-acts {
   flex: none;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: calc(4px * var(--sc-scale, 1));
 }
 
 .sc-group-title {
@@ -284,24 +289,28 @@ a.sc-btn {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--sc-fs-label);
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   letter-spacing: 0;
   color: var(--sc-muted, #6b6b73);
 }
 
 .sc-group-card {
-  padding: 6px 0 6px 12px;
-  border-radius: var(--sc-r-lg, 14px);
+  padding: calc(7px * var(--sc-scale, 1)) 0 calc(7px * var(--sc-scale, 1))
+    calc(12px * var(--sc-scale, 1));
+  border-radius: calc(12px * var(--sc-scale, 1));
   background: var(--sc-tray-card, #ffffff);
-  box-shadow: var(--sc-shadow-1);
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
 }
 
 .sc-disc {
   flex: none;
   display: grid;
   place-items: center;
-  width: 26px;
-  height: 26px;
+  
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
   padding: 0;
   border: 0;
   border-radius: 50%;
@@ -322,8 +331,8 @@ a.sc-btn {
 }
 
 .sc-dglyph {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 @keyframes sc-spin {
@@ -339,9 +348,10 @@ a.sc-btn {
 .sc-mrow {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 52px;
-  padding: 4px 12px 4px 0;
+  gap: calc(14px * var(--sc-scale, 1));
+  min-height: calc(52px * var(--sc-scale, 1));
+  padding: calc(7px * var(--sc-scale, 1)) calc(16px * var(--sc-scale, 1))
+    calc(7px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
 }
 
 .sc-mtile {
@@ -349,27 +359,29 @@ a.sc-btn {
   flex: none;
   display: grid;
   place-items: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 12px;
-  background: var(--sc-tray-sunk, #f6f6f7);
-  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
-  color: var(--sc-text, #1a1a1c);
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  
+  border-radius: calc(9px * var(--sc-scale, 1));
+  
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-text, #1b1b1a);
 }
 
 .sc-mglyph {
-  width: 24px;
-  height: 18px;
+  width: calc(24px * var(--sc-scale, 1));
+  height: calc(19px * var(--sc-scale, 1));
 }
 
 .sc-mbadge {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 10px;
-  height: 10px;
+  left: auto;
+  bottom: calc(-3px * var(--sc-scale, 1));
+  right: calc(-3px * var(--sc-scale, 1));
+  width: calc(14px * var(--sc-scale, 1));
+  height: calc(14px * var(--sc-scale, 1));
   border-radius: 50%;
-  transform: translate(30%, 30%);
+  transform: none;
   box-shadow: 0 0 0 2.5px var(--sc-tray-card, #ffffff);
 }
 
@@ -385,43 +397,60 @@ a.sc-btn {
   background: var(--sc-line-2, #dcdce0);
 }
 
+.sc-mbadge-away {
+  background: var(--sc-warn-dot, #d9a21b);
+}
+
 .sc-mid {
   display: flex;
   flex: 1;
   min-width: 0;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
 }
 
 .sc-mname {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--sc-fs-small);
-  font-weight: 550;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
+  font-weight: 600;
 }
 
 .sc-mmeta {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1px 6px;
-  font-size: var(--sc-fs-label);
+  align-items: baseline;
+  gap: calc(10px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
   line-height: 1.35;
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-mmeta-is {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-mmeta-now {
+  flex: none;
+  margin-left: auto;
+  color: var(--sc-text-2, #3f3f46);
+  font-variant-numeric: tabular-nums;
+}
+
 .sc-mmeta-sep {
-  padding-right: 6px;
+  padding: 0 calc(6px * var(--sc-scale, 1));
   color: var(--sc-line-2, #dcdce0);
 }
 
 .sc-mrow-btn {
-  width: calc(100% + 4px);
-  margin-left: -4px;
-  padding-left: 4px;
+  width: calc(100% + calc(4px * var(--sc-scale, 1)));
+  margin-left: calc(-4px * var(--sc-scale, 1));
+  padding-left: calc(4px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 10px;
+  border-radius: calc(10px * var(--sc-scale, 1));
   background: transparent;
   color: inherit;
   font: inherit;
@@ -440,8 +469,8 @@ a.sc-btn {
 
 .sc-chev {
   flex: none;
-  width: 14px;
-  height: 14px;
+  width: calc(14px * var(--sc-scale, 1));
+  height: calc(14px * var(--sc-scale, 1));
   color: var(--sc-muted, #6b6b73);
   transition: transform 120ms ease;
 }
@@ -450,66 +479,408 @@ a.sc-btn {
   transform: rotate(90deg);
 }
 
+.sc-group-card:has(> .sc-rrow) {
+  padding: 0 calc(16px * var(--sc-scale, 1));
+}
 .sc-rrow {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 6px 12px 6px 0;
+  align-items: center;
+  gap: calc(14px * var(--sc-scale, 1));
+  padding: calc(14px * var(--sc-scale, 1)) 0;
 }
-
-.sc-rrow .sc-runtime-tile {
-  margin-top: 1px;
+.sc-rrow + .sc-rrow {
+  box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
 }
-
-.sc-rtop {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
+.sc-rdot {
+  flex: none;
+  width: calc(10px * var(--sc-scale, 1));
+  height: calc(10px * var(--sc-scale, 1));
+  border-radius: 50%;
+  background: var(--sc-line-2, #dcdce0);
 }
-
-.sc-rtop .sc-averdict {
-  font-variant-numeric: tabular-nums;
+.sc-rdot-live {
+  background: var(--sc-ok, #1e8e5a);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .sc-rdot-live {
+    animation: sc-breathe 1.6s ease-in-out infinite;
+  }
+}
+@keyframes sc-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.sc-rtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  font-weight: 500;
 }
 
 .sc-rstop {
-  align-self: center;
-  width: 24px;
-  height: 24px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: calc(44px * var(--sc-scale, 1));
+  height: calc(44px * var(--sc-scale, 1));
+  margin: calc(-8px * var(--sc-scale, 1)) calc(-10px * var(--sc-scale, 1))
+    calc(-8px * var(--sc-scale, 1)) 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--sc-muted, #6b6b69);
+  cursor: pointer;
 }
 
+.sc-rstop-ring {
+  display: grid;
+  place-items: center;
+  width: calc(28px * var(--sc-scale, 1));
+  height: calc(28px * var(--sc-scale, 1));
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9e7);
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease;
+}
+.sc-rstop:hover:not(:disabled) {
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-rstop:hover:not(:disabled) .sc-rstop-ring {
+  background: var(--sc-tray-sunk, #efefed);
+  box-shadow: inset 0 0 0 1px transparent;
+}
+.sc-rstop .sc-dglyph {
+  width: calc(10px * var(--sc-scale, 1));
+  height: calc(10px * var(--sc-scale, 1));
+}
+.sc-rstop:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
 .sc-rstep {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  font-size: var(--sc-fs-label);
+  line-clamp: 2;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
   line-height: 1.4;
+  color: var(--sc-muted, #6b6b69);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-blank {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(12px * var(--sc-scale, 1));
+  padding: calc(24px * var(--sc-scale, 1)) calc(24px * var(--sc-scale, 1))
+    calc(26px * var(--sc-scale, 1));
+  text-align: center;
+}
+.sc-blank-mark {
+  display: grid;
+  place-items: center;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  border-radius: 50%;
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-faint, #8c8c89);
+}
+.sc-blank-glyph {
+  width: calc(20px * var(--sc-scale, 1));
+  height: calc(20px * var(--sc-scale, 1));
+}
+.sc-blank-say {
+  display: flex;
+  flex-direction: column;
+  gap: calc(4px * var(--sc-scale, 1));
+}
+.sc-blank-title {
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
+  font-weight: 600;
+}
+.sc-blank-body {
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  line-height: calc(20px * var(--sc-scale, 1));
+  color: var(--sc-muted, #6b6b69);
+}
+
+.sc-blank-act {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(7px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  padding: 0 calc(14px * var(--sc-scale, 1));
+  border: 1px solid var(--sc-line, #e6e6e3);
+  border-radius: calc(11px * var(--sc-scale, 1));
+  color: var(--sc-text, #1b1b1a);
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 120ms ease;
+}
+.sc-blank-act:hover {
+  background: var(--sc-tray-sunk, #efefed);
+}
+
+.sc-alarm {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(14px * var(--sc-scale, 1));
+  margin: calc(-7px * var(--sc-scale, 1)) -0 calc(-7px * var(--sc-scale, 1))
+    calc(-12px * var(--sc-scale, 1));
+  padding: calc(16px * var(--sc-scale, 1));
+  border-radius: calc(12px * var(--sc-scale, 1));
+  background: color-mix(in srgb, var(--sc-danger, #c2452d) 9%, var(--sc-tray-card, #ffffff));
+}
+
+.sc-alarm-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: calc(30px * var(--sc-scale, 1));
+  margin-top: 1px;
+  color: var(--sc-danger, #c2452d);
+}
+.sc-alarm-mark .sc-hglyph {
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
+}
+
+.sc-alarm-warn {
+  background: color-mix(in srgb, var(--sc-warn, #b06f14) 10%, var(--sc-tray-card, #ffffff));
+}
+.sc-alarm-warn .sc-alarm-mark {
+  color: var(--sc-warn, #b06f14);
+}
+.sc-alarm + .sc-alarm {
+  margin-top: calc(8px * var(--sc-scale, 1));
+}
+.sc-alarm-say {
+  display: flex;
+  flex-direction: column;
+  gap: calc(4px * var(--sc-scale, 1));
+  min-width: 0;
+}
+.sc-alarm-title {
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
+  font-weight: 600;
+}
+.sc-alarm-body {
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  line-height: calc(20px * var(--sc-scale, 1));
+  color: var(--sc-text-2, #5a4a46);
+}
+
+.sc-away {
+  display: flex;
+  align-items: center;
+  gap: calc(12px * var(--sc-scale, 1));
+  padding: calc(6px * var(--sc-scale, 1)) calc(12px * var(--sc-scale, 1))
+    calc(6px * var(--sc-scale, 1)) 0;
+}
+.sc-away-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  border-radius: calc(9px * var(--sc-scale, 1));
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-away-mark .bx {
+  width: calc(26px * var(--sc-scale, 1));
+  height: calc(26px * var(--sc-scale, 1));
+  --bx-w: 24;
+}
+.sc-away-say {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.sc-away-title {
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  font-weight: 600;
+}
+.sc-away-body {
+  font-size: calc(var(--sc-font-size, 15px) * 0.8667);
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-away-go {
+  flex: none;
+  height: calc(32px * var(--sc-scale, 1));
+  padding: 0 calc(14px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: 999px;
+  background: var(--sc-accent, #1b1b1a);
+  color: var(--sc-accent-fg, #ffffff);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.sc-away-go:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.sc-away-go:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-cap-link {
+  flex: none;
+  margin: calc(-8px * var(--sc-scale, 1)) calc(-4px * var(--sc-scale, 1))
+    calc(-8px * var(--sc-scale, 1)) 0;
+  padding: calc(8px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1));
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
+  color: var(--sc-text-2, #3f3f46);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.sc-cap-link:hover {
+  color: var(--sc-text, #1b1b1a);
+}
+
+.sc-acts {
+  display: flex;
+  flex-direction: column;
+  gap: calc(4px * var(--sc-scale, 1));
+}
+.sc-act-go {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(9px * var(--sc-scale, 1));
+  height: calc(48px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: calc(10px * var(--sc-scale, 1));
+  background: var(--sc-accent, #1b1b1a);
+  color: var(--sc-accent-fg, #ffffff);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.sc-act-go:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+.sc-acts-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sc-act-small {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(7px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  padding: 0 calc(12px * var(--sc-scale, 1)) 0 calc(15px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: 999px;
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
+  color: var(--sc-text, #1a1a1c);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 550;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition:
+    box-shadow 140ms ease,
+    transform 140ms ease;
+}
+.sc-act-small .sc-dglyph {
+  width: calc(12px * var(--sc-scale, 1));
+  height: calc(12px * var(--sc-scale, 1));
   color: var(--sc-muted, #6b6b73);
+  transition:
+    color 140ms ease,
+    transform 140ms ease;
+}
+.sc-act-small:hover:not(:disabled) {
+  box-shadow:
+    var(--sc-shadow-1),
+    inset 0 0 0 1px var(--sc-line, #e9e9eb);
+}
+.sc-act-small:hover:not(:disabled) .sc-dglyph {
+  color: var(--sc-text, #1a1a1c);
+  transform: translate(1px, -1px);
+}
+.sc-act-small:active:not(:disabled) {
+  transform: scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sc-act-small,
+  .sc-act-small .sc-dglyph {
+    transition: none;
+  }
+  .sc-act-small:active:not(:disabled),
+  .sc-act-small:hover:not(:disabled) .sc-dglyph {
+    transform: none;
+  }
+}
+.sc-act-go:disabled,
+.sc-act-go[data-spin],
+.sc-act-glyph {
+  flex: none;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
+}
+
+.sc-act-miss {
+  margin: calc(4px * var(--sc-scale, 1)) 2px 0;
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
+  line-height: 1.5;
+  color: var(--sc-muted, #6b6b69);
+  text-align: center;
 }
 
 .sc-arow {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 30px;
-  padding-right: 12px;
+  gap: calc(10px * var(--sc-scale, 1));
+  min-height: calc(30px * var(--sc-scale, 1));
+  padding-right: calc(12px * var(--sc-scale, 1));
 }
 
 .sc-runtime-tile {
   flex: none;
   display: grid;
   place-items: center;
-  width: 22px;
-  height: 22px;
-  border-radius: var(--sc-r-sm, 6px);
+  width: calc(30px * var(--sc-scale, 1));
+  height: calc(30px * var(--sc-scale, 1));
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
   border: 1px solid var(--sc-line, #e9e9eb);
   background: var(--sc-tray-sunk, #f6f6f7);
 }
 
 .sc-runtime-logo {
-  width: 15px;
-  height: 15px;
-  border-radius: 3px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
+  border-radius: calc(3px * var(--sc-scale, 1));
   object-fit: contain;
 }
 
@@ -520,17 +891,9 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runs-logo {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  object-fit: contain;
-}
-
 .sc-runtime-mark {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
   color: var(--sc-text-2, #3f3f46);
 }
 
@@ -543,10 +906,6 @@ a.sc-btn {
   font-size: var(--sc-fs-small);
 }
 
-.sc-aname-absent {
-  color: var(--sc-muted, #6b6b73);
-}
-
 .sc-aversion {
   color: var(--sc-muted, #6b6b73);
 }
@@ -560,46 +919,34 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-sglyph {
-  flex: none;
-  width: 11px;
-  height: 11px;
-  color: var(--sc-ok, #22a06b);
-}
-
-.sc-aserving {
-  margin-left: 5px;
-  font-variant-numeric: tabular-nums;
-}
-
 .sc-orow {
   display: flex;
   align-items: center;
-  gap: 10px;
-  min-height: 34px;
-  padding-right: 12px;
+  gap: calc(18px * var(--sc-scale, 1));
+  min-height: calc(34px * var(--sc-scale, 1));
+  padding-right: calc(12px * var(--sc-scale, 1));
 }
 
 .sc-otile {
   flex: none;
   display: grid;
   place-items: center;
-  width: 22px;
-  height: 22px;
-  border-radius: var(--sc-r-sm, 6px);
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
   background: var(--sc-tray-sunk, #f6f6f7);
   color: var(--sc-muted, #6b6b73);
 }
 
 .sc-otile .sc-mglyph {
-  width: 15px;
-  height: 11px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(11px * var(--sc-scale, 1));
 }
 
 .sc-oglyph,
 .sc-omark {
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-oname {
@@ -621,13 +968,13 @@ a.sc-btn {
 .sc-pair {
   display: flex;
   align-items: center;
-  gap: 10px;
-  width: calc(100% + 4px);
-  min-height: 34px;
-  margin-left: -4px;
-  padding: 0 12px 0 4px;
+  gap: calc(18px * var(--sc-scale, 1));
+  width: calc(100% + calc(4px * var(--sc-scale, 1)));
+  min-height: calc(34px * var(--sc-scale, 1));
+  margin-left: calc(-4px * var(--sc-scale, 1));
+  padding: 0 calc(12px * var(--sc-scale, 1)) 0 calc(4px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(8px * var(--sc-scale, 1));
   background: transparent;
   font: inherit;
   font-size: var(--sc-fs-small);
@@ -641,7 +988,8 @@ a.sc-btn {
 }
 
 .sc-open-app {
-  color: inherit;
+  
+  color: var(--sc-muted, #6b6b73);
   text-decoration: none;
 }
 
@@ -651,105 +999,78 @@ a.sc-btn {
 
 .sc-row-note {
   margin: 0;
-  padding: 2px 12px 4px 0;
+  padding: 2px calc(12px * var(--sc-scale, 1)) calc(4px * var(--sc-scale, 1)) 0;
   font-size: var(--sc-fs-label);
   line-height: 1.45;
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runs-to {
-  display: inline-flex;
-  flex: none;
+.sc-nilrow {
+  display: flex;
   align-items: center;
-  gap: 2px;
-  min-width: 0;
-  max-width: 62%;
-  font-size: var(--sc-fs-label);
-  color: var(--sc-muted, #6b6b73);
-}
-
-.sc-runs-cap {
-  flex: none;
-  white-space: nowrap;
+  gap: calc(10px * var(--sc-scale, 1));
+  margin: 0;
+  padding: calc(9px * var(--sc-scale, 1)) 0;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  color: var(--sc-muted, #6b6b69);
 }
 
-.sc-runs-fixed,
-.sc-runs-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  height: 24px;
-  padding: 0 6px;
-  font-size: var(--sc-fs-label);
-  font-weight: 500;
-  color: var(--sc-text-2, #3f3f46);
+.sc-group-card:has(> .sc-nilrow) {
+  padding: calc(7px * var(--sc-scale, 1)) calc(16px * var(--sc-scale, 1));
 }
-
-.sc-runs-btn {
-  padding-right: 4px;
-  border: 0;
-  border-radius: var(--sc-r-pill, 999px);
-  background: transparent;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
+.sc-nilrow-mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: calc(28px * var(--sc-scale, 1));
+  height: calc(28px * var(--sc-scale, 1));
+  border-radius: 50%;
+  background: var(--sc-tray-sunk, #efefed);
+  color: var(--sc-faint, #8c8c89);
 }
-
-.sc-runs-btn:hover:not(:disabled),
-.sc-runs-btn[aria-expanded="true"] {
-  background: var(--sc-tray-card, #ffffff);
-  color: var(--sc-text, #1a1a1c);
+.sc-nilrow-mark .sc-blank-glyph {
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
 }
 
-.sc-runs-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.sc-runs-glyph {
-  flex: none;
-  width: 12px;
-  height: 12px;
+.sc-heads {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(8px * var(--sc-scale, 1));
+  margin: 2px calc(12px * var(--sc-scale, 1)) calc(3px * var(--sc-scale, 1)) 0;
+  padding: calc(8px * var(--sc-scale, 1)) calc(10px * var(--sc-scale, 1));
+  border-radius: var(--sc-r, calc(10px * var(--sc-scale, 1)));
+  background: color-mix(in srgb, var(--sc-warn, #b06f14) 9%, var(--sc-tray-card, #ffffff));
 }
-
-.sc-runs-mark {
-  display: inline-grid;
+.sc-heads-mark {
   flex: none;
+  display: grid;
   place-items: center;
-  width: 14px;
-  height: 14px;
+  
+  margin-top: 1px;
+  color: var(--sc-warn, #b06f14);
 }
-
-.sc-runs-mark > * {
-  max-width: 14px;
-  max-height: 14px;
+.sc-hglyph {
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
-
-.sc-runs-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sc-runs-btn .sc-chev {
-  width: 11px;
-  height: 11px;
-  color: var(--sc-faint, #a1a1aa);
+.sc-heads-say {
+  margin: 0;
+  font-size: var(--sc-fs-label);
+  line-height: 1.45;
+  color: var(--sc-text-2, #3f3f46);
 }
 
 .sc-menu {
   position: fixed;
   inset: auto;
   z-index: 2147483647;
-  width: 248px;
+  
+  width: calc(320px * var(--sc-scale, 1));
   margin: 0;
-  padding: 4px;
+  padding: calc(4px * var(--sc-scale, 1));
   border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: 12px;
+  border-radius: calc(10px * var(--sc-scale, 1));
   background: var(--sc-tray-card, #ffffff);
   box-shadow:
     0 10px 30px rgba(0, 0, 0, 0.12),
@@ -764,15 +1085,16 @@ a.sc-btn {
 .sc-menu-item {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: calc(14px * var(--sc-scale, 1));
   width: 100%;
-  min-height: 34px;
-  padding: 5px 8px;
+  
+  min-height: calc(44px * var(--sc-scale, 1));
+  padding: calc(7px * var(--sc-scale, 1)) calc(12px * var(--sc-scale, 1));
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(7px * var(--sc-scale, 1));
   background: transparent;
   font: inherit;
-  font-size: var(--sc-fs-small);
+  font-size: calc(var(--sc-font-size, 15px) * 1);
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -796,29 +1118,54 @@ a.sc-btn {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.sc-menu-note {
-  font-size: var(--sc-fs-label);
-  line-height: 1.4;
-  color: var(--sc-muted, #6b6b73);
+
+.sc-menu-note {
+  font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.9));
+  line-height: 1.4;
+  color: var(--sc-muted, #6b6b69);
+}
+
+.sc-row-act {
+  flex: none;
+  padding: calc(6px * var(--sc-scale, 1)) calc(8px * var(--sc-scale, 1));
+  margin-right: calc(-8px * var(--sc-scale, 1));
+  border: 0;
+  border-radius: calc(7px * var(--sc-scale, 1));
+  background: transparent;
+  color: var(--sc-text, #1a1a1c);
+  font: inherit;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  font-weight: 600;
+  cursor: pointer;
+}
+.sc-row-act:hover {
+  background: var(--sc-tray-sunk, #efefed);
 }
 
+.sc-menu-act {
+  flex: none;
+  margin-left: auto;
+  padding-left: calc(10px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 0.8667);
+  font-weight: 600;
+  color: var(--sc-text, #1a1a1c);
+}
 .sc-menu-check {
   flex: none;
-  width: 15px;
-  height: 15px;
+  width: calc(15px * var(--sc-scale, 1));
+  height: calc(15px * var(--sc-scale, 1));
   color: var(--sc-text-2, #3f3f46);
 }
 
 .sc-menu-sep {
   height: 1px;
-  margin: 4px 6px;
+  margin: calc(4px * var(--sc-scale, 1)) calc(6px * var(--sc-scale, 1));
   background: var(--sc-line, #e9e9eb);
 }
 
 .sc-menu-head {
-  margin: 6px 6px 2px;
-  padding-top: 7px;
+  margin: calc(6px * var(--sc-scale, 1)) calc(6px * var(--sc-scale, 1)) 2px;
+  padding-top: calc(7px * var(--sc-scale, 1));
   border-top: 1px solid var(--sc-line, #e9e9eb);
   font-size: var(--sc-fs-label);
   font-weight: 500;
@@ -831,6 +1178,11 @@ a.sc-btn {
   border-top: 0;
 }
 
+.sc-tray-error {
+  margin: 0;
+  padding: 0 calc(12px * var(--sc-scale, 1)) 2px;
+}
+
 .sc-mp {
   display: inline-flex;
   align-items: center;
@@ -849,12 +1201,12 @@ a.sc-btn {
 .sc-mp-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: calc(5px * var(--sc-scale, 1));
   min-width: 0;
-  height: 26px;
-  padding: 0 5px 0 7px;
+  height: calc(26px * var(--sc-scale, 1));
+  padding: 0 calc(5px * var(--sc-scale, 1)) 0 calc(7px * var(--sc-scale, 1));
   border: 0;
-  border-radius: var(--sc-r-pill, 999px);
+  border-radius: var(--sc-r-pill, calc(999px * var(--sc-scale, 1)));
   background: transparent;
   font: inherit;
   font-size: var(--sc-fs-label);
@@ -881,13 +1233,13 @@ a.sc-btn {
   display: inline-grid;
   flex: none;
   place-items: center;
-  width: 13px;
-  height: 13px;
+  width: calc(13px * var(--sc-scale, 1));
+  height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-mp-glyph {
-  max-width: 13px;
-  max-height: 13px;
+  max-width: calc(13px * var(--sc-scale, 1));
+  max-height: calc(13px * var(--sc-scale, 1));
 }
 
 .sc-mp-label {
@@ -898,37 +1250,171 @@ a.sc-btn {
 }
 
 .sc-mp-btn .sc-chev {
-  width: 11px;
-  height: 11px;
+  width: calc(11px * var(--sc-scale, 1));
+  height: calc(11px * var(--sc-scale, 1));
   color: var(--sc-faint, #a1a1aa);
 }
 
-.sc-row-act {
-  flex: none;
-  padding: 3px 9px;
-  border: 1px solid transparent;
-  border-radius: var(--sc-r-pill, 999px);
-  background: var(--sc-tray-sunk, #f6f6f7);
+.sc-atile .sc-runtime-logo {
+  width: calc(25px * var(--sc-scale, 1));
+  height: calc(25px * var(--sc-scale, 1));
+  border-radius: calc(7px * var(--sc-scale, 1));
+}
+.sc-atile .sc-runtime-mark {
+  width: calc(22px * var(--sc-scale, 1));
+  height: calc(22px * var(--sc-scale, 1));
+}
+.sc-atile .sc-runtime-letter {
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+}
+
+.sc-group-card:has(> .sc-runs-agent) {
+  padding: 0 calc(16px * var(--sc-scale, 1));
+}
+.sc-runs-agent {
+  display: flex;
+  align-items: center;
+  gap: calc(14px * var(--sc-scale, 1));
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: calc(14px * var(--sc-scale, 1)) 0;
+  border: 0;
+  background: transparent;
   font: inherit;
-  font-size: var(--sc-fs-label);
-  font-weight: 500;
-  color: var(--sc-text-2, #3f3f46);
+  color: inherit;
+  text-align: left;
   cursor: pointer;
+}
+
+.sc-runs-dim {
+  opacity: 0.55;
+}
+.sc-runs-agent:disabled,
+.sc-runs-fixed {
+  cursor: default;
+}
+.sc-runs-agent:focus-visible {
+  outline: 2px solid var(--sc-accent, #18181b);
+  outline-offset: -2px;
+  border-radius: var(--sc-r-sm, calc(6px * var(--sc-scale, 1)));
+}
+
+.sc-runs-tile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: calc(36px * var(--sc-scale, 1));
+  height: calc(36px * var(--sc-scale, 1));
+  border-radius: calc(9px * var(--sc-scale, 1));
+  background: var(--sc-tray-sunk, #efefed);
+}
+
+.sc-runs-tile .sc-runtime-logo {
+  width: calc(34px * var(--sc-scale, 1));
+  height: calc(34px * var(--sc-scale, 1));
+  border-radius: calc(7px * var(--sc-scale, 1));
+}
+.sc-runs-tile .sc-runtime-mark {
+  width: calc(30px * var(--sc-scale, 1));
+  height: calc(30px * var(--sc-scale, 1));
+}
+.sc-runs-tile .sc-runtime-letter {
+  font-size: calc(var(--sc-font-size, 15px) * 1.2667);
+}
+.sc-runs-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: calc(var(--sc-font-size, 15px) * 1.0667);
+  font-weight: 600;
+}
+.sc-runs-agent .sc-chev {
+  flex: none;
+  width: calc(16px * var(--sc-scale, 1));
+  height: calc(16px * var(--sc-scale, 1));
+  color: var(--sc-faint, #a1a1aa);
 }
 
-.sc-row-act:hover:not(:disabled) {
-  color: var(--sc-text, #1a1a1c);
+.sc-runs-told {
+  flex: none;
+  font-size: calc(var(--sc-font-size, 15px) * 0.9333);
+  color: var(--sc-muted, #6b6b69);
 }
 
-.sc-row-act:disabled {
-  opacity: 0.5;
-  cursor: default;
+.sc-runs-rule {
+  display: block;
+  height: 1px;
+  background: var(--sc-line, #e9e9e7);
 }
 
-.sc-tray-error {
-  margin: 0;
-  padding: 0 12px 2px;
+.sc-runs-model {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+}
+.sc-runs-model .sc-mp-cap,
+.sc-runs-key {
+  flex: none;
+  width: calc(58px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  color: var(--sc-muted, #6b6b69);
+}
+.sc-runs-model .sc-mp-btn {
+  flex: 1;
+  justify-content: flex-start;
+  gap: calc(14px * var(--sc-scale, 1));
+  min-width: 0;
+  height: auto;
+  min-height: calc(44px * var(--sc-scale, 1));
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+  font-weight: 400;
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-runs-model .sc-mp-btn:hover:not(:disabled),
+.sc-runs-model .sc-mp-btn[aria-expanded="true"] {
+  background: transparent;
+  color: var(--sc-text, #1b1b1a);
+}
+.sc-runs-model .sc-mp-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.sc-runs-model .sc-mp-btn .sc-chev {
+  flex: none;
+  width: calc(16px * var(--sc-scale, 1));
+  height: calc(16px * var(--sc-scale, 1));
+  color: var(--sc-faint, #a1a1aa);
+}
+.sc-runs-model .sc-mp-btn .sc-chev-open {
+  transform: none;
+}
+
+.sc-runs-said {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-height: calc(44px * var(--sc-scale, 1));
+  font-size: calc(var(--sc-font-size, 15px) * 1);
+}
+.sc-runs-val {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sc-pop {
@@ -938,8 +1424,9 @@ a.sc-btn {
   right: auto;
   bottom: auto;
   z-index: 2147483000;
-  width: min(92vw, 320px);
-  max-width: min(92vw, 320px);
+  
+  width: min(92vw, 420px);
+  max-width: min(92vw, 420px);
   
   max-height: calc(100vh - 24px);
   overflow-y: auto;
@@ -955,11 +1442,6 @@ a.sc-btn {
     var(--sc-shadow-2);
 }
 
-.sc-pop > .sc-tray {
-  background: transparent;
-  border-radius: inherit;
-}
-
 @keyframes sc-pop-in {
   from {
     opacity: 0;
@@ -1022,6 +1504,8 @@ a.sc-btn {
     
     --sc-ok: #4cb782;
     --sc-warn: #f2994a;
+    --sc-danger: #e4705a;
+    --sc-warn-dot: #e0ad33;
     
     --sc-tray: var(--sc-ground, #0f0f11);
     --sc-tray-card: var(--sc-raised, #1d1d20);
@@ -1047,6 +1531,7 @@ a.sc-btn {
   
   --sc-ok: #4cb782;
   --sc-warn: #f2994a;
+  --sc-danger: #e4705a;
   
   --sc-tray: var(--sc-ground, #0f0f11);
   --sc-tray-card: var(--sc-raised, #1d1d20);
@@ -1905,10 +2390,12 @@ a.sc-btn {
 .sc-step-lead:focus-visible,
 .sc-step-links a:focus-visible,
 .sc-alt-link:focus-visible,
-.sc-runs-btn:focus-visible,
+.sc-runs-agent:focus-visible,
 .sc-mp-btn:focus-visible,
 .sc-row-act:focus-visible,
 .sc-disc:focus-visible,
+.sc-act-small:focus-visible,
+.sc-away-go:focus-visible,
 .sc-pair:focus-visible,
 .sc-mrow-btn:focus-visible,
 .sc-input:focus-visible,
@@ -2005,12 +2492,7 @@ a.sc-btn {
 .sc-pill-mark {
   width: 16px;
   height: 16px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .sc-pill-mark-busy {
-    animation: sc-spin 2400ms linear infinite;
-  }
+  --bx-w: 34;
 }
 
 .sc-btn-connected .sc-dot {
@@ -3041,3 +3523,279 @@ li.sc-plan-row.sc-plan-current {
 .sc-opt-has-warn {
   color: var(--sc-warn, #b06f14);
 }
+
+.bx * {
+  transform-box: view-box;
+}
+
+.bx-arc,
+.bx-st,
+.bx-z1 path,
+.bx-z2 path,
+.bx-ob path {
+  stroke-width: var(--bx-w, 17);
+}
+
+.bx[data-expression="thinking"] .bx-arc,
+.bx[data-expression="paused"] .bx-arc,
+.bx[data-expression="attention"] .bx-arc,
+.bx[data-expression="connecting"] .bx-arc,
+.bx[data-expression="gone"] .bx-arc,
+.bx[data-expression="snap"] .bx-arc,
+.bx[data-expression="listening"] .bx-arc,
+.bx[data-expression="permission"] .bx-arc,
+.bx[data-expression="ai"] .bx-arc {
+  display: none;
+}
+
+@keyframes bx-stream {
+  to {
+    stroke-dashoffset: -62;
+  }
+}
+
+.bx-st {
+  animation: bx-stream 0.9s linear infinite;
+}
+
+@keyframes bx-think {
+  0%,
+  100% {
+    opacity: 0.26;
+  }
+  33% {
+    opacity: 1;
+  }
+}
+
+.bx-th {
+  opacity: 0.26;
+  animation: bx-think 1.2s ease-in-out infinite;
+}
+
+.bx-th2 {
+  animation-delay: 0.4s;
+}
+
+.bx-th3 {
+  animation-delay: 0.8s;
+}
+
+@keyframes bx-att {
+  0%,
+  80%,
+  100% {
+    transform: rotate(0);
+  }
+  85% {
+    transform: rotate(-8deg);
+  }
+  95% {
+    transform: rotate(8deg);
+  }
+}
+
+.bx-at {
+  
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  animation: bx-att 2s ease-in-out infinite;
+}
+
+@keyframes bx-z {
+  0% {
+    opacity: 0;
+    transform: translate(0, 12px);
+  }
+  25%,
+  70% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(8px, -16px);
+  }
+}
+
+.bx-z1 {
+  animation: bx-z 3s ease-in-out infinite;
+}
+
+.bx-z2 {
+  animation: bx-z 3s ease-in-out 0.75s infinite;
+}
+
+@keyframes bx-orb {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bx-ob {
+  transform-origin: 278px 400px;
+  animation: bx-orb 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+@keyframes bx-xa {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  8%,
+  22% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  45%,
+  100% {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+}
+
+.bx-xa {
+  opacity: 0;
+  animation: bx-xa 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+@keyframes bx-xx {
+  0%,
+  40% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  54% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  60%,
+  90% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+.bx-xx {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-xx 3.2s ease-out infinite;
+}
+
+@keyframes bx-voice {
+  0%,
+  100% {
+    transform: scaleY(0.45);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+.bx-vb {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-voice 0.9s ease-in-out infinite;
+}
+
+.bx-vb2 {
+  animation-delay: 0.15s;
+}
+
+.bx-vb3 {
+  animation-delay: 0.3s;
+}
+
+@keyframes bx-wait {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.15;
+  }
+}
+
+.bx-w {
+  opacity: 0.15;
+  animation: bx-wait 1.2s linear infinite;
+}
+
+@keyframes bx-spark {
+  0%,
+  100% {
+    transform: scale(1) rotate(0);
+  }
+  50% {
+    transform: scale(0.7) rotate(22deg);
+  }
+}
+
+.bx-sp {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bx-spark 2.6s ease-in-out infinite;
+}
+
+.bx-sp2 {
+  animation-delay: -0.87s;
+}
+
+.bx-sp3 {
+  animation-delay: -1.73s;
+}
+
+@keyframes bx-snap {
+  0%,
+  6% {
+    transform: translateX(90px);
+    opacity: 0;
+  }
+  24% {
+    transform: translateX(-10px);
+    opacity: 1;
+  }
+  30% {
+    transform: translateX(4px);
+  }
+  35%,
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.bx-snap {
+  animation: bx-snap 3.6s cubic-bezier(0.3, 0, 0.2, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bx .bx-st,
+  .bx .bx-th,
+  .bx .bx-at,
+  .bx .bx-z1,
+  .bx .bx-z2,
+  .bx .bx-ob,
+  .bx .bx-xa,
+  .bx .bx-xx,
+  .bx .bx-snap,
+  .bx .bx-vb,
+  .bx .bx-w,
+  .bx .bx-sp {
+    animation: none;
+  }
+
+  
+  .bx .bx-th,
+  .bx .bx-z1,
+  .bx .bx-z2,
+  .bx .bx-xx,
+  .bx .bx-snap,
+  .bx .bx-w {
+    opacity: 1;
+    transform: none;
+  }
+}