.flow-container {
  --bg-color: light-dark(rgb(244, 242, 247), rgb(15, 10, 19));

  /* --bg-color: rgb(20, 14, 27);
  --bg-color: rgb(243, 233, 255); */

  --t-float: oklab(0.69 -0.16 0.16);
  --t-int: oklab(0.55 0.24 -0.13);
  --t-string: oklab(0.7 0.06 0.16);
  --t-color: oklab(0.96 -0.09 0.23);

  --t-image: var(--color-lib-asset-image);
  --t-video: var(--color-lib-asset-video);
  --t-viewer3d: var(--color-lib-asset-viewer);
  --t-model: var(--color-lib-asset-model);

  --t-tone: rgb(122, 13, 169);
  --t-ai: rgb(219, 8, 110);

  --card-radius: 0.5em;

  --plug-width: 0.9em;
  * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -moz-user-select: none !important;
  }
}

#flow-page,
.flow-container {
  position: absolute;
  background: none;
  overflow: hidden;
}

.flow-container {
  background:
    radial-gradient(transparent 75%, rgba(0, 0, 0, 0.11)),
    radial-gradient(
      transparent 25%,
      light-dark(rgba(30, 16, 42, 0.01), rgba(0, 0, 0, 0.5))
    ),
    radial-gradient(rgba(255, 255, 255, 0.033) 0%, transparent 60%),
    var(--bg-color);
}

.dragging-file #flow-page {
  border: 1px dashed oklab(0.71 0.32 -0.13);
}

.grid-pattern {
  --grid-size: calc(38px * var(--scale));
  --line-thick: 1px;
  --dot-radius: 1.025px;

  --bgcolor: transparent;
  --line-color: light-dark(rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.0125));
  --dot-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.05));

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc((var(--grid-size) * 0.5) - (var(--line-thick) * 0.5)),
      var(--line-color)
        calc((var(--grid-size) * 0.5) - (var(--line-thick) * 0.5)),
      var(--line-color)
        calc((var(--grid-size) * 0.5) + (var(--line-thick) * 0.5)),
      transparent calc((var(--grid-size) * 0.5) + (var(--line-thick) * 0.5)),
      transparent var(--grid-size)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc((var(--grid-size) * 0.5) - (var(--line-thick) * 0.5)),
      var(--line-color)
        calc((var(--grid-size) * 0.5) - (var(--line-thick) * 0.5)),
      var(--line-color)
        calc((var(--grid-size) * 0.5) + (var(--line-thick) * 0.5)),
      transparent calc((var(--grid-size) * 0.5) + (var(--line-thick) * 0.5)),
      transparent var(--grid-size)
    ),
    radial-gradient(
      circle at center,
      var(--dot-color) var(--dot-radius),
      var(--bgcolor) var(--dot-radius),
      var(--bgcolor) var(--dot-radius)
    );
  background-size: var(--grid-size) var(--grid-size);
  background-position: calc(var(--centerXOffset) + 50%)
    calc(var(--centerYOffset) + 50%);
  transition: none;
}

.flow-canvas {
  --width: 6001px;
  --height: 6001px;

  --centerXOffset: 0px;
  --centerYOffset: 0px;
  --scale: 1;

  position: absolute;
  z-index: 1;
  /* width: calc(var(--width) + 100svw);
  height: calc(var(--height) + 100svh); */
  top: 50%;
  left: 50%;

  transform: translate(
      calc(-50% + var(--centerXOffset)),
      calc(-50% + var(--centerYOffset))
    )
    scale(var(--scale));

  display: flex;
  align-items: center;
  justify-content: center;
}

#debug-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  justify-content: start;
  padding: 1em;

  z-index: 999999;
  pointer-events: all;
  button {
    font-size: 0.8em;
  }
}
.debug-flow {
  position: absolute;
  pointer-events: none;
  color: light-dark(#1e1e1e, #fff);
  padding: 1em;
  font-size: 10px;
  font-weight: 600;
  z-index: 0;
  opacity: 0.3;

  * {
    user-select: none !important;
    -moz-user-select: none !important;
  }

  p {
    margin: 0;

    span {
      opacity: 0.33;
    }
  }

  h3 {
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.385);
    margin: 0.75em 0 0.25em 0;
  }

  pre {
    font-size: 0.85em;
    white-space: pre;
    background: rgba(0, 0, 0, 0.393);
    border-radius: var(--card-radius);
    font-family: monospace;
    max-width: 80ch;
    word-break: break-all;
    word-wrap: break-word;
    text-wrap: wrap;
  }
}

