[data-node-type="scene"],
[data-node-type="layer"],
[data-node-type="group"],
[data-node-type="p5"] {
  position: absolute;
  overflow: hidden;
}

[data-node-type="image"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0;
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@media (orientation: landscape) {
  .container {
    left: 50%;
    width: unset;
    height: 100%;
    aspect-ratio: 3 / 4;
    transform: translate(-50%, 0);
    box-shadow: 0 0 10vmin 5vmin rgb(255 255 255 / 0.15);
  }
}

.layer {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.canvas {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.width-33 {
  width: 33.3333%;
}

.width-66 {
  width: 66.6667%;
}

.width-50 {
  width: 50%;
}

.width-100 {
  width: 100%;
}

.height-25 {
  height: 25%;
}

.height-33 {
  height: 33.3333%;
}

.height-50 {
  height: 50%;
}

.height-66 {
  height: 66.6667%;
}

.height-100 {
  height: 100%;
}

/* Positioning */
.left-33 {
  left: 33.3333%;
}

.left-50 {
  left: 50%;
}

.left-66 {
  left: 66.6667%;
}

.top-33 {
  top: 33.3333%;
}

.top-50 {
  top: 50%;
}

.top-66 {
  top: 66.6667%;
}

/* Dividers */
.divider {
  position: absolute;
  z-index: 100;
  pointer-events: none;
}

.divider-vertical {
  top: 0;
  width: 1px;
  height: 100%;
}

.divider-horizontal {
  left: 0;
  height: 1px;
  width: 100%;
}

.divider-solid {
  background-color: var(--color-foreground, #fff);
  opacity: 0.5;
}

.divider-glow {
  background-color: var(--color-foreground, #fff);
  box-shadow: 0 0 10px 2px var(--color-accent, #0ff);
  opacity: 0.8;
}

.display-none {
  display: none !important;
}

.quad-10 {
  width: 10%;
  aspect-ratio: 1 / 1;
}

.quad-25 {
  width: 25%;
  aspect-ratio: 1 / 1;
}

.quad-33 {
  width: 33.3333%;
  aspect-ratio: 1 / 1;
}

.quad-50 {
  width: 50%;
  aspect-ratio: 1 / 1;
}

.quad-55 {
  width: 55%;
  aspect-ratio: 1 / 1;
}

.quad-60 {
  width: 60%;
  aspect-ratio: 1 / 1;
}

.quad-65 {
  width: 65%;
  aspect-ratio: 1 / 1;
}

.quad-70 {
  width: 70%;
  aspect-ratio: 1 / 1;
}

.quad-66 {
  width: 66.6667%;
  aspect-ratio: 1 / 1;
}

.quad-75 {
  width: 75%;
  aspect-ratio: 1 / 1;
}

.quad-80 {
  width: 80%;
  aspect-ratio: 1 / 1;
}

.quad-85 {
  width: 85%;
  aspect-ratio: 1 / 1;
}

.quad-90 {
  width: 90%;
  aspect-ratio: 1 / 1;
}

.quad-95 {
  width: 95%;
  aspect-ratio: 1 / 1;
}

.quad-100 {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.top-0 {
  top: 0;
}

.top-5 {
  top: 5%;
}

.top-10 {
  top: 10%;
}

.top-50 {
  top: 50%;
}

.left-0 {
  left: 0;
}

.left-5 {
  left: 5%;
}

.right-0 {
  right: 0;
}

.right-5 {
  right: 5%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-5 {
  bottom: 5%;
}

.bottom-10 {
  bottom: 10%;
}

.bottom-33 {
  bottom: 33.3333%;
}

.left-10 {
  left: 10%;
}

.right-0 {
  right: 0;
}

.right-10 {
  right: 10%;
}

.angle45 {
  transform: rotate(45deg);
}