@soba-so/react 0.0.14 → 0.0.16

package/dist/styles.css

@@ -12,6 +12,10 @@
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   
+  --sc-tray: var(--sc-raised, #f6f6f7);
+  --sc-tray-card: var(--sc-sheet, #ffffff);
+  --sc-tray-sunk: var(--sc-raised, #f6f6f7);
+  
   --sc-font-size: 15px;
   --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
   
@@ -239,121 +243,182 @@ a.sc-btn {
   min-width: 92px;
 }
 
-.sc-machine {
-  border-top: 1px solid var(--sc-line, #e9e9eb);
-  padding-top: 12px;
-  margin-top: 12px;
+.sc-tray {
+  display: grid;
+  gap: 8px;
+  padding: 6px;
+  border-radius: 18px;
+  background: var(--sc-tray, #f6f6f7);
 }
-.sc-machine:first-child {
-  border-top: 0;
-  padding-top: 0;
-  margin-top: 0;
+
+.sc-group {
+  min-width: 0;
 }
 
-.sc-machine-meta {
+.sc-group-cap {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 3px 10px;
-  
-  margin-top: 1px;
-  font-size: var(--sc-fs-small);
-  line-height: 1.35;
-  color: var(--sc-muted, #6b6b73);
+  gap: 4px;
+  min-height: 24px;
+  padding: 0 2px 3px 12px;
 }
 
-.sc-machine-tag {
+.sc-group-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: var(--sc-fs-label);
-  font-weight: 600;
-  padding: 1px 6px;
-  border-radius: var(--sc-r-sm, 6px);
-  background: var(--sc-raised, #f6f6f7);
+  letter-spacing: 0;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-machine-state {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--sc-fs-small);
-  color: var(--sc-muted, #6b6b73);
-  white-space: nowrap;
+.sc-group-card {
+  padding: 6px 0 6px 12px;
+  border-radius: var(--sc-r-lg, 14px);
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow: var(--sc-shadow-1);
 }
 
-.sc-runtimes {
+.sc-disc {
+  flex: none;
   display: grid;
-  gap: 2px;
-  margin: 12px 0 0;
-  
-  --sc-branch: calc(var(--sc-tile, 32px) + 11px);
-  padding: 0 0 0 var(--sc-branch);
-  list-style: none;
-  font-size: var(--sc-fs-small);
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow: var(--sc-shadow-1);
+  color: var(--sc-muted, #6b6b73);
+  cursor: pointer;
+  transition: color 120ms ease;
 }
 
-.sc-compute-act {
-  margin-top: 16px;
+.sc-disc:hover:not(:disabled) {
+  color: var(--sc-text, #1a1a1c);
 }
 
-.sc-compute-act:first-child {
-  margin-top: 0;
+.sc-disc:disabled {
+  opacity: 0.6;
+  cursor: default;
 }
 
-.sc-note + .sc-compute-act,
-.sc-error + .sc-compute-act {
-  margin-top: 9px;
+.sc-dglyph {
+  width: 13px;
+  height: 13px;
 }
 
-.sc-runtime {
+@keyframes sc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sc-spin {
+  animation: sc-spin 900ms linear infinite;
+}
+
+.sc-mrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 4px 12px 4px 0;
+}
+
+.sc-mtile {
   position: relative;
+  flex: none;
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 9px;
-  min-height: 26px;
+  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);
 }
 
-.sc-runtime::before {
-  content: "";
+.sc-mglyph {
+  width: 24px;
+  height: 18px;
+}
+
+.sc-mbadge {
   position: absolute;
-  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
-  top: -2px;
-  bottom: -2px;
-  width: 1px;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transform: translate(30%, 30%);
+  box-shadow: 0 0 0 2.5px var(--sc-tray-card, #ffffff);
+}
+
+.sc-mbadge-ok {
+  background: var(--sc-ok, #22a06b);
+}
+
+.sc-mbadge-busy {
+  background: var(--sc-warn, #b06f14);
+}
+
+.sc-mbadge-off {
   background: var(--sc-line-2, #dcdce0);
 }
 
-.sc-runtime:first-child::before {
-  top: -13px;
+.sc-mid {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
 }
 
-.sc-runtime:last-child::before {
-  bottom: auto;
-  height: calc(50% + 2px);
+.sc-mname {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sc-fs-small);
+  font-weight: 550;
 }
 
-.sc-runtime:first-child:last-child::before {
-  height: calc(50% + 13px);
+.sc-mmeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1px 6px;
+  font-size: var(--sc-fs-label);
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runtime::after {
-  content: "";
-  position: absolute;
-  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
-  top: 50%;
-  width: 22px;
-  height: 1px;
-  background: var(--sc-line-2, #dcdce0);
+.sc-mmeta-sep {
+  padding-right: 6px;
+  color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-arow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 30px;
+  padding-right: 12px;
 }
 
 .sc-runtime-tile {
-  width: 22px;
-  height: 22px;
   flex: none;
   display: grid;
   place-items: center;
+  width: 22px;
+  height: 22px;
   border-radius: var(--sc-r-sm, 6px);
   border: 1px solid var(--sc-line, #e9e9eb);
-  background: var(--sc-raised, #f6f6f7);
+  background: var(--sc-tray-sunk, #f6f6f7);
 }
 
 .sc-runtime-mark {
@@ -362,16 +427,200 @@ a.sc-btn {
   color: var(--sc-text-2, #3f3f46);
 }
 
-.sc-runtime-verdict {
+.sc-aname {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sc-fs-small);
+}
+
+.sc-aversion {
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-averdict {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
   font-size: var(--sc-fs-label);
   white-space: nowrap;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-runtime-name {
+.sc-orow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 34px;
+  padding-right: 12px;
+}
+
+.sc-otile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-tray-sunk, #f6f6f7);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-otile .sc-mglyph {
+  width: 15px;
+  height: 11px;
+}
+
+.sc-oglyph,
+.sc-omark {
+  width: 13px;
+  height: 13px;
+}
+
+.sc-oname {
+  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: var(--sc-fs-small);
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-oword {
+  flex: none;
+  font-size: var(--sc-fs-label);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-pair {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: calc(100% + 4px);
+  min-height: 34px;
+  margin-left: -4px;
+  padding: 0 12px 0 4px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: var(--sc-fs-small);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.sc-pair:hover {
+  background: var(--sc-tray-sunk, #f6f6f7);
+}
+
+.sc-hrow {
+  padding-bottom: 2px;
+}
+
+.sc-row-note {
+  margin: 0;
+  padding: 2px 12px 4px 0;
+  font-size: var(--sc-fs-label);
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.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);
+  font: inherit;
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-text-2, #3f3f46);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sc-row-act:hover:not(:disabled) {
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-row-act:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-tray-error {
+  margin: 0;
+  padding: 0 12px 2px;
+}
+
+.sc-pop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  z-index: 2147483000;
+  width: min(92vw, 320px);
+  max-width: min(92vw, 320px);
+  
+  max-height: calc(100vh - 24px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 20px;
+  background: var(--sc-tray, #f6f6f7);
+  
+  box-shadow:
+    0 0 0 1px var(--sc-line, #e9e9eb),
+    var(--sc-shadow-2);
+}
+
+.sc-pop > .sc-tray {
+  background: transparent;
+  border-radius: inherit;
+}
+
+@keyframes sc-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+
+.sc-pop {
+  animation: sc-pop-in 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: top right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-pop {
+    animation: none;
+  }
+  .sc-spin {
+    animation: none;
+  }
+  .sc-pair {
+    transition: none;
+  }
+}
+
+.sc-compute-act {
+  margin-top: 16px;
+}
+
+.sc-compute-act:first-child {
+  margin-top: 0;
+}
+
+.sc-note + .sc-compute-act,
+.sc-error + .sc-compute-act {
+  margin-top: 9px;
 }
 
 .soba-connect[data-theme="dark"],
@@ -398,6 +647,10 @@ a.sc-btn {
     --sc-ok: #4cb782;
     --sc-warn: #f2994a;
     
+    --sc-tray: var(--sc-ground, #0f0f11);
+    --sc-tray-card: var(--sc-raised, #1d1d20);
+    --sc-tray-sunk: var(--sc-sheet, #161618);
+    
     --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
     --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
   }
@@ -419,6 +672,10 @@ a.sc-btn {
   --sc-ok: #4cb782;
   --sc-warn: #f2994a;
   
+  --sc-tray: var(--sc-ground, #0f0f11);
+  --sc-tray-card: var(--sc-raised, #1d1d20);
+  --sc-tray-sunk: var(--sc-sheet, #161618);
+  
   --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
   --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
 }
@@ -756,22 +1013,6 @@ a.sc-btn {
   box-shadow: none;
 }
 
-.sc-modal-sheet .sc-machine {
-  border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: var(--sc-r, 10px);
-  padding: 11px 12px;
-  margin-top: 14px;
-}
-
-.sc-conns {
-  display: grid;
-  gap: 14px;
-}
-
-.sc-modal-sheet .sc-machine:first-child {
-  margin-top: 0;
-}
-
 .sc-modal-sheet .sc-title {
   font-size: 17px;
   font-weight: 600;
@@ -1011,51 +1252,6 @@ a.sc-btn {
   color: var(--sc-text, #1a1a1c);
 }
 
-.sc-conn,
-.sc-idrow {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 12px;
-}
-
-.sc-conn {
-  padding: 10px 12px;
-  border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: var(--sc-r, 10px);
-  background: var(--sc-sheet, #ffffff);
-}
-
-.sc-conn-note {
-  grid-column: 1 / -1;
-  margin: 2px 0 0;
-  font-size: 12px;
-  line-height: 1.4;
-  color: var(--sc-muted, #6b6b73);
-}
-
-.sc-conn-action {
-  font: inherit;
-  font-size: var(--sc-fs-small);
-  font-weight: 500;
-  padding: 5px 9px;
-  border: 1px solid transparent;
-  border-radius: var(--sc-r-sm, 6px);
-  background: transparent;
-  color: var(--sc-muted, #6b6b73);
-  cursor: pointer;
-}
-
-.sc-conn-action:hover:not(:disabled) {
-  border-color: var(--sc-line-2, #dcdce0);
-  color: var(--sc-text, #1a1a1c);
-}
-
-.sc-conn-action:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
 .sc-btn-wide {
   width: 100%;
 }
@@ -1200,8 +1396,7 @@ a.sc-btn {
 }
 
 .sc-result-ok {
-  
-  color: var(--sc-text, #1a1a1c);
+  color: var(--sc-ok, #22a06b);
 }
 
 .sc-result-off {
@@ -1325,7 +1520,9 @@ a.sc-btn {
 .sc-step-lead:focus-visible,
 .sc-step-links a:focus-visible,
 .sc-alt-link:focus-visible,
-.sc-conn-action:focus-visible,
+.sc-row-act:focus-visible,
+.sc-disc:focus-visible,
+.sc-pair:focus-visible,
 .sc-input:focus-visible,
 .sc-modal-close:focus-visible {
   outline: 2px solid var(--sc-accent, #18181b);
@@ -1376,7 +1573,7 @@ a.sc-btn {
   max-width: 100%;
   min-width: 0;
   
-  padding: 4px 13px 4px 4px;
+  padding: 3px 12px 3px 3px;
   border-radius: var(--sc-r-pill, 999px);
   border-color: var(--sc-line, #e9e9eb);
   
@@ -1400,14 +1597,33 @@ a.sc-btn {
   transform: translateY(0.5px);
 }
 
-.sc-btn-connected .sc-runtime-tile {
+.sc-pill-tile {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
+  background: var(--sc-raised, #f6f6f7);
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
+  color: var(--sc-text, #1a1a1c);
 }
 
-.sc-btn-connected:hover .sc-runtime-tile {
+.sc-btn-connected:hover .sc-pill-tile {
   background: var(--sc-sheet, #ffffff);
 }
 
+.sc-pill-mark {
+  width: 16px;
+  height: 16px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sc-pill-mark-busy {
+    animation: sc-spin 2400ms linear infinite;
+  }
+}
+
 .sc-btn-connected .sc-dot {
   flex: none;
   margin-left: 1px;
@@ -2405,13 +2621,13 @@ li.sc-plan-row.sc-plan-current {
   }
 }
 
-.sc-modal-sheet .sc-machine {
+.sc-modal-sheet .sc-tray {
   animation: sc-arrive 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .sc-modal-sheet .sc-card,
-  .sc-modal-sheet .sc-machine {
+  .sc-modal-sheet .sc-tray {
     animation: none;
   }
   .sc-modal-sheet {
@@ -2436,302 +2652,3 @@ 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;
-  }
-}
-
-[data-version="v1"] .bx .bx-arc {
-  display: revert;
-}
-
-[data-version="v1"] .bx .bx-st,
-[data-version="v1"] .bx .bx-th,
-[data-version="v1"] .bx .bx-at,
-[data-version="v1"] .bx .bx-z1,
-[data-version="v1"] .bx .bx-z2,
-[data-version="v1"] .bx .bx-ob,
-[data-version="v1"] .bx .bx-xa,
-[data-version="v1"] .bx .bx-xx,
-[data-version="v1"] .bx .bx-snap,
-[data-version="v1"] .bx .bx-vb,
-[data-version="v1"] .bx .bx-w,
-[data-version="v1"] .bx .bx-sp {
-  display: none;
-}
-
-[data-version="v1"] .sc-result-ok {
-  color: var(--sc-ok, #22a06b);
-}