.node {
  --status-color: rgb(128, 128, 128);
  --node-bg: rgba(19, 19, 18, 0.9);
  --icon-color: #000000;
  --icon-text: #fff;
  --blur: 0.75rem;
  position: absolute;
  width: 200px;
  height: auto;
  top: 50%;
  left: 50%;
  background:
  /* radial-gradient(var(--node-bg) 0%,
  rgba(255, 255, 255, 0.05) 100%), */ var(
    --node-bg
  );
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));

  color: rgb(236, 236, 236);

  border-radius: var(--card-radius);
  box-shadow:
  /* 0 0 4em .5em rgba(255, 255, 255, 0.035), */
    0.075em 0.33em 0.66em 0 rgba(0, 0, 0, 0.22),
    inset 0 0 1em rgba(255, 255, 255, 0.05);

  --x: 0px;
  --y: 0px;
  --z: 0;

  z-index: var(--z);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));

  /* display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto auto minmax(1em, auto);
  grid-template-areas:
    'header header'
    'outputs outputs'
    'preview preview'
    'inputs inputs'
    'editor editor'
    'footer footer'; */

  display: flex;
  flex-direction: column;
  gap: 0.5em;

  border: 1px solid transparent;
  transition:
    border-color 200ms ease,
    width var(--spd-insp) ease,
    box-shadow calc(var(--spd-insp) * 3) ease;

  .noise {
    opacity: 0.1;
  }
  &:hover {
    border-color: rgba(255, 255, 255, 0.1);

    .noise {
      opacity: 1;
    }
  }

  &.selected {
    outline: 0.125em solid oklab(1 0 0) !important;
    &::after {
      box-shadow: 0 0 1em
        light-dark(oklab(0.66 -0.09 -0.19), rgba(255, 255, 255, 0.226));
      opacity: 1;
    }
  }

  &::after,
  &::before {
    border-radius: var(--inner-border-radius);
    pointer-events: none;
    content: '';
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
    position: absolute;
    transition: all calc(var(--spd-insp) * 3) ease;
  }

  .valuepreview .smart-control.string {
    &.readonly,
    &.readonly * {
      pointer-events: all !important;
      opacity: 0.95;
    }
  }

  .node-header {
    overflow: hidden;
    padding: 0.75em 0.75em 0.5em 0.75em;

    border-bottom: 1px solid rgba(0, 0, 0, 0.025);
    font-size: 0.8em;
    font-weight: 700;

    display: flex;
    align-items: start;
    justify-content: flex-start;
    gap: 0.75em;

    .icon {
      background-color: var(--icon-color);
      color: var(--icon-text);
      font-size: 1.25em;
      padding: 0.25em;
      border-radius: 0.25em;
      &.openpanel {
        margin-left: auto;
        color: #fff;
        background: none;
      }
    }
    .node-header-text {
      padding-top: 0.6ch;
      font-size: 0.8em;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .launch-editor-footer {
    background-color: wheat;
  }

  .node-footer {
    display: flex;
    align-items: center;
    gap: 0.33em;
    justify-content: start;

    color: var(--status-color);

    &:not(:empty) {
      padding: 0.5em 0.5em 0.5em 0.8em;
      margin-top: 0.5em;
      border-top: 1px solid rgba(252, 250, 246, 0.015);
    }

    button {
      display: flex;
      align-items: center;
      font-size: 1em;
      font-size: 0.7em;
      padding: 0.25em 0.5em;

      font-weight: 700;

      border-radius: calc(var(--card-radius) * 0.75);

      transition:
        all var(--spd-insp) ease,
        box-shadow calc(var(--spd-insp) * 3) ease;

      .icon {
        font-size: 1.25em;
      }

      &:hover:not(:disabled) {
        box-shadow: 0 0.125em 0.5em 0.1em
          light-dark(rgba(0, 0, 0, 0.493), black);
        scale: 1.1;
      }
      &:active:not(:disabled) {
        scale: 0.95;
      }
    }

    .runflow {
      color: var(--text-on-dark);
      background-color: var(--power-primary-color);
      &:hover:not(:disabled) {
        background-color: var(--power-secondary-color);
        color: var(--text-primary);
      }
      &:active:not(:disabled) {
        background-color: var(--c-bright-bg);
        color: var(--text-primary);
      }
    }

    .launch-editor-footer {
      color: black;
      background-color: white;
      &:hover:not(:disabled) {
        background-color: var(--power-secondary-color);
        color: var(--text-primary);
      }
      &:active:not(:disabled) {
        background-color: var(--c-bright-bg);
        color: var(--text-primary);
      }
    }

    .status {
      font-size: 0.66em;
      transition: all var(--spd-insp) ease;
      font-style: italic !important;
      padding-left: 1em;
      position: relative;
      margin-right: auto;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 0.6em;
        aspect-ratio: 1;
        background-color: var(--status-color);
        border-radius: 50em;
        transform: translateY(-40%);
      }
    }
  }

  .connections {
    min-width: 1em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75em;

    &.inputs {
    }
    &.outputs {
      align-items: flex-end;
      margin: -2.6em 0 0.5em 0;

      pointer-events: none;
      .connection {
        pointer-events: all;
        flex-direction: row-reverse;
        transform: translateX(calc(100% - 0.8em));
        gap: 1em;

        .plugname {
          background: #141414;
          color: #fff;
          padding: 0.5em 0.75em;
          font-weight: 600;
          border-radius: var(--inner-border-radius);
          pointer-events: none;
          opacity: 0;
          transition: opacity var(--spd-insp) ease;
        }

        &:hover {
          .plugname {
            opacity: 1 !important;
          }
        }
      }
    }
  }
}

.flow-container .smart-text-modal,
.flow-container .smart-text-modal * {
  user-select: text !important;
}

@media (prefers-color-scheme: dark) {
  .node {
    --node-bg: rgb(34 33 32 / 85%);
  }
}

