/* Shared decorative ambient layer. Kept in a static stylesheet so CSP does not
 * turn the generated bonsai DOM into normal page content. */
#ambientCanvas.is-bonsai-hidden {
  display: none !important;
}

.ambient-bonsai-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  opacity: .46;
  contain: strict;
  filter: saturate(.96) brightness(.92);
}

.ambient-bonsai-pre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0 0 clamp(2px, .7vh, 10px);
  overflow: hidden;
  color: #4f9d68;
  background: transparent;
  font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Consolas, monospace;
  font-size: clamp(10.5px, 1.724vh, 19.2px);
  font-weight: 620;
  font-variant-ligatures: none;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  text-align: left;
  text-rendering: geometricPrecision;
  user-select: none;
  pointer-events: none;
}

.ambient-bonsai-pre > code {
  display: block;
  flex: 0 0 100%;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre;
}

.ambient-bonsai-static { z-index: 1; }
.ambient-bonsai-fx { z-index: 2; }

.ambient-bonsai-pre .bonsai-trunk {
  color: #b67631;
  opacity: .78;
}

.ambient-bonsai-pre .bonsai-trunk-shadow {
  color: #765026;
  opacity: .64;
}

.ambient-bonsai-pre .bonsai-leaf {
  color: #4f9d68;
  opacity: .78;
}

.ambient-bonsai-pre .bonsai-leaf-bright {
  color: #77bd72;
  opacity: .90;
}

.ambient-bonsai-pre .bonsai-leaf-gold {
  color: #e2bd61;
  opacity: .82;
}

.ambient-bonsai-pre .bonsai-leaf-amber {
  color: #d98b38;
  opacity: .86;
}

.ambient-bonsai-pre .bonsai-pot-edge {
  color: #e2bd61;
  opacity: .68;
}

.ambient-bonsai-pre .bonsai-pot-fill {
  color: #765026;
  opacity: .62;
}

.ambient-bonsai-pre .bonsai-falling-leaf {
  color: #77bd72;
}

.ambient-bonsai-pre .bonsai-glow {
  color: #e2bd61;
  text-shadow:
    0 0 .32em rgba(226, 189, 97, .34),
    0 0 .66em rgba(79, 157, 104, .24);
}

.ambient-bonsai-pre .is-fade-0 { opacity: .68; }
.ambient-bonsai-pre .is-fade-1 { opacity: .44; }
.ambient-bonsai-pre .is-fade-2 { opacity: .24; }
.ambient-bonsai-pre .is-fade-3 { opacity: .08; }
.ambient-bonsai-pre .is-glow-0 { opacity: .20; }
.ambient-bonsai-pre .is-glow-1 { opacity: .40; }
.ambient-bonsai-pre .is-glow-2 { opacity: .68; }
.ambient-bonsai-pre .is-glow-3 { opacity: .32; }

@media (max-width: 720px) {
  .ambient-bonsai-layer {
    opacity: .40;
    filter: saturate(.92) brightness(.88);
  }

  .ambient-bonsai-pre {
    font-size: clamp(8.4px, 1.351vh, 12.8px);
    font-weight: 580;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bonsai-pre .bonsai-glow {
    text-shadow: none;
  }
}