api_binding_ui 1.1.0 → 2.0.0

package/dist/studio/index.css

@@ -0,0 +1,2021 @@
+/* src/studio/studio.css */
+.abs-root {
+  --abs-bg: var(--ds-color-background, #fff);
+  --abs-surface: var(--ds-color-surface, #f8fafc);
+  --abs-muted-bg: var(--ds-color-muted, #f1f5f9);
+  --abs-fg: var(--ds-color-foreground, #0f172a);
+  --abs-fg-2: #334155;
+  --abs-muted: var(--ds-color-muted-foreground, #64748b);
+  --abs-faint: #94a3b8;
+  --abs-border: var(--ds-color-border, #e2e8f0);
+  --abs-border-strong: var(--ds-color-border-strong, #cbd5e1);
+  --abs-accent: var(--ds-color-primary, #3b82f6);
+  --abs-accent-hover: var(--ds-color-primary-hover, #2563eb);
+  --abs-accent-subtle: var(--ds-color-accent-subtle, #eff6ff);
+  --abs-accent-muted: var(--ds-color-accent-muted, #dbeafe);
+  --abs-ok: #16a34a;
+  --abs-ok-subtle: var(--ds-color-success-subtle, #f0fdf4);
+  --abs-warn: #d97706;
+  --abs-warn-subtle: #fffbeb;
+  --abs-bad: var(--ds-color-destructive, #dc2626);
+  --abs-bad-subtle: var(--ds-color-destructive-subtle, #fef2f2);
+  --abs-r-sm: 6px;
+  --abs-r: 8px;
+  --abs-r-lg: 10px;
+  --abs-shadow-sm: 0 1px 2px #0f172a0f;
+  --abs-shadow: 0 8px 24px -6px #0f172a24, 0 2px 6px #0f172a0f;
+  --abs-ease: cubic-bezier(.2, .7, .2, 1);
+  --abs-t: .16s;
+  --abs-sans: var(--ds-font-family-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
+  --abs-mono: var(--ds-font-family-mono, "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace);
+  font-family: var(--abs-sans);
+  color: var(--abs-fg);
+  background: var(--abs-surface);
+  overflow: hidden;
+  display: flex;
+  -webkit-font-smoothing: antialiased;
+  flex-direction: column;
+  height: 100%;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.abs-root *, .abs-root *:before, .abs-root *:after {
+  box-sizing: border-box;
+}
+
+.abs-root button, .abs-root input, .abs-root select {
+  font: inherit;
+  color: inherit;
+}
+
+.abs-root :focus-visible {
+  outline: 2px solid var(--abs-accent);
+  outline-offset: 1px;
+}
+
+.abs-root button, .abs-root .abs-opt, .abs-root .abs-select, .abs-root .abs-comp, .abs-root .abs-nav-item {
+  transition: background-color var(--abs-t) var(--abs-ease), border-color var(--abs-t) var(--abs-ease), color var(--abs-t) var(--abs-ease), box-shadow var(--abs-t) var(--abs-ease);
+}
+
+.abs-sr {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+}
+
+.abs-ico {
+  display: block;
+  flex: none;
+}
+
+.abs-c-muted {
+  color: var(--abs-muted);
+}
+
+.abs-c-accent {
+  color: var(--abs-accent);
+}
+
+.abs-c-ok {
+  color: var(--abs-ok);
+}
+
+.abs-rot180 {
+  transform: rotate(180deg);
+}
+
+.abs-rot90 {
+  transform: rotate(90deg);
+}
+
+.abs-twist .abs-ico {
+  transition: transform .2s var(--abs-ease);
+}
+
+.abs-scroll {
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.abs-scroll:hover {
+  scrollbar-color: var(--abs-border-strong) transparent;
+}
+
+.abs-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.abs-scroll::-webkit-scrollbar-thumb {
+  background: padding-box padding-box;
+  border: 2px solid #0000;
+  border-radius: 8px;
+}
+
+.abs-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: var(--abs-border-strong);
+}
+
+@keyframes abs-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes abs-slide {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes abs-pop {
+  from {
+    opacity: 0;
+    transform: translateY(-4px)scale(.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes abs-rot {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.abs-enter {
+  animation: abs-slide .22s var(--abs-ease) backwards;
+}
+
+.abs-spin {
+  animation: .9s linear infinite abs-rot;
+}
+
+.abs-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows .24s var(--abs-ease), opacity .2s var(--abs-ease);
+}
+
+.abs-collapse.is-open {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.abs-collapse-in {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.abs-top {
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr) auto;
+  background: var(--abs-bg);
+  border-bottom: 1px solid var(--abs-border);
+  flex: none;
+  align-items:  center;
+  gap: 16px;
+  height: 56px;
+  padding: 0 16px 0 18px;
+}
+
+.abs-brand {
+  letter-spacing: -.01em;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.abs-top-meta {
+  display: flex;
+  color: var(--abs-muted);
+  align-items:  center;
+  gap: 14px;
+  font-size: 13px;
+}
+
+.abs-overall {
+  color: var(--abs-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-size: 13px;
+}
+
+.abs-overall b {
+  color: var(--abs-fg);
+  font-weight: 600;
+}
+
+.abs-saved {
+  display: flex;
+  justify-content: flex-end;
+  align-items:  center;
+  min-width: 72px;
+}
+
+.abs-saved, .abs-saved button {
+  gap: 5px;
+  font-size: 12.5px;
+}
+
+.abs-saved > * {
+  animation: abs-in .2s var(--abs-ease) backwards;
+}
+
+.abs-saved.is-saved {
+  color: var(--abs-ok);
+}
+
+.abs-saved button {
+  display: flex;
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-bad-subtle);
+  color: var(--abs-bad);
+  cursor: pointer;
+  border: 0;
+  align-items:  center;
+  height: 28px;
+  padding: 0 10px;
+  font-weight: 500;
+}
+
+.abs-find {
+  position: relative;
+  justify-self: center;
+  width: 100%;
+  max-width: 560px;
+}
+
+.abs-find-box {
+  display: flex;
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r);
+  background: var(--abs-surface);
+  align-items:  center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 8px 0 12px;
+}
+
+.abs-find-box:hover {
+  border-color: var(--abs-border-strong);
+}
+
+.abs-find-box:focus-within {
+  background: var(--abs-bg);
+  border-color: var(--abs-accent);
+  box-shadow: 0 0 0 3px var(--abs-accent-muted);
+}
+
+.abs-find-box input {
+  outline: 0;
+  background: none;
+  border: 0;
+  flex: 1;
+  min-width: 0;
+  font-size: 13.5px;
+}
+
+.abs-find-box kbd {
+  font-family: var(--abs-sans);
+  color: var(--abs-muted);
+  border: 1px solid var(--abs-border);
+  background: var(--abs-bg);
+  border-radius: var(--abs-r-sm);
+  padding: 1px 6px;
+  font-size: 11px;
+}
+
+.abs-root .abs-find-pop {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  animation: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .14s var(--abs-ease), transform .14s var(--abs-ease), visibility 0s .14s;
+  max-height: 420px;
+  padding: 6px;
+  transform: translateY(-4px)scale(.985);
+}
+
+.abs-root .abs-find-pop.is-open {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .14s var(--abs-ease), transform .14s var(--abs-ease);
+  transform: none;
+}
+
+.abs-body {
+  display: grid;
+  grid-template-columns: 264px minmax(360px, 1fr) minmax(380px, 440px);
+  flex: 1;
+  min-height: 0;
+}
+
+.abs-nav {
+  background: var(--abs-bg);
+  border-right: 1px solid var(--abs-border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.abs-nav-head {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 12px 8px;
+}
+
+.abs-search {
+  display: flex;
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r);
+  background: var(--abs-bg);
+  align-items:  center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+}
+
+.abs-search:focus-within {
+  border-color: var(--abs-accent);
+  box-shadow: 0 0 0 3px var(--abs-accent-muted);
+}
+
+.abs-search input {
+  outline: 0;
+  background: none;
+  border: 0;
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+}
+
+.abs-nav-scroll {
+  padding: 0 6px 16px 8px;
+}
+
+.abs-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 8px;
+}
+
+.abs-eyebrow {
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--abs-muted);
+  padding: 0 2px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.abs-eyebrow-sm {
+  color: var(--abs-faint);
+  padding: 4px 10px;
+}
+
+.abs-nav-item {
+  display: flex;
+  border-radius: var(--abs-r);
+  cursor: pointer;
+  text-align: left;
+  color: var(--abs-fg-2);
+  background: none;
+  border: 0;
+  align-items:  center;
+  gap: 10px;
+  width: 100%;
+  height: 34px;
+  padding-right: 10px;
+  font-size: 13.5px;
+}
+
+.abs-nav-item > .abs-ico {
+  color: var(--abs-muted);
+}
+
+.abs-nav-item.is-on {
+  background: var(--abs-accent-subtle);
+  color: var(--abs-accent-hover);
+  font-weight: 500;
+}
+
+.abs-nav-item.is-on > .abs-ico {
+  color: var(--abs-accent);
+}
+
+.abs-nav-l {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.abs-ring {
+  display: block;
+  flex: none;
+}
+
+.abs-ring-bg {
+  fill: none;
+  stroke: var(--abs-border);
+}
+
+.abs-ring-fg {
+  fill: none;
+  stroke: var(--abs-accent);
+  transition: stroke-dashoffset .5s var(--abs-ease), stroke var(--abs-t) var(--abs-ease);
+}
+
+.abs-ring.is-done .abs-ring-fg {
+  stroke: var(--abs-ok);
+}
+
+.abs-center {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+  padding: 24px 24px 40px 28px;
+}
+
+.abs-screen-h {
+  display: flex;
+  animation: abs-in .22s var(--abs-ease) backwards;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items:  center;
+  gap: 20px;
+}
+
+.abs-crumbs {
+  color: var(--abs-muted);
+  font-size: 12.5px;
+}
+
+.abs-screen-h h1 {
+  letter-spacing: -.01em;
+  text-wrap: balance;
+  margin: 2px 0 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.abs-progress {
+  display: flex;
+  font-variant-numeric: tabular-nums;
+  align-items:  center;
+  gap: 10px;
+}
+
+.abs-progress > div {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+}
+
+.abs-progress b {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.abs-progress b span {
+  color: var(--abs-faint);
+  font-weight: 500;
+}
+
+.abs-progress small {
+  color: var(--abs-muted);
+  font-size: 12px;
+}
+
+.abs-seg {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: var(--abs-r);
+  background: var(--abs-muted-bg);
+  align-self:  flex-start;
+  padding: 3px;
+}
+
+.abs-seg-thumb {
+  position: absolute;
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-bg);
+  box-shadow: var(--abs-shadow-sm);
+  transition: transform .22s var(--abs-ease);
+  width: calc(50% - 3px);
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+}
+
+.abs-seg button {
+  position: relative;
+  border-radius: var(--abs-r-sm);
+  color: var(--abs-muted);
+  cursor: pointer;
+  display: flex;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items:  center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.abs-seg button span {
+  color: var(--abs-faint);
+  font-variant-numeric: tabular-nums;
+  text-align: left;
+  min-width: 2ch;
+  font-size: 12px;
+}
+
+.abs-seg button.is-on {
+  color: var(--abs-fg);
+  font-weight: 500;
+}
+
+.abs-seg button.is-on span {
+  color: var(--abs-muted);
+}
+
+.abs-comps {
+  background: var(--abs-bg);
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r-lg);
+  display: flex;
+  animation: abs-in .26s var(--abs-ease) backwards;
+  flex-direction: column;
+  padding: 6px;
+}
+
+.abs-comps > div + div, .abs-collapse-in > div {
+  margin-top: 2px;
+}
+
+.abs-comp {
+  display: flex;
+  border-radius: var(--abs-r);
+  align-items:  center;
+  gap: 2px;
+  height: 42px;
+}
+
+.abs-comp.is-on {
+  background: var(--abs-accent-subtle);
+}
+
+.abs-twist, .abs-iconbtn.abs-twist {
+  display: grid;
+  flex: none;
+  place-items:  center;
+  width: 24px;
+  height: 24px;
+}
+
+.abs-comp-main {
+  display: flex;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--abs-r);
+  background: none;
+  border: 0;
+  flex: 1;
+  align-self: stretch;
+  align-items:  center;
+  gap: 10px;
+  min-width: 0;
+  padding: 0 10px 0 4px;
+}
+
+.abs-comp-l {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.abs-comp-k {
+  color: var(--abs-muted);
+  white-space: nowrap;
+  font-size: 12.5px;
+}
+
+.abs-kico {
+  display: grid;
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-muted-bg);
+  color: var(--abs-fg-2);
+  transition: background-color var(--abs-t) var(--abs-ease), color var(--abs-t) var(--abs-ease);
+  flex: none;
+  place-items:  center;
+  width: 28px;
+  height: 28px;
+}
+
+.abs-kico-m {
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  background: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.abs-comp.is-on .abs-kico {
+  background: var(--abs-bg);
+  color: var(--abs-accent);
+}
+
+.abs-done {
+  display: flex;
+  color: var(--abs-ok);
+  animation: abs-in .22s var(--abs-ease) backwards;
+  flex-direction: column;
+  align-items:  center;
+  gap: 8px;
+  padding: 32px;
+}
+
+.abs-done b {
+  color: var(--abs-fg);
+  font-weight: 500;
+}
+
+.abs-state {
+  display: inline-flex;
+  transition: color var(--abs-t) var(--abs-ease);
+}
+
+.abs-state-bound {
+  color: var(--abs-ok);
+}
+
+.abs-state-suggested {
+  color: var(--abs-warn);
+}
+
+.abs-state-partial {
+  color: var(--abs-ok);
+}
+
+.abs-state-unbound {
+  color: var(--abs-border-strong);
+}
+
+.abs-insp {
+  background: var(--abs-bg);
+  border-left: 1px solid var(--abs-border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.abs-insp-empty {
+  text-align: center;
+  color: var(--abs-muted);
+  justify-content: center;
+  align-items:  center;
+  gap: 6px;
+  padding: 32px;
+}
+
+.abs-insp-empty b {
+  color: var(--abs-fg);
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.abs-insp-empty span {
+  max-width: 26ch;
+  font-size: 13px;
+}
+
+.abs-insp-empty .abs-empty-ico {
+  display: grid;
+  border-radius: var(--abs-r-lg);
+  background: var(--abs-muted-bg);
+  color: var(--abs-muted);
+  place-items:  center;
+  width: 44px;
+  max-width: none;
+  height: 44px;
+}
+
+.abs-insp-h {
+  display: flex;
+  border-bottom: 1px solid var(--abs-border);
+  align-items:  center;
+  gap: 12px;
+  padding: 16px 14px 16px 20px;
+}
+
+.abs-insp-h > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.abs-insp-h h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.abs-insp-h span {
+  color: var(--abs-muted);
+  font-size: 12.5px;
+}
+
+.abs-insp-h .abs-kico {
+  border-radius: var(--abs-r);
+  background: var(--abs-accent-subtle);
+  color: var(--abs-accent);
+  width: 36px;
+  height: 36px;
+}
+
+.abs-insp-b {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 14px;
+  padding: 16px 14px 32px 20px;
+}
+
+.abs-slot {
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r-lg);
+  background: var(--abs-bg);
+  animation: abs-in .24s var(--abs-ease) backwards;
+  transition: border-color var(--abs-t) var(--abs-ease);
+}
+
+.abs-slot + .abs-slot {
+  animation-delay: 40ms;
+}
+
+.abs-slot-suggested {
+  border-color: color-mix(in srgb, var(--abs-warn) 35%, var(--abs-border));
+}
+
+.abs-slot-h {
+  display: flex;
+  align-items:  center;
+  gap: 8px;
+  padding: 12px 14px 0;
+}
+
+.abs-slot-h h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.abs-slot-h .abs-tip {
+  margin-right: auto;
+}
+
+.abs-slot-d {
+  color: var(--abs-muted);
+  margin: 4px 14px 0 38px;
+  font-size: 12.5px;
+}
+
+.abs-slot-b {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 12px 14px 14px;
+}
+
+.abs-slot-f {
+  display: flex;
+  border-top: 1px solid var(--abs-border);
+  background: var(--abs-surface);
+  border-radius: 0 0 var(--abs-r-lg) var(--abs-r-lg);
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.abs-slot-f.is-plain {
+  background: none;
+  border-top: 0;
+  justify-content: flex-end;
+  padding-top: 0;
+}
+
+.abs-slot-f.is-plain .abs-btn {
+  color: var(--abs-muted);
+  height: 28px;
+  font-weight: 400;
+}
+
+.abs-slot-f.is-plain .abs-btn:hover {
+  color: var(--abs-bad);
+  background: var(--abs-bad-subtle);
+}
+
+.abs-req {
+  color: var(--abs-bad);
+  margin-left: 2px;
+  font-weight: 500;
+}
+
+.abs-pill {
+  display: inline-flex;
+  border-radius: var(--abs-r-sm);
+  white-space: nowrap;
+  transition: background-color var(--abs-t) var(--abs-ease), color var(--abs-t) var(--abs-ease);
+  align-items:  center;
+  gap: 5px;
+  height: 24px;
+  padding: 0 8px 0 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.abs-pill .abs-sr {
+  display: none;
+}
+
+.abs-pill-bound {
+  background: var(--abs-ok-subtle);
+  color: var(--abs-ok);
+}
+
+.abs-pill-suggested {
+  background: var(--abs-warn-subtle);
+  color: var(--abs-warn);
+}
+
+.abs-pill-unbound {
+  background: var(--abs-muted-bg);
+  color: var(--abs-muted);
+}
+
+.abs-pill .abs-state {
+  color: inherit;
+}
+
+.abs-btn {
+  border-radius: var(--abs-r-sm);
+  border: 1px solid var(--abs-border);
+  background: var(--abs-bg);
+  display: inline-flex;
+  cursor: pointer;
+  white-space: nowrap;
+  justify-content: center;
+  align-items:  center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.abs-btn:hover {
+  background: var(--abs-muted-bg);
+}
+
+.abs-btn:active {
+  transform: translateY(.5px);
+}
+
+.abs-btn-primary {
+  background: var(--abs-accent);
+  border-color: var(--abs-accent);
+  color: #fff !important;
+}
+
+.abs-btn-primary:hover {
+  background: var(--abs-accent-hover);
+  border-color: var(--abs-accent-hover);
+}
+
+.abs-btn-ghost {
+  color: var(--abs-fg-2);
+  background: none;
+  border-color: #0000;
+}
+
+.abs-btn-dashed {
+  border-style: dashed;
+  border-color: var(--abs-border-strong);
+  color: var(--abs-accent-hover);
+  border-radius: var(--abs-r);
+  justify-content: flex-start;
+  width: 100%;
+  height: 40px;
+  padding: 0 14px;
+}
+
+.abs-btn-dashed:hover {
+  background: var(--abs-accent-subtle);
+  border-color: var(--abs-accent);
+}
+
+.abs-iconbtn {
+  border-radius: var(--abs-r-sm);
+  display: inline-grid;
+  color: var(--abs-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex: none;
+  place-items:  center;
+  width: 28px;
+  height: 28px;
+}
+
+.abs-iconbtn:hover {
+  background: var(--abs-muted-bg);
+  color: var(--abs-fg);
+}
+
+.abs-root .abs-link {
+  color: var(--abs-accent-hover);
+  cursor: pointer;
+  display: inline-flex;
+  background: none;
+  border: 0;
+  align-items:  center;
+  gap: 4px;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.abs-root .abs-link:hover {
+  text-decoration: underline;
+}
+
+.abs-more {
+  align-self:  flex-start;
+  margin-top: 2px;
+}
+
+.abs-picker {
+  position: relative;
+}
+
+.abs-picker:has(.abs-pop) {
+  z-index: 40;
+}
+
+.abs-opcard {
+  display: flex;
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r);
+  background: var(--abs-surface);
+  cursor: pointer;
+  text-align: left;
+  align-items:  center;
+  gap: 10px;
+  width: 100%;
+  height: 56px;
+  padding: 0 12px;
+}
+
+.abs-opcard:hover {
+  border-color: var(--abs-border-strong);
+}
+
+.abs-opcard-t {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.abs-opcard-t b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13.5px;
+  font-weight: 500;
+}
+
+.abs-opcard-t code, .abs-opt-t code {
+  font-family: var(--abs-mono);
+  color: var(--abs-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+}
+
+.abs-method {
+  font-family: var(--abs-mono);
+  display: grid;
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-muted-bg);
+  color: var(--abs-fg-2);
+  flex: none;
+  place-items:  center;
+  width: 50px;
+  height: 20px;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
+.abs-method-get {
+  background: var(--abs-ok-subtle);
+  color: var(--abs-ok);
+}
+
+.abs-method-post {
+  background: var(--abs-accent-subtle);
+  color: var(--abs-accent-hover);
+}
+
+.abs-method-put, .abs-method-patch {
+  background: var(--abs-warn-subtle);
+  color: var(--abs-warn);
+}
+
+.abs-method-delete {
+  background: var(--abs-bad-subtle);
+  color: var(--abs-bad);
+}
+
+.abs-pop {
+  position: absolute;
+  z-index: 30;
+  background: var(--abs-bg);
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r-lg);
+  box-shadow: var(--abs-shadow);
+  overflow: hidden;
+  animation: abs-pop .15s var(--abs-ease) backwards;
+  transform-origin: top center;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+}
+
+.abs-pop-search {
+  display: flex;
+  border-bottom: 1px solid var(--abs-border);
+  color: var(--abs-muted);
+  align-items:  center;
+  gap: 8px;
+  height: 42px;
+  padding: 0 12px;
+}
+
+.abs-pop-search:focus-within {
+  color: var(--abs-accent);
+}
+
+.abs-pop-search input {
+  outline: 0;
+  color: var(--abs-fg);
+  background: none;
+  border: 0;
+  flex: 1;
+}
+
+.abs-pop-search input:focus-visible {
+  outline: 0;
+}
+
+.abs-search input:focus-visible {
+  outline: 0;
+}
+
+.abs-find-box input:focus-visible {
+  outline: 0;
+}
+
+.abs-pop-list {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  max-height: 320px;
+  padding: 6px;
+}
+
+.abs-pop-group {
+  display: flex;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--abs-muted);
+  align-items:  center;
+  gap: 5px;
+  height: 28px;
+  margin-top: 4px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.abs-pop-group:first-child {
+  margin-top: 0;
+}
+
+.abs-opt {
+  display: flex;
+  border-radius: var(--abs-r);
+  cursor: pointer;
+  align-items:  center;
+  gap: 10px;
+  height: 48px;
+  padding: 0 10px;
+}
+
+.abs-opt-t {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  font-size: 13.5px;
+  line-height: 1.3;
+}
+
+.abs-opt-t > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.abs-empty-sm {
+  color: var(--abs-muted);
+  text-align: center;
+  padding: 16px;
+  font-size: 13px;
+}
+
+.abs-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.abs-field > label, .abs-block-h {
+  color: var(--abs-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.abs-field-inline {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items:  center;
+  gap: 12px;
+}
+
+.abs-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.abs-block-h {
+  display: flex;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  justify-content: space-between;
+  font-size: 11px;
+}
+
+.abs-count {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+
+.abs-map {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.abs-map-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.25fr);
+  animation: abs-in .2s var(--abs-ease) backwards;
+  align-items:  center;
+  gap: 8px;
+  height: 32px;
+}
+
+.abs-map-row label {
+  color: var(--abs-fg-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+}
+
+.abs-select {
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.75 6.5 3.25 3.25 3.25-3.25'/%3E%3C/svg%3E") no-repeat right 8px center;
+  appearance: none;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  width: 100%;
+  height: 32px;
+  padding: 0 28px 0 10px;
+  font-size: 13px;
+}
+
+.abs-select:hover {
+  border-color: var(--abs-border-strong);
+}
+
+.abs-select:focus {
+  outline: 0;
+  border-color: var(--abs-accent);
+  box-shadow: 0 0 0 3px var(--abs-accent-muted);
+}
+
+.abs-select.is-empty {
+  color: var(--abs-muted);
+  border-style: dashed;
+}
+
+.abs-select-sm {
+  width: auto;
+  min-width: 190px;
+}
+
+.abs-hint {
+  display: flex;
+  border-radius: var(--abs-r);
+  background: var(--abs-surface);
+  color: var(--abs-fg-2);
+  flex-wrap: wrap;
+  align-items:  center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 13px;
+}
+
+.abs-hint .abs-ico {
+  color: var(--abs-muted);
+}
+
+.abs-suggests {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.abs-suggest {
+  display: inline-flex;
+  border-radius: var(--abs-r-sm);
+  border: 1px solid var(--abs-border);
+  background: var(--abs-bg);
+  color: var(--abs-fg-2);
+  cursor: pointer;
+  animation: abs-in .2s var(--abs-ease) backwards;
+  align-items:  center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12.5px;
+}
+
+.abs-suggest .abs-ico {
+  color: var(--abs-accent);
+}
+
+.abs-suggest:hover {
+  border-color: var(--abs-accent);
+  background: var(--abs-accent-subtle);
+}
+
+.abs-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.abs-step {
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r);
+  animation: abs-in .22s var(--abs-ease) backwards;
+}
+
+.abs-step-h {
+  display: flex;
+  align-items:  center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 6px 0 10px;
+}
+
+.abs-step-n {
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-muted-bg);
+  display: grid;
+  font-variant-numeric: tabular-nums;
+  flex: none;
+  place-items:  center;
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.abs-step-t {
+  color: var(--abs-muted);
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1;
+  gap: 6px;
+  min-width: 0;
+  font-size: 13px;
+}
+
+.abs-step-tools {
+  display: flex;
+}
+
+.abs-step-b {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 10px 12px;
+}
+
+.abs-addstep {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.abs-toggle {
+  display: flex;
+  color: var(--abs-fg-2);
+  cursor: pointer;
+  align-items:  center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.abs-toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.abs-toggle-ui {
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-border-strong);
+  position: relative;
+  transition: background-color .18s var(--abs-ease);
+  flex: none;
+  width: 30px;
+  height: 18px;
+}
+
+.abs-toggle-ui:after {
+  content: "";
+  position: absolute;
+  transition: transform .2s var(--abs-ease);
+  background: #fff;
+  border-radius: 4px;
+  width: 14px;
+  height: 14px;
+  top: 2px;
+  left: 2px;
+  box-shadow: 0 1px 2px #0003;
+}
+
+.abs-toggle input:checked + .abs-toggle-ui {
+  background: var(--abs-accent);
+}
+
+.abs-toggle input:checked + .abs-toggle-ui:after {
+  transform: translateX(12px);
+}
+
+.abs-toggle input:focus-visible + .abs-toggle-ui {
+  outline: 2px solid var(--abs-accent);
+  outline-offset: 2px;
+}
+
+.abs-empty {
+  text-align: center;
+  color: var(--abs-muted);
+  padding: 48px;
+}
+
+@media (max-width: 1100px) {
+  .abs-top {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .abs-body {
+    grid-template-columns: 220px 1fr;
+  }
+
+  .abs-body .abs-insp-empty {
+    display: none;
+  }
+
+  .abs-body.has-insp .abs-insp {
+    position: fixed;
+    z-index: 40;
+    box-shadow: var(--abs-shadow);
+    width: min(440px, 100%);
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+@media (max-width: 700px) {
+  .abs-top {
+    grid-template-columns: auto 1fr;
+  }
+
+  .abs-top-meta {
+    display: none;
+  }
+
+  .abs-body {
+    grid-template-columns: 1fr;
+  }
+
+  .abs-nav {
+    border-right: 0;
+    border-bottom: 1px solid var(--abs-border);
+    max-height: 40vh;
+  }
+
+  .abs-center {
+    padding: 16px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .abs-root *, .abs-root *:before, .abs-root *:after {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}
+
+.abs-pie .abs-ring-bg {
+  stroke: var(--abs-border-strong);
+}
+
+.abs-pie.is-done .abs-ring-bg {
+  stroke: var(--abs-ok);
+}
+
+.abs-pop-list, .abs-root .abs-find-pop {
+  scrollbar-color: transparent transparent;
+}
+
+.abs-pop-list:hover, .abs-root .abs-find-pop:hover {
+  scrollbar-color: var(--abs-border-strong) transparent;
+}
+
+.abs-tree + .abs-tree {
+  margin-top: 2px;
+}
+
+.abs-nav-group-h {
+  display: flex;
+  border-radius: var(--abs-r);
+  cursor: pointer;
+  text-align: left;
+  color: var(--abs-fg-2);
+  background: none;
+  border: 0;
+  align-items:  center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding-right: 10px;
+  font-size: 14px;
+}
+
+.abs-nav-group-h:hover {
+  color: var(--abs-fg);
+}
+
+.abs-nav-group-h.has-current {
+  color: var(--abs-fg);
+  font-weight: 500;
+}
+
+.abs-nav-count {
+  color: var(--abs-faint);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+
+.abs-chev {
+  color: var(--abs-muted);
+  transition: transform .2s var(--abs-ease);
+}
+
+.abs-tree .abs-collapse-in > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 2px;
+}
+
+.abs-toast {
+  position: fixed;
+  z-index: 60;
+  left: 50%;
+  bottom: max(20px, env(safe-area-inset-bottom, 0px));
+  display: flex;
+  border-radius: var(--abs-r);
+  background: var(--abs-fg);
+  color: #fff;
+  box-shadow: var(--abs-shadow);
+  animation: abs-toast-in .2s var(--abs-ease) backwards;
+  align-items:  center;
+  gap: 16px;
+  height: 40px;
+  padding: 0 6px 0 14px;
+  font-size: 13px;
+  transform: translateX(-50%);
+}
+
+.abs-toast button {
+  border-radius: var(--abs-r-sm);
+  color: #fff;
+  cursor: pointer;
+  background: #ffffff1f;
+  border: 0;
+  height: 28px;
+  padding: 0 10px;
+  font-weight: 500;
+}
+
+.abs-toast button:hover {
+  background: #fff3;
+}
+
+@keyframes abs-toast-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+
+.abs-fab {
+  position: fixed;
+  z-index: 2147480000;
+  right: max(20px, env(safe-area-inset-right, 0px));
+  bottom: max(20px, env(safe-area-inset-bottom, 0px));
+  display: grid;
+  grid-template-columns: auto 0fr;
+  cursor: pointer;
+  border: 1px solid var(--ds-color-border, #e2e8f0);
+  background: var(--ds-color-background, #fff);
+  color: var(--ds-color-foreground, #0f172a);
+  font: 500 13px / 1 var(--ds-font-family-sans, "Inter", system-ui, -apple-system, sans-serif);
+  animation: .36s cubic-bezier(.2,.7,.2,1) .3s backwards abs-fab-in;
+  border-radius: 10px;
+  align-items:  center;
+  height: 44px;
+  padding: 0 13px;
+  transition: grid-template-columns .24s cubic-bezier(.2,.7,.2,1), box-shadow .2s, transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s;
+  box-shadow: 0 1px 2px #0f172a0f, 0 6px 16px -6px #0f172a2e;
+}
+
+.abs-fab-ico {
+  display: grid;
+  color: var(--ds-color-primary, #3b82f6);
+  place-items:  center;
+}
+
+.abs-fab-label {
+  overflow: hidden;
+}
+
+.abs-fab-label > span {
+  display: block;
+  white-space: nowrap;
+  opacity: 0;
+  padding-left: 8px;
+  transition: opacity .18s, transform .24s cubic-bezier(.2,.7,.2,1);
+  transform: translateX(-4px);
+}
+
+.abs-fab:hover {
+  grid-template-columns: auto 1fr;
+  border-color: var(--ds-color-border-strong, #cbd5e1);
+  transform: translateY(-1px);
+  box-shadow: 0 1px 2px #0f172a0f, 0 10px 24px -8px #0f172a3d;
+}
+
+.abs-fab:focus-visible {
+  grid-template-columns: auto 1fr;
+  border-color: var(--ds-color-border-strong, #cbd5e1);
+  transform: translateY(-1px);
+  box-shadow: 0 1px 2px #0f172a0f, 0 10px 24px -8px #0f172a3d;
+}
+
+.abs-fab:hover .abs-fab-label > span {
+  opacity: 1;
+  transition-delay: 60ms;
+  transform: none;
+}
+
+.abs-fab:focus-visible .abs-fab-label > span {
+  opacity: 1;
+  transition-delay: 60ms;
+  transform: none;
+}
+
+.abs-fab:active {
+  transform: translateY(0)scale(.97);
+}
+
+.abs-fab:focus-visible {
+  outline: 2px solid var(--ds-color-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+.abs-fab[aria-expanded="true"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@keyframes abs-fab-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+.abs-widget {
+  overflow: hidden;
+  background: var(--ds-color-surface, #f8fafc);
+  transform-origin: 100% 100%;
+  animation: .24s cubic-bezier(.2,.7,.2,1) abs-widget-in;
+  border: 0;
+  border-radius: 12px;
+  width: min(1440px, 100vw - 32px);
+  max-width: none;
+  height: min(920px, 100dvh - 32px);
+  max-height: none;
+  margin: auto;
+  padding: 0;
+  box-shadow: 0 24px 64px -16px #0f172a59;
+}
+
+.abs-widget::backdrop {
+  backdrop-filter: blur(2px);
+  animation: .24s abs-fade-in;
+  background: #0f172a52;
+}
+
+.abs-widget.is-closing {
+  animation: .16s ease-in forwards abs-widget-out;
+}
+
+.abs-widget.is-closing::backdrop {
+  animation: .16s ease-in reverse forwards abs-fade-in;
+}
+
+@keyframes abs-widget-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px)scale(.985);
+  }
+}
+
+@keyframes abs-widget-out {
+  to {
+    opacity: 0;
+    transform: translateY(6px)scale(.99);
+  }
+}
+
+@keyframes abs-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .abs-fab, .abs-fab *, .abs-widget {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+
+  .abs-widget::backdrop {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}
+
+.abs-glide-box {
+  isolation: isolate;
+}
+
+.abs-glide-box:not(.abs-pop) {
+  position: relative;
+}
+
+.abs-glide {
+  position: absolute;
+  z-index: -1;
+  border-radius: var(--abs-r);
+  background: var(--abs-muted-bg);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform;
+  transition: transform .18s var(--abs-ease), width .18s var(--abs-ease), height .18s var(--abs-ease), opacity .16s ease;
+  top: 0;
+  left: 0;
+}
+
+.abs-pop-list .abs-glide, .abs-find-pop .abs-glide {
+  background: var(--abs-accent-subtle);
+}
+
+.abs-comps .abs-glide {
+  background: var(--abs-surface);
+}
+
+.abs-nav-item, .abs-nav-group-h, .abs-comp, .abs-opt {
+  position: relative;
+}
+
+.abs-nav-item.is-on, .abs-comp.is-on {
+  z-index: 0;
+}
+
+.abs-tip {
+  display: inline-flex;
+}
+
+.abs-tip-btn {
+  border-radius: var(--abs-r-sm);
+  color: var(--abs-faint);
+  display: grid;
+  cursor: help;
+  background: none;
+  border: 0;
+  place-items:  center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+}
+
+.abs-tip-btn:hover {
+  color: var(--abs-accent);
+  background: var(--abs-accent-subtle);
+}
+
+.abs-tip-btn:focus-visible {
+  color: var(--abs-accent);
+  background: var(--abs-accent-subtle);
+}
+
+.abs-tip-body {
+  position: fixed;
+  border-radius: var(--abs-r);
+  background: var(--abs-fg);
+  color: #fff;
+  font: 400 12.5px / 1.4 var(--abs-sans);
+  text-align: left;
+  overflow-wrap: anywhere;
+  box-shadow: var(--abs-shadow);
+  pointer-events: none;
+  border: 0;
+  width: max-content;
+  max-width: min(260px, 100vw - 16px);
+  margin: 0;
+  padding: 8px 10px;
+  inset: auto;
+}
+
+.abs-tip-body:popover-open {
+  animation: abs-tip-in .14s var(--abs-ease);
+}
+
+.abs-tip-body[data-side="bottom"] {
+  --abs-tip-from: -4px;
+}
+
+@keyframes abs-tip-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--abs-tip-from, 4px));
+  }
+}
+
+.abs-pop-why {
+  display: flex;
+  border-top: 1px solid var(--abs-border);
+  background: var(--abs-surface);
+  color: var(--abs-fg-2);
+  align-items:  flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 12.5px;
+}
+
+.abs-pop-why .abs-ico {
+  color: var(--abs-accent);
+  margin-top: 1px;
+}
+
+.abs-settings-wrap {
+  position: relative;
+}
+
+.abs-settings-btn.is-on {
+  background: var(--abs-muted-bg);
+  color: var(--abs-fg);
+}
+
+.abs-dot-bad {
+  position: absolute;
+  background: var(--abs-bad);
+  box-shadow: 0 0 0 2px var(--abs-bg);
+  border-radius: 50%;
+  width: 7px;
+  height: 7px;
+  top: 5px;
+  right: 5px;
+}
+
+.abs-root .abs-settings {
+  overflow: visible;
+  width: 400px;
+  max-width: calc(100vw - 32px);
+  padding: 4px 0;
+  left: auto;
+  right: 0;
+}
+
+.abs-set-sec {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+
+.abs-set-sec + .abs-set-sec {
+  border-top: 1px solid var(--abs-border);
+}
+
+.abs-set-h {
+  color: var(--abs-fg);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.abs-set-d {
+  color: var(--abs-muted);
+  margin: 0;
+  font-size: 12.5px;
+}
+
+.abs-set-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items:  center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.abs-set-row .abs-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.abs-set-status {
+  color: var(--abs-muted);
+  overflow-wrap: anywhere;
+  margin: 2px 0 0;
+  font-size: 12.5px;
+}
+
+.abs-set-status.is-error {
+  color: var(--abs-bad);
+}
+
+.abs-input {
+  border: 1px solid var(--abs-border);
+  border-radius: var(--abs-r-sm);
+  background: var(--abs-bg);
+  font-size: 13px;
+  font-family: var(--abs-mono);
+  height: 32px;
+  padding: 0 10px;
+}
+
+.abs-input:hover {
+  border-color: var(--abs-border-strong);
+}
+
+.abs-input:focus {
+  outline: 0;
+  border-color: var(--abs-accent);
+  box-shadow: 0 0 0 3px var(--abs-accent-muted);
+}
+
+.abs-input.is-invalid {
+  border-color: var(--abs-bad);
+}
+
+.abs-btn:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.abs-state-page {
+  display: flex;
+  text-align: center;
+  color: var(--abs-muted);
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items:  center;
+  gap: 8px;
+  padding: 32px;
+}
+
+.abs-state-page b {
+  color: var(--abs-fg);
+  margin-top: 4px;
+  font-weight: 600;
+}
+
+.abs-state-page > span:not(.abs-empty-ico):not(.abs-loader) {
+  max-width: 52ch;
+  font-size: 13px;
+}
+
+.abs-empty-ico.is-bad {
+  background: var(--abs-bad-subtle);
+  color: var(--abs-bad);
+}
+
+.abs-loader {
+  border: 3px solid var(--abs-border);
+  border-top-color: var(--abs-accent);
+  animation: .8s linear infinite abs-rot;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+}
+
+.abs-state-page .abs-empty-ico {
+  display: grid;
+  border-radius: var(--abs-r-lg);
+  place-items:  center;
+  width: 44px;
+  height: 44px;
+}
+
+.abs-pop-why b {
+  color: var(--abs-fg);
+  font-weight: 600;
+}