@keyframes startedanim {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes status-changed-anim {
  0% {
    box-shadow: 0 0 0em oklab(100% 0 -0.00011 / 0);
  }
  50% {
    box-shadow: 0 0 2.5em
      var(--status-changed-color, oklab(52.501% 0.11122 -0.27115));
  }
  100% {
    box-shadow: 0 0 0em oklab(100% 0 -0.00011 / 0);
  }
}

.node.status-started {
  --status-color: rgb(0, 215, 218);
  outline: 1px solid #ffffff3f;
  box-shadow:
    0 0 1em color-mix(in oklab, var(--power-ui01-color) 100%, transparent),
    0 0 4em color-mix(in oklab, var(--power-ui01-color) 20%, transparent),
    inset 0 0 1em rgba(255, 255, 255, 0.05) !important;
  &::after {
    opacity: 1;
    z-index: -1;
    background: rgba(6, 17, 22, 0.749);
  }
  &::before {
    opacity: 1;
    background:
      /* radial-gradient(black, transparent), */ linear-gradient(
      45deg,
      #5e5891,
      #012e37,
      #88ccda,
      #df6ea3,
      #888df8,
      #67619c,
      #3d5f66
    );
    background-size: 400%;
    width: calc(100% - 3em);
    height: calc(100% - 3em);
    z-index: -2;
    filter: blur(4em);
    animation: startedanim 20s linear infinite;
  }
}
.node.status-completed {
  --status-color: oklab(0.87 -0.25 0.21);
  --status-changed-color: oklab(0.74 -0.09 -0.13 / 0.66);
  &.dynamic-change:before {
    opacity: 1;
    animation: status-changed-anim 1s ease;
  }
}

.node.status-failed {
  --status-color: oklab(0.58 0.23 0.13);
  --status-changed-color: oklab(0.58 0.23 0.13 / 0.66);
  &.dynamic-change::before {
    opacity: 1;
    animation: status-changed-anim 1s ease;
  }
}
.node.status-stale {
  --status-color: oklab(0.81 0.07 0.18);
}

.node.input-image,
.node.asset-image,
.node.cat-aiimages {
  --icon-color: var(--t-image);
}
.node.input-string,
.node.cat-aitexts {
  --icon-color: var(--t-string);
}
.node.input-float {
  --icon-color: var(--t-float);
}
.node.input-integer {
  --icon-color: var(--t-int);
}
.node.input-video,
.node.asset-video,
.node.cat-videoediting,
.node.cat-aivideos {
  --icon-color: var(--t-video);
}
.node.input-color {
  --icon-color: var(--t-color);
  --icon-text: #000;
}
.node.usecase-viewer3d {
  --icon-color: var(--t-viewer3d);
  --icon-text: #000;
}
.node.cat-tonemapping,
.node.cat-imageediting {
  --icon-color: var(--t-tone);
}
.node.cat-ai {
  --icon-color: var(--t-ai);
}
.node.asset-model,
.node.cat-3d {
  --icon-color: var(--color-lib-asset-model);
}
.node.asset-model .expandpreview {
  display: none;
}
.node.asset-hdr {
  --icon-color: var(--t---color-lib-asset-hdr);
}
.node.asset-material {
  --icon-color: var(--color-lib-asset-material);
}

.node.cat-dev {
  --icon-color: oklab(0.92 -0.05 0.22);
  --icon-text: #000;
}
.node.opens-panel,
.node.opens-editor {
  --e-glow: oklab(0.56 -0.06 -0.21 / 0.11);
  --e-spread: 4.5em;
  box-shadow:
    inset 0 0 var(--e-spread) 0 var(--e-glow),
    0.075em 0.33em 0.66em 0 rgba(0, 0, 0, 0.22),
    inset 0 0 1em rgba(255, 255, 255, 0.05);

  &:has(.launch-editor:hover) {
    --e-glow: oklab(0.83 -0.09 -0.08 / 0.28);
    --e-spread: 11em;
  }
}
.node.opens-panel {
  --e-glow: oklab(0.24 -0.01 -0.01);
  --e-spread: 4.5em;
  cursor: pointer;
}

/* node asset-video cat-assets */

.connection-input {
  width: 100%;
  margin-right: 0.75em;
}

.node .connection {
  display: flex;
  align-items: baseline;
  justify-content: right;
  color: white;

  &.hidden:not(.view-implicit) {
    display: none;
  }
  &.hidden.view-implicit {
    display: flex !important;
    pointer-events: none;
    opacity: 0.33;
    * {
      pointer-events: none !important;
    }
  }
  &.input {
    flex-direction: row-reverse;
    justify-content: left;
  }

  &.input-only {
    padding-left: var(--plug-width);
    &:last-child {
      padding-bottom: 0.5em;
    }
  }

  .plugname,
  .smart-control-label {
    font-size: 0.72em;
    opacity: 0.8;
    text-transform: capitalize;
  }

  &:has(.ctrlflow.string) {
    align-items: baseline;
  }

  .ctrlflow {
    width: 100%;

    display: grid;
    grid-template-columns: 0.5fr 1fr;
    justify-content: stretch;
    &.string {
      grid-template-columns: 1fr;
      align-items: baseline;
    }

    label {
      width: auto;
      color: currentColor;
      font-size: 0.72em;
      opacity: 0.8;
      display: block;
      text-align: left;
    }

    select {
      padding: 0 1em;
    }
  }
}

.node select,
.node input[type='text']:not(.float-edit-input),
.node textarea {
  border-left: 2px solid var(--t-string);
  font-family: var(--primary-font);
  transition: min-height var(--spd-insp) ease;
  font-size: 0.75em;
  text-align: left;
  display: block;

  color: white;
  background-color: #3b3a36;

  box-shadow:
    inset 0 0 5em 0 rgba(0, 0, 0, 0.55),
    inset 0 0 10em 0 rgba(0, 0, 0, 0.55);
  border-radius: var(--inner-border-radius);
}

.node .contents textarea {
  border-left: none;
  border-right: 2px solid var(--t-string);
}

.node .connection .plug {
  flex-shrink: 0;
  flex-grow: 0;
  pointer-events: all;
  width: var(--plug-width);
  aspect-ratio: 1;
  border-radius: 50em;
  position: relative;
  border: 0.15em solid currentColor;
  background: radial-gradient(white 55%, black 90%);
  box-shadow: 0 0 0.15em 0px rgba(255, 255, 255, 0.6);

  transform: translateX(-50%) translateY(0.2em);
  &::after {
    content: '';
    position: absolute;
    /* uncomment to debug drop zone coverage */
    /* background-color: rgba(255, 0, 0, 0.1); */
    top: 50%;
    right: -100%;
    transform: translateY(-50%);
    /* width: 500%;
    height: 300%; */

    --drop-zone-t: clamp(0, calc((1 - var(--scale)) / 0.5), 1);
    width: calc(500% + 250% * var(--drop-zone-t));
    height: calc(300% + 100% * var(--drop-zone-t));
  }
  &.output::after {
    right: initial;
    left: -100%;
  }

  &.output {
    transform: translateX(50%) translateY(0.2em);
  }
  &.image {
    color: var(--t-image);
  }
  &.string {
    color: var(--t-string);
  }
  &.float {
    color: var(--t-float);
  }
  &.int {
    color: var(--t-int);
  }
  &.color {
    color: var(--t-color);
  }
  &.video {
    color: var(--t-video);
  }
  &.model {
    color: var(--t-model);
  }
  &.hdr {
    color: var(--color-lib-asset-hdr);
  }
  &.viewer3d {
    color: var(--t-viewer3d);
  }
  &.any {
    background-color: black;
  }
  &::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 0.125em solid transparent;
    border-radius: inherit;
    opacity: 0;
    transition:
      opacity calc(var(--spd-insp) * 2) ease,
      width calc(var(--spd-insp) * 2) ease,
      border-color calc(var(--spd-insp) * 2) ease,
      box-shadow calc(var(--spd-insp) * 2) ease;
  }
}

.flow-container:has(.cursorinfo.dragging-plug)
  .node
  .connection
  .plug.drop-target::before {
  width: 220%;
  border-color: light-dark(rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.45));
  box-shadow: 0 0 0.75em rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.node .connection .plug.drop-feedback-valid::before,
.node .connection .plug.drop-feedback-invalid::before {
  animation: plug-drop-feedback-pulse 500ms ease-out;
}

.node .connection .plug.drop-feedback-valid::before {
  --plug-drop-feedback-color: rgba(255, 255, 255, 0.58);
}

.node .connection .plug.drop-feedback-invalid::before {
  --plug-drop-feedback-color: rgba(255, 65, 65, 0.9);
}

.node.displaymode-content
  .connection
  .plug.content-pair-hover:not(:hover)::before {
  width: 260%;
  border-color: light-dark(rgba(0, 0, 0, 0.72), rgba(255, 255, 255, 0.72));
  box-shadow: 0 0 0.9em rgba(255, 255, 255, 0.35);
  opacity: 1;
}

@keyframes plug-drop-feedback-pulse {
  0% {
    width: 120%;
    border-color: var(--plug-drop-feedback-color);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    opacity: 1;
  }
  100% {
    width: 320%;
    border-color: transparent;
    box-shadow: 0 0 1em var(--plug-drop-feedback-color);
    opacity: 0;
  }
}

.connection.collection .plug,
.connection.multiple .plug {
  border-radius: 0;
  border-width: 0.15em;
  background: white;
  box-shadow: 0 0 0.1em 0.025em rgba(255, 255, 255, 0.3);
}

.connection.multiple .plug {
  border-style: dashed solid;
}

.connection.variadic .plug {
  border-top-right-radius: 50em;
  border-bottom-right-radius: 50em;
  border-width: 0.14em;
}
.connection.multiple.variadic .plug {
  border-style: dotted;
}

.nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}
.flow-link-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0);
}

