/* Light belongs to the existing type and diagram, not an extra decorative layer. */
.home .iridescent-ink {
  --ink-base: #6640c4;
  --ink-colors: #58309d 0%, #58309d 16%, #126b77 28%, #4140a9 36%, #943c85 44%, #58309d 52%, #176d82 65%, #6436b0 78%, #58309d 100%;
  color: var(--ink-base);
}
.home .closing-section .iridescent-ink {
  --ink-base: #d6f657;
  --ink-colors: #d6f657 0%, #d6f657 15%, #96eee0 28%, #f4ffd0 36%, #ffd199 44%, #d6f657 55%, #95eae6 67%, #eaff8b 79%, #d6f657 100%;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home .iridescent-ink {
    background-image: linear-gradient(112deg, transparent 0% 42%, #bdeeff40 47%, transparent 51% 100%), linear-gradient(112deg, var(--ink-colors));
    background-size: 240% 100%, 260% 100%;
    background-position: var(--ink-x, 48%) 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.closing-section.optical-closing { position: relative; isolation: isolate; overflow: hidden; }
.closing-section.optical-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--light-x, 68%) var(--light-y, 65%), #7ec5a42b, transparent 67%);
}
.flow-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-light path {
  stroke: #128a7b;
  stroke-width: 3;
  stroke-dasharray: 22 100;
  stroke-dashoffset: 122;
  opacity: 0;
  filter: drop-shadow(0 0 3px #62cbb8);
}
.map-hub {
  position: relative;
  background: radial-gradient(ellipse at var(--hub-x, 30%) var(--hub-y, 20%), #36564f, var(--forest) 72%);
}
.map-hub::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #44b49e;
  border-right-color: #bedb79;
  pointer-events: none;
  opacity: 0;
}
.map-hub.hub-lit::after { animation: orbit-light 2.6s .5s ease-in-out both; }
@keyframes orbit-light {
  0% { opacity: 0; transform: rotate(-80deg); }
  25%, 65% { opacity: .9; }
  100% { opacity: 0; transform: rotate(240deg); }
}
.atmosphere-paused .map-hub::after { animation: none; }
.atmosphere-paused .is-current.is-visible #todayMarker::before { animation-play-state: paused; }
.home .pbtn { isolation: isolate; }
.home .pbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(ellipse 200px 100px at var(--choice-x, 50%) var(--choice-y, 50%), #64b89c2e, transparent), linear-gradient(90deg, transparent, #299b87, #b7e5b6, transparent);
  background-size: 100% 100%, 180px 2px;
  background-position: 0 0, var(--choice-x, 50%) 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .18s;
}
.home .pbtn:is(:hover, :focus-visible, [aria-pressed="true"])::before { opacity: 1; }
.atmosphere-paused .pbtn::before { transition: none; }
@media (forced-colors: active) {
  .home .iridescent-ink { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; }
  .flow-light, .map-hub::after, .optical-closing::before, .home .pbtn::before { display: none; }
}
@media print {
  .home .iridescent-ink { background: none; -webkit-text-fill-color: currentColor; }
  .flow-light, .map-hub::after, .optical-closing::before, .home .pbtn::before { display: none; }
}