/* The Living Beacon is additive: original artwork, crops and page layout stay intact. */
body { position: relative; isolation: isolate; }
#beacon-description, [data-beacon-status] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.beacon-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  contain: strict;
}
.beacon-trigger {
  display: block;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}
.beacon-trigger:disabled { cursor: default; }
.beacon-light { --beacon-light: #D7A257; --beacon-fire: #F07832; }
:root[data-theme="cool"] .beacon-light { --beacon-light: #C9B5EF; --beacon-fire: #8BB9F2; }
.beacon-light, .beacon-light > span { position: absolute; pointer-events: none; }
.beacon-light { inset: 0; color: var(--beacon-light); transition: color 1.2s ease; }
.beacon-flame {
  left: 36%; top: 23%; width: 28%; height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, currentColor, transparent 67%);
  opacity: .11;
  mix-blend-mode: screen;
}
.beacon-halo, .beacon-wave {
  left: 21%; top: 18%; width: 58%; height: 66%;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 32px currentColor, inset 0 0 22px currentColor;
  opacity: 0;
}
.beacon-wave { border-width: 2px; box-shadow: 0 0 22px currentColor; }
.beacon-trigger:focus-visible { outline: none; }
.beacon-trigger:focus-visible::after {
  content: "";
  position: absolute;
  left: 19%; top: 16%; width: 62%; height: 70%;
  border: 2px dashed var(--lilac);
  border-radius: 50%;
  pointer-events: none;
}
.beacon-trigger:not(:disabled):hover .beacon-flame { opacity: .19; }
:root[data-atmosphere="running"][data-beacon-motion="full"] .beacon-trigger.is-pulsing .beacon-flame { animation: beacon-flame 2.4s ease-out both !important; }
:root[data-atmosphere="running"][data-beacon-motion="full"] .beacon-trigger.is-pulsing .beacon-halo { animation: beacon-halo 2.4s ease-out both !important; }
:root[data-atmosphere="running"][data-beacon-motion="full"] .beacon-trigger.is-pulsing .beacon-wave { animation: beacon-wave 2.4s ease-out both !important; }
:root[data-atmosphere="running"][data-beacon-motion="full"] .beacon-trigger.is-pulsing .beacon-aura { animation: beacon-aura 2.4s ease-out both !important; }
.beacon-aura {
  left: 2%; top: 3%; width: 96%; height: 96%;
  border-radius: 50%;
  background: radial-gradient(ellipse, currentColor, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
}
.beacon-motes { inset: 0; }
.beacon-motes i {
  position: absolute; left: 50%; top: 41%; width: 3px; height: 3px;
  border-radius: 50%; background: currentColor; opacity: 0;
  box-shadow: 0 0 12px currentColor;
}
.beacon-motes i:nth-child(1) { --mote-x: -26px; --mote-y: -61px; }
.beacon-motes i:nth-child(2) { --mote-x: 38px; --mote-y: -82px; }
.beacon-motes i:nth-child(3) { --mote-x: -49px; --mote-y: -48px; }
.beacon-motes i:nth-child(4) { --mote-x: 19px; --mote-y: -104px; }
.beacon-motes i:nth-child(5) { --mote-x: -12px; --mote-y: -91px; }
.beacon-motes i:nth-child(6) { --mote-x: 55px; --mote-y: -55px; }
.beacon-motes i:nth-child(7) { --mote-x: -78px; --mote-y: -103px; }
.beacon-motes i:nth-child(8) { --mote-x: 82px; --mote-y: -114px; }
.beacon-motes i:nth-child(9) { --mote-x: -38px; --mote-y: -148px; }
.beacon-motes i:nth-child(10) { --mote-x: 62px; --mote-y: -159px; }
.beacon-motes i:nth-child(11) { --mote-x: -94px; --mote-y: -68px; }
.beacon-motes i:nth-child(12) { --mote-x: 103px; --mote-y: -81px; }
:root[data-atmosphere="running"][data-beacon-motion="full"] .beacon-trigger.is-pulsing .beacon-motes i { animation: beacon-mote 2.4s ease-out both !important; }
@keyframes beacon-flame { 0%,100% { opacity: .11; } 16% { opacity: .96; } 43% { opacity: .55; } }
@keyframes beacon-halo { 0%,100% { opacity: 0; } 23% { opacity: .74; } 62% { opacity: .21; } }
@keyframes beacon-wave { 0%,8% { transform: scale(.68); opacity: 0; } 28% { opacity: .48; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes beacon-aura { 0%,100% { transform: scale(.8); opacity: 0; } 32% { opacity: .34; } 80% { transform: scale(1.2); opacity: .06; } }
@keyframes beacon-mote { 0% { opacity: 0; transform: translate(0,0); } 21% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--mote-x),var(--mote-y)); } }
:root[data-beacon-motion="reduced"] .beacon-light { transition: none; }
:root[data-beacon-motion="reduced"] .beacon-trigger.is-pulsing .beacon-light * { animation: none; }
:root[data-beacon-motion="reduced"] .beacon-trigger.is-pulsing .beacon-flame { opacity: .33; }
:root[data-beacon-motion="reduced"] .beacon-trigger.is-pulsing .beacon-halo { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-atmosphere="running"]) .beacon-light { transition: none; }
  :root:not([data-atmosphere="running"]) .beacon-trigger.is-pulsing .beacon-light * { animation: none; }
}
@media (forced-colors: active) {
  .beacon-atmosphere, .beacon-light { display: none; }
  .beacon-trigger { opacity: 1; }
  .beacon-trigger:focus-visible::after { border-color: ButtonText; }
}