/* Cursor behavior */
.flow-container {
  cursor: grab;
  touch-action: none;
  -ms-touch-action: none;
  background: none;

  /* Annoygly prevent backdrop-blurs to work on nodes */
  /* --fade: 2.5em;
  --mask-fix: 1px;
  mask-image: linear-gradient(to right,
  transparent 0, black var(--fade),
  black calc(100% - var(--fade)),
  transparent calc(100% - var(--mask-fix))),
  linear-gradient(to bottom, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent calc(100% - var(--mask-fix)));
  mask-composite: intersect;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  width: calc(100% - 1px);
  height: calc(100% - 1px); */

  .cursorinfo {
    position: fixed;
    display: none;
    pointer-events: none;
  }
  &:has(.node:hover) {
    cursor: move;
  }
  &:has(.plug:hover) {
    cursor: cell;
  }

  &:has(.cursorinfo.dragging) {
    cursor: grabbing;
  }
  &:focus {
    outline: none;
  }
}

.node .preview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: calc(100% - 1.5em);
  /* position: relative; */

  .contents {
    display: flex;
    pointer-events: all;
    margin: 0 0 0.75em 0;
    width: 100%;
    align-items: end;
    transition: all var(--spd-insp) ease;
    &:empty {
      margin: 0;
    }
  }
  .valuepreview {
    overflow: hidden;
    position: relative;
    --z: 0;
    z-index: var(--z);
    --checker-size: 1em;
    width: 100%;
    padding: 0;
    /* aspect-ratio: auto; */
    /* max-height: 15em; */
    /* object-fit: cover; */
    border-radius: 0.33em;
    box-shadow: 0 0.15em 0.33em rgba(0, 0, 0, 0.444);
    /* border: 1px solid #232323; */
    transform: scale(1);
    transition:
      box-shadow calc(var(--spd-insp) * 3) ease,
      border calc(var(--spd-insp) * 1) ease,
      transform calc(var(--spd-insp) * 1) ease;

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin-bottom: -0.33em;
      pointer-events: none; /* Firefox img drag fix */
    }

    &:hover {
      /* border: 1px solid rgb(255 255 255 / 79%); */
      box-shadow: 0 0.35em 0.6em
        light-dark(rgba(7, 22, 26, 0.567), rgb(7, 22, 26));
      z-index: 80;
      /* transform: scale(1.0125); */
    }

    &.content-pair-hover:not(:hover) {
      outline: 0.1em solid rgba(255, 255, 255, 0.83);
      outline-offset: 0.15em;
      box-shadow:
        0 0.5em 1em rgb(7, 22, 26),
        0 0 1em rgba(255, 255, 255, 0.28);
      /* transform: scale(1.025); */
    }
    .smart-control-label:empty {
      display: none;
    }
  }
  &:has(.valuepreview.idx-1) {
    .valuepreview:not(.string):hover {
      transform: scale(1.05);
    }
    .valuepreview.string:hover {
      background-color: var(--power-ui01-color);
    }
  }
  .usecase-link {
    color: rgb(246, 246, 246);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    align-self: center;
    background: #353535;
    border-radius: 0.33em;
    box-shadow: 0 0.15em 0.33em rgba(0, 0, 0, 0.444);
    border: 1px solid #232323;
    padding: 0.5em 1em;
    font-size: 0.85em;
    transform: scale(1);
    transition:
      box-shadow calc(var(--spd-insp) * 3) ease,
      border calc(var(--spd-insp) * 1) ease,
      transform calc(var(--spd-insp) * 1) ease;

    &:hover {
      border: 1px solid rgb(255, 255, 255);
      box-shadow: 0 0.5em 1.5em rgba(35, 1, 63, 0.5);
      transform: scale(1.025);
    }

    .icon {
      font-size: 1.1em;
    }
  }
}

.expandpreview,
.mediadownload {
  font-size: 1em;
  background: none;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  pointer-events: none;
  opacity: 0;

  transition:
    opacity var(--spd-insp) ease,
    background-color var(--spd-insp) ease;

  position: absolute;
  right: 0;
  z-index: 10;

  /* border-radius: 0.33em; */
  .icon {
    font-size: 1.5em;
    text-shadow: 1px 1px 0.125em black;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/* has more that 1 result, :edit mode : slightly smaller previews
to gain a little vertical space */
.node.displaymode-edit:not(.cat-assets):has(.valuepreview.idx-1) .valuepreview {
  &.image,
  &.video {
    width: 90%;
  }
}

.previewsize {
  pointer-events: none;
  position: absolute;
  opacity: 0;
  top: 0;
  right: initial;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  text-shadow: 0.01em 0.01em 3px black;
  font-weight: 700;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0.25em 1em 0.5em 1em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background-color: rgba(0, 0, 0, 0.33);
  transition: opacity var(--spd-insp) ease;
  .x,
  .s {
    opacity: 0.6;
  }

  .duration {
    margin: 0 0 0 1em;
  }
}
.expandpreview {
  top: initial;
  bottom: 0;
  cursor: zoom-in;
}

.mediadownload {
  right: initial;
  left: 0;
  bottom: 0;
  cursor: alias;
}

.valuepreview:hover .expandpreview,
.valuepreview:hover .mediadownload,
.valuepreview:hover .previewsize {
  pointer-events: all;
  opacity: 1;
}

.contents.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  gap: 0.25em;
}

.togglecontent {
  position: absolute;
  z-index: 90;
  top: 0.5em;
  left: 0;

  background-color: light-dark(var(--node-bg), white);
  color: light-dark(white, var(--node-bg));

  font-size: 1em;
  cursor: pointer;
  border: 0;
  width: 1.75em;
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--card-radius);

  transform: translateX(0);

  opacity: 0;
  pointer-events: none;

  transition: all var(--spd-insp) ease;

  .icon {
    display: block;
    font-size: 0.85em;
    line-height: 1;
  }

  &:hover {
    color: light-dark(var(--node-bg), white);
    background-color: light-dark(white, var(--node-bg));
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 126%;
    height: 100%;
  }
}

.node:hover .togglecontent,
.togglecontent:hover {
  pointer-events: all;
  opacity: 1;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.425);
  transform: translateX(calc(-100% - 0.5em));
}

/* ------- NODES MENU  ------- */

#nodes-menu-container {
  position: absolute;
  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  &.open {
    pointer-events: all;
    cursor: default;
  }
}

#nodes-menu-back {
  position: absolute;
  z-index: 0;
  background-color: transparent;
  transition: background-color var(--spd-insp) ease;
}
#nodes-menu-container.open #nodes-menu-back {
  /* background-color: rgba(0, 0, 0, 0.666); */
  cursor:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' fill='white' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e")
      9 9,
    pointer;
  background: radial-gradient(rgba(0, 0, 0, 0.294), transparent 90%);
}

.flow-container:has(#nodes-menu-container.open) {
  .flow-canvas,
  .flow-link-canvas {
    filter: blur(0.25rem);
  }
}

#nodes-menu {
  z-index: 100;
  overflow: hidden;
  width: 45ch;
  height: auto;

  background-color: #1d1d1d;
  border-radius: var(--card-radius);
  box-shadow:
    0 0 1px 1px rgba(255, 255, 255, 0.125),
    0 0 33vh 0 light-dark(rgb(255, 255, 255), rgb(0, 0, 0)),
    0.075em 0.33em 0.66em 0 rgba(0, 0, 0, 0.52),
    inset 0 0 0.5em rgba(255, 255, 255, 0.02);

  opacity: 0;
  transform: translateX(-50vw);
  transition:
    opacity var(--spd-insp) ease,
    transform var(--spd-insp) ease;
  color: #fff;
  padding: 0;

  header {
    font-size: 0.9em;
    padding: 0 0 0.5em 0;
    padding: 0.5em 0.75em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    display: flex;
    align-items: center;
    justify-content: space-between;

    button.close {
      background: none;
      border: none;
      display: flex;
      padding: 0.5em;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      color: #fff;
      .icon {
        font-size: 1em;
      }
    }
  }
}
#nodes-menu-container.open #nodes-menu {
  opacity: 1;
  transform: translateX(0);
}

.node-add:not(.enabled),
.node-cat:not(.enabled) {
  opacity: 0.22;
}
.node-add-title .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  small {
    opacity: 0.33;
    font-size: 0.8em;
    margin-left: 1em;
  }
}
.node-list {
  padding: 0.5em 0.75em;
  &.current,
  &:hover {
    background-color: rgba(255, 255, 255, 0.039);
  }
  .label {
    font-size: 0.85em;
  }
  .node-add-desc {
    font-size: 0.7em;
    font-style: italic;
    opacity: 0.5;
  }
}

.node-cat {
  text-transform: capitalize;
}

#nodes-menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 45ch;
  &.split {
    grid-template-columns: 1fr 1fr;
  }
}

.nodes-categories {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.nodes-by-category {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 1em);
  overflow: hidden;
  overflow-y: scroll;
}

.nodes-cat {
  overflow: hidden;
  overflow-y: scroll;
}

#node-context-menu-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

#node-context-menu-back {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

#node-context-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  pointer-events: auto;

  min-width: 10ch;
  background: #424242;
  border-radius: var(--card-radius);
  box-shadow:
    0 0.25em 1em 0.025em rgba(0, 0, 0, 0.35),
    0 0 15em 3em rgba(0, 0, 0, 1.935);
  padding: 0;
  z-index: 999;
  overflow: hidden;

  pointer-events: all;
}

.node-menu-item {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5em;
  width: 100%;
  padding: 0.5em 4ch 0.5em 0.5em;
  text-align: left;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;

  .icon {
    color: rgba(255, 255, 255, 0.781);
    font-size: 1em;
  }
}

.node-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.node-menu-item.danger {
  color: #ff6978;
}

.debug-flow-id {
  position: absolute;
  top: -2em;
  right: 0;
  text-align: right;
  padding: 0;
  font-size: 0.6em;
  opacity: 0;
  transition: opacity var(--spd-insp) ease;
}
.node:hover .debug-flow-id {
  opacity: 0.333;
}

.node.implicit {
  opacity: 0.33;
}

.contents .connection {
  max-height: 0;
  transform: translateX(0.75em) translateY(0.5em);

  .plugname {
    display: none;
  }
}

#media-preview-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  border-radius: var(--card-radius);
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: zoom-out;
  opacity: 1;
  pointer-events: all;

  transition:
    opacity var(--spd-insp) ease,
    width var(--spd-insp) ease,
    height var(--spd-insp) ease;
  img,
  video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  .mediadownload {
    left: 0.25em;
    right: initial;
    bottom: initial;
    top: 0.25em;
    opacity: 1;
    pointer-events: all;
    z-index: 1;
  }

  &.closed {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

.flow-container.editor-open {
  opacity: 0.33;
  pointer-events: none;
  --safe-pad: calc(var(--grid-gap) + 1px);
  margin: var(--safe-pad);
  height: calc(100% - (var(--safe-pad) * 2));
  width: calc(100% - (var(--safe-pad) * 2));
}

#flow-media-editor {
  position: absolute;
  z-index: 500;
  pointer-events: all;

  border-radius: var(--grid-corners-radius);

  --bgcolor: color-mix(in srgb, rgb(0, 0, 0) 0%, transparent);
  --line-color: rgba(255, 255, 255, 0.025);
  --safe-fit-gap: 1em;
  /* --dot-color: var(--bgcolor); */

  backdrop-filter: blur(0.666rem) brightness(1);
  -webkit-backdrop-filter: blur(1rem);
  /* box-shadow: inset 0 0 28vh light-dark(rgba(0, 0, 0, 0.666), rgba(255, 255, 255, 0.05)); */
  margin-left: var(--grid-gap);
  max-width: calc(100% - var(--grid-gap));

  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--grid-gap);
  min-height: 0;
  overflow: hidden;
}

.editor-media-container {
  position: relative;
  /* position: absolute;
  top: 50%;
  left: 50%; */

  margin-top: calc(var(--safe-fit-gap) * 0.5);
  width: calc(100% - var(--safe-fit-gap));
  height: calc(100% - var(--safe-fit-gap));
  background: none;

  /* transform: translate(-50%, -50%); */

  transition: opacity var(--spd-insp) ease;

  &.panning {
    cursor: grabbing;

    .editor-media {
      pointer-events: none;
    }
  }

  * {
    user-select: none !important;
    -moz-user-select: none !important;
    outline: none !important;
  }

  &.m2d {
    opacity: 0;
  }
}

.editor-media {
  position: relative;
  /* overflow: hidden; */
  box-shadow: 0.51em 0.525em 1.5em rgba(0, 0, 0, 0.33);
  transform-origin: center center;

  transition: none;
  .media {
    position: absolute;
    z-index: 0;
  }

  iframe {
    position: absolute;
    z-index: 0;
    border-radius: 0;
  }
}

.editor-viewport-controls-group {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: start;
  gap: 0.75em;
}

.editor-viewport-controls {
  border-radius: calc(var(--grid-corners-radius) * 0.75);
  background-color: var(--background-main);
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.26);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.25em 0.5em;

  font-weight: 700;
}

.editor-viewport-controls.hint {
  pointer-events: none;
  font-size: 0.78em;
  align-self: stretch;

  .shift-key {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.15em 0.45em 0.15em 0.25em;
    border-radius: calc(var(--grid-corners-radius) * 0.45);
    background-color: rgba(255, 255, 255, 0.12);
    font-size: 0.9em;
    text-transform: uppercase;

    .icon {
      font-size: 1.1em;
    }
  }
}

