jev-devtools 0.3.0 → 0.4.1

package/lib/src/inspector.css

@@ -1,5 +1,31 @@
+/* Important declarations in the inner shadow context beat page-authored host
+   styles, including important ones. Keep the reset here instead of expanding
+   the all shorthand into hundreds of inline properties on the host element.
+   These qualified host selectors are inert in the public document stylesheet. */
+:host(jev-devtools-root) {
+  all: initial !important;
+  direction: ltr !important;
+  unicode-bidi: isolate !important;
+  position: fixed !important;
+  inset: 0 !important;
+  pointer-events: none !important;
+  z-index: 2147483000 !important;
+}
+
+:host(jev-devtools-root)::before,
+:host(jev-devtools-root)::after {
+  content: none !important;
+  display: none !important;
+}
+
 .jev-devtools {
   all: initial;
+  /* all does not reset custom properties. Establish our own inherited defaults;
+     cameras and probability cards can still set local values below this root. */
+  --diagram-grid-opacity: 1;
+  --diagram-grid-weight: 1;
+  --lab-noul-probability: 1;
+  --flow-item-offset: 0px;
   display: block;
   direction: ltr;
   unicode-bidi: isolate;
@@ -17,8 +43,7 @@
 }
 .jev-devtools button,
 .jev-devtools input,
