/* The palette is carried by the whole viewport, behind every section. */
body { isolation: isolate; }
.ambient {
  /* Slightly richer colors; keep text, surfaces and motion unchanged. */
  filter: saturate(1.14);
  background:
    radial-gradient(ellipse at 5% 20%, #f7c4de 0%, transparent 52%),
    radial-gradient(ellipse at 85% 10%, #b7dff6 0%, transparent 52%),
    radial-gradient(ellipse at 75% 65%, #bce8d8 0%, transparent 48%),
    radial-gradient(ellipse at 10% 85%, #f9edb9 0%, transparent 48%),
    linear-gradient(135deg, #fffdfb, #d4c2f0 55%, #e6a2d3);
}
.ambient::after { content: none; }
.motion-enabled .ambient::after { animation: none; }
.fluid-canvas { display: block; width: 100%; height: 100%; opacity: 0; }
.ambient[data-renderer="webgl"] .fluid-canvas { opacity: 1; }
.motion-enabled .ambient:not([data-renderer="webgl"]) {
  background-size: 150% 150%;
  animation: pastel-fallback 24s ease-in-out infinite alternate;
}
.motion-paused .ambient { animation-play-state: paused !important; }
@keyframes pastel-fallback {
  from { background-position: 0% 10%; }
  to { background-position: 100% 90%; }
}
.voice-note {
  transform: rotate(5deg);
  background: linear-gradient(145deg, #fff7d4, #fcf0b1);
}
.brand-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.sun-mark { width: 1em; height: 1em; flex-shrink: 0; color: #8a5d93; }
.voice-note .sun-mark {
  display: inline-block;
  width: .84em;
  height: .84em;
  margin-left: .13em;
  vertical-align: -.065em;
}
.personal-note > .sun-mark { width: 42px; height: 42px; }
.closing > .sun-mark { width: 90px; height: 90px; color: #9473a5; }
/* Deeper relatives of the pastels keep colored lettering readable. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 em, h2 em, .closing em, #sintonia-title {
    background-image: linear-gradient(105deg, #a13f7b 3%, #7650a0 35%, #376d9e 67%, #287368 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  #sintonia-title { width: fit-content; padding-right: .07em; }
  #sintonia-title em { background: none; color: inherit; }
}
@media (max-width: 760px) {
  .closing > .sun-mark { width: 58px; height: 58px; }
}