.editor-viewport-controls.zoom {
  display: grid;
  grid-template-columns: auto 9em 4ch;
  gap: 0.5em;

  button {
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--grid-corners-radius) * 0.5);

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .icon {
      font-size: 1.25em;
    }
  }

  input[type='range'] {
    width: 100%;
    accent-color: var(--power-primary-color);
  }

  .scale {
    cursor: pointer;
    font-size: 0.72em;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
}

.editor-media:has(.draggablelayer.expand) {
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 0.75em,
      rgba(0, 0, 0, 0.12) 0.75em,
      rgba(0, 0, 0, 0.12) 1.5em
    );
    mix-blend-mode: screen;
  }
}

.cropcont {
  position: absolute;
  z-index: 1000;
}

.draggablelayer:not(.current) {
  pointer-events: none;
  .draggablehandles {
    display: none;
  }
  .cropdarkenhole {
    box-shadow: 0 0 99em 99em rgba(0, 0, 0, 0.9) !important;
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.66);
  }
  100% {
    box-shadow: 0 0 0 2em rgba(0, 0, 0, 0);
  }
}

.draggablelayer {
  --x: 20%;
  --y: 20%;
  --width: 50%;
  --height: 50%;
  --o: 1;

  &.loading {
    &::after {
      content: '';
      position: absolute;
      width: 1em;
      aspect-ratio: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50em;
      animation: pulse-animation 1s infinite;
    }
    .embedimg {
      opacity: 0;
    }
  }
  .embedimg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &.expand {
    .embedimg {
      z-index: 2;
      object-fit: fill;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0.5em 2em rgba(0, 0, 0, 0.44);
    }

    .draggablehandles.moveonly {
      background: none;
      border-color: rgba(255, 255, 255, 0.8);

      .handle.move {
        width: 100%;
        height: 100%;
        z-index: 1;

        &::before {
          width: 0.9em;
          opacity: 0.8;
        }

        &::after {
          display: none;
        }
      }
    }
  }
  .cm {
    top: var(--y);
    left: var(--x);
    width: var(--width);
    height: var(--height);
  }

  .cropdarken {
    position: absolute;
    overflow: hidden;
    z-index: 900;

    .cropdarkenhole {
      position: absolute;
      box-shadow: 0 0 100vw 100vw rgba(0, 0, 0, 0.766);
    }
  }

  .draggablehandles {
    position: absolute;

    z-index: 1000;
    --grid-color: rgba(255, 255, 255, 0.33);
    --grid-thick: 1px;

    --tier-one: 33.334%;
    --tier-two: 66.667%;

    background:
      linear-gradient(
        180deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        180deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      );

    border: 1px dashed white;

    --handle-thick: 0.35em;
    --handle-wide: 26%;
    --handle-placement: calc(var(--handle-thick) * -0.5);

    --corner-width: 0.666em;
    --corner-r: 2px;
    --corner-color: white;
    --corner-placement: calc(var(--corner-width) * -0.5);

    &.nogrid {
      background: none;
    }

    .handle {
      background: white;
      position: absolute;
      border-radius: var(--handle-thick);

      &.top,
      &.bottom {
        left: 50%;
        transform: translateX(-50%);
        width: var(--handle-wide);
        height: var(--handle-thick);
        cursor: ns-resize;
      }
      &.top {
        top: var(--handle-placement);
      }
      &.bottom {
        bottom: var(--handle-placement);
      }

      &.right,
      &.left {
        top: 50%;
        transform: translateY(-50%);
        height: var(--handle-wide);
        width: var(--handle-thick);
        cursor: ew-resize;
      }
      &.right {
        right: var(--handle-placement);
      }
      &.left {
        left: var(--handle-placement);
      }

      &.corner {
        width: var(--corner-width);
        aspect-ratio: 1;
        border: 1px solid var(--corner-color);
        border-radius: var(--corner-r);
        background: none;
        box-shadow: inset 0 0 calc(var(--corner-width) * 0.5)
          rgba(0, 0, 0, 0.666);
      }
      &.topleft,
      &.topright {
        top: var(--corner-placement);
      }
      &.topleft,
      &.bottomleft {
        left: var(--corner-placement);
      }
      &.topright,
      &.bottomright {
        right: var(--corner-placement);
      }
      &.bottomleft,
      &.bottomright {
        bottom: var(--corner-placement);
      }
      &.topleft,
      &.bottomright {
        cursor: nwse-resize;
      }
      &.topright,
      &.bottomleft {
        cursor: nesw-resize;
      }

      &::after {
        content: '';
        position: absolute;
        background: none;
        width: 300%;
        height: 300%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      transition: all calc(var(--spd-insp) * 1.5) ease;
      &:hover {
        --corner-width: 1em;
        --corner-r: 1em;
        --corner-placement: calc(var(--corner-width) * -0.5);
        --handle-thick: 0.45em;
        --handle-wide: 33%;
        --handle-placement: calc(var(--handle-thick) * -0.5);
      }

      &.move {
        cursor: move;
        width: 33%;
        height: 33%;
        background: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: radial-gradient(white 1px, transparent 1px);
          width: calc(var(--corner-width) * 1);
          aspect-ratio: 1;
          border: 1px solid rgba(255, 255, 255, 0.363);
          border-radius: var(--corner-r);
          box-shadow: inset 0 0 calc(var(--corner-width) * 0.5)
            rgba(0, 0, 0, 0.666);
          transition: all var(--spd-insp) ease;
        }
      }
    }
  }
}

.editor-tools-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--grid-gap);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  z-index: 1;
}

.editor-tool-panel {
  background-color: var(--background-main);
  border-radius: var(--grid-corners-radius);
  padding: 0.5em;
}

.toolsep {
  width: 2em;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0.5em auto;
}
.editor-tool-params {
  padding: 0.25em;
  min-height: 0;
  overflow: hidden;

  .toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25em;

    .toolsep {
      grid-column: span 2;
    }
  }
}

.editor-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: fit-content;
  gap: 0.25em;
  padding: 0.25em;
}

.editor-tool {
  border: none;
  background: none;
  padding: 0.5em;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  justify-content: center;
  border-radius: calc(var(--grid-corners-radius) * 0.5);

  transition: background-color var(--spd-insp) ease;

  &:hover {
    background-color: black;
  }

  &.current {
    background-color: var(--power-primary-color);
  }

  .icon {
    font-size: 1.25em;
    color: white;
  }
}