-.jev-devtools select,
-.jev-devtools textarea {
+.jev-devtools select {
   font: inherit;
   color: inherit;
   border: 1px solid #3b303d;
@@ -41,7 +66,7 @@
 .jev-devtools button:hover:not(:disabled) {
   border-color: #e551ba;
 }
-.jev-devtools :is(button, input, select, textarea, summary):focus-visible {
+.jev-devtools :is(button, input, select, summary):focus-visible {
   outline: 2px solid #e551ba;
   outline-offset: 3px;
 }
@@ -256,47 +281,6 @@
   background-image: radial-gradient(#342337 0.6px, transparent 0.6px);
   background-size: 16px 16px;
 }
-.jev-devtools .request-flow {
-  display: flex;
-  align-items: center;
-  gap: 40px;
-  padding: 14px 0 20px;
-}
-.jev-devtools .state-node {
-  position: relative;
-  flex: 0 0 160px;
-  border: 1px solid #e551ba;
-  padding: 20px 15px;
-  background: #1f1320;
-  border-radius: 6px;
-}
-.jev-devtools .state-node h3 {
-  margin-top: 12px;
-}
-.jev-devtools .state-node p {
-  color: #b69db3;
-  line-height: 1.5;
-}
-.jev-devtools .state-node code {
-  font-size: 10px;
-}
-.jev-devtools .state-node:after {
-  content: "";
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  width: 20px;
-  border-top: 1px solid #7f416d;
-}
-.jev-devtools .question-branches {
-  border-left: 1px solid #7f416d;
-  padding-left: 20px;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(160px, 1fr));
-  gap: 12px;
-  flex: 1;
-  position: relative;
-}
 .jev-devtools .question-node {
   position: relative;
   border: 1px solid #75516c;
@@ -305,6 +289,9 @@
   background: #110d14;
   min-width: 0;
 }
+/* Retain the legacy question connectors and standalone suppression together.
+   Remove only after resolving the narrow-screen visual differences in
+   https://github.com/diegoag64/jev-devtools/issues/57. */
 .jev-devtools .question-node:before {
   content: "";
   position: absolute;
@@ -335,11 +322,6 @@
   border-radius: 3px;
   padding: 3px 5px;
 }
-.jev-devtools .instructions {
-  font-size: 11px;
-  color: #b8a6bc;
-  line-height: 1.5;
-}
 .jev-devtools .answer-value {
   display: block;
   font-size: 20px;
@@ -475,44 +457,10 @@
   border-bottom: 1px solid #302634;
   padding: 14px;
 }
-.jev-devtools .flow-dot {
-  display: none;
-}
-.jev-devtools .pending .flow-dot {
-  display: block;
-  position: absolute;
-  right: -23px;
-  top: calc(50% - 3px);
-  width: 6px;
-  height: 6px;
-  background: #e551ba;
-  border-radius: 50%;
-  animation: jev-inspector-pulse 1s infinite;
-}
-@keyframes jev-inspector-pulse {
-  50% {
-    opacity: 0.2;
-    transform: scale(0.7);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .jev-devtools .pending .flow-dot {
-    animation: none;
-  }
-}
 @media (max-width: 1100px) {
-  .jev-devtools .question-branches {
-    grid-template-columns: 1fr;
-  }
   .jev-devtools .question-branches .question-node:not(:first-child):before {
     display: block;
   }
-  .jev-devtools .request-flow {
-    align-items: flex-start;
-  }
-  .jev-devtools .state-node {
-    margin-top: 45px;
-  }
   .jev-devtools .metrics {
     gap: 12px;
   }
@@ -546,9 +494,6 @@
     min-width: 240px;
     padding: 8px 12px;
   }
-  .jev-devtools .request-detail {
-    min-height: 0;
-  }
   .jev-devtools .detail-header {
     padding: 12px;
   }
@@ -563,19 +508,6 @@
   .jev-devtools .metrics {
     display: none;
   }
-  .jev-devtools .state-node {
-    flex-basis: 115px;
-    padding: 12px;
-  }
-  .jev-devtools .request-flow {
-    gap: 25px;
-  }
-  .jev-devtools .state-node:after {
-    width: 12px;
-  }
-  .jev-devtools .question-branches {
-    padding-left: 12px;
-  }
   .jev-devtools .question-node:before {
     width: 13px;
   }
@@ -583,46 +515,6 @@
     padding: 12px;
   }
 }
-
-.jev-devtools .request-flow {
-  flex-direction: column;
-  align-items: stretch;
-  gap: 24px;
-}
-.jev-devtools .state-node {
-  flex: auto;
-  width: fit-content;
-  align-self: center;
-  padding: 12px 24px;
-  text-align: center;
-  margin: 0;
-}
-.jev-devtools .state-node h3 {
-  display: inline-block;
-  margin: 0 12px;
-}
-.jev-devtools .state-node p {
-  display: inline-block;
-  margin: 0 12px 0 0;
-  font-size: 11px;
-}
-.jev-devtools .state-node .eyebrow {
-  display: none;
-}
-.jev-devtools .state-node:after {
-  left: 50%;
-  top: 100%;
-  width: 0;
-  height: 24px;
-  border-top: 0;
-  border-left: 1px solid #7f416d;
-}
-.jev-devtools .question-branches {
-  border-left: 0;
-  border-top: 1px solid #7f416d;
-  padding: 20px 0 0;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
 .jev-devtools .question-node:before,
 .jev-devtools .question-branches .question-node:not(:first-child):before {
   display: block;
@@ -637,18 +529,7 @@
 .jev-devtools .standalone:before {
   display: none;
 }
-.jev-devtools .flow-caption {
-  margin-top: 0;
-}
-.jev-devtools .pending .flow-dot {
-  right: auto;
-  left: calc(50% - 3px);
-  top: calc(100% + 10px);
-}
 @media (max-width: 900px) {
-  .jev-devtools .question-branches {
-    grid-template-columns: 1fr;
-  }
   .jev-devtools .question-node:before,
   .jev-devtools .question-branches .question-node:not(:first-child):before {
     height: 12px;
@@ -658,16 +539,6 @@
     height: 20px;
     top: -21px;
   }
-  .jev-devtools .state-node {
-    padding: 10px;
-  }
-  .jev-devtools .state-node p {
-    display: block;
-    margin: 6px 0;
-  }
-  .jev-devtools .state-node h3 {
-    font-size: 12px;
-  }
 }
 
 .jev-devtools.jev-drawer {
@@ -730,10 +601,6 @@
   gap: 9px;
   font-weight: 600;
 }
-.jev-devtools .jev-mark {
-  color: #e551ba;
-  font-size: 21px;
-}
 .jev-devtools .jev-drawer-header > div {
   display: flex;
   align-items: center;
@@ -1150,7 +1017,6 @@
   overflow: auto;
   overscroll-behavior: contain;
   min-height: 0;
-  flex: 1;
 }
 .jev-devtools .lab-choice-browser table {
   width: 100%;
@@ -1271,15 +1137,78 @@
   }
 }
 
-/* Connected requests share one camera and one opt-in full request detail. */
-.whole-flow {
+/* Connected requests share one camera and one opt-in full request detail.
+   :where scopes these selectors without changing their existing specificity. */
+:where(.jev-devtools) .whole-flow {
   min-width: 0;
+  overflow: hidden;
+}
+:where(.jev-devtools) .whole-flow > .detail-header,
+:where(.jev-devtools) .whole-flow > .lab-flow-toolbar {
+  flex-shrink: 0;
+}
+:where(.jev-devtools) .flow-workspace {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+:where(.jev-devtools) .flow-details-panel {
+  flex: none;
+  min-width: 0;
+  background: #130f17;
+  border-top: 1px solid #342a38;
+}
+:where(.jev-devtools) .flow-details-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 36px;
+  padding: 0 12px;
+}
+.jev-devtools .flow-details-bar button {
+  flex: none;
+  padding: 4px 8px;
+  font-size: 11px;
+}
+:where(.jev-devtools) .flow-details-bar > span {
+  color: #b5a6bc;
+  font-size: 11px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:where(.jev-devtools) .flow-details-body {
   overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+:where(.jev-devtools) .flow-details-resize {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 8px;
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+}
+:where(.jev-devtools) .flow-details-resize span {
+  width: 40px;
+  height: 2px;
+  border-radius: 2px;
+  background: #6c5874;
 }
-.flow-overview-viewport {
+:where(.jev-devtools) .flow-details-resize:hover,
+:where(.jev-devtools) .flow-details-resize:focus-visible {
+  background: #392239;
+  outline: 1px solid #e551ba;
+  outline-offset: -1px;
+}
+:where(.jev-devtools) .flow-overview-viewport {
   position: relative;
-  min-height: 240px;
-  flex: 1 0 260px;
+  min-height: 0;
+  flex: 1 1 0;
   overflow: hidden;
   touch-action: none;
   cursor: grab;
@@ -1290,23 +1219,24 @@
   );
   background-size: 20px 20px;
 }
-.flow-overview-viewport[data-panning] {
+:where(.jev-devtools) .flow-overview-viewport[data-panning] {
   cursor: grabbing;
 }
-.flow-overview-canvas {
+:where(.jev-devtools) .flow-overview-canvas {
   position: absolute;
   transform-origin: 0 0;
 }
-.flow-connections {
+:where(.jev-devtools) .flow-connections {
   position: absolute;
   inset: 0;
+  overflow: visible;
   color: #c0b8c4;
   pointer-events: none;
 }
-.flow-step {
+:where(.jev-devtools) .flow-step {
   position: absolute;
-  width: 220px;
-  min-height: 98px;
+  min-height: 172px;
+  overflow-wrap: anywhere;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -1317,17 +1247,15 @@
   background: #151017;
   color: inherit;
 }
-.flow-step strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+:where(.jev-devtools) .flow-step strong {
+  white-space: normal;
   width: 100%;
 }
-.flow-step-description {
+:where(.jev-devtools) .flow-step-description {
   overflow-wrap: anywhere;
   font-size: 12px;
 }
-.flow-step.flow-request {
+:where(.jev-devtools) .flow-step.flow-request {
   display: block;
   padding: 0;
   background: #0d0a0f;
@@ -1335,9 +1263,10 @@
   content-visibility: auto;
   contain-intrinsic-size: auto 640px;
 }
-.flow-request-heading {
+:where(.jev-devtools) .flow-request-heading {
   width: 100%;
-  height: 64px;
+  min-height: 64px;
+  gap: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1349,7 +1278,7 @@
   background: transparent;
   color: inherit;
 }
-.flow-request-heading .eyebrow {
+:where(.jev-devtools) .flow-request-heading .eyebrow {
   display: block;
   margin-bottom: 4px;
 }
@@ -1370,72 +1299,108 @@
 .jev-devtools .lab-flow-embedded .lab-choice-browser {
   height: 520px;
 }
-.flow-step.selected {
+:where(.jev-devtools) .flow-step.selected {
   outline: 2px solid #e551ba;
   outline-offset: 3px;
 }
-.flow-step[data-status="completed"] {
+:where(.jev-devtools) .flow-step[data-status="completed"] {
   border-color: #e551ba;
 }
-.flow-step[data-status="running"] {
+:where(.jev-devtools) .flow-step[data-status="running"] {
   border-color: #e551ba;
   background: #2b1728;
 }
-.flow-step[data-status="untaken"],
-.flow-step[data-status="blocked"] {
+:where(.jev-devtools) .flow-step[data-status="untaken"],
+:where(.jev-devtools) .flow-step[data-status="blocked"] {
   color: #948797;
   border-color: #403746;
   background: #151017;
 }
-.flow-step[data-status="error"] {
+:where(.jev-devtools) .flow-step[data-status="error"] {
   border-color: #f17c78;
 }
-.flow-step[data-status="cancelled"] {
+:where(.jev-devtools) .flow-step[data-status="cancelled"] {
   border-style: dashed;
 }
-.flow-selection {
+:where(.jev-devtools) .flow-selection {
   padding: 12px 20px;
   border-top: 1px solid #342a38;
 }
-.flow-selection p {
+:where(.jev-devtools) .flow-selection p {
   margin: 6px 0;
   overflow-wrap: anywhere;
 }
-.flow-request-detail {
+:where(.jev-devtools) .flow-request-detail {
   min-height: 450px;
   border-top: 1px solid #534357;
 }
-.flow-request-detail > .request-detail {
+:where(.jev-devtools) .flow-request-detail > .request-detail {
   min-height: 450px;
 }
 
-.flow-card-heading,
-.flow-card-footer,
-.flow-join-summary,
-.flow-lane {
+:where(.jev-devtools) .flow-card-heading,
+:where(.jev-devtools) .flow-card-footer,
+:where(.jev-devtools) .flow-join-summary,
+:where(.jev-devtools) .flow-lane {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
 }
-.flow-card-heading {
+:where(.jev-devtools) .flow-card-heading {
   justify-content: flex-start;
 }
-.flow-kind-icon {
+:where(.jev-devtools) .flow-task .flow-kind-icon {
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  padding: 4px;
+}
+:where(.jev-devtools) .flow-task-preview {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+.jev-devtools .flow-task-preview .diagram-content {
+  max-height: 280px;
+  padding: 8px 10px;
+  border: 1px solid #35283b;
+  border-radius: 4px;
+  background: #100c13;
+}
+:where(.jev-devtools) .flow-task-preview small {
+  color: #a89bac;
+  font-size: 11px;
+}
+:where(.jev-devtools) .flow-task-details {
+  display: grid;
+  gap: 12px;
+}
+:where(.jev-devtools) .flow-task-details details {
+  min-width: 0;
+}
+:where(.jev-devtools) .flow-task-details summary {
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+:where(.jev-devtools) .flow-task-details .diagram-content {
+  max-height: 320px;
+  overflow: auto;
+}
+:where(.jev-devtools) .flow-kind-icon {
   width: 26px;
   height: 26px;
   color: #e551ba;
   flex-shrink: 0;
 }
-.flow-kind-icon svg {
+:where(.jev-devtools) .flow-kind-icon svg {
   width: 100%;
   height: 100%;
 }
-.flow-card-heading .eyebrow {
+:where(.jev-devtools) .flow-card-heading .eyebrow {
   font-size: 10px;
 }
-.flow-status {
+:where(.jev-devtools) .flow-status {
   margin-left: auto;
   font-size: 10px;
   border-radius: 20px;
@@ -1443,93 +1408,83 @@
   background: #342031;
   color: #f0b7e0;
 }
-.flow-step[data-status="untaken"] .flow-status {
+:where(.jev-devtools) .flow-step[data-status="untaken"] .flow-status {
   background: #241e28;
   color: #948797;
 }
-.flow-step[data-status="untaken"] .flow-kind-icon {
+:where(.jev-devtools) .flow-step[data-status="untaken"] .flow-kind-icon {
   color: #948797;
 }
-.flow-step > strong {
+:where(.jev-devtools) .flow-card-body > strong {
   white-space: normal;
   font-size: 18px;
   line-height: 1.25;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   overflow-wrap: anywhere;
 }
-.flow-step-description {
+:where(.jev-devtools) .flow-step-description {
   line-height: 1.5;
   color: #b9aebf;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  white-space: pre-wrap;
 }
-.flow-card-footer {
+:where(.jev-devtools) .flow-card-footer {
   margin-top: auto;
   padding-top: 10px;
   border-top: 1px solid #342a38;
   font-size: 10px;
   color: #a092a7;
 }
-.flow-card-footer code {
+:where(.jev-devtools) .flow-card-footer code {
   max-width: 45%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
-.flow-card-footer small {
+:where(.jev-devtools) .flow-card-footer small {
   text-align: right;
 }
-.flow-join-summary {
+:where(.jev-devtools) .flow-join-summary {
   margin-top: 4px;
   font-size: 11px;
   color: #c9b9cd;
 }
-.flow-join-summary > span {
+:where(.jev-devtools) .flow-join-summary > span {
   color: #ef9ed9;
   font-variant-numeric: tabular-nums;
 }
-.flow-lanes {
+:where(.jev-devtools) .flow-lanes {
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
 }
-.flow-lane {
+:where(.jev-devtools) .flow-lane {
   border-radius: 5px;
   background: #211923;
   padding: 6px 8px;
   font-size: 11px;
   min-height: 28px;
 }
-.flow-lane > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+:where(.jev-devtools) .flow-lane > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
-.flow-lane > span > span {
+:where(.jev-devtools) .flow-lane > span > span {
   color: #ef9ed9;
   margin-right: 4px;
 }
-.flow-lane small {
+:where(.jev-devtools) .flow-lane small {
   color: #b9aebf;
 }
-.flow-lane-details {
+:where(.jev-devtools) .flow-lane-details {
   padding-left: 18px;
   font-size: 12px;
 }
-.flow-request-heading > span:first-child {
+:where(.jev-devtools) .flow-request-heading > span:first-child {
   min-width: 0;
   max-width: 80%;
 }
-.flow-request-description {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+:where(.jev-devtools) .flow-request-description {
+  display: block;
+  white-space: pre-wrap;
   font-size: 12px;
   line-height: 1.5;
   color: #b9aebf;
@@ -1687,7 +1642,7 @@
   opacity: calc(0.65 + 0.35 * var(--lab-noul-probability, 1));
 }
 
-.flow-condition-rule {
+:where(.jev-devtools) .flow-condition-rule {
   display: block;
   padding: 10px 12px;
   border: 1px solid #49324b;
@@ -1695,17 +1650,15 @@
   background: #211723;
   width: 100%;
 }
-.flow-condition-label {
+:where(.jev-devtools) .flow-condition-label {
   display: block;
   font-size: 10px;
   color: #ba9dbe;
   margin-bottom: 5px;
 }
-.flow-condition-rule code {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+:where(.jev-devtools) .flow-condition-rule code {
+  display: block;
+  white-space: pre-wrap;
   overflow-wrap: anywhere;
   font:
     12px/1.6 ui-monospace,
@@ -1713,13 +1666,13 @@
   color: #f2d7eb;
 }
 
-.flow-condition-incoming {
+:where(.jev-devtools) .flow-condition-incoming {
   display: block;
   padding-bottom: 10px;
   margin-bottom: 10px;
   border-bottom: 1px solid #49324b;
 }
-.flow-condition-input {
+:where(.jev-devtools) .flow-condition-input {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
@@ -1727,33 +1680,191 @@
   font-size: 12px;
   padding: 3px 0;
 }
-.flow-condition-input > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+:where(.jev-devtools) .flow-condition-input > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
-.flow-condition-input > b {
+:where(.jev-devtools) .flow-condition-input > b {
   font-size: 17px;
   font-weight: 600;
   color: #f2d7eb;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
   max-width: 65%;
 }
-.flow-input-details {
+:where(.jev-devtools) .flow-input-details {
   font-size: 12px;
 }
-.flow-input-details > div {
+:where(.jev-devtools) .flow-input-details > div {
   display: flex;
   gap: 16px;
   margin: 6px 0;
 }
-.flow-input-details code {
+:where(.jev-devtools) .flow-input-details code {
   color: #a092a7;
   margin-left: 8px;
 }
-.flow-input-details dd {
+:where(.jev-devtools) .flow-input-details dd {
   margin: 0;
   overflow-wrap: anywhere;
 }
+
+:where(.jev-devtools) .flow-overview-stack {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+:where(.jev-devtools) .flow-map-progress {
+  display: grid;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+:where(.jev-devtools) .flow-map-progress small {
+  color: #b5a6bc;
+}
+
+.jev-devtools .flow-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  flex: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.jev-devtools .flow-card-body:hover {
+  background: transparent;
+}
+:where(.jev-devtools) .flow-collection-controls {
+  display: flex;
+  align-items: end;
+  gap: 10px;
+  border-top: 1px solid #49324b;
+  margin-top: 4px;
+  padding-top: 12px;
+}
+:where(.jev-devtools) .flow-collection-controls label {
+  display: grid;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  color: #b9aebf;
+  font-size: 11px;
+}
+.jev-devtools .flow-collection-controls select {
+  width: 100%;
+  min-width: 0;
+}
+.jev-devtools .flow-collection-controls button {
+  flex: none;
+  color: #efb1df;
+}
+:where(.jev-devtools) .flow-collection-expansion {
+  position: absolute;
+  width: max-content;
+}
+:where(.jev-devtools) .flow-item-frame {
+  border: 1px solid #64415d;
+  border-radius: 12px;
+  background: #100c13;
+  overflow: hidden;
+}
+:where(.jev-devtools) .flow-collection-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #49324b;
+  background: #1c1220;
+}
+:where(.jev-devtools) .flow-collection-heading h3 {
+  margin: 5px 0;
+  font-size: 16px;
+}
+:where(.jev-devtools) .flow-collection-heading small {
+  color: #b9aebf;
+}
+:where(.jev-devtools) .flow-collection-link text {
+  fill: #ce9abd;
+  font-size: 12px;
+}
+:where(.jev-devtools) .flow-item-placeholder {
+  width: 600px;
+  padding: 24px;
+  line-height: 1.6;
+}
+:where(.jev-devtools) .flow-inline-overview,
+:where(.jev-devtools) .flow-inline-overview > .whole-flow,
+:where(.jev-devtools) .flow-inline-overview > .whole-flow > .flow-workspace {
+  display: block;
+  flex: none;
+}
+:where(.jev-devtools) .flow-inline-surface {
+  position: relative;
+}
+
+:where(.jev-devtools) .flow-item-content {
+  min-width: 0;
+  animation: jev-flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+:where(.jev-devtools) .flow-item-forward {
+  --flow-item-offset: 28px;
+}
+:where(.jev-devtools) .flow-item-backward {
+  --flow-item-offset: -28px;
+}
+@keyframes jev-flow-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(--flow-item-offset));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.jev-devtools) .flow-item-content {
+    animation: none;
+  }
+}
+.jev-devtools .flow-item-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  padding: 12px;
+  margin: 0 auto;
+  border: 1px solid #64415d;
+  border-radius: 6px;
+  background: #211623;
+  color: #efa7db;
+}
+.jev-devtools .flow-item-arrow:hover:not(:disabled) {
+  background: #382035;
+  border-color: #e551ba;
+}
+:where(.jev-devtools) .flow-item-arrow svg {
+  width: 28px;
+  height: 28px;
+}
+
+:where(.jev-devtools) .flow-item-previous {
+  left: -76px;
+}
+:where(.jev-devtools) .flow-item-next {
+  right: -76px;
+}