.ctrlstools {
  padding: 0.5em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;

  .foldable-section {
    margin-top: 0;
    margin-bottom: 1em;
    padding-top: 0;
  }

  &.viewer3d-container {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    justify-content: space-between;
    width: 24em;

    > .ctrl-tabs {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
    }

    > .ctrl-tabs > .ctrl-tabs-head {
      flex: 0 0 auto;
    }

    > .ctrl-tabs > .ctrl-tabs-cont {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      margin-right: -1em;
      padding-right: calc(1em - 4px);
      scrollbar-gutter: stable;
    }

    > .foldable-section {
      flex: 0 0 auto;
    }
  }

  &.expand-container {
    width: 19em;
  }
}

.expand-align-toolbar {
  grid-template-columns: repeat(3, 1fr) !important;
}

.colorgradepreview {
  position: absolute;
  z-index: 0;
}

.launch-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 1em 0.5em 0 0.5em;
  color: #fff;
  padding: 0.5em 1em 0.5em 0.5em;
  background-color: rgba(0, 0, 0, 0.33);
  scale: 1;
  border-radius: calc(var(--grid-corners-radius) * 0.5);

  font-size: 0.85em;

  transition:
    background-color var(--spd-insp) ease,
    scale var(--spd-insp) ease;
  .icon.edit {
    color: rgba(255, 255, 255, 0.572);
    font-size: 1.25em;
  }
  &:hover {
    /* background-color: rgba(255, 255, 255, 0.939); */
    scale: 0.96;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 1.25em rgba(248, 242, 232, 0.267);
    /* color: black;
    .icon.edit {
      color: #171717;
    } */
  }
}

.editor-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5em;

  border-radius: var(--grid-corners-radius);
  background-color: var(--background-main);
  padding: 0.25em;
  z-index: 999999;

  button {
    padding: 0.5em;

    border-radius: calc(var(--grid-corners-radius) * 0.5);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.25em;

    cursor: pointer;

    &.save {
      padding: 0.5em 0.66em 0.5em 0.44em;
      background-color: var(--power-primary-color);
    }

    .icon {
      font-size: 1.25em;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    &.save:hover {
      background-color: oklab(62.681% 0.25423 -0.00813 / 0.8);
    }
  }
}

.nomediafound {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  padding: 2em;
  background-color: #f6f6f6;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-mask {
  position: absolute;
  background-color: transparent;
  z-index: 80;
  filter: invert(0) brightness(0.6) sepia(1) hue-rotate(318deg) saturate(6);
  mix-blend-mode: screen;

  canvas {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    -ms-touch-action: none;
  }
}

.editor-mask.increase-visibility {
  mix-blend-mode: difference;
}

.radiuspreview {
  --r: 10px;
  --x: 0;
  --y: 0;
  position: absolute;
  z-index: 999;
  top: var(--y);
  left: var(--x);
  background-color: transparent;
  border: 1px solid white;
  box-shadow:
    inset 0 0 0px 0.25em green,
    inset 0 0 2em red;
  border-radius: 9999em;
  width: var(--r);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.contents.open .string-collection {
  display: initial !important;
}

.valuepreview.string .expandpreview {
  display: none;
}

.lognode {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5em;
  aspect-ratio: 1;
  border: none;
  z-index: 9;
  background: none;

  display: block;
  cursor: inherit;
}

.viewer3dframe {
  position: absolute;
  z-index: 80;

  iframe {
    color-scheme: light;
    background: transparent;
  }
}

.editor-media:has(.viewer3dframe.transparent) {
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    --checker-dark: #3f37700a;
    --checker-light: #f7f7f7;
    --checker-size: 2em;
    background-image:
      linear-gradient(45deg, var(--checker-dark) 25%, transparent 25%),
      linear-gradient(-45deg, var(--checker-dark) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--checker-dark) 75%),
      linear-gradient(-45deg, transparent 75%, var(--checker-dark) 75%),
      linear-gradient(0deg, var(--checker-light), var(--checker-light));
    background-size: var(--checker-size) var(--checker-size);
    background-position:
      0 0,
      0 calc(var(--checker-size) / 2),
      calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2),
      calc(-1 * var(--checker-size) / 2) 0px;
  }
}

/* Hides empty foldable sections; notably in viewer3d editor */
.editor-tools-container .foldable-section:has(.cont.ctrls:empty) {
  display: none;
}

/* Hide ugly "orphan" separators before empty content */
.editor-tools-container .ctrl-sep:last-child {
  display: none;
}

.trimPreview {
  --x: 0px;
  --y: 0px;
  --width: 0px;
  --height: 0px;
  --scale: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--width) * var(--scale));
  height: calc(var(--height) * var(--scale));
  transform-origin: top left;
  transform: translate(
    calc(var(--x) * var(--scale)),
    calc(var(--y) * var(--scale))
  );

  border: 1px solid #ffffff;
  box-shadow:
    0 0 3.5em 0.33em rgba(0, 0, 0, 0.704),
    0 0 0 1px black;
  z-index: 100;
}

.trimLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.666);
  color: #fff;
  text-align: center;
  z-index: 200;
  border-radius: 50em;
}

.square-preview {
  height: 100%;
  background-color: var(--t-string);
}

.node-advanced-panel {
  padding: var(--panel-padding);

  overflow: hidden;
  overflow-y: scroll;
  opacity: 0;
  display: none;

  transition: all 200ms ease allow-discrete;
  transition-delay: 4s;

  header {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    /* padding: 0.5em 0.75em; */
    margin: 0 0 2em 0;
    border-radius: calc(var(--inner-border-radius) * 0.5);
    /* background-color: color-mix(
      in oklab,
      var(--power-ui01-color) 10%,
      transparent
    );
    border: 1px solid var(--power-ui01-color); */
    .title {
      font-weight: 600;
      font-size: 1.5em;
    }
    .subtitle {
      font-weight: 300;
      font-size: 1em;
    }
  }

  .node-advanced-runbar {
    --status-color: rgb(128, 128, 128);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin-top: 0.5em;
    padding-top: 0.75em;
    border-top: 1px solid
      color-mix(in oklab, var(--power-ui01-color) 35%, transparent);
    color: var(--status-color);

    &.status-started {
      --status-color: rgb(0, 215, 218);
    }
    &.status-completed {
      --status-color: oklab(0.87 -0.25 0.21);
    }
    &.status-failed {
      --status-color: oklab(0.58 0.23 0.13);
    }
    &.status-stale {
      --status-color: oklab(0.81 0.07 0.18);
    }

    .status {
      font-size: 0.78em;
      font-style: italic;
      text-transform: capitalize;
    }

    .runflow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35em;
      padding: 0.45em 0.7em;
      border-radius: var(--inner-border-radius);
      background-color: var(--power-primary-color);
      color: #fff;
      font-size: 0.9em;
      font-weight: 700;
      transition:
        background-color var(--spd-insp) ease,
        color var(--spd-insp) ease,
        scale var(--spd-insp) ease;

      .icon {
        font-size: 1.25em;
      }

      &:hover:not(:disabled) {
        background-color: var(--power-secondary-color);
        color: var(--text-primary);
        scale: 1.03;
      }

      &:active:not(:disabled) {
        scale: 0.96;
      }

      &:disabled {
        cursor: default;
        opacity: 0.55;
      }
    }
  }

  .smart-control-value {
    width: 100%;
  }
  .smart-control {
    display: grid !important;
    grid-template-columns: 0.8fr 1fr;
    &.string {
      input,
      textarea {
        text-align: left;
      }
      &:has(.multiline) {
        grid-template-columns: 1fr;
      }
    }
  }
}

#inspector-inner:not(:empty) {
  .node-advanced-panel {
    display: block;
    opacity: 1;
    transition-delay: 4s;
  }
}

#app.workflow #inspector {
  box-shadow: 0 0 2em black;
}

.flowgraph-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 33em;
  height: 100%;
  transform: translate(-50%, -50%);
  background: transparent url('/img/power-loader-animated.svg') no-repeat center
    center;
  background-size: 100% auto;
  opacity: 1;
  transition: opacity calc(var(--spd-insp) * 2) ease;
  pointer-events: none;
  &.hide {
    opacity: 0;
  }
}

.packshot-preview-container {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.75);
  height: 22.5em;
  width: 22.5em;

  .packshot-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0.75em;
    flex-shrink: 0;
  }

  .packshot-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5em;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;

    .icon {
      font-size: 32px;
    }
  }

  .preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e57373;
    gap: 0.5em;

    .icon {
      font-size: 32px;
    }
  }
}

/* -------------- CONTENT FIRST MODE ---------------- */

/*
asset nodes always display a content-first UI
(easier: always only one thumbnail, no visible inputs)
*/
.node.cat-assets:not(.usecase-viewer3d),
.node.displaymode-content:has(.contents):not(.implicit) {
  background: transparent;
  box-shadow: none;
  width: 250px;
  .node-header {
    position: absolute;
    z-index: 80;
    padding: 0;
    margin: 0.5em;
    transition: margin var(--spd-insp) ease;
    border-bottom: none;
    width: calc(100% - 1em);

    .openpanel {
      opacity: 0;
    }

    .node-header-text {
      opacity: 0;
      transition: opacity var(--spd-insp) ease;
      color: light-dark(black, white);
    }
    &::after {
      content: '';
      inset: -1.5em;
      position: absolute;
      background: none;
      z-index: -1;
    }
  }

  &:hover {
    .node-header {
      opacity: 1;
      margin: -3em 0 0 0;
      overflow: visible;
      width: 100%;
      .lognode {
        top: -3em;
      }
      .node-header-text,
      .openpanel {
        opacity: 1;
      }
    }
  }
  .debug-flow-id {
    top: initial;
    bottom: -2.5em;
  }
  .outputs {
    position: absolute;
    width: 100%;
    z-index: 999;
    margin: 0;
    top: 0.2em;
  }
  .inputs {
    display: none;
  }
  .preview {
    width: 100%;
    .contents {
      margin: 0;
    }
  }

  .togglecontent {
    display: none;
  }
}

/* :content vs :edit modes */
.node.displaymode-content:has(.contents):not(.implicit) {
  /* background-color: black; */
  border-color: transparent;
  --e-glow: transparent;

  &.prompt-enhancer:not(:hover) .node-header .icon {
    opacity: 0;
  }

  &:has(.valuepreview.idx-1) {
    width: 380px;
  }
  &:has(.valuepreview.idx-6) {
    width: 420px;
  }

  .node-footer {
    margin: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    /* padding: 2em 0.25em 0.5em 0.25em; */
    transition:
      bottom var(--spd-insp) ease,
      opacity var(--spd-insp) ease;

    .status {
      color: light-dark(rgba(0, 0, 0, 0.666), rgba(255, 255, 255, 0.666));
    }
  }
  &:hover {
    .node-footer {
      pointer-events: all;
      opacity: 1;
      bottom: -2.755em;
      padding: 1em 0.25em 0.5em 0.25em;
    }
  }

  .output {
    margin-left: 1em;
  }

  .togglecontent {
    display: flex;
    top: -2.5em;
  }

  .smart-control-input.multiline {
    min-height: 15ch;
  }

  .inputs {
    display: flex;
  }

  &:has(.inputs .input:hover) {
    z-index: 4;
  }
  .inputs {
    display: flex;
    position: absolute;
    top: 0.33em;
    left: 0;
    transform: translateX(-100%);

    .input.connection {
      flex-direction: row;
      justify-content: end;
      gap: 0.5em;
      transition: opacity var(--spd-insp) ease;

      &:not(.connected):not(:hover) {
        opacity: 0.3;
      }

      .plugname {
        margin-right: 0.5em;
      }

      .smart-control {
        display: flex;
        width: initial;
        justify-content: end;
        label {
          width: fit-content;
        }
        .smart-control-value {
          display: none;
        }
      }

      &:hover {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 125%;
          height: 250%;
          z-index: -1;
        }
        .smart-control {
          position: relative;
          .smart-control-value {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 90;
            width: 24ch;
          }
        }
      }

      &:has(.smart-control) {
        .smart-control-value {
          transform: translateY(2em);
        }
        .plugname,
        .smart-control-label {
          transform: translateY(0em);
        }
      }

      .plugname,
      .smart-control-label {
        padding: 0.5em 0.75em;
        background-color: rgb(19, 19, 19);
        border-radius: var(--inner-border-radius);
        opacity: 0;

        transition: opacity var(--spd-insp) ease;
      }

      &:hover {
        .plugname,
        .smart-control-label {
          opacity: 1;
        }
      }
    }
  }

  &:hover:not(:has(.input.connection:hover)) {
    .input.connection:not(.connected):not(:hover) {
      opacity: 1;
    }
  }

  .preview {
    width: 100%;

    .contents {
      --ggap: 0.25em;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: masonry;
      gap: var(--ggap);
      .valuepreview {
        margin: auto 0;
        width: 100%;
      }
      .connection {
        position: absolute;
        right: -0.35em;
        top: calc(3em + (var(--get-index, 0) * 1.5em));
      }

      .smart-control-value:has(textarea) {
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: calc(100% - 2px);
          height: 2em;
          z-index: 1;
          background: linear-gradient(0deg, black, transparent);
          pointer-events: none;
        }
      }

      textarea {
        padding: 0.8em 0.8em 2em 1.125em;
        /* border: none; */
      }
    }
    .contents:has(.valuepreview.idx-1) {
      grid-template-columns: 1fr 1fr;
    }
    .contents:has(.valuepreview.idx-6) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}