@charset "UTF-8";
@property --start {
  syntax: "<color>";
  initial-value: #f0f0f0;
  inherits: false;
}
@property --end {
  syntax: "<color>";
  initial-value: rgb(80.4176470588%, 80.4176470588%, 80.4176470588%);
  inherits: false;
}
@media (prefers-color-scheme: light) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.4), transparent 70%),
    	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(38.8235294118%, 94.5098039216%, 87.7647058824%, 0.28), transparent 65%),
    	radial-gradient(circle 35vw at 25% 55%, rgba(94.5098039216%, 74.7712418301%, 38.8235294118%, 0.15), transparent),
    	radial-gradient(circle 28vw at 82% 35%, rgba(46.9281045752%, 38.8235294118%, 94.5098039216%, 0.18), transparent),
    	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(38.8235294118%, 63.2026143791%, 94.5098039216%, 0.14), transparent 55%),
    	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(82.1176470588%, 82.1176470588%, 82.1176470588%) 100%);
    --color: #151515;
    --color-secondary: #334155;
    --color-disabled: #94a3b8;
    --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
    --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
    --border: #cbd5e1;
    --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
    --background: #f7f7f7;
    --background-secondary: #cbd5e1;
    --background-hover: #ffffff;
    --close-color: #444;
    --close-color-hover: #222;
    --close-color-active: #000;
    --close-background: rgba(102, 102, 102, 0.24);
    --close-background-hover: rgba(102, 102, 102, 0.4);
    --close-background-active: rgba(102, 102, 102, 0.6);
    --menu-accent: rgba(40.1176470588%, 40.1176470588%, 40.1176470588%, 0.85);
    --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
    --submenu-btn-bg: rgba(255, 255, 255, 0.55);
    --submenu-btn-bg-hover: rgba(255, 255, 255, 0.75);
    --submenu-btn-bg-active: rgba(255, 255, 255, 0.40);
    --submenu-btn-border: rgba(0, 0, 0, 0.08);
  }
  body::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border: 2px solid #f0f0f0;
  }
  * {
    scrollbar-color: #bbb #f0f0f0;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(13.0588235294%, 13.1764705882%, 25.6862745098%), transparent 75%),
    	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(12.4862745098%, 16.9411764706%, 23.617254902%), transparent 70%),
    	radial-gradient(circle 45vw at 25% 55%, rgb(15.2549019608%, 14.0705882353%, 19.2862745098%), transparent),
    	radial-gradient(circle 38vw at 82% 35%, rgb(13.1346405229%, 12.4862745098%, 24.1568627451%), transparent),
    	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(12.4862745098%, 14.4366013072%, 24.1568627451%), transparent 60%),
    	#1e1e24;
    --color: #f0f0f0;
    --color-secondary: #94a3b8;
    --color-disabled: #6B5C47;
    --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
    --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
    --border: #38332c;
    --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
    --background: #212121;
    --background-secondary: #38332c;
    --background-hover: #000000;
    --background-disabled: #353535;
    --close-color: #BBB;
    --close-color-hover: #DDD;
    --close-color-active: #FFF;
    --close-background: rgba(153, 153, 153, 0.24);
    --close-background-hover: rgba(153, 153, 153, 0.4);
    --close-background-active: rgba(153, 153, 153, 0.6);
    --menu-accent: rgba(62.2352941176%, 62.2352941176%, 62.2352941176%, 0.85);
    --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
    --submenu-btn-bg: rgba(255, 255, 255, 0.08);
    --submenu-btn-bg-hover: rgba(255, 255, 255, 0.15);
    --submenu-btn-bg-active: rgba(255, 255, 255, 0.05);
    --submenu-btn-border: rgba(255, 255, 255, 0.10);
  }
  body::-webkit-scrollbar-track {
    background: #1e1e1e;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 2px solid #1e1e1e;
  }
  * {
    scrollbar-color: #555 #1e1e1e;
  }
}
body.light-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.4), transparent 70%),
  	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(38.8235294118%, 94.5098039216%, 87.7647058824%, 0.28), transparent 65%),
  	radial-gradient(circle 35vw at 25% 55%, rgba(94.5098039216%, 74.7712418301%, 38.8235294118%, 0.15), transparent),
  	radial-gradient(circle 28vw at 82% 35%, rgba(46.9281045752%, 38.8235294118%, 94.5098039216%, 0.18), transparent),
  	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(38.8235294118%, 63.2026143791%, 94.5098039216%, 0.14), transparent 55%),
  	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(78.1176470588%, 78.1176470588%, 78.1176470588%) 100%);
  --color: #151515;
  --color-secondary: #334155;
  --color-disabled: #94a3b8;
  --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
  --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
  --border: #cbd5e1;
  --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
  --background: #f7f7f7;
  --background-secondary: #cbd5e1;
  --background-hover: #ffffff;
  --background-disabled: #f1f5f9;
  --close-color: #444;
  --close-color-hover: #222;
  --close-color-active: #000;
  --close-background: rgba(102, 102, 102, 0.24);
  --close-background-hover: rgba(102, 102, 102, 0.4);
  --close-background-active: rgba(102, 102, 102, 0.6);
  --menu-accent: rgba(40.1176470588%, 40.1176470588%, 40.1176470588%, 0.85);
  --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
  --submenu-btn-bg: rgba(255, 255, 255, 0.55);
  --submenu-btn-bg-hover: rgba(255, 255, 255, 0.75);
  --submenu-btn-bg-active: rgba(255, 255, 255, 0.40);
  --submenu-btn-border: rgba(0, 0, 0, 0.08);
}
body.light-mode body::-webkit-scrollbar-track {
  background: #f0f0f0;
}
body.light-mode body::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border: 2px solid #f0f0f0;
}
body.light-mode * {
  scrollbar-color: #bbb #f0f0f0;
}

body.dark-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(13.0588235294%, 13.1764705882%, 25.6862745098%), transparent 75%),
  	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(12.4862745098%, 16.9411764706%, 23.617254902%), transparent 70%),
  	radial-gradient(circle 45vw at 25% 55%, rgb(15.2549019608%, 14.0705882353%, 19.2862745098%), transparent),
  	radial-gradient(circle 38vw at 82% 35%, rgb(13.1346405229%, 12.4862745098%, 24.1568627451%), transparent),
  	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(12.4862745098%, 14.4366013072%, 24.1568627451%), transparent 60%),
  	#1e1e24;
  --color: #f0f0f0;
  --color-secondary: #94a3b8;
  --color-disabled: #6B5C47;
  --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
  --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
  --border: #38332c;
  --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
  --background: #212121;
  --background-secondary: #38332c;
  --background-hover: #000000;
  --background-disabled: #353535;
  --close-color: #BBB;
  --close-color-hover: #DDD;
  --close-color-active: #FFF;
  --close-background: rgba(153, 153, 153, 0.24);
  --close-background-hover: rgba(153, 153, 153, 0.4);
  --close-background-active: rgba(153, 153, 153, 0.6);
  --menu-accent: rgba(62.2352941176%, 62.2352941176%, 62.2352941176%, 0.85);
  --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
  --submenu-btn-bg: rgba(255, 255, 255, 0.08);
  --submenu-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --submenu-btn-bg-active: rgba(255, 255, 255, 0.05);
  --submenu-btn-border: rgba(255, 255, 255, 0.10);
}
body.dark-mode body::-webkit-scrollbar-track {
  background: #1e1e1e;
}
body.dark-mode body::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 2px solid #1e1e1e;
}
body.dark-mode * {
  scrollbar-color: #555 #1e1e1e;
}

body {
  background: var(--body-bg-gradient);
  background-attachment: fixed;
  color: var(--color);
}

#BS__popup {
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#BS__popup.removing {
  pointer-events: none;
}

.BS-popup-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.BS-popup-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(21, 21, 21, 0.55);
  overflow-x: hidden;
  overflow-y: visible;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__popup.removing .BS-popup-iframe {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.popup {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 48px);
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

#BS_popup_container {
  margin: 0;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 60rem);
  max-height: 92vh;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  cursor: default;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  border: 2px solid var(--modal-border);
}

body.popup.sidebar #BS_popup_container {
  border: 0px solid var(--modal-border);
  border-left: 2px solid var(--modal-border);
}

.close-modal-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 10;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before, .close-modal-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before {
  transform: rotate(45deg);
}
.close-modal-button::after {
  transform: rotate(-45deg);
}
.close-modal-button:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
.close-modal-button:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

/* A frame that has opened a popup is no longer the layer this button would close,
   and the new layer's backdrop is only 55% opaque, so it showed through beside the
   new card as a second, unreachable close button. The child combinator is
   load-bearing: the OIDC popup's own card lives INSIDE #BS__popup and keeps its own. */
body:has(> #BS__popup) > #BS_popup_container > .close-modal-button {
  display: none;
}

#BS_popup_content {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(16px, 4vw, 32px);
  /* Asymmetric on purpose. The block-start has to clear the close button: it
     sits at top:16px and is $close-size (40px) tall, so it occupies y 16-56px
     in the container — the old 48px was clearing it by nothing at all. The
     sidebar variant moves that button to the LEFT (see
     `body.sidebar .close-modal-button`), right over where the title starts, so
     the top can only come down a little. The block-end clears nothing and this
     box scrolls, so that is where the height is taken from. */
  padding-block: clamp(16px, 4vh, 40px) clamp(12px, 2.5vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Children must never push the popup wider than the screen: let them shrink,
 * and let wide tables scroll internally rather than blow out the container. */
#BS_popup_content > * {
  max-width: 100%;
  min-width: 0;
}

body.popup [class^=table] {
  max-width: 100%;
}

#BS__popup:has(.oidc-login-container) .BS-popup-outer {
  position: fixed;
  inset: 0;
  margin: 0 !important;
  padding: 0;
  background: rgba(21, 21, 21, 0.55);
  cursor: pointer;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__popup.removing:has(.oidc-login-container) .BS-popup-outer {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.oidc-login-container {
  width: min(420px, 90vw);
  cursor: default;
}

.oidc-login-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.oidc-login-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 0 0 12px 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  80% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes panel-out {
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
}
@media (min-width: 992px) {
  body.popup {
    padding-inline: clamp(32px, 6vw, 96px);
  }
  #BS_popup_content {
    padding-inline: clamp(32px, 6vw, 64px);
  }
}
/* Mobile only: tighten the space around the popup and its content.
 * Desktop (base + the 992px rule above) keeps its original, roomier padding. */
@media (max-width: 48rem) {
  body.popup {
    padding: clamp(8px, 2.5vh, 18px) clamp(8px, 3vw, 14px);
  }
  #BS_popup_content {
    padding-inline: clamp(12px, 4vw, 18px);
    padding-block: clamp(14px, 3vh, 22px);
    gap: 0.9rem;
  }
}
@keyframes sidebar-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  80% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sidebar-out {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(100%);
  }
}
body.sidebar {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body.sidebar #BS_popup_container {
  width: max-content;
  min-width: 320px;
  max-width: 95vw;
  height: 100%;
  max-height: none;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(0, 0, 0, 0.08);
  margin-right: -1px;
  animation: sidebar-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar.removing #BS_popup_container {
  animation: sidebar-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar .close-modal-button {
  left: 16px;
  right: auto;
}

@media (min-width: 992px) {
  body.sidebar {
    perspective: 1200px;
  }
  body.sidebar #BS_popup_container {
    transform-origin: right center;
  }
}
#BS__submenu {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__submenu .submenu-content {
  cursor: default;
  position: relative;
  width: 320px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  border: 2px solid var(--modal-border);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing #BS__submenu .submenu-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu .close-modal-or-submenu {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .close-modal-or-submenu::before, #BS__submenu .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__submenu .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}
#BS__submenu .close-modal-or-submenu:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
#BS__submenu .close-modal-or-submenu:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

#BS__submenu ul {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  /* Never sideways. The panel's width is fixed so it stays predictable on a
   * phone, and `overflow-y: auto` alone would compute overflow-x to `auto`
   * too, so one long option (a row menu's "Email <address>") produced a
   * horizontal scrollbar across the whole list. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  gap: 4px;
}

#BS__submenu ul button {
  width: 100%;
  padding: 16px 48px 16px 40px;
  border: none;
  border-radius: 8px;
  font: 500 16px/1.4 "Inter", sans-serif;
  text-align: left;
  /* Block, not the forms stylesheet's inline-flex: a flex container has no text
   * box to ellipsise, so the label overflowed instead of truncating — and its
   * `justify-content: center` was quietly overriding the text-align above. */
  display: block;
  /* An email address has no break opportunity, so without this it overflows
   * the button rather than wrapping. Ellipsis keeps every option one line and
   * the panel at its declared width; the full text is on the button's title. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  color: var(--color) !important;
  background: var(--submenu-btn-bg);
  border: 1px solid var(--submenu-btn-border);
  box-shadow: var(--shadow-btn);
  margin-bottom: 4px;
  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms !important;
}
#BS__submenu ul button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--menu-accent);
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu ul button:hover {
  padding-left: 32px;
  background: var(--submenu-btn-bg-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#BS__submenu ul button:hover::before {
  opacity: 1;
}
#BS__submenu ul button:active {
  background: var(--submenu-btn-bg-active);
  transform: scale(0.97);
  box-shadow: none;
}
#BS__submenu ul button:active::before {
  background: #6366F1;
  opacity: 1;
}

@media (max-width: 480px) {
  #BS__submenu .submenu-content {
    width: 90vw;
  }
}
#BS__modal {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__modal .modal-content {
  cursor: default;
  position: relative;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 34rem);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.22);
  border: 2px solid var(--modal-border);
  padding: clamp(24px, 5vh, 48px) clamp(24px, 5vw, 56px);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing #BS__modal .modal-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__modal .close-modal-or-submenu {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__modal .close-modal-or-submenu::before, #BS__modal .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__modal .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__modal .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}
#BS__modal .close-modal-or-submenu:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
#BS__modal .close-modal-or-submenu:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

.modal-header {
  margin: 0;
  font: 600 clamp(1.25rem, 2.5vw, 1.75rem)/1.2 "Inter", sans-serif;
  text-align: center;
}

.modal-dialog {
  font: 400 clamp(1rem, 2.3vw, 1.125rem)/1.5 "Inter", sans-serif;
  text-align: center;
}

.modal-options {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal-options li {
  margin: 0;
}

.modal-options button {
  padding: 0.75em 1.75em;
}

@media (max-width: 480px) {
  #BS__modal .modal-content {
    width: 90vw;
  }
}
/* Mobile only: tighter padding for the confirm/areYouSure modal.
 * Placed after the base rule above so it actually wins (media queries
 * add no specificity — source order decides). Desktop is unchanged. */
@media (max-width: 48rem) {
  #BS__modal .modal-content {
    padding: clamp(16px, 3.5vh, 24px) clamp(14px, 4vw, 20px);
    gap: 0.9rem;
  }
}
/* Loading Overlay — shown during requests, sits behind toasts */
#jeql__loading_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 120ms delay: fast requests never flash the overlay */
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
#jeql__loading_overlay .jeql__spinner {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  /* Spring entrance: subtle scale-up with overshoot */
  animation: spinner-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  /* Faint track ring — always visible */
}
#jeql__loading_overlay .jeql__spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
#jeql__loading_overlay .jeql__spinner {
  /* Spinning gradient arc — the comet tail */
}
#jeql__loading_overlay .jeql__spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.5) 88%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: jeql-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

@keyframes loading-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spinner-entrance {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes jeql-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Toast Container Styles */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

/* Individual Toast Styles */
.toast {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  padding: 16px 16px 16px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: auto;
  /* Entrance animation */
  animation: toast-enter 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  opacity: 0;
  transform: translateY(16px);
}

/* Toast types */
.toast-success {
  border-left: 4px solid #10b981;
  background-color: #dbffee;
}

.toast-error {
  border-left: 4px solid #ef4444;
  background-color: #ffdfdf;
}

.toast-info {
  border-left: 4px solid #3b82f6;
  background-color: #d5fff8;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
  background-color: #fff4d0;
}

/* Exit animation */
.toast-exit {
  animation: toast-exit 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
}

/* Toast loading bar */
.toast-loading-bar {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transition: width 5s linear;
}
.toast-loading-bar.decreasing {
  width: 0%;
}

.toast-success .toast-loading-bar {
  background: linear-gradient(to right, #059669, #10b981);
}

.toast-error .toast-loading-bar {
  background: linear-gradient(to right, #dc2626, #ef4444);
}

.toast-info .toast-loading-bar {
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

.toast-warning .toast-loading-bar {
  background: linear-gradient(to right, #d97706, #f59e0b);
}

/* Toast message */
.toast-message {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  margin-right: 16px;
}

/* Close button */
.toast-close-button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  padding-left: 0;
  border-radius: 50%;
  background: rgba(102, 102, 102, 0.4);
  color: #444;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(21, 21, 21, 0.12);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before, .toast-close-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before {
  transform: rotate(45deg);
}
.toast-close-button::after {
  transform: rotate(-45deg);
}
.toast-close-button:hover {
  background: rgba(102, 102, 102, 0.6);
  transform: rotate(90deg);
  color: #222;
}
.toast-close-button:active {
  background: rgba(102, 102, 102, 0.8);
  transform: rotate(180deg);
  color: #000;
}

/* Animations */
@keyframes toast-enter {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-exit {
  0% {
    transform: translateX(0);
    opacity: 1;
    max-height: 100px;
    margin-top: 8px;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
}
/* Utility classes */
.no-display {
  display: none;
}

/* PDF Renderer */
#BS__renderer {
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(21, 21, 21, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer .loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  padding: 2rem;
}
#BS__renderer .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
#BS__renderer .loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgb(11.2941176471%, 13%, 92.0392156863%);
  animation: spin 1.5s linear infinite;
}
#BS__renderer .loader-ring:nth-child(2) {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: rgb(29.6470588235%, 31%, 93.6862745098%);
  animation-duration: 1.75s;
  animation-direction: reverse;
}
#BS__renderer .loader-ring:nth-child(3) {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: rgb(48%, 49%, 95.3333333333%);
  animation-duration: 2s;
}
#BS__renderer .loader-pulse {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  background-color: rgb(66.3529411765%, 67%, 96.9803921569%);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
#BS__renderer .loader-text {
  margin-top: 2rem;
  text-align: center;
}
#BS__renderer .loader-text h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
#BS__renderer .loader-text p {
  opacity: 0.8;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
#BS__renderer .progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}
#BS__renderer .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgb(66.3529411765%, 67%, 96.9803921569%), rgb(11.2941176471%, 13%, 92.0392156863%));
  border-radius: 3px;
  animation: progress 6s ease-in-out infinite;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
}
@keyframes progress {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  75% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 95%;
  }
}
html {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
}

@property --start {
  syntax: "<color>";
  initial-value: #f0f0f0;
  inherits: false;
}
@property --end {
  syntax: "<color>";
  initial-value: rgb(80.4176470588%, 80.4176470588%, 80.4176470588%);
  inherits: false;
}
@media (prefers-color-scheme: light) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.4), transparent 70%),
    	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(38.8235294118%, 94.5098039216%, 87.7647058824%, 0.28), transparent 65%),
    	radial-gradient(circle 35vw at 25% 55%, rgba(94.5098039216%, 74.7712418301%, 38.8235294118%, 0.15), transparent),
    	radial-gradient(circle 28vw at 82% 35%, rgba(46.9281045752%, 38.8235294118%, 94.5098039216%, 0.18), transparent),
    	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(38.8235294118%, 63.2026143791%, 94.5098039216%, 0.14), transparent 55%),
    	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(82.1176470588%, 82.1176470588%, 82.1176470588%) 100%);
    --color: #151515;
    --color-secondary: #334155;
    --color-disabled: #94a3b8;
    --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
    --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
    --border: #cbd5e1;
    --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
    --background: #f7f7f7;
    --background-secondary: #cbd5e1;
    --background-hover: #ffffff;
    --close-color: #444;
    --close-color-hover: #222;
    --close-color-active: #000;
    --close-background: rgba(102, 102, 102, 0.24);
    --close-background-hover: rgba(102, 102, 102, 0.4);
    --close-background-active: rgba(102, 102, 102, 0.6);
    --menu-accent: rgba(40.1176470588%, 40.1176470588%, 40.1176470588%, 0.85);
    --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
    --submenu-btn-bg: rgba(255, 255, 255, 0.55);
    --submenu-btn-bg-hover: rgba(255, 255, 255, 0.75);
    --submenu-btn-bg-active: rgba(255, 255, 255, 0.40);
    --submenu-btn-border: rgba(0, 0, 0, 0.08);
  }
  body::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border: 2px solid #f0f0f0;
  }
  * {
    scrollbar-color: #bbb #f0f0f0;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(13.0588235294%, 13.1764705882%, 25.6862745098%), transparent 75%),
    	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(12.4862745098%, 16.9411764706%, 23.617254902%), transparent 70%),
    	radial-gradient(circle 45vw at 25% 55%, rgb(15.2549019608%, 14.0705882353%, 19.2862745098%), transparent),
    	radial-gradient(circle 38vw at 82% 35%, rgb(13.1346405229%, 12.4862745098%, 24.1568627451%), transparent),
    	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(12.4862745098%, 14.4366013072%, 24.1568627451%), transparent 60%),
    	#1e1e24;
    --color: #f0f0f0;
    --color-secondary: #94a3b8;
    --color-disabled: #6B5C47;
    --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
    --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
    --border: #38332c;
    --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
    --background: #212121;
    --background-secondary: #38332c;
    --background-hover: #000000;
    --background-disabled: #353535;
    --close-color: #BBB;
    --close-color-hover: #DDD;
    --close-color-active: #FFF;
    --close-background: rgba(153, 153, 153, 0.24);
    --close-background-hover: rgba(153, 153, 153, 0.4);
    --close-background-active: rgba(153, 153, 153, 0.6);
    --menu-accent: rgba(62.2352941176%, 62.2352941176%, 62.2352941176%, 0.85);
    --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
    --submenu-btn-bg: rgba(255, 255, 255, 0.08);
    --submenu-btn-bg-hover: rgba(255, 255, 255, 0.15);
    --submenu-btn-bg-active: rgba(255, 255, 255, 0.05);
    --submenu-btn-border: rgba(255, 255, 255, 0.10);
  }
  body::-webkit-scrollbar-track {
    background: #1e1e1e;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 2px solid #1e1e1e;
  }
  * {
    scrollbar-color: #555 #1e1e1e;
  }
}
body.light-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.4), transparent 70%),
  	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(38.8235294118%, 94.5098039216%, 87.7647058824%, 0.28), transparent 65%),
  	radial-gradient(circle 35vw at 25% 55%, rgba(94.5098039216%, 74.7712418301%, 38.8235294118%, 0.15), transparent),
  	radial-gradient(circle 28vw at 82% 35%, rgba(46.9281045752%, 38.8235294118%, 94.5098039216%, 0.18), transparent),
  	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(38.8235294118%, 63.2026143791%, 94.5098039216%, 0.14), transparent 55%),
  	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(78.1176470588%, 78.1176470588%, 78.1176470588%) 100%);
  --color: #151515;
  --color-secondary: #334155;
  --color-disabled: #94a3b8;
  --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
  --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
  --border: #cbd5e1;
  --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
  --background: #f7f7f7;
  --background-secondary: #cbd5e1;
  --background-hover: #ffffff;
  --background-disabled: #f1f5f9;
  --close-color: #444;
  --close-color-hover: #222;
  --close-color-active: #000;
  --close-background: rgba(102, 102, 102, 0.24);
  --close-background-hover: rgba(102, 102, 102, 0.4);
  --close-background-active: rgba(102, 102, 102, 0.6);
  --menu-accent: rgba(40.1176470588%, 40.1176470588%, 40.1176470588%, 0.85);
  --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
  --submenu-btn-bg: rgba(255, 255, 255, 0.55);
  --submenu-btn-bg-hover: rgba(255, 255, 255, 0.75);
  --submenu-btn-bg-active: rgba(255, 255, 255, 0.40);
  --submenu-btn-border: rgba(0, 0, 0, 0.08);
}
body.light-mode body::-webkit-scrollbar-track {
  background: #f0f0f0;
}
body.light-mode body::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border: 2px solid #f0f0f0;
}
body.light-mode * {
  scrollbar-color: #bbb #f0f0f0;
}

body.dark-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(13.0588235294%, 13.1764705882%, 25.6862745098%), transparent 75%),
  	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(12.4862745098%, 16.9411764706%, 23.617254902%), transparent 70%),
  	radial-gradient(circle 45vw at 25% 55%, rgb(15.2549019608%, 14.0705882353%, 19.2862745098%), transparent),
  	radial-gradient(circle 38vw at 82% 35%, rgb(13.1346405229%, 12.4862745098%, 24.1568627451%), transparent),
  	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(12.4862745098%, 14.4366013072%, 24.1568627451%), transparent 60%),
  	#1e1e24;
  --color: #f0f0f0;
  --color-secondary: #94a3b8;
  --color-disabled: #6B5C47;
  --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
  --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
  --border: #38332c;
  --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
  --background: #212121;
  --background-secondary: #38332c;
  --background-hover: #000000;
  --background-disabled: #353535;
  --close-color: #BBB;
  --close-color-hover: #DDD;
  --close-color-active: #FFF;
  --close-background: rgba(153, 153, 153, 0.24);
  --close-background-hover: rgba(153, 153, 153, 0.4);
  --close-background-active: rgba(153, 153, 153, 0.6);
  --menu-accent: rgba(62.2352941176%, 62.2352941176%, 62.2352941176%, 0.85);
  --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
  --submenu-btn-bg: rgba(255, 255, 255, 0.08);
  --submenu-btn-bg-hover: rgba(255, 255, 255, 0.15);
  --submenu-btn-bg-active: rgba(255, 255, 255, 0.05);
  --submenu-btn-border: rgba(255, 255, 255, 0.10);
}
body.dark-mode body::-webkit-scrollbar-track {
  background: #1e1e1e;
}
body.dark-mode body::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 2px solid #1e1e1e;
}
body.dark-mode * {
  scrollbar-color: #555 #1e1e1e;
}

body {
  background: var(--body-bg-gradient);
  background-attachment: fixed;
  color: var(--color);
}

#BS__popup {
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#BS__popup.removing {
  pointer-events: none;
}

.BS-popup-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.BS-popup-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(21, 21, 21, 0.55);
  overflow-x: hidden;
  overflow-y: visible;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__popup.removing .BS-popup-iframe {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.popup {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 48px);
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

#BS_popup_container {
  margin: 0;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 60rem);
  max-height: 92vh;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  cursor: default;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  border: 2px solid var(--modal-border);
}

body.popup.sidebar #BS_popup_container {
  border: 0px solid var(--modal-border);
  border-left: 2px solid var(--modal-border);
}

.close-modal-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 10;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before, .close-modal-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before {
  transform: rotate(45deg);
}
.close-modal-button::after {
  transform: rotate(-45deg);
}
.close-modal-button:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
.close-modal-button:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

/* A frame that has opened a popup is no longer the layer this button would close,
   and the new layer's backdrop is only 55% opaque, so it showed through beside the
   new card as a second, unreachable close button. The child combinator is
   load-bearing: the OIDC popup's own card lives INSIDE #BS__popup and keeps its own. */
body:has(> #BS__popup) > #BS_popup_container > .close-modal-button {
  display: none;
}

#BS_popup_content {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(16px, 4vw, 32px);
  /* Asymmetric on purpose. The block-start has to clear the close button: it
     sits at top:16px and is $close-size (40px) tall, so it occupies y 16-56px
     in the container — the old 48px was clearing it by nothing at all. The
     sidebar variant moves that button to the LEFT (see
     `body.sidebar .close-modal-button`), right over where the title starts, so
     the top can only come down a little. The block-end clears nothing and this
     box scrolls, so that is where the height is taken from. */
  padding-block: clamp(16px, 4vh, 40px) clamp(12px, 2.5vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Children must never push the popup wider than the screen: let them shrink,
 * and let wide tables scroll internally rather than blow out the container. */
#BS_popup_content > * {
  max-width: 100%;
  min-width: 0;
}

body.popup [class^=table] {
  max-width: 100%;
}

#BS__popup:has(.oidc-login-container) .BS-popup-outer {
  position: fixed;
  inset: 0;
  margin: 0 !important;
  padding: 0;
  background: rgba(21, 21, 21, 0.55);
  cursor: pointer;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__popup.removing:has(.oidc-login-container) .BS-popup-outer {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.oidc-login-container {
  width: min(420px, 90vw);
  cursor: default;
}

.oidc-login-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.oidc-login-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 0 0 12px 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  80% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes panel-out {
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
}
@media (min-width: 992px) {
  body.popup {
    padding-inline: clamp(32px, 6vw, 96px);
  }
  #BS_popup_content {
    padding-inline: clamp(32px, 6vw, 64px);
  }
}
/* Mobile only: tighten the space around the popup and its content.
 * Desktop (base + the 992px rule above) keeps its original, roomier padding. */
@media (max-width: 48rem) {
  body.popup {
    padding: clamp(8px, 2.5vh, 18px) clamp(8px, 3vw, 14px);
  }
  #BS_popup_content {
    padding-inline: clamp(12px, 4vw, 18px);
    padding-block: clamp(14px, 3vh, 22px);
    gap: 0.9rem;
  }
}
@keyframes sidebar-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  80% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sidebar-out {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(100%);
  }
}
body.sidebar {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body.sidebar #BS_popup_container {
  width: max-content;
  min-width: 320px;
  max-width: 95vw;
  height: 100%;
  max-height: none;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(0, 0, 0, 0.08);
  margin-right: -1px;
  animation: sidebar-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar.removing #BS_popup_container {
  animation: sidebar-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar .close-modal-button {
  left: 16px;
  right: auto;
}

@media (min-width: 992px) {
  body.sidebar {
    perspective: 1200px;
  }
  body.sidebar #BS_popup_container {
    transform-origin: right center;
  }
}
#BS__submenu {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__submenu .submenu-content {
  cursor: default;
  position: relative;
  width: 320px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  border: 2px solid var(--modal-border);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing #BS__submenu .submenu-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu .close-modal-or-submenu {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .close-modal-or-submenu::before, #BS__submenu .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__submenu .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}
#BS__submenu .close-modal-or-submenu:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
#BS__submenu .close-modal-or-submenu:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

#BS__submenu ul {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  /* Never sideways. The panel's width is fixed so it stays predictable on a
   * phone, and `overflow-y: auto` alone would compute overflow-x to `auto`
   * too, so one long option (a row menu's "Email <address>") produced a
   * horizontal scrollbar across the whole list. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  gap: 4px;
}

#BS__submenu ul button {
  width: 100%;
  padding: 16px 48px 16px 40px;
  border: none;
  border-radius: 8px;
  font: 500 16px/1.4 "Inter", sans-serif;
  text-align: left;
  /* Block, not the forms stylesheet's inline-flex: a flex container has no text
   * box to ellipsise, so the label overflowed instead of truncating — and its
   * `justify-content: center` was quietly overriding the text-align above. */
  display: block;
  /* An email address has no break opportunity, so without this it overflows
   * the button rather than wrapping. Ellipsis keeps every option one line and
   * the panel at its declared width; the full text is on the button's title. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  color: var(--color) !important;
  background: var(--submenu-btn-bg);
  border: 1px solid var(--submenu-btn-border);
  box-shadow: var(--shadow-btn);
  margin-bottom: 4px;
  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms !important;
}
#BS__submenu ul button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--menu-accent);
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu ul button:hover {
  padding-left: 32px;
  background: var(--submenu-btn-bg-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#BS__submenu ul button:hover::before {
  opacity: 1;
}
#BS__submenu ul button:active {
  background: var(--submenu-btn-bg-active);
  transform: scale(0.97);
  box-shadow: none;
}
#BS__submenu ul button:active::before {
  background: #6366F1;
  opacity: 1;
}

@media (max-width: 480px) {
  #BS__submenu .submenu-content {
    width: 90vw;
  }
}
#BS__modal {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__modal .modal-content {
  cursor: default;
  position: relative;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 34rem);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.22);
  border: 2px solid var(--modal-border);
  padding: clamp(24px, 5vh, 48px) clamp(24px, 5vw, 56px);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing #BS__modal .modal-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__modal .close-modal-or-submenu {
  position: absolute;
  top: 16px;
  right: 16px;
  min-width: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__modal .close-modal-or-submenu::before, #BS__modal .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__modal .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__modal .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}
#BS__modal .close-modal-or-submenu:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
#BS__modal .close-modal-or-submenu:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

.modal-header {
  margin: 0;
  font: 600 clamp(1.25rem, 2.5vw, 1.75rem)/1.2 "Inter", sans-serif;
  text-align: center;
}

.modal-dialog {
  font: 400 clamp(1rem, 2.3vw, 1.125rem)/1.5 "Inter", sans-serif;
  text-align: center;
}

.modal-options {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal-options li {
  margin: 0;
}

.modal-options button {
  padding: 0.75em 1.75em;
}

@media (max-width: 480px) {
  #BS__modal .modal-content {
    width: 90vw;
  }
}
/* Mobile only: tighter padding for the confirm/areYouSure modal.
 * Placed after the base rule above so it actually wins (media queries
 * add no specificity — source order decides). Desktop is unchanged. */
@media (max-width: 48rem) {
  #BS__modal .modal-content {
    padding: clamp(16px, 3.5vh, 24px) clamp(14px, 4vw, 20px);
    gap: 0.9rem;
  }
}
/* Loading Overlay — shown during requests, sits behind toasts */
#jeql__loading_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 120ms delay: fast requests never flash the overlay */
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
#jeql__loading_overlay .jeql__spinner {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  /* Spring entrance: subtle scale-up with overshoot */
  animation: spinner-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  /* Faint track ring — always visible */
}
#jeql__loading_overlay .jeql__spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
#jeql__loading_overlay .jeql__spinner {
  /* Spinning gradient arc — the comet tail */
}
#jeql__loading_overlay .jeql__spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.5) 88%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: jeql-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

@keyframes loading-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spinner-entrance {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes jeql-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Toast Container Styles */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

/* Individual Toast Styles */
.toast {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  padding: 16px 16px 16px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: auto;
  /* Entrance animation */
  animation: toast-enter 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  opacity: 0;
  transform: translateY(16px);
}

/* Toast types */
.toast-success {
  border-left: 4px solid #10b981;
  background-color: #dbffee;
}

.toast-error {
  border-left: 4px solid #ef4444;
  background-color: #ffdfdf;
}

.toast-info {
  border-left: 4px solid #3b82f6;
  background-color: #d5fff8;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
  background-color: #fff4d0;
}

/* Exit animation */
.toast-exit {
  animation: toast-exit 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
}

/* Toast loading bar */
.toast-loading-bar {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transition: width 5s linear;
}
.toast-loading-bar.decreasing {
  width: 0%;
}

.toast-success .toast-loading-bar {
  background: linear-gradient(to right, #059669, #10b981);
}

.toast-error .toast-loading-bar {
  background: linear-gradient(to right, #dc2626, #ef4444);
}

.toast-info .toast-loading-bar {
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

.toast-warning .toast-loading-bar {
  background: linear-gradient(to right, #d97706, #f59e0b);
}

/* Toast message */
.toast-message {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  margin-right: 16px;
}

/* Close button */
.toast-close-button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  padding-left: 0;
  border-radius: 50%;
  background: rgba(102, 102, 102, 0.4);
  color: #444;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(21, 21, 21, 0.12);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before, .toast-close-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before {
  transform: rotate(45deg);
}
.toast-close-button::after {
  transform: rotate(-45deg);
}
.toast-close-button:hover {
  background: rgba(102, 102, 102, 0.6);
  transform: rotate(90deg);
  color: #222;
}
.toast-close-button:active {
  background: rgba(102, 102, 102, 0.8);
  transform: rotate(180deg);
  color: #000;
}

/* Animations */
@keyframes toast-enter {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-exit {
  0% {
    transform: translateX(0);
    opacity: 1;
    max-height: 100px;
    margin-top: 8px;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
}
/* Utility classes */
.no-display {
  display: none;
}

/* PDF Renderer */
#BS__renderer {
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(21, 21, 21, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer .loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  padding: 2rem;
}
#BS__renderer .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
#BS__renderer .loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgb(11.2941176471%, 13%, 92.0392156863%);
  animation: spin 1.5s linear infinite;
}
#BS__renderer .loader-ring:nth-child(2) {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: rgb(29.6470588235%, 31%, 93.6862745098%);
  animation-duration: 1.75s;
  animation-direction: reverse;
}
#BS__renderer .loader-ring:nth-child(3) {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: rgb(48%, 49%, 95.3333333333%);
  animation-duration: 2s;
}
#BS__renderer .loader-pulse {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  background-color: rgb(66.3529411765%, 67%, 96.9803921569%);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
#BS__renderer .loader-text {
  margin-top: 2rem;
  text-align: center;
}
#BS__renderer .loader-text h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
#BS__renderer .loader-text p {
  opacity: 0.8;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
#BS__renderer .progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}
#BS__renderer .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgb(66.3529411765%, 67%, 96.9803921569%), rgb(11.2941176471%, 13%, 92.0392156863%));
  border-radius: 3px;
  animation: progress 6s ease-in-out infinite;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
}
@keyframes progress {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  75% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 95%;
  }
}
html {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

label {
  color: var(--color);
}

button,
.btn,
input[type=button],
input[type=submit],
input[type=reset] {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  height: 2.75rem;
  min-width: 6rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  color: var(--color);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: var(--shadow-btn);
}
button:hover,
.btn:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.28);
}
button:active,
.btn:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
  background: rgba(99, 102, 241, 0.2);
  transform: scale(0.97);
  box-shadow: none;
}
button.primary, button.cta,
.btn.primary,
.btn.cta,
input[type=button].primary,
input[type=button].cta,
input[type=submit].primary,
input[type=submit].cta,
input[type=reset].primary,
input[type=reset].cta {
  color: #f0f0f0;
  --start: rgb(27.8117647059%, 29.2%, 93.5215686275%);
  --end: rgb(4.062745098%, 4.9333333333%, 45.2705882353%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.primary:hover, button.cta:hover,
.btn.primary:hover,
.btn.cta:hover,
input[type=button].primary:hover,
input[type=button].cta:hover,
input[type=submit].primary:hover,
input[type=submit].cta:hover,
input[type=reset].primary:hover,
input[type=reset].cta:hover {
  --start: rgb(35.1529411765%, 36.4%, 94.1803921569%);
  --end: rgb(5.7098039216%, 6.9333333333%, 63.6235294118%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.primary:active, button.cta:active,
.btn.primary:active,
.btn.cta:active,
input[type=button].primary:active,
input[type=button].cta:active,
input[type=submit].primary:active,
input[type=submit].cta:active,
input[type=reset].primary:active,
input[type=reset].cta:active {
  --start: rgb(16.8%, 18.4%, 92.5333333333%);
  --end: rgb(9.4588235294%, 11.2%, 91.8745098039%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.success,
.btn.success,
input[type=button].success,
input[type=submit].success,
input[type=reset].success {
  color: #f0f0f0;
  --start: rgb(5.3192859233%, 61.5042434884%, 42.8867427568%);
  --end: black;
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.success:hover,
.btn.success:hover,
input[type=button].success:hover,
input[type=submit].success:hover,
input[type=reset].success:hover {
  --start: rgb(5.9561018437%, 68.867427568%, 48.021071115%);
  --end: rgb(1.1799824407%, 13.643546971%, 9.5136084284%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.success:active,
.btn.success:active,
input[type=button].success:active,
input[type=submit].success:active,
input[type=reset].success:active {
  --start: rgb(4.3640620427%, 50.459467369%, 35.1852502195%);
  --end: rgb(3.7272461223%, 43.0962832894%, 30.0509218613%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.warning,
.btn.warning,
input[type=button].warning,
input[type=submit].warning,
input[type=reset].warning {
  color: #f0f0f0;
  --start: rgb(84.912150687%, 54.6360969585%, 3.4800061757%);
  --end: rgb(15.7467963563%, 10.1321599506%, 0.6453605064%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.warning:hover,
.btn.warning:hover,
input[type=button].warning:hover,
input[type=submit].warning:hover,
input[type=reset].warning:hover {
  --start: rgb(92.5971900571%, 59.5809788482%, 3.7949668056%);
  --end: rgb(34.9593947815%, 22.494364675%, 1.4327620812%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.warning:active,
.btn.warning:active,
input[type=button].warning:active,
input[type=submit].warning:active,
input[type=reset].warning:active {
  --start: rgb(73.3845916319%, 47.2187741238%, 3.0075652308%);
  --end: rgb(65.6995522618%, 42.2738922341%, 2.6926046009%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.danger, button.remove-row-button,
.btn.danger,
.btn.remove-row-button,
input[type=button].danger,
input[type=button].remove-row-button,
input[type=submit].danger,
input[type=submit].remove-row-button,
input[type=reset].danger,
input[type=reset].remove-row-button {
  color: #f0f0f0;
  --start: rgb(92.7796773882%, 15.6124794745%, 15.6124794745%);
  --end: rgb(33.5238095238%, 2.8683473389%, 2.8683473389%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.danger:hover, button.remove-row-button:hover,
.btn.danger:hover,
.btn.remove-row-button:hover,
input[type=button].danger:hover,
input[type=button].remove-row-button:hover,
input[type=submit].danger:hover,
input[type=submit].remove-row-button:hover,
input[type=reset].danger:hover,
input[type=reset].remove-row-button:hover {
  --start: rgb(93.4102192601%, 22.9819376026%, 22.9819376026%);
  --end: rgb(51.947454844%, 4.4447020187%, 4.4447020187%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.danger:active, button.remove-row-button:active,
.btn.danger:active,
.btn.remove-row-button:active,
input[type=button].danger:active,
input[type=button].remove-row-button:active,
input[type=submit].danger:active,
input[type=submit].remove-row-button:active,
input[type=reset].danger:active,
input[type=reset].remove-row-button:active {
  --start: rgb(88.7947454844%, 7.5974113783%, 7.5974113783%);
  --end: rgb(81.4252873563%, 6.9668695064%, 6.9668695064%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.small,
.btn.small,
input[type=button].small,
input[type=submit].small,
input[type=reset].small {
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}
button.large,
.btn.large,
input[type=button].large,
input[type=submit].large,
input[type=reset].large {
  height: 3.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
button.subtle,
.btn.subtle,
input[type=button].subtle,
input[type=submit].subtle,
input[type=reset].subtle {
  background: none;
  color: #334155;
  box-shadow: none;
}
button.subtle:hover,
.btn.subtle:hover,
input[type=button].subtle:hover,
input[type=submit].subtle:hover,
input[type=reset].subtle:hover {
  background-color: #f1f5f9;
}
button.subtle:active,
.btn.subtle:active,
input[type=button].subtle:active,
input[type=submit].subtle:active,
input[type=reset].subtle:active {
  background-color: #e2e8f0;
}
button:disabled,
.btn:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
button .icon,
.btn .icon,
input[type=button] .icon,
input[type=submit] .icon,
input[type=reset] .icon {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
button.icon-only,
.btn.icon-only,
input[type=button].icon-only,
input[type=submit].icon-only,
input[type=reset].icon-only {
  padding: 0.5rem;
  min-width: unset;
  width: 2.75rem;
}
button.icon-only .icon,
.btn.icon-only .icon,
input[type=button].icon-only .icon,
input[type=submit].icon-only .icon,
input[type=reset].icon-only .icon {
  margin-right: 0;
}

body:not(.popup) .viewport {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.75rem;
  padding: 2rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color);
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--color-secondary);
  margin-bottom: 2rem;
}

.form-container {
  max-width: 640px;
  margin: 0 auto;
}

.form-section.margin {
  margin-bottom: 2rem;
}
.form-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.form-section-description {
  font-size: 0.875rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-group.inline {
  display: flex;
  align-items: flex-start;
}
.form-group.inline .form-label {
  flex: 0 0 30%;
  margin-bottom: 0;
  padding-top: 0.5rem;
}
.form-group.inline .form-input-wrapper {
  flex: 1;
}
.form-group.has-error .form-label {
  color: #ef4444;
}
.form-group.has-error .form-input {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.02);
}
.form-group.has-error .form-error {
  display: block;
}

.form-row {
  display: flex;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.form-row .form-group {
  flex: 1;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.form-submit-area {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.form-submit-area.flex-end {
  justify-content: flex-end;
}
.form-submit-area.margin {
  margin-top: 2rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: color(--color);
}
.form-label.required::after {
  content: "*";
  color: #ef4444;
  margin-left: 0.25rem;
}

.form-label-hint {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-secondary);
  margin-top: 0.25rem;
}

.form-error {
  display: none;
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}
.form-error.filled {
  display: block;
}

.form-input-wrapper {
  position: relative;
}

.form-input,
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
textarea {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.form-input:hover,
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=url]:hover,
input[type=tel]:hover,
input[type=number]:hover,
input[type=date]:hover,
textarea:hover {
  border-color: var(--border-hover);
}
.form-input:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
textarea:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
.form-input::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=url]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  color: #94a3b8;
}
.form-input:disabled,
input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=url]:disabled,
input[type=tel]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
textarea:disabled {
  background-color: var(--background-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.form-input.small,
input[type=text].small,
input[type=email].small,
input[type=password].small,
input[type=search].small,
input[type=url].small,
input[type=tel].small,
input[type=number].small,
input[type=date].small,
textarea.small {
  height: 2.25rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
.form-input.large,
input[type=text].large,
input[type=email].large,
input[type=password].large,
input[type=search].large,
input[type=url].large,
input[type=tel].large,
input[type=number].large,
input[type=date].large,
textarea.large {
  height: 3.25rem;
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

.input-with-icon {
  position: relative;
}
.input-with-icon .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-secondary);
}
.input-with-icon .icon.icon-left {
  left: 0.75rem;
}
.input-with-icon .icon.icon-right {
  right: 0.75rem;
}
.input-with-icon .form-input.has-icon-left {
  padding-left: 2rem;
}
.input-with-icon .form-input.has-icon-right {
  padding-right: 2rem;
}

.input-with-lookup {
  display: flex;
  align-items: stretch;
  min-width: min(25em, 100%);
  max-width: 100%;
}
.input-with-lookup input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding: 1.5em 0.75rem 0.5rem 0.75rem;
  height: auto;
}
.input-with-lookup input::-webkit-calendar-picker-indicator {
  display: none;
}
.input-with-lookup .lookup-btn, .input-with-lookup .lookup-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: 2.5rem;
  height: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--background);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
  font-size: 1rem;
  border-radius: 0;
}
.input-with-lookup .lookup-btn::before {
  content: "🔍";
}
.input-with-lookup .lookup-clear-btn {
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
}
.input-with-lookup .lookup-clear-btn::before {
  content: "✕";
}
.input-with-lookup .lookup-btn:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}
.input-with-lookup:hover input {
  border-color: var(--border-hover);
}
.input-with-lookup:hover .lookup-btn {
  background: rgba(99, 102, 241, 0.08);
  color: #6366F1;
  border-color: var(--border-hover);
}
.input-with-lookup:hover .lookup-clear-btn {
  border-color: var(--border-hover);
}
.input-with-lookup .lookup-clear-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.form-select-wrapper {
  position: relative;
}
.form-select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select,
.form-select {
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
select:hover,
.form-select:hover {
  border-color: var(--border-hover);
}
select:focus,
.form-select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
select:disabled,
.form-select:disabled {
  background-color: var(--background-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
select.small,
.form-select.small {
  height: 2.25rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  padding-right: 1.5rem;
}
select.large,
.form-select.large {
  height: 3.25rem;
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
}
select option,
.form-select option {
  padding: 0.5rem;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border: 1.5px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.form-check-input:hover {
  border-color: var(--border-hover);
}
.form-check-input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
.form-check-input:checked {
  border-color: #6366F1;
  background-color: #6366F1;
}
.form-check-input:checked::after {
  opacity: 1;
}

.form-check-input[type=checkbox] {
  border-radius: 0.25rem;
}
.form-check-input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.3rem;
  height: 0.6rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.form-check-input[type=radio] {
  border-radius: 9999px;
}
.form-check-input[type=radio]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: white;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.form-check-label {
  font-size: 0.875rem;
  color: var(--color);
  cursor: pointer;
  user-select: none;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.radio-button-group .radio-button {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.radio-button-group .radio-button input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-button-group .radio-button input[type=radio]:checked + .radio-button-label {
  background-color: rgba(99, 102, 241, 0.08);
  border-color: #6366F1;
  color: #6366F1;
  font-weight: 500;
}
.radio-button-group .radio-button input[type=radio]:focus + .radio-button-label {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.radio-button-group .radio-button .radio-button-label {
  background-color: var(--background);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.radio-button-group .radio-button .radio-button-label:hover {
  background-color: var(--background-hover);
}

.form-switch {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.form-switch .switch-input {
  appearance: none;
  position: relative;
  width: 3rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--background);
  margin-right: 0.75rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.form-switch .switch-input::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.form-switch .switch-input:checked {
  background-color: #6366F1;
}
.form-switch .switch-input:checked::after {
  transform: translateX(1.5rem);
}
.form-switch .switch-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  outline: none;
}
.form-switch .switch-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-switch .switch-label {
  font-size: 0.875rem;
  color: var(--color);
  cursor: pointer;
  user-select: none;
}

.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  background-color: #e2e8f0;
  border-radius: 9999px;
  outline: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #6366F1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-range::-webkit-slider-thumb:hover {
  background-color: rgb(29.6470588235%, 31%, 93.6862745098%);
}
.form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: 50%;
  background-color: #6366F1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-range::-moz-range-thumb:hover {
  background-color: rgb(29.6470588235%, 31%, 93.6862745098%);
}
.form-range:focus {
  outline: none;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.range-labels .range-label {
  font-size: 0.75rem;
  color: var(--color-secondary);
}

.form-file {
  position: relative;
}
.form-file .file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -1;
}
.form-file .file-input:focus + .file-label {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.form-file .file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 2px dashed var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  background-color: var(--background);
  transition: all 0.25s ease;
}
.form-file .file-label:hover {
  border-color: var(--border-hover);
  background-color: var(--background-hover);
}
.form-file .file-label .file-icon {
  font-size: 2rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}
.form-file .file-label .file-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color);
  margin-bottom: 0.25rem;
}
.form-file .file-label .file-hint {
  font-size: 0.75rem;
  color: var(--color-secondary);
}
.form-file .file-preview {
  display: none;
  margin-top: 0.75rem;
}
.form-file .file-preview.visible {
  display: block;
}
.form-file .file-preview .file-preview-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
}
.form-file .file-preview .file-preview-item .file-preview-icon {
  font-size: 1.25rem;
  color: #64748b;
  margin-right: 0.5rem;
}
.form-file .file-preview .file-preview-item .file-preview-name {
  font-size: 0.875rem;
  color: var(--color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-file .file-preview .file-preview-item .file-preview-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-secondary);
  padding: 0.25rem;
}
.form-file .file-preview .file-preview-item .file-preview-remove:hover {
  color: #ef4444;
}

.form-feedback {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem;
  margin: 1rem 0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.form-feedback .feedback-icon {
  margin-right: 0.5rem;
  font-size: 1rem;
  flex-shrink: 0;
}
.form-feedback.feedback-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left: 4px solid #10b981;
}
.form-feedback.feedback-success .feedback-icon {
  color: #10b981;
}
.form-feedback.feedback-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
}
.form-feedback.feedback-warning .feedback-icon {
  color: #f59e0b;
}
.form-feedback.feedback-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
}
.form-feedback.feedback-error .feedback-icon {
  color: #ef4444;
}
.form-feedback.feedback-info {
  background-color: rgba(99, 102, 241, 0.1);
  border-left: 4px solid #6366F1;
}
.form-feedback.feedback-info .feedback-icon {
  color: #6366F1;
}

@media (max-width: 640px) {
  .form-group.inline {
    flex-direction: column;
  }
  .form-group.inline .form-label {
    flex: none;
    width: 100%;
    margin-bottom: 0.5rem;
    padding-top: 0;
  }
  .form-group.inline .form-input-wrapper {
    width: 100%;
  }
  .form-row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }
  .form-row .form-group {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .form-submit-area {
    flex-direction: column;
  }
  .form-submit-area button, .form-submit-area .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .form-submit-area button:last-child, .form-submit-area .btn:last-child {
    margin-bottom: 0;
  }
}
@keyframes form-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}
@keyframes form-highlight {
  0% {
    background-color: rgba(99, 102, 241, 0.2);
  }
  100% {
    background-color: transparent;
  }
}
.input-error {
  animation: form-shake 0.4s ease-in-out;
}

.input-success {
  animation: form-highlight 1s ease-out;
}

:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-check-input:focus-visible, .switch-input:focus-visible, .file-label:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}

/* Progress */
.form-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.form-progress::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #BBB;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.progress-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--background);
  border: 2px solid #BBB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--color-secondary);
  transition: all 0.2s ease;
}

.progress-step.active .progress-marker {
  background-color: #6366F1;
  border-color: #6366F1;
  color: #ffffff;
}

.progress-step.active .progress-text {
  color: #6366F1;
  font-weight: 500;
}

.progress-step.completed .progress-marker {
  background-color: #6366F1;
  border-color: #6366F1;
  color: #ffffff;
}

/* Floating label pattern: <label><span>Label</span><input></label>
   Also supports <div class="field"><span>Label</span>...</div> for lookup fields */
label:has(> span + input:not([type=checkbox])),
label:has(> span + select),
label:has(> span + .input-with-lookup),
.field:has(> span + .input-with-lookup) {
  display: block;
  position: relative;
  margin-bottom: 1rem;
}

label > span, .field > span {
  position: absolute;
  top: 0.5em;
  left: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.025em;
  pointer-events: none;
  z-index: 1;
}

/* A field's validation message. Both field shapes end in `margin-bottom: $space-4`,
   which put the whole gap ABOVE the message and none below it, so the message read
   as a caption for the NEXT field. Pull it up under the field it belongs to and let
   it pay that field's bottom margin instead. */
label + .field-error-msg,
.field + .field-error-msg {
  margin-top: -0.75rem; /* collapses with the field's $space-4 down to $space-1 */
  margin-bottom: 1rem;
}

/* Emptied, not removed, before every submit — an empty one must not hold space. */
label + .field-error-msg:empty,
.field + .field-error-msg:empty {
  display: none;
}

label > input:not([type=checkbox]), label > select {
  min-width: min(25em, 100%);
  max-width: 100%;
  text-align: left;
  padding: 1.5em 0.75rem 0.5rem 0.75rem;
  height: auto;
}

/* Inside tables: compact — no floating label */
td label > span {
  position: static;
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

td label > input:not([type=checkbox]) {
  padding-top: 0.5rem;
}

.form-buttons {
  padding-bottom: 2em;
}

a, *[data--baton-controller--onclick] {
  text-decoration: none;
  cursor: pointer;
  color: #6366F1;
  font-weight: 600;
}

/* Buttons: keep their own text color, not brand-primary —
   but exclude semantic classes that use btn-gradient (light text on dark bg) */
button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
  color: var(--color);
}

a:hover, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: rgb(24.1411764706%, 25.6%, 93.1921568627%);
}

button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: var(--color);
}

/* Dark mode: lighten link/controller colors for readability */
@media (prefers-color-scheme: dark) {
  a, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
    color: rgb(75.5294117647%, 76%, 97.8039215686%);
  }
  a:hover, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
    color: rgb(90.2117647059%, 90.4%, 99.1215686275%);
  }
  /* Non-gradient buttons & nav links: keep theme text color */
  button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  nav a[data--baton-controller--onclick],
  nav a[data--baton-controller--onclick]:hover {
    color: var(--color);
  }
}
body.dark-mode a, body.dark-mode *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
  color: rgb(75.5294117647%, 76%, 97.8039215686%);
}
body.dark-mode a:hover, body.dark-mode *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: rgb(90.2117647059%, 90.4%, 99.1215686275%);
}
body.dark-mode button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode nav a[data--baton-controller--onclick],
body.dark-mode nav a[data--baton-controller--onclick]:hover {
  color: var(--color);
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.bsm-fab,
.bsm-overlay {
  --bsm-ink: var(--md-on-surface, var(--text-strong, #1e2233));
  --bsm-muted: var(--md-on-surface-variant, var(--text-muted, #5a6178));
  --bsm-faint: color-mix(in srgb, var(--bsm-ink) 42%, transparent);
  --bsm-hairline: var(--hairline, var(--border, rgba(128, 128, 128, 0.22)));
  --bsm-surface: color-mix(in srgb, var(--bsm-ink) 5%, transparent);
  --bsm-surface-strong: color-mix(in srgb, var(--bsm-ink) 8%, transparent);
  --bsm-card: var(--md-surface-container-high, var(--surface-2, #282830));
  --bsm-panel-bg: var(--md-surface-container-low, var(--surface, #16161f));
  --bsm-brand: var(--md-primary, #6366F1);
  --bsm-edge: color-mix(in srgb, var(--bsm-ink) 34%, transparent);
  --bsm-grid: color-mix(in srgb, var(--bsm-ink) 6%, transparent);
}

.bsm-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2147483000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--bsm-muted);
  background: color-mix(in srgb, var(--bsm-panel-bg) 55%, transparent);
  border: 1px solid var(--bsm-hairline);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0.55;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-fab:hover {
  opacity: 1;
  transform: translateY(-2px);
  color: var(--bsm-ink);
  border-color: var(--bsm-brand);
}

.bsm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-overlay.open {
  opacity: 1;
}

.bsm-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(6px);
}

.bsm-panel {
  position: absolute;
  inset: 2.2vh 2.2vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--bsm-hairline);
  color: var(--bsm-ink);
  background: radial-gradient(1200px 700px at 22% -8%, color-mix(in srgb, var(--bsm-brand) 16%, transparent), transparent 60%), var(--bsm-panel-bg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 24px 60px rgba(0, 0, 0, 0.12);
  transform: scale(0.96);
  transition: transform 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.bsm-overlay.open .bsm-panel {
  transform: scale(1);
}

.bsm-phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bsm-hairline);
}

.bsm-ptitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
}
.bsm-ptitle strong {
  font-weight: 680;
}
.bsm-ptitle em {
  color: var(--bsm-muted);
  font-style: normal;
  font-weight: 450;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}

.bsm-pdot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 9999px;
  background: conic-gradient(from 210deg, #f472b6, #38bdf8, #a78bfa, #34d399, #f472b6);
}

.bsm-pactions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bsm-views {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.5rem;
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}
.bsm-views button {
  width: 2rem;
  height: 1.8rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-views button:hover {
  color: var(--bsm-ink);
}
.bsm-views button.on {
  background: var(--bsm-brand);
  color: var(--md-on-primary, #fff);
}

.bsm-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bsm-hairline);
  background: var(--bsm-surface);
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-icon:hover {
  color: var(--bsm-ink);
  border-color: var(--bsm-brand);
}

.bsm-schemas {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.5rem;
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}
.bsm-schemas:empty {
  display: none;
}
.bsm-schemas button {
  height: 1.8rem;
  padding: 0 0.7rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-schemas button:hover {
  color: var(--bsm-ink);
}
.bsm-schemas button.on {
  background: var(--bsm-brand);
  color: var(--md-on-primary, #fff);
}

.bsm-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bsm-stage .bsm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bsm-stage.tree {
  overflow: auto;
}

.bsm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--bsm-hairline);
}

.bsm-lgi {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-muted);
}

.bsm-lgsw {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 3px;
  border: 1px dashed var(--bsm-faint);
}

.bsm-lgpk {
  color: var(--bsm-brand);
}

.bsm-dir {
  font-weight: 900;
}
.bsm-dir.up {
  color: #38bdf8;
}
.bsm-dir.down {
  color: #34d399;
}

.bsm-griddot {
  fill: var(--bsm-grid);
}

.bsm-bg {
  pointer-events: none;
}

.bsm-card {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
  animation: bsm-pop 500ms cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}
.bsm-card .bsm-body {
  fill: var(--bsm-card);
  stroke: var(--bsm-hairline);
  stroke-width: 1;
}
.bsm-card.product .bsm-body {
  stroke-dasharray: 5 4;
}
.bsm-card.current .bsm-body {
  stroke: var(--bsm-brand);
  stroke-width: 2;
}
.bsm-card.current .bsm-glow {
  opacity: 0.9 !important;
}
.bsm-card.focus .bsm-glow {
  opacity: 1;
}

.bsm-ctitle {
  font-weight: 640;
  font-size: 13px;
}

.bsm-cmeta {
  fill: #0b0c14;
  font-weight: 700;
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.4px;
}

.bsm-col {
  fill: var(--bsm-muted);
  font-size: 11px;
}
.bsm-col.pk {
  fill: var(--bsm-ink);
  font-weight: 600;
}

.bsm-colkey {
  fill: var(--bsm-brand);
  font-size: 9px;
}

.bsm-edge {
  fill: none;
  stroke-width: 1.4;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-edge.supp {
  stroke-dasharray: 3 5;
}

.bsm-svg.focusing .bsm-edge:not(.efocus) {
  opacity: 0.07;
}
.bsm-svg.focusing .bsm-card:not(.focus):not(.adj) {
  opacity: 0.16;
}
.bsm-svg.focusing .bsm-edge.efocus {
  stroke-width: 2.1;
  opacity: 1;
}

@keyframes bsm-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.bsm-explorer {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bsm-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12rem;
  width: 100%;
  max-width: 42rem;
  margin-bottom: 1rem;
}

.bsm-crumb {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--bsm-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 0.5rem;
  transition: color 100ms cubic-bezier(0.2, 0, 0, 1), background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-crumb:hover {
  color: var(--bsm-ink);
  background: var(--bsm-surface);
}
.bsm-crumb.cur {
  color: var(--bsm-ink);
  font-weight: 700;
}

.bsm-crumbsep {
  color: var(--bsm-faint);
}

.bsm-expbody {
  width: 100%;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bsm-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bsm-sectit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--bsm-faint);
  padding: 0 0.2rem;
}

.bsm-sectitle {
  font-weight: 700;
}

.bsm-n {
  margin-left: auto;
  opacity: 0.7;
}

.bsm-empty {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-faint);
  font-style: italic;
  padding: 0.15rem 0.6rem;
}

.bsm-neighbor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
  background: var(--bsm-surface);
  border: 1px solid transparent;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-neighbor:hover {
  background: var(--bsm-surface-strong);
  border-color: var(--bsm-hairline);
  transform: translateX(2px);
}
.bsm-neighbor:hover .bsm-browse {
  opacity: 1;
}

.bsm-edot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 7px -1px currentColor;
}

.bsm-nlabel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.bsm-join {
  color: var(--bsm-ink);
  font-weight: 560;
}

.bsm-sep {
  color: var(--bsm-faint);
}

.bsm-target {
  color: var(--bsm-muted);
}

.bsm-pill {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid var(--bsm-hairline);
}
.bsm-pill.many {
  color: #fbbf24;
}
.bsm-pill.one {
  color: var(--bsm-muted);
}

.bsm-onward {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-faint);
  min-width: 2.3rem;
  text-align: right;
}

.bsm-browse {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bsm-hairline);
  background: var(--bsm-panel-bg);
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1), background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-browse:hover {
  color: var(--md-on-primary, #fff);
  background: var(--bsm-brand);
  border-color: var(--bsm-brand);
}
.bsm-browse.hit {
  color: var(--md-on-primary, #fff);
  background: #34d399;
  border-color: #34d399;
}

.bsm-current {
  border: 1px solid var(--bsm-hairline);
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 64%), var(--bsm-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.1), inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.bsm-chead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--bsm-hairline);
}

.bsm-cdot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px -1px var(--accent);
  flex: 0 0 auto;
}

.bsm-curtitle {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 720;
}

.bsm-kind {
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 800;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}

.bsm-cbrowse {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--bsm-hairline));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--bsm-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-cbrowse:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

.bsm-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.75rem 1rem 1rem;
}

.bsm-ecol {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-muted);
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
}
.bsm-ecol.pk {
  color: var(--bsm-ink);
}
.bsm-ecol i {
  color: var(--bsm-brand);
  font-style: normal;
}

/* Design tokens layered on top of BATON vars */
:root {
  color-scheme: light dark;
  --header-height: 44px;
  --icon-size: 40px;
  --nav-gap: 6px;
  --nav-pad-y: 6px;
  --nav-pad-x: 10px;
  --app-max-width: clamp(82rem, 90vw, 120rem);
  --header-max-width: clamp(86rem, 92vw, 120rem);
  --app-gutter: clamp(14px, 2.2vw, 22px);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.08);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.08), 0 18px 60px rgba(0,0,0,0.12);
  --ring: 0 0 0 4px rgba(79,70,229,0.18);
  --text-strong: var(--md-on-surface, var(--color));
  --text-muted: var(--md-on-surface-variant, var(--color-secondary));
  --hairline: var(--md-outline-variant, var(--border));
  --hairline-hover: var(--md-outline, var(--border-hover));
  --action: var(--md-primary, #6366F1);
  --block-gap: clamp(10px, 1.5vw, 14px);
}

@media (prefers-color-scheme: light) {
  :root {
    --surface: #ffffff;
    --surface-2: #f0f0f4;
  }
}
body.light-mode {
  --surface: #ffffff;
  --surface-2: #f0f0f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1e1e24;
    --surface-2: #282830;
  }
}
body.dark-mode {
  --surface: #1e1e24;
  --surface-2: #282830;
}

@media (prefers-reduced-motion: reduce) {
  *:not(#BS_popup_container):not(.BS-popup-iframe),
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--md-primary, #6366F1);
  color: var(--md-on-primary, #fff);
}

body {
  margin: 0;
  min-height: 100%;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

/* Keep popup/sidebar layouts controlled by BATON core */
body:not(.popup):not(.sidebar) {
  display: block;
}

/* Typography */
h1, h2, h3, h4 {
  color: var(--md-on-surface, var(--text-strong));
}

h1 {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem 0;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 0.75rem 0;
}

h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.5rem 0;
}

h4 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.25rem 0;
}

/* Both are direct children of the `main > div` flex column, whose `gap` is the
 * single source of block spacing — a margin here is added to that gap rather
 * than merged with it, so these carry no BLOCK margin. The inline `auto` must
 * stay: a single class outranks the three-element `main > div > h1` rule that
 * centres them against the singleton card, so a bare `margin: 0` silently
 * shunts the page title to the left. */
.frame-title {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 36rem;
  text-align: center;
  margin: 0 auto;
}

/* The page title names the record the singleton card shows, so the singleton's
 * actions belong on its line. The empty first track balances the button in the
 * third, so the title stays optically centred whatever width the button takes. */
.frame-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  /* A page with no actions must not sit lower or higher than one with. */
  min-height: 2rem;
}
.frame-head > .frame-title {
  grid-column: 2;
}
.frame-head > .baton-tbl__menu-btn {
  grid-column: 3;
  justify-self: end;
  margin: 0;
}

.frame-description {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant, var(--text-muted));
  max-width: 36rem;
  text-align: center;
  margin: 0 auto;
}

/* Heading above a rendered dataset — a label for the table or grid beneath it,
 * not a title in its own right. */
.dataset-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface-variant, var(--text-muted));
  margin: 0 0 0.5rem 0;
}

/* The line a dataset opens with: its heading on the left, its action button
 * right-aligned on the same line (the button itself carries `margin-left: auto`).
 * The button has exactly one home whatever the table beneath it looks like — it
 * used to move between the table head and a controls bar depending on whether
 * the table had a row-menu column, which read as arbitrary. */
.dataset-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* The line owns the spacing to the table now; the heading inside it carries
     none, or it would be added to this. */
  margin: 0 0 0.5rem 0;
  min-height: 2rem;
}
.dataset-head > .dataset-title {
  margin: 0;
}

p {
  /* $sp-2, not 0.65rem — the only spacing value in this file that was off the
     $sp-* scale. The same value still sits on ul/ol, .ul > ul / .ol > ol and
     pre further down; move those in this same commit. */
  margin: 0 0 0.5rem 0;
  color: var(--text-strong);
  /* A trailing paragraph must not stack its margin on top of the card's own
     padding — `section > div` already pays for that edge. */
}
p:last-child {
  margin-bottom: 0;
}

small, .muted {
  color: var(--text-muted);
}

/* Links */
a, *[data--baton-controller--onclick] {
  border-radius: 8px;
  outline: none;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

a:focus-visible,
*[data--baton-controller--onclick]:focus-visible {
  box-shadow: var(--ring);
}

a:hover,
*[data--baton-controller--onclick]:hover {
  background-color: rgba(79, 70, 229, 0.08);
}

/* Layout containers (semantic element immediate child div) */
header > div,
nav > div,
main > div,
footer > div,
section > div,
article > div,
aside > div {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}

header > div,
nav > div {
  max-width: var(--header-max-width);
}

/* App header — frosted glass over mesh gradient */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(91.7385620915%, 90%, 95.568627451%, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(84.0522875817%, 38.8235294118%, 94.5098039216%, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), backdrop-filter 200ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  header {
    background: rgba(14.9516339869%, 12.5176470588%, 20.3137254902%, 0.8);
    border-bottom-color: rgba(84.0522875817%, 38.8235294118%, 94.5098039216%, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}
body.dark-mode header {
  background: rgba(14.9516339869%, 12.5176470588%, 20.3137254902%, 0.8);
  border-bottom-color: rgba(84.0522875817%, 38.8235294118%, 94.5098039216%, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12);
}

header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--header-height);
  padding: 0.25rem 1.5rem;
  max-width: var(--header-max-width);
  margin: 0 auto;
}

/* Nav */
nav > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
}

nav a,
nav *[data--baton-controller--onclick] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--md-on-surface-variant, var(--text-strong));
  text-decoration: none;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
  user-select: none;
}

nav a:hover,
nav *[data--baton-controller--onclick]:hover {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)), transparent 92%);
  color: var(--md-on-surface, var(--text-strong));
  text-decoration: none;
}

nav a:active,
nav *[data--baton-controller--onclick]:active {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)), transparent 88%);
}

/* Main content */
main {
  padding-top: clamp(12px, 1.8vw, 20px);
  padding-bottom: clamp(18px, 2.6vw, 32px);
}

main > div {
  max-width: var(--app-max-width);
  margin: 0 auto;
  /* Horizontal only. `main` above already pays the page's vertical padding; the
     four-sided shorthand that used to sit here charged it a second time, top
     and bottom, on every page of every frame type — and silently overrode the
     --app-gutter set on this same element by the layout-container rule, so
     main content sat 16px in while the header sat at the token's clamp. */
  padding: 0 var(--app-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

nav a,
nav *[data--baton-controller--onclick],
h1, h2, h3, h4 {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Friendly default "card" surfaces for sections/articles/asides */
section > div,
article > div,
aside > div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  /* Vertical is the scarce axis, and --block-gap already separates one card
     from the next, so the block inset only has to hold content off the border;
     the inline inset is the card's visible gutter and stays generous. Keep the
     two-value shorthand — it is what suppresses the wider --app-gutter
     padding-left/right set on the layout-container rule above. */
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.6vw, 18px);
  margin-top: 10px;
}

/* Avoid double-spacing: the gap now handles separation */
main > div > section > div,
main > div > article > div,
main > div > aside > div {
  margin-top: 0;
}

/* Same reason, for the key-value card: as a direct flex child of `main > div`
 * its own bottom margin lands on top of the column gap rather than merging
 * with it. It keeps that margin anywhere else, because .grid cards stacked
 * inside a section have nothing but that margin between them. */
main > div > .grid {
  margin-bottom: 0;
}

section > div:first-child,
article > div:first-child,
aside > div:first-child {
  margin-top: 0;
}

/* Inside popups/sidebars: strip card surfaces to prevent double-boxing */
body.popup section > div,
body.popup article > div,
body.popup aside > div,
body.sidebar section > div,
body.sidebar article > div,
body.sidebar aside > div {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}

body.popup,
body.sidebar {
  background: transparent !important;
}

/* #BS_popup_content already pays the frame's padding inside a popup, so `main`
 * charges the page's bottom padding a second time. Only the bottom goes: the
 * top padding is the sole thing holding the first element clear of
 * .close-modal-button, which sits absolute at top:16px / 40px tall over the
 * card — and in a sidebar it moves to the left, right over the frame title. */
body.popup main,
body.sidebar main {
  padding-bottom: 0;
}

body.popup main > div,
body.sidebar main > div {
  max-width: none;
  padding: 0;
  margin: 0;
}

body.popup section > div,
body.sidebar section > div {
  margin-bottom: 0;
}

body.wide #BS_popup_container {
  width: min(90vw, 80rem);
  /* Override the default container cap so the wide variant stays wide. */
  max-width: min(94vw, 80rem);
}

#BS_popup_container {
  border-radius: 1.5rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-low, var(--surface));
  box-shadow: 0 8px 32px var(--md-shadow, rgba(0, 0, 0, 0.15)), 0 2px 8px var(--md-shadow, rgba(0, 0, 0, 0.15));
}

body.popup.sidebar #BS_popup_container {
  border: 1px solid var(--hairline);
  border-right: none;
}

body.sidebar #BS_popup_container {
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow: -8px 0 32px var(--md-shadow, rgba(0, 0, 0, 0.15)), -2px 0 8px var(--md-shadow, rgba(0, 0, 0, 0.15));
  margin-right: -1px;
}

#BS_popup_content > header > h1 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface, var(--text-strong));
  margin: 0;
}
#BS_popup_content > main {
  color: var(--md-on-surface, var(--text-strong));
}

/* The viewport class (used by BATON forms) gets a stronger shell */
body:not(.popup) .viewport {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
}

/* Footer */
footer {
  margin-top: 48px;
  border-top: 1px solid var(--hairline);
}

footer > div {
  padding-top: 28px;
  padding-bottom: 28px;
  color: var(--text-muted);
}

/* Lists (including wrapped <div class="ul"><ul>...) */
ul, ol {
  padding-left: 1.25rem;
  margin: 0 0 0.5rem 0;
}

li {
  margin: 0.15rem 0;
}

.ul > ul,
.ol > ol {
  margin: 0 0 0.5rem 0;
}

/* Media */
img, video, iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Code */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15em 0.35em;
  border-radius: 8px;
}

pre {
  margin: 0 0 0.5rem 0;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.05);
  overflow: auto;
}

/* Subtle upgrades to interactive controls (without fighting BATON forms) */
button, .btn, input[type=button], input[type=submit], input[type=reset] {
  box-shadow: var(--shadow-btn);
}

button:focus-visible,
.btn:focus-visible,
input[type=button]:focus-visible,
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--ring) !important;
}

.table td > div {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centre page headings to align with the centred singleton card */
main > div > h1,
main > div > .page-title {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

main > div > h1 + p,
main > div > h1 + .subtitle,
main > div > .page-title + p,
main > div > .page-title + .page-subtitle {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Key-value "grid" / singleton detail card */
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 36rem;
  margin: 0 auto 1rem auto;
  background: var(--md-surface-container-lowest, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  overflow: hidden;
}

.grid > span {
  /* Row rhythm tracks the table form (.grid th/td) — one component, one height */
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface, var(--text-strong));
}

.grid > span:nth-last-child(-n+2) {
  border-bottom: none;
}

.grid > span.caption {
  /* The card-collapse rule (.caption { display: none }) must not hide grid keys */
  /* Flex rather than block: the key stretches to the row height, so with the
     tighter padding its text would otherwise ride high against a taller value.
     Only the key gets flex — a value span may hold several block children
     that must keep stacking. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
  font-weight: 500;
  color: var(--md-on-surface-variant, var(--text-muted));
  background: var(--md-surface-container, var(--surface-2));
}

.grid > table {
  grid-column: 1/-1;
}

.grid table {
  width: 100%;
  border-collapse: collapse;
}

.grid tr {
  border-bottom: 1px solid var(--hairline);
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}

.grid tr:last-child {
  border-bottom: none;
}

.grid tr:hover {
  background: color-mix(in srgb, var(--md-primary, var(--action)), transparent 94%);
}

.grid tr:first-child th {
  border-radius: 0.75rem 0 0 0;
}

.grid tr:last-child th {
  border-radius: 0 0 0 0.75rem;
}

/* The key/value card is metadata *about* the record, not the record itself, so
   it runs a denser rhythm than the data tables beneath it. $sp-1 against the
   1.25rem line box gives a 29px row (28px cell + the 1px `.grid tr` hairline),
   still clear of the WCAG 2.2 AA 24px minimum for the rows projects wire up as
   clickable. Change .grid td below in the same commit — the taller of the two
   cells sets the row height, so half the edit reclaims nothing. */
.grid th {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface-variant, var(--text-muted));
  padding: 0.25rem 0.75rem;
  text-align: right;
  white-space: nowrap;
  width: 1%;
  font-weight: 500;
  background: var(--md-surface-container, var(--surface-2));
}

.grid td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.25rem 0.75rem;
  color: var(--md-on-surface, var(--text-strong));
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* A grid value that carries an action is a button naming the value, not a blue
 * row. Sized to the grid's own row rhythm so it never stretches the row. */
.grid td button.grid-action {
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding: 0.125rem 0.625rem;
  margin: -0.125rem 0;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.grid tr[data--baton-controller--onclick] {
  cursor: pointer;
}

.grid tr[data--baton-controller--onclick] td {
  color: var(--md-primary, var(--action));
}

.grid tr[data--baton-controller--onclick] th {
  color: var(--md-primary, var(--action));
}

/* Standard data tables (wrapper: <div class="table"><table>...) */
[class^=table] {
  background: var(--md-surface-container, var(--surface-2));
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  overflow: auto;
  /* Cap so one long table can't swallow the page — but a nested scroller is a
     poor place for rows to sit: the page scrollbar doesn't reach them, and the
     reader must run the table to its end before the page moves on. 70vh still
     stops a table dominating the flow, with fewer rows hidden behind it. */
  max-height: 70vh;
}

[class^=table] table {
  width: 100%;
  border-collapse: collapse;
}

[class^=table] thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

[class^=table] thead tr:first-child th:first-child {
  border-radius: 0.75rem 0 0 0;
}

[class^=table] thead tr:first-child th:last-child {
  border-radius: 0 0.75rem 0 0;
}

[class^=table] th {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  letter-spacing: 0;
  color: var(--md-on-surface-variant, var(--text-muted));
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  text-align: left;
  /* Header band: a stronger neutral mix than the zebra rows (which top out at
   * 4% on-surface), so the head always reads as a distinct band above the
   * rows in both light and dark mode — and regardless of whether the M3
   * surface tokens (where -container and -container-lowest sit only one
   * subtle elevation step apart) are defined. */
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 12%, var(--md-surface-container, var(--surface-2)));
  border-bottom: 2px solid var(--hairline);
}

/* The tbody itself stays transparent — rows carry their own surface. A solid
 * tbody just peeked through between the cards on mobile in the panel colour. */
[class^=table] tbody tr {
  background: var(--md-surface-container-lowest, var(--surface));
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
  border-bottom: 1px solid var(--hairline);
}

/* Zebra: mix a touch of on-surface into alternate rows. color-mix keeps the
 * contrast relative, so rows read apart from the section panel and from each
 * other in light and dark mode alike, with or without M3 tokens defined. */
[class^=table] tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 4%, var(--md-surface-container-lowest, var(--surface)));
}

[class^=table] tbody tr:last-child {
  border-bottom: none;
}

[class^=table] tbody tr:hover {
  background: color-mix(in srgb, var(--md-primary, var(--action)), transparent 94%);
}

[class^=table] tbody tr[style*="cursor: pointer"],
[class^=table] tbody tr.clickable {
  cursor: pointer;
}

[class^=table] td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  color: var(--md-on-surface, var(--text-strong));
}

html[data-keyboard-nav] [class^=table] tbody tr[tabindex]:focus-visible {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: -2px;
}

[class^=table] tbody tr[tabindex]:focus:not(:focus-visible),
html:not([data-keyboard-nav]) [class^=table] tbody tr[tabindex]:focus {
  outline: none;
  box-shadow: none;
}

/* ── Row menu icon button ── */
.rowMenu {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
  fill: var(--text-muted, #888);
}
.rowMenu:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.06));
}
.rowMenu:active {
  background: var(--surface-3, rgba(0, 0, 0, 0.1));
}

.rowMenu {
  width: 1.75rem;
  height: 1.75rem;
}

/* Header cell above the row-menu column: same width as the cells beneath it, and
 * empty — the table's action button sits on the dataset heading line instead.
 * Element-qualified so it outranks `[class^="table"] th`, which is (0,1,1) and
 * would otherwise win: unqualified, every padding value set here was dead. */
th.rowMenuHeadCell {
  width: 2.5rem;
  /* No block padding, and inline padding matching td.rowMenuCell, so the head
     never widens the column past 2.5rem. */
  padding: 0 0.25rem;
  text-align: center;
}

/* Row‑menu cell: the whole cell is the click target.
 * Element-qualified so this padding actually beats `[class^="table"] td` — the
 * bare class is the weaker selector and lost, which let the button inside set
 * the row height instead of the text. */
td.rowMenuCell {
  width: 2.5rem;
  text-align: center;
  padding: 0 0.25rem;
  cursor: pointer;
  position: sticky;
  right: 0;
  background: inherit;
}
td.rowMenuCell:empty {
  cursor: default;
}
td.rowMenuCell:hover .rowMenu {
  background: var(--surface-2, rgba(0, 0, 0, 0.06));
}
td.rowMenuCell:active .rowMenu {
  background: var(--surface-3, rgba(0, 0, 0, 0.1));
}

/* Empty table row */
/* Empty table row. A generated detail page carries one dataset per child table
   whether or not the record has any, so this row is structural chrome — the
   least informative row on the page should not also be the tallest. $sp-3 still
   stands clear of a data row, so it reads as an empty state, not a blank record. */
.empty-row td {
  text-align: center;
  padding: 0.75rem 1rem;
  color: var(--text-muted);
}

/* "Show all" row at bottom of limited tables */
.table-show-all {
  cursor: pointer;
}
.table-show-all td {
  text-align: center;
  padding: 0.25rem 0.5rem;
  font-style: italic;
  font-size: 0.85em;
  color: var(--text-muted);
  background: rgba(128, 128, 128, 0.08);
  transition: background 0.2s, color 0.2s;
}
.table-show-all:hover td {
  color: var(--primary, #6750a4);
  background: rgba(128, 128, 128, 0.15);
}

/* Row count in dataset headings. It follows the plural and a colon
 * ("Registratiesystemen: 12"), so the gap belongs on its leading edge. */
.row-count {
  opacity: 0.5;
  font-weight: 400;
  margin-left: 0.25em;
}

/* ── Local search + pagination wrapper for default table renderers ──
 * Scoped to .baton-tbl so grids ([class*="grid"]) are never affected.
 * Uses existing M3 / legacy CSS variables so light/dark themes follow. */
.baton-tbl {
  display: flex;
  flex-direction: column;
  /* The controls sit right above the table they act on — they read as one
     component, so the gap is a hairline's worth of separation, not a break. */
  gap: 0.25rem;
}

.baton-tbl__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  /* Block padding only doubled up: every child carries its own, and
     .baton-tbl's own gap already holds the bar off the table. */
  padding: 0 0.25rem;
}

/* Element-qualified: the forms stylesheet's `input[type=search]` is (0,1,1) and
 * outranks a bare class, so every sizing declaration below was dead. */
input.baton-tbl__search {
  flex: 1 1 12rem;
  min-width: 8rem;
  /* A toolbar filter, not a form field: without this it inherits the forms
     stylesheet's 2.75rem control height and towers over the table it filters.
     2rem matches the action button and the heading line beside it, and still
     clears the WCAG 2.2 AA 24px target. */
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-lowest, var(--surface, #fff));
  color: var(--md-on-surface, var(--text-strong));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
input.baton-tbl__search::placeholder {
  color: var(--md-on-surface-variant, var(--text-muted));
  opacity: 0.8;
}
input.baton-tbl__search:focus {
  outline: 2px solid var(--md-primary, var(--primary, #6750a4));
  outline-offset: -1px;
}

/* Table action button — right-aligned on the dataset's heading line (.dataset-head
 * is the flex row; `margin-left: auto` is what pushes it over).
 * Icon-only (the action name lives on title/aria-label). Inherits the
 * brand-tinted tonal button from the forms stylesheet; the single-action "+"
 * variant adds `.cta` for the gradient CTA look. */
.baton-tbl__menu-btn {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  /* A round icon button, not a control: drop the 6rem min-width and the 2.75rem
   * control height from the forms button base, and size to the heading line it
   * sits on rather than towering over it. */
  min-width: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
}
.baton-tbl__menu-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  flex: 0 0 auto;
}

/* The pager is one unit: page-size select + prev + status + next on a single
 * line. It never wraps internally — on mobile the whole thing drops to its own
 * line (see the media query below). */
.baton-tbl__pager {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface-variant, var(--text-muted));
}

/* Plain <select> sized for our pager. The form stylesheet has a
 * `label:has(> span + select)` floating-label rule that would otherwise
 * force the select to 25em + huge padding — we intentionally render the
 * select as a sibling of a <span>, not wrapped in a <label>, to avoid it. */
/* Element-qualified for the same reason as the search input: the forms
 * stylesheet sizes a bare `select` at the 2.75rem control height, which
 * outranks a class and was setting the whole controls bar's height. */
select.baton-tbl__page-size-select {
  min-width: 0;
  width: auto;
  height: 2rem;
  padding: 0 0.5rem;
  margin: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-lowest, var(--surface, #fff));
  color: var(--md-on-surface, var(--text-strong));
  flex-shrink: 0;
}

.baton-tbl__pager-btn {
  all: unset;
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface, var(--text-strong));
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}
.baton-tbl__pager-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-primary, var(--action, #6750a4)), transparent 88%);
}
.baton-tbl__pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.baton-tbl__pager-status {
  min-width: 2.25rem;
  text-align: center;
}

/* Narrow viewports: search and pager stay on one line — the search shrinks
 * while the pager compacts. */
@media (max-width: 40rem) {
  .baton-tbl__controls {
    flex-wrap: nowrap;
    gap: 0.25rem 0.5rem;
  }
  .baton-tbl__search {
    flex: 1 1 0;
    min-width: 0;
  }
  .baton-tbl__pager {
    gap: 0;
  }
  .baton-tbl__pager-status {
    min-width: 1.5rem;
  }
  .baton-tbl__pager-btn {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* Free-text match highlight — same hue both modes; the surface contrast keeps
 * legibility. color-mix lets the underlying text colour show through. */
.baton-tbl__hl {
  background: color-mix(in srgb, #ffd54f 75%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffd54f 50%, transparent);
}

/* Row hidden by search / pagination filter */
.baton-tbl-hidden {
  display: none !important;
}

/* Sortable column headers */
/* Element-qualified so the `padding: 0` actually beats `[class^="table"] th`,
 * which is (0,1,1) and would otherwise win — leaving the cell's padding and
 * the button's to stack, and the heading out of line with its column. */
th.baton-tbl__th {
  cursor: pointer;
  user-select: none;
  /* No padding of its own: the button fills the cell, so the whole cell is the
     click target rather than just the words inside it. */
  padding: 0;
}
th.baton-tbl__th > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
th.baton-tbl__th:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* The sort control. `all: unset` first, because the forms stylesheet gives every
   button a tonal fill, a centred inline-flex box and a control height — none of
   which belong on a column heading. Inherits the th's type and colour. */
.baton-tbl__sort {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.baton-tbl__sort:focus-visible {
  outline: 2px solid var(--md-primary, var(--primary, #6750a4));
  outline-offset: -2px;
}

/* Sort direction indicator — a small caret that appears only when the column
   is the active sort key. */
.baton-tbl__sort-ind {
  display: inline-block;
  width: 0;
  height: 0;
  opacity: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: opacity 0.1s ease-in-out;
}

.baton-tbl__th--asc .baton-tbl__sort-ind {
  opacity: 0.7;
  border-bottom: 5px solid currentColor;
}

.baton-tbl__th--desc .baton-tbl__sort-ind {
  opacity: 0.7;
  border-top: 5px solid currentColor;
}

/* Faint hint on hover for an as-yet-unsorted column */
.baton-tbl__th:hover .baton-tbl__sort-ind {
  opacity: 0.3;
  border-bottom: 5px solid currentColor;
}

.baton-tbl__th--desc:hover .baton-tbl__sort-ind {
  border-bottom: 0;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}

/* Caption for card collapse */
.caption {
  display: none;
}

/* Card collapse logic (kept, but generated neatly) */
@media (max-width: 12rem) {
  .table-12rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-12rem table, .table-12rem thead, .table-12rem tbody, .table-12rem tr, .table-12rem td {
    display: block;
  }
  .table-12rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-12rem thead {
    display: none;
  }
  .table-12rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-12rem tbody tr, .table-12rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-12rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-12rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-12rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-12rem td:last-child {
    border-bottom: none;
  }
  .table-12rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-12rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 18rem) {
  .table-18rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-18rem table, .table-18rem thead, .table-18rem tbody, .table-18rem tr, .table-18rem td {
    display: block;
  }
  .table-18rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-18rem thead {
    display: none;
  }
  .table-18rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-18rem tbody tr, .table-18rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-18rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-18rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-18rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-18rem td:last-child {
    border-bottom: none;
  }
  .table-18rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-18rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 24rem) {
  .table-24rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-24rem table, .table-24rem thead, .table-24rem tbody, .table-24rem tr, .table-24rem td {
    display: block;
  }
  .table-24rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-24rem thead {
    display: none;
  }
  .table-24rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-24rem tbody tr, .table-24rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-24rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-24rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-24rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-24rem td:last-child {
    border-bottom: none;
  }
  .table-24rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-24rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 40rem) {
  .table {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table table, .table thead, .table tbody, .table tr, .table td {
    display: block;
  }
  .table {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table thead {
    display: none;
  }
  .table {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table tbody tr, .table tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table td:last-child {
    border-bottom: none;
  }
  .table .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 30rem) {
  .table-30rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-30rem table, .table-30rem thead, .table-30rem tbody, .table-30rem tr, .table-30rem td {
    display: block;
  }
  .table-30rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-30rem thead {
    display: none;
  }
  .table-30rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-30rem tbody tr, .table-30rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-30rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-30rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-30rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-30rem td:last-child {
    border-bottom: none;
  }
  .table-30rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-30rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 36rem) {
  .table-36rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-36rem table, .table-36rem thead, .table-36rem tbody, .table-36rem tr, .table-36rem td {
    display: block;
  }
  .table-36rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-36rem thead {
    display: none;
  }
  .table-36rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-36rem tbody tr, .table-36rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-36rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-36rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-36rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-36rem td:last-child {
    border-bottom: none;
  }
  .table-36rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-36rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 42rem) {
  .table-42rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-42rem table, .table-42rem thead, .table-42rem tbody, .table-42rem tr, .table-42rem td {
    display: block;
  }
  .table-42rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-42rem thead {
    display: none;
  }
  .table-42rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-42rem tbody tr, .table-42rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-42rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-42rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-42rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-42rem td:last-child {
    border-bottom: none;
  }
  .table-42rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-42rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 48rem) {
  .table-48rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-48rem table, .table-48rem thead, .table-48rem tbody, .table-48rem tr, .table-48rem td {
    display: block;
  }
  .table-48rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-48rem thead {
    display: none;
  }
  .table-48rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-48rem tbody tr, .table-48rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-48rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-48rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-48rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-48rem td:last-child {
    border-bottom: none;
  }
  .table-48rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-48rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 54rem) {
  .table-54rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-54rem table, .table-54rem thead, .table-54rem tbody, .table-54rem tr, .table-54rem td {
    display: block;
  }
  .table-54rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-54rem thead {
    display: none;
  }
  .table-54rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-54rem tbody tr, .table-54rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-54rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-54rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-54rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-54rem td:last-child {
    border-bottom: none;
  }
  .table-54rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-54rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
@media (max-width: 60rem) {
  .table-60rem {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .table-60rem table, .table-60rem thead, .table-60rem tbody, .table-60rem tr, .table-60rem td {
    display: block;
  }
  .table-60rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-60rem thead {
    display: none;
  }
  .table-60rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-60rem tbody tr, .table-60rem tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-60rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-60rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-60rem td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .table-60rem td:last-child {
    border-bottom: none;
  }
  .table-60rem .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .table-60rem .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
}
/* Small utilities */
hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 12px 0;
}

.no-display {
  display: none;
}

/* Header layout: left (hamburger + logo), center (nav), right (actions) */
header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-height);
}

header > div > .header-left,
header > div > .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

header > div > nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* Brand / logo */
header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow: hidden;
  flex: 0 0 auto;
  user-select: none;
}

header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback: letter inside a fancy circle */
header .brand--fallback {
  border-radius: 9999px;
  /* Light-mode "depth" */
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(245, 246, 255, 0.98), rgba(226, 232, 255, 0.98));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

header .brand__initial {
  display: inline-block;
  font-weight: 800;
  font-size: calc(var(--icon-size) * 0.5);
  line-height: 1;
  /* Light-mode text */
  color: rgba(17, 24, 39, 0.92);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Dark mode via OS preference */
@media (prefers-color-scheme: dark) {
  header .brand--fallback {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.95));
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
  header .brand__initial {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  }
}
/* Dark mode via explicit class */
body.dark-mode header .brand--fallback {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.95));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

body.dark-mode header .brand__initial {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Actions */
.icon-only {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

/* Nav must never wrap: it scrolls horizontally instead */
nav > div {
  display: block;
  min-width: 0;
}

nav .ul {
  min-width: 0;
}

nav .ul > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex-wrap: wrap;
  white-space: normal;
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

nav .ul > ul::-webkit-scrollbar {
  display: none;
}

nav li {
  flex: 0 0 auto;
  margin: 0;
}

nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--color);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

nav a:hover {
  background: var(--background-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

nav a[aria-current=page] {
  background: var(--background-hover);
  border-color: var(--border-hover);
  transform: none;
}

nav a.nav-group .nav-caret {
  margin-left: 0.3rem;
  font-size: 0.7em;
  opacity: 0.6;
}

/* Active nav item: BATON renders plain text in <li> without an <a> wrapper */
nav li:not(:has(a)) {
  display: inline-flex;
  align-items: center;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius: 999px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

/* Hamburger button (animated -> X when aria-expanded="true") */
button.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--color);
  position: relative;
}

button.nav-toggle > span,
button.nav-toggle > span::before,
button.nav-toggle > span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}

button.nav-toggle > span::before {
  transform: translate(-50%, calc(-50% - 6px));
}

button.nav-toggle > span::after {
  transform: translate(-50%, calc(-50% + 6px));
}

button.nav-toggle[aria-expanded=true] > span {
  opacity: 0;
}

button.nav-toggle[aria-expanded=true] > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

button.nav-toggle[aria-expanded=true] > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.center {
  text-align: center;
}

/* Mobile: show hamburger, hide inline nav (you can override with html.nav-open if desired) */
@media (max-width: 48rem) {
  header > div > nav {
    display: none;
  }
  button.nav-toggle {
    display: inline-flex;
  }
}
@media (min-width: 48.001rem) {
  button.nav-toggle {
    display: none;
  }
}
header > div > .header-right {
  white-space: nowrap;
}

/* Animations & utilities */
@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: content-fade-in 300ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.pulse {
  animation: pulse-soft 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.lift {
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Print */
@page {
  size: auto;
  margin: 0;
}
@media print {
  header, nav {
    display: none !important;
  }
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
    color: #000 !important;
  }
  main {
    padding: 0 !important;
  }
  section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  [class^=table] {
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #ccc;
  }
  [class^=table] thead th {
    background: #f0f0f0 !important;
  }
  [class^=table] tbody tr:hover {
    background: none !important;
  }
}
.cards-2 > div,
.cards-3 > div {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.cards-2 > div {
  grid-template-columns: repeat(2, 1fr);
}

.cards-3 > div {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 48rem) {
  .cards-3 > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 32rem) {
  .cards-2 > div, .cards-3 > div {
    grid-template-columns: 1fr;
  }
}
.glow article > div {
  padding: 1rem;
  height: 100%;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: var(--md-surface-container, var(--surface));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.glow article > div:hover {
  border-color: color-mix(in srgb, var(--accent, #6366F1) 55%, var(--hairline));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px color-mix(in srgb, var(--accent, #6366F1) 30%, transparent);
  transform: translateY(-2px);
}

.glass article > div {
  padding: 1rem;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--md-surface-container-high, var(--surface-2, #282830)) 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.case-study > div {
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: var(--md-surface-container-low, var(--surface));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.field-error,
input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--md-error, #dc2626) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-error, #dc2626) 22%, transparent);
}

.field-error-msg {
  color: var(--md-error, #dc2626);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

.shake {
  animation: bsm-shake 320ms ease;
}

@keyframes bsm-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --md-primary: #6366F1;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #E0E0FF;
    --md-on-primary-container: #1B1B6B;
    --md-primary-text: #446A98;
    --md-secondary: #8B6914;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #FDEEB4;
    --md-on-secondary-container: #2B1F00;
    --md-tertiary: #0E7A6E;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #A0F2E5;
    --md-on-tertiary-container: #002019;
    --md-error: #DC2626;
    --md-on-error: #FFFFFF;
    --md-error-container: #FECACA;
    --md-on-error-container: #7F1D1D;
    --md-surface: #EEF7FC;
    --md-surface-dim: #C6E6F4;
    --md-surface-bright: #F4FBFE;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #9FDCF2;
    --md-surface-container: #63D3F9;
    --md-surface-container-high: #51C9F0;
    --md-surface-container-highest: #3FBFE7;
    --md-on-surface: #1A1A2E;
    --md-on-surface-variant: #4A4560;
    --md-surface-variant: #BFE7F8;
    --md-outline: #7A7292;
    --md-outline-variant: #CBC4DA;
    --md-inverse-surface: #2E2A3A;
    --md-inverse-on-surface: #F2EFF8;
    --md-inverse-primary: #C3AAFF;
    --md-shadow: rgba(0, 0, 0, 0.15);
    --md-scrim: rgba(0, 0, 0, 0.4);
    --bee-gold: #F59E0B;
    --bee-gold-soft: #FEF3C7;
    --svg-stroke: #333;
    --svg-stroke-light: #666;
    --svg-text: #333;
    --service-1op1: #FBD4B4;
    --service-1op2: #49E0E5;
    --service-1op4: #4A86E8;
    --service-asst-vm-admin: #FE99A1;
    --service-inschrijving-opstart: #D6BAE2;
    --service-intake: #CB9EE1;
    --service-intake-voor-2: #BBBAD9;
    --service-toetstraining: #C2DBBE;
    --service-vakantieschool-groep: #8EB99E;
    --service-vestigingsmanager: #B3D0EE;
    --vrij-fill: #04FD05;
    --vrij-text: #14532D;
    --vacation-fill: #F5EF99;
    --vacation-text: #3F3A00;
    --vacation-pending-fill: #E2DDAE;
    --vacation-pending-text: #4A4200;
    --vacation-border: #5A5000;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #A5B4FC;
    --md-on-primary: #252580;
    --md-primary-container: #3730A3;
    --md-on-primary-container: #E0E0FF;
    --md-primary-text: #A5B4FC;
    --md-secondary: #E2C56E;
    --md-on-secondary: #3E2E00;
    --md-secondary-container: #594300;
    --md-on-secondary-container: #FDEEB4;
    --md-tertiary: #6EDACE;
    --md-on-tertiary: #003731;
    --md-tertiary-container: #005048;
    --md-on-tertiary-container: #A0F2E5;
    --md-error: #FCA5A5;
    --md-on-error: #7F1D1D;
    --md-error-container: #991B1B;
    --md-on-error-container: #FECACA;
    --md-surface: #121218;
    --md-surface-dim: #121218;
    --md-surface-bright: #38384A;
    --md-surface-container-lowest: #0D0D12;
    --md-surface-container-low: #1A1A26;
    --md-surface-container: #1E1E2C;
    --md-surface-container-high: #282838;
    --md-surface-container-highest: #333344;
    --md-on-surface: #E4E4F0;
    --md-on-surface-variant: #C5C5D6;
    --md-surface-variant: #46465A;
    --md-outline: #8E8EA6;
    --md-outline-variant: #46465A;
    --md-inverse-surface: #E4E4F0;
    --md-inverse-on-surface: #2E2E3A;
    --md-inverse-primary: #6366F1;
    --md-shadow: rgba(0, 0, 0, 0.5);
    --md-scrim: rgba(0, 0, 0, 0.6);
    --bee-gold: #FBBF24;
    --bee-gold-soft: rgba(251, 191, 36, 0.15);
    --svg-stroke: #AAA;
    --svg-stroke-light: #777;
    --svg-text: #CCC;
    --service-1op1: #FBD4B4;
    --service-1op2: #8FECEF;
    --service-1op4: #7FA8EE;
    --service-asst-vm-admin: #FE99A1;
    --service-inschrijving-opstart: #D6BAE2;
    --service-intake: #CB9EE1;
    --service-intake-voor-2: #BBBAD9;
    --service-toetstraining: #C2DBBE;
    --service-vakantieschool-groep: #8EB99E;
    --service-vestigingsmanager: #B3D0EE;
    --vrij-fill: #6FFE6F;
    --vrij-text: #BBF7D0;
    --vacation-fill: #F5EF99;
    --vacation-text: #3F3A00;
    --vacation-pending-fill: #4A4400;
    --vacation-pending-text: #F5EF99;
    --vacation-border: #D8CE5E;
  }
}
body.light-mode {
  --md-primary: #6366F1;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #E0E0FF;
  --md-on-primary-container: #1B1B6B;
  --md-primary-text: #446A98;
  --md-secondary: #8B6914;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #FDEEB4;
  --md-on-secondary-container: #2B1F00;
  --md-tertiary: #0E7A6E;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #A0F2E5;
  --md-on-tertiary-container: #002019;
  --md-error: #DC2626;
  --md-on-error: #FFFFFF;
  --md-error-container: #FECACA;
  --md-on-error-container: #7F1D1D;
  --md-surface: #EEF7FC;
  --md-surface-dim: #C6E6F4;
  --md-surface-bright: #F4FBFE;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #9FDCF2;
  --md-surface-container: #63D3F9;
  --md-surface-container-high: #51C9F0;
  --md-surface-container-highest: #3FBFE7;
  --md-on-surface: #1A1A2E;
  --md-on-surface-variant: #4A4560;
  --md-surface-variant: #BFE7F8;
  --md-outline: #7A7292;
  --md-outline-variant: #CBC4DA;
  --md-inverse-surface: #2E2A3A;
  --md-inverse-on-surface: #F2EFF8;
  --md-inverse-primary: #C3AAFF;
  --md-shadow: rgba(0, 0, 0, 0.15);
  --md-scrim: rgba(0, 0, 0, 0.4);
  --bee-gold: #F59E0B;
  --bee-gold-soft: #FEF3C7;
  --svg-stroke: #333;
  --svg-stroke-light: #666;
  --svg-text: #333;
  --service-1op1: #FBD4B4;
  --service-1op2: #49E0E5;
  --service-1op4: #4A86E8;
  --service-asst-vm-admin: #FE99A1;
  --service-inschrijving-opstart: #D6BAE2;
  --service-intake: #CB9EE1;
  --service-intake-voor-2: #BBBAD9;
  --service-toetstraining: #C2DBBE;
  --service-vakantieschool-groep: #8EB99E;
  --service-vestigingsmanager: #B3D0EE;
  --vrij-fill: #04FD05;
  --vrij-text: #14532D;
  --vacation-fill: #F5EF99;
  --vacation-text: #3F3A00;
  --vacation-pending-fill: #E2DDAE;
  --vacation-pending-text: #4A4200;
  --vacation-border: #5A5000;
}

body.dark-mode {
  --md-primary: #A5B4FC;
  --md-on-primary: #252580;
  --md-primary-container: #3730A3;
  --md-on-primary-container: #E0E0FF;
  --md-primary-text: #A5B4FC;
  --md-secondary: #E2C56E;
  --md-on-secondary: #3E2E00;
  --md-secondary-container: #594300;
  --md-on-secondary-container: #FDEEB4;
  --md-tertiary: #6EDACE;
  --md-on-tertiary: #003731;
  --md-tertiary-container: #005048;
  --md-on-tertiary-container: #A0F2E5;
  --md-error: #FCA5A5;
  --md-on-error: #7F1D1D;
  --md-error-container: #991B1B;
  --md-on-error-container: #FECACA;
  --md-surface: #121218;
  --md-surface-dim: #121218;
  --md-surface-bright: #38384A;
  --md-surface-container-lowest: #0D0D12;
  --md-surface-container-low: #1A1A26;
  --md-surface-container: #1E1E2C;
  --md-surface-container-high: #282838;
  --md-surface-container-highest: #333344;
  --md-on-surface: #E4E4F0;
  --md-on-surface-variant: #C5C5D6;
  --md-surface-variant: #46465A;
  --md-outline: #8E8EA6;
  --md-outline-variant: #46465A;
  --md-inverse-surface: #E4E4F0;
  --md-inverse-on-surface: #2E2E3A;
  --md-inverse-primary: #6366F1;
  --md-shadow: rgba(0, 0, 0, 0.5);
  --md-scrim: rgba(0, 0, 0, 0.6);
  --bee-gold: #FBBF24;
  --bee-gold-soft: rgba(251, 191, 36, 0.15);
  --svg-stroke: #AAA;
  --svg-stroke-light: #777;
  --svg-text: #CCC;
  --service-1op1: #FBD4B4;
  --service-1op2: #8FECEF;
  --service-1op4: #7FA8EE;
  --service-asst-vm-admin: #FE99A1;
  --service-inschrijving-opstart: #D6BAE2;
  --service-intake: #CB9EE1;
  --service-intake-voor-2: #BBBAD9;
  --service-toetstraining: #C2DBBE;
  --service-vakantieschool-groep: #8EB99E;
  --service-vestigingsmanager: #B3D0EE;
  --vrij-fill: #6FFE6F;
  --vrij-text: #BBF7D0;
  --vacation-fill: #F5EF99;
  --vacation-text: #3F3A00;
  --vacation-pending-fill: #4A4400;
  --vacation-pending-text: #F5EF99;
  --vacation-border: #D8CE5E;
}

:root {
  --text-disabled: var(--color-disabled, #94a3b8);
}

header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 1rem;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}
header .brand:hover {
  opacity: 0.85;
}
header .brand:hover .bee-icon {
  transform: rotate(-8deg) scale(1.1);
}
header .brand .bee-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  transition: transform 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
header .brand h2 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
}

.bee-reading {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 0.5rem;
}
.dashboard-hero h1, .dashboard-hero h2 {
  margin: 0;
}
.dashboard-hero .bee-reading {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
}
@media (max-width: 30rem) {
  .dashboard-hero .bee-reading {
    width: 4rem;
    height: 4rem;
  }
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-week {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}
.nav-week .nav-week__arrow {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.25rem 0.5rem;
  min-width: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-week .nav-week__arrow:hover:not([disabled]) {
  background: var(--md-surface-container-high);
}
.nav-week .nav-week__arrow[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
}
.nav-week .nav-week__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-week .nav-week__label .week-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
}
.nav-week .nav-week__select {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.5rem;
  max-width: 12rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  cursor: pointer;
}
.nav-week .nav-week__status-badge {
  display: none;
  justify-content: center;
  min-width: 1.5rem;
  padding-inline: 0;
}

section > div {
  margin-bottom: 2rem;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem 0;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--md-outline);
}

.stat-card--total {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}
.stat-card--total .stat-value {
  color: var(--md-on-primary-container);
}
.stat-card--total .stat-label {
  color: var(--md-on-primary-container);
}

.stat-value {
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--md-primary-text);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
}

.role-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 30rem) {
  .role-picker {
    grid-template-columns: 1fr;
  }
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  height: auto;
  min-width: auto;
  white-space: normal;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.role-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--md-primary);
}
.role-card:active {
  transform: translateY(0);
}

.role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.role-title {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface);
}

.role-desc {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
  text-align: center;
}

.quick-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.quick-actions button, .quick-actions a.quick-action-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface-container-low);
  color: var(--md-primary-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1);
}
.quick-actions button:hover, .quick-actions a.quick-action-link:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.quick-actions button:active, .quick-actions a.quick-action-link:active {
  transform: scale(0.97);
}

.week-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.week-status--O {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.week-status--L {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.week-status--F {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.attendance-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.attendance-badge.attendance--LLB, .attendance-badge.attendance--attended {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.attendance-badge.attendance--OTA, .attendance-badge.attendance--AdD, .attendance-badge.attendance--cancelled {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.attendance-badge.attendance--TLA {
  background: color-mix(in srgb, var(--md-error-container), var(--md-error) 20%);
  color: var(--md-on-error-container);
}
.attendance-badge.attendance--NAG {
  background: color-mix(in srgb, var(--md-error-container), var(--md-error) 20%);
  color: var(--md-on-error-container);
  text-decoration: underline dotted;
}
.attendance-badge.attendance--none {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

.comment-cell {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.attendance-select {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--md-outline-variant);
  cursor: pointer;
}
.attendance-select.attendance--LLB, .attendance-select.attendance--attended {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-color: var(--md-tertiary);
}
.attendance-select.attendance--OTA, .attendance-select.attendance--AdD, .attendance-select.attendance--cancelled {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-color: var(--md-secondary);
}
.attendance-select.attendance--TLA {
  background: color-mix(in srgb, var(--md-error-container), var(--md-error) 20%);
  color: var(--md-on-error-container);
  border-color: var(--md-error);
}
.attendance-select.attendance--NAG {
  background: color-mix(in srgb, var(--md-error-container), var(--md-error) 20%);
  color: var(--md-on-error-container);
  border-color: var(--md-error);
  border-style: dashed;
}
.attendance-select.attendance--none {
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface-variant);
}

.worked-select {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--md-outline-variant);
  cursor: pointer;
}
.worked-select.worked--yes {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-color: var(--md-tertiary);
}
.worked-select.worked--no {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-color: var(--md-error);
}
.worked-select.worked--none {
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface-variant);
}

.voucher-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.voucher-badge.voucher--a {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.voucher-badge.voucher--w {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.voucher-badge.voucher--e {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.voucher-badge.voucher--u {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}
.voucher-badge.voucher--i {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  opacity: 0.7;
  text-decoration: line-through;
}

.voucher-comment {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--md-on-surface-variant);
  white-space: normal;
}

.voucher-origin {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  white-space: normal;
}

.week-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container-low);
  border-radius: 0.75rem;
  border: 1px solid var(--md-outline-variant);
}
.week-nav button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.week-nav button:hover:not([disabled]) {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline);
}
.week-nav button[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
}
.week-nav .week-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface);
}
.week-nav .week-select {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.week-nav .week-select:hover {
  background: var(--md-surface-container-high);
  border-color: var(--md-outline);
}
.week-nav .week-select:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 1px;
}
.week-nav--compact {
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.week-nav--compact button {
  padding: 0.25rem 0.5rem;
  min-width: 2rem;
  text-align: center;
}

.location-nav {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
}
.location-nav button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.2, 0, 0, 1);
}
.location-nav button:hover {
  background: color-mix(in srgb, var(--md-on-surface), transparent 92%);
}
.location-nav button.active {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-color: var(--md-primary);
  font-weight: 600;
}

.report-tab-nav {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  border-bottom: 2px solid var(--md-outline-variant);
  padding-bottom: 0.5rem;
}

.report-tab {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.2, 0, 0, 1);
}
.report-tab:hover {
  background: color-mix(in srgb, var(--md-on-surface), transparent 92%);
}
.report-tab--active {
  background: var(--md-surface-container-low);
  color: var(--md-primary-text);
  border-color: var(--md-outline-variant);
  font-weight: 600;
  position: relative;
}
.report-tab--active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--md-primary);
}

.report-section h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.report-table--wide {
  overflow-x: auto;
}
.report-table--wide table {
  min-width: 900px;
}
.report-table--wide th, .report-table--wide td {
  white-space: nowrap;
  text-align: right;
}
.report-table--wide th:first-child, .report-table--wide th:nth-child(2), .report-table--wide td:first-child, .report-table--wide td:nth-child(2) {
  text-align: left;
}
.report-table--wide th.cell-text, .report-table--wide td.cell-text {
  text-align: left;
  white-space: normal;
}

.row-cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

.manage-toolbar + .table,
.manage-toolbar + div.table,
.panel-header + .table,
.panel-header + div.table,
h2 + .table,
h2 + div.table,
h3 + .table,
h3 + div.table,
p + .table,
p + div.table,
.subtitle + .table,
.subtitle + div.table,
.form-hint + .table,
.form-hint + div.table {
  margin-top: 1rem;
}

.manage-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem 0;
}
.manage-toolbar select {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
.manage-toolbar button.primary {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

tr.needs-attention {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  cursor: pointer;
}
tr.needs-attention:hover {
  filter: brightness(0.95);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.status-badge.status--deleted {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.status-badge.status--active {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.status-badge.status--inhaal {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.status-badge.status--enrolled {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.kwaliteitsles-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: #00802B;
  color: #FFFFFF;
  white-space: nowrap;
}

.two-panel {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 1rem;
  min-height: 20rem;
}
@media (max-width: 48rem) {
  .two-panel {
    grid-template-columns: 1fr;
  }
}

.panel-list {
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  background: var(--md-surface-container-lowest);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container);
}
.panel-header h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}
.panel-list > .panel-header {
  border-bottom: 1px solid var(--md-outline-variant);
}
.panel-detail > .panel-header, section .panel-header {
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.panel-detail {
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  background: var(--md-surface-container-lowest);
  padding: 1rem;
}

.panel-empty {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
  text-align: center;
  padding: 2rem 0;
}

.list-toolbar {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--md-outline-variant);
}

.list-empty {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
  padding: 1rem;
}

.item-list {
  display: flex;
  flex-direction: column;
}

.item-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}
.item-list-row:last-child {
  border-bottom: none;
}
.item-list-row:hover {
  background: color-mix(in srgb, var(--md-primary), transparent 94%);
}
.item-list-row.active {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.item-list-row .item-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  flex: 1;
}
.item-list-row .item-meta {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}

.btn-sm, .btn-danger, .btn-warn {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-primary-text);
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-sm:hover, .btn-danger:hover, .btn-warn:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}

.order-buttons {
  display: flex;
  gap: 0.25rem;
}
.order-buttons button {
  min-width: 0;
  width: 2.5rem;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.btn-warn {
  border-color: var(--md-secondary);
  color: var(--md-secondary);
}
.btn-warn:hover {
  background: var(--md-secondary-container);
  border-color: var(--md-secondary);
}

.btn-danger {
  border-color: var(--md-error);
  color: var(--md-error);
}
.btn-danger:hover {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-color: var(--md-error);
}

.btn-small {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-error);
  cursor: pointer;
}
.btn-small:hover {
  background: var(--md-error-container);
  border-color: var(--md-error);
}

.link-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--md-surface-container);
}
.link-panel h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--md-on-surface);
}

.week-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  position: sticky;
  top: var(--header-height);
  z-index: 50;
}

.week-toolbar__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.week-toolbar__nav button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  cursor: pointer;
  min-width: 2.5rem;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.week-toolbar__nav button:hover:not([disabled]) {
  background: var(--md-surface-container-high);
}
.week-toolbar__nav button[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
}

.week-toolbar__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.week-toolbar__label .week-date {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
}

.week-toolbar__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.week-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

.week-toolbar-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.week-toolbar-card .week-toolbar {
  flex: 1;
  margin-bottom: 0;
}
.week-toolbar-card .bee-reading {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.checkbox-label input[type=checkbox] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--md-primary);
}

.subtitle {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
  margin: -1rem 0 1.5rem 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.form-grid:not(:has(> :nth-child(2))) {
  grid-template-columns: 1fr;
}
.form-grid .form-section {
  margin-bottom: 0;
  min-width: 0;
}
.form-grid .form-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.form-grid .form-column .form-section {
  flex: 1;
}
@media (max-width: 36rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-section {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
}
.form-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
.form-grid .form-fields {
  grid-template-columns: 1fr;
}
.form-fields--duration {
  margin-top: 0.75rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.form-field > label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
}
.form-field select, .form-field input[type=number], .form-field input[type=text] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: border-color 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1);
}
.form-field select:focus, .form-field input[type=number]:focus, .form-field input[type=text]:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

.euro-input {
  display: flex !important;
  align-items: center;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  background: var(--md-surface-container-lowest);
  transition: border-color 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1);
}
.euro-input:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}
.euro-input .euro-prefix {
  padding: 0.5rem 0 0.5rem 0.75rem;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  user-select: none;
}
.euro-input input[type=number] {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
  flex: 1;
  min-width: 0;
}
.euro-input input[type=number]:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.euro-input--compact {
  max-width: 7rem;
}
.euro-input--compact .euro-prefix {
  padding: 0.25rem 0 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}
.euro-input--compact input[type=number] {
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}

.deal-add {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
}
.deal-add .deal-add-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
}
.deal-add .deal-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.deal-add .deal-add-row select {
  flex: 1 1 9rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.deal-add .deal-add-row select:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}
.deal-add .deal-add-row .euro-input {
  flex: 0 0 8rem;
  height: 2.5rem;
}
.deal-add .deal-add-row button {
  flex: 0 0 auto;
  min-width: auto;
  height: 2.5rem;
}

.ongoing-control label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface);
}
.ongoing-control input[type=checkbox] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--md-primary);
}

.badge-count {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  white-space: nowrap;
}

.pupil-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pupil-list:has(.pupil-chip-row) {
  flex-direction: column;
  flex-wrap: nowrap;
}

.add-btn--enrolled {
  border-color: var(--md-secondary);
}

.pupil-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface);
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.pupil-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.pupil-chip button:hover {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.pupil-chip--voucher {
  border-color: var(--md-tertiary);
}

.pupil-chip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.pupil-search {
  position: relative;
}
.pupil-search input[type=text] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.pupil-search input[type=text]:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

.pupil-show-all {
  margin-top: 0.5rem;
}

.pupil-search-results {
  display: flex;
  flex-direction: column;
  max-height: 12rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  background: var(--md-surface-container-lowest);
}

.pupil-search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--md-on-surface);
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.pupil-search-result:hover {
  background: var(--md-primary-container);
}
.pupil-search-result + .pupil-search-result {
  border-top: 1px solid var(--md-outline-variant);
}

.pupil-search-location {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}

.tab-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--md-outline-variant);
}
.tab-bar button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  height: auto;
  min-width: auto;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: color 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.tab-bar button:hover {
  background: transparent;
  color: var(--md-on-surface);
}
.tab-bar button.active {
  color: var(--md-primary-text);
  border-bottom-color: var(--md-primary);
  font-weight: 600;
}

.form-hint {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
  font-style: italic;
  margin: 0.5rem 0 0 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-outline-variant);
}
.form-actions button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.75rem 1.5rem;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1);
}
.form-actions .outline {
  border: 1px solid var(--md-outline);
  background: transparent;
  color: var(--md-on-surface);
}
.form-actions .outline:hover {
  background: color-mix(in srgb, var(--md-on-surface), transparent 92%);
}
.form-actions .primary {
  border: none;
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.form-actions .primary:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  background: color-mix(in srgb, var(--md-primary), var(--md-on-primary) 8%);
}

.axis-line {
  stroke: var(--svg-stroke);
  stroke-width: 2px;
  stroke-linecap: round;
}

.tick-hour {
  stroke: var(--svg-stroke);
  stroke-width: 2px;
}

.tick-half {
  stroke: var(--svg-stroke);
  stroke-width: 1.5px;
}

.tick-quarter {
  stroke: var(--svg-stroke-light);
  stroke-width: 1px;
}

.label-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  fill: var(--svg-text);
  text-anchor: end;
  dominant-baseline: middle;
}

.lesson-box {
  fill: var(--service-colour, var(--md-outline));
  stroke: var(--svg-stroke);
  stroke-width: 0.5;
  opacity: 0.85;
  rx: 3;
  ry: 3;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.lesson-box.clickable {
  cursor: pointer;
}
.lesson-box.clickable:hover {
  opacity: 1;
  filter: brightness(1.1);
}

.lesson--unavailable {
  opacity: 0.35;
  cursor: not-allowed;
}

.lesson-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  dominant-baseline: hanging;
  pointer-events: none;
  fill: #1a1a2e;
}

.lesson-service--1op1 {
  --service-colour: var(--service-1op1);
}

.lesson-service--1op2 {
  --service-colour: var(--service-1op2);
}

.lesson-service--1op4 {
  --service-colour: var(--service-1op4);
}

.lesson-service--asst-vm-admin {
  --service-colour: var(--service-asst-vm-admin);
}

.lesson-service--inschrijving-opstart {
  --service-colour: var(--service-inschrijving-opstart);
}

.lesson-service--intake {
  --service-colour: var(--service-intake);
}

.lesson-service--intake-voor-2 {
  --service-colour: var(--service-intake-voor-2);
}

.lesson-service--toetstraining {
  --service-colour: var(--service-toetstraining);
}

.lesson-service--vakantieschool-groep {
  --service-colour: var(--service-vakantieschool-groep);
}

.lesson-service--vestigingsmanager {
  --service-colour: var(--service-vestigingsmanager);
}

.lesson-no-pupils {
  fill: var(--bee-gold);
}

.lesson-no-tutor {
  fill: var(--md-error);
}

.lesson-kwaliteitsles {
  fill: #00802B;
}

.lesson-box.lesson-kwaliteitsles ~ text {
  fill: #fff;
}

.lesson-cancelled-overlay {
  pointer-events: none;
}

.lesson-has-cancelled {
  stroke: var(--md-secondary);
  stroke-dasharray: 1 3;
  stroke-width: 1.5;
}

.lesson-under-capacity {
  stroke: var(--md-on-tertiary-container);
  stroke-dasharray: 3 2;
  stroke-width: 1.5;
}

.lesson-not-worked {
  opacity: 0.45;
  stroke: var(--md-on-surface-variant);
  stroke-dasharray: 2 2;
  stroke-width: 1.5;
}

.lesson-unmarked--past {
  animation: pulse-soft 1.5s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.booking-block {
  stroke-width: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.booking-block:hover {
  opacity: 1;
  filter: brightness(1.05);
}

.booking-availability {
  fill: var(--vrij-fill);
  opacity: 0.85;
}

.booking-availability-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  fill: var(--vrij-text);
  pointer-events: none;
}

.vacation-block {
  fill: var(--vacation-fill);
  stroke: var(--vacation-border);
  stroke-width: 1;
  opacity: 0.85;
}

.vacation-block--pending {
  fill: var(--vacation-pending-fill);
  stroke: var(--vacation-border);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  opacity: 0.9;
}

.vacation-group.clickable {
  cursor: pointer;
}

.vacation-group.clickable:hover .vacation-block {
  filter: brightness(1.08);
}

.vacation-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 8px;
  font-weight: 700;
  dominant-baseline: hanging;
  pointer-events: none;
  fill: var(--vacation-text);
}

.vacation-block--pending + .vacation-text,
.vacation-group .vacation-block--pending ~ .vacation-text {
  fill: var(--vacation-pending-text);
}

.vrij-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 600;
  pointer-events: none;
  fill: var(--vrij-fill);
  opacity: 0.8;
}

.booking-cancelled {
  opacity: 0.2 !important;
}

.booking-cancelled-overlay {
  pointer-events: none;
}

.lesson-noshow-overlay {
  pointer-events: none;
  opacity: 0.45;
}

.booking-cancelled-group {
  cursor: pointer;
}

.label-text-compact {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  fill: var(--svg-text);
  text-anchor: end;
  dominant-baseline: middle;
}

.lesson-text-compact {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  dominant-baseline: hanging;
  pointer-events: none;
  fill: #1a1a2e;
}

.lesson-pupil-name {
  font-size: 12px;
  font-weight: 400;
}

.lesson-warning-icon {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: var(--md-on-error);
  dominant-baseline: hanging;
  pointer-events: none;
}

.lesson-weeks-remaining {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  fill: #1a1a2e;
  text-anchor: end;
  dominant-baseline: hanging;
  pointer-events: none;
  opacity: 1;
}
.lesson-weeks-remaining--open-ended {
  font-weight: 400;
}
.lesson-weeks-remaining--catch-up {
  font-size: 16px;
  opacity: 0.85;
}

.roster-cell {
  padding: 0 !important;
  vertical-align: top;
}

.empty-slot-target {
  fill: transparent;
  cursor: pointer;
  transition: fill 100ms cubic-bezier(0.2, 0, 0, 1);
}
.empty-slot-target:hover {
  fill: color-mix(in srgb, var(--md-primary), transparent 60%);
}

@media (prefers-color-scheme: dark) {
  .empty-slot-target:hover {
    fill: color-mix(in srgb, var(--md-primary), transparent 50%);
  }
}
body.dark-mode .empty-slot-target:hover {
  fill: color-mix(in srgb, var(--md-primary), transparent 50%);
}

.roster-wide {
  max-width: none;
}

.roster-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.roster-table th:first-child, .roster-table th:nth-child(2), .roster-table td:first-child, .roster-table td:nth-child(2) {
  box-sizing: border-box;
  position: sticky;
  z-index: 1;
}
.roster-table th:first-child, .roster-table td:first-child {
  left: 0;
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}
.roster-table th:nth-child(2), .roster-table td:nth-child(2) {
  left: 3rem;
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
}
.roster-table thead th {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.25rem;
  text-align: center;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  top: 0;
  z-index: 2;
  border-right: 1px solid var(--md-outline-variant);
}
.roster-table thead th:first-child, .roster-table thead th:nth-child(2) {
  z-index: 3;
}
.roster-table thead th:nth-child(n+3) {
  min-width: 9rem;
}
.roster-table thead th:last-child {
  border-right: none;
}
.roster-table tbody td {
  padding: 0;
  vertical-align: top;
  border-right: 1px solid var(--md-outline-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}
.roster-table tbody td:first-child, .roster-table tbody td:nth-child(2) {
  background: var(--md-surface-container-lowest);
}
.roster-table tbody td:last-child {
  border-right: none;
}
.roster-table td.roster-cell svg {
  display: block;
  width: 100%;
}

.roster-table--compact thead th:nth-child(n+3) {
  min-width: 70px;
  width: 70px;
}

.roster-table tr.roster-today > td:first-child,
.roster-table tr.roster-today > td:nth-child(2) {
  background: color-mix(in srgb, var(--md-primary), var(--md-surface-container-lowest) 85%);
}

.roster-scroll {
  overflow: auto;
  max-height: 80vh;
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  background: var(--md-surface-container-lowest);
}

.roster-table thead th.roster-th-tutor {
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.roster-table thead th.roster-th-tutor:hover {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.roster-table--names-stacked thead th:nth-child(n+3) {
  min-width: 6.5rem;
}

.roster-th-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.6875rem;
}
.roster-th-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-nav--roster {
  margin: 0 0 0.75rem 0;
}
.week-nav--roster .week-label {
  white-space: nowrap;
  flex-shrink: 0;
}
.week-nav--roster .week-select:not(.location-select) {
  flex: 0 1 auto;
  min-width: 10rem;
}
.week-nav--roster .location-select {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 9rem;
}

#BS_popup_content:has(.location-roster-view) {
  padding: 0.75rem;
  gap: 0.5rem;
}

.controls-hint {
  position: fixed;
  bottom: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--md-surface-container), transparent 10%);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  z-index: 10;
  opacity: 0.7;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.controls-hint:hover {
  opacity: 1;
}
.controls-hint span {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
@media (max-width: 839px) {
  .controls-hint {
    display: none;
  }
}

.mark-day-btn {
  all: unset;
  display: none;
  cursor: pointer;
  line-height: 0;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  border-radius: 0.25rem;
  padding: 0.15rem;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.mark-day-btn:active {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
@media (max-width: 839px) {
  .mark-day-btn {
    display: inline-block;
  }
}

.svg-defs-only {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

main:has(.week-roster-view) {
  padding-top: 0;
}

main > div:has(.week-roster-view) {
  padding-top: 0;
}

#BS_popup_content:has(.week-roster-view) {
  padding-block: 0;
}

:root {
  --week-roster-pane-max: 70vh;
}

.week-roster-pair {
  display: flex;
  overflow: auto;
  max-height: var(--week-roster-pane-max);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  background: var(--md-surface-container-lowest);
}
@media (min-width: 600px) {
  .week-roster-pair {
    align-items: flex-start;
  }
}
@media (max-width: 599px) {
  .week-roster-pair {
    flex-direction: column;
  }
}
.week-roster-pair > :first-child {
  flex: 4;
}
@media (min-width: 600px) {
  .week-roster-pair > :first-child {
    border-right: 1px solid var(--md-outline-variant);
  }
}
.week-roster-pair > :last-child {
  flex: 3;
}
@media (min-width: 600px) {
  .week-roster-pair > :last-child .week-roster thead th:first-child,
  .week-roster-pair > :last-child .week-roster tbody td:first-child {
    display: none;
  }
}
@media (max-width: 599px) {
  .week-roster-pair > :last-child {
    border-top: 1px solid var(--md-outline-variant);
  }
}

@media print {
  .week-roster-pair {
    max-height: none;
    overflow: visible;
  }
}
.week-roster-scroll {
  overflow: visible;
}

.week-roster {
  border-collapse: separate;
  border-spacing: 0;
}
.week-roster thead th {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem;
  text-align: center;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  border-right: 1px solid var(--md-outline-variant);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.week-roster thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}
.week-roster thead th:last-child {
  border-right: none;
}
.week-roster tbody td {
  padding: 0;
  vertical-align: top;
  border-right: 1px solid var(--md-outline-variant);
}
.week-roster tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--md-surface-container-lowest);
}
.week-roster tbody td:last-child {
  border-right: none;
}
.week-roster td svg {
  display: block;
  width: 100%;
}
.week-roster thead th:first-child,
.week-roster tbody td:first-child {
  min-width: 4rem;
}
.week-roster thead th:not(:first-child),
.week-roster tbody td:not(:first-child) {
  min-width: 2.75rem;
}
.week-roster .week-roster-today {
  background: color-mix(in srgb, var(--md-primary), transparent 85%);
}
.week-roster thead th.week-roster-today {
  background: color-mix(in srgb, var(--md-primary), var(--md-surface-container) 30%);
}

.tutor-stat-card {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.tutor-stat-card h3 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.5rem 0;
}

.service-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.service-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: var(--md-surface-container);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}

.service-code {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--md-primary-text);
}

.service-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--service-colour, var(--md-outline));
}

.roster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}

.roster-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.service-capacity {
  color: var(--md-on-surface-variant);
}

.service-minutes {
  color: var(--md-on-surface-variant);
}

.service-unmarked {
  color: var(--md-error);
  font-weight: 600;
}

.service-cancelled {
  color: var(--md-on-surface-variant);
  font-weight: 600;
}

.problems-section {
  margin-top: 1rem;
}
.problems-section h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.problem-groups {
  max-height: 21.6rem;
  overflow-y: auto;
}

.this-week-section {
  max-height: 21.6rem;
  overflow-y: auto;
}

.problem-group {
  margin-bottom: 1rem;
}
.problem-group h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.5rem 0;
}
.problem-group--empty {
  margin-bottom: 0.5rem;
}
.problem-group--empty h3 {
  margin-bottom: 0;
  color: var(--md-on-surface-variant);
}

.problem-count {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  white-space: nowrap;
}

.problem-count--warn {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--bee-gold-soft);
  color: var(--md-on-surface);
  white-space: nowrap;
}

.problem-count--zero {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

.problem-hint {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
  font-style: italic;
  font-weight: 400;
}

.problem-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  overflow: hidden;
}
.problem-table th {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.25rem 0.75rem;
  text-align: left;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
}
.problem-table td {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
}
.problem-table tr:last-child td {
  border-bottom: none;
}
.problem-table tr {
  cursor: pointer;
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}
.problem-table tr:hover {
  background: color-mix(in srgb, var(--md-primary), transparent 94%);
}

.problem-table--static tr {
  cursor: default;
}
.problem-table--static tr:hover {
  background: none;
}

@media (max-width: 40rem) {
  .problem-groups .problem-table {
    /* The wrapper's boxed surface reads as one solid block behind the cards —
     * strip it so the cards sit on the bare panel with clear gaps between. */
    background: transparent;
    border: none;
  }
  .problem-groups .problem-table table, .problem-groups .problem-table thead, .problem-groups .problem-table tbody, .problem-groups .problem-table tr, .problem-groups .problem-table td {
    display: block;
  }
  .problem-groups .problem-table {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .problem-groups .problem-table thead {
    display: none;
  }
  .problem-groups .problem-table {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .problem-groups .problem-table tbody tr, .problem-groups .problem-table tbody tr:nth-child(even) {
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .problem-groups .problem-table {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .problem-groups .problem-table tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .problem-groups .problem-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--hairline);
    padding: 7px 14px;
    text-align: right;
  }
  .problem-groups .problem-table td:last-child {
    border-bottom: none;
  }
  .problem-groups .problem-table .caption {
    display: inline-block;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    margin-right: 12px;
    min-width: 40%;
  }
  .problem-groups .problem-table .rowMenuCell {
    justify-content: center;
    padding: 4px;
  }
  .problem-groups .problem-table {
    display: block;
    overflow: visible;
  }
}
.archived-section {
  margin-top: 1rem;
}
.archived-section h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  header {
    background: linear-gradient(135deg, #1C1428, #18101E);
    border-bottom: 2px solid rgba(251, 191, 36, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.15);
  }
}
body.dark-mode header {
  background: linear-gradient(135deg, #1C1428, #18101E);
  border-bottom: 2px solid rgba(251, 191, 36, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: light) {
  :root {
    --body-bg-gradient: radial-gradient(ellipse 70% 45% at 15% 0%, rgba(255, 255, 255, 0.5), transparent 70%), radial-gradient(ellipse 60% 40% at 85% 18%, rgba(255, 255, 255, 0.38), transparent 65%), radial-gradient(ellipse 80% 55% at 50% 100%, rgba(222, 247, 253, 0.85), transparent 80%), linear-gradient(180deg, #AFE6FA 0%, #BCE9F9 40%, #DEF7FD 78%, #FFFFFF 100%);
  }
}
body.light-mode {
  --body-bg-gradient: radial-gradient(ellipse 70% 45% at 15% 0%, rgba(255, 255, 255, 0.5), transparent 70%), radial-gradient(ellipse 60% 40% at 85% 18%, rgba(255, 255, 255, 0.38), transparent 65%), radial-gradient(ellipse 80% 55% at 50% 100%, rgba(222, 247, 253, 0.85), transparent 80%), linear-gradient(180deg, #AFE6FA 0%, #BCE9F9 40%, #DEF7FD 78%, #FFFFFF 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-gradient: radial-gradient(ellipse 70% 45% at 15% 0%, rgba(175, 230, 250, 0.1), transparent 70%), radial-gradient(ellipse 60% 40% at 85% 18%, rgba(255, 255, 255, 0.05), transparent 65%), radial-gradient(ellipse 80% 55% at 50% 100%, rgba(27, 74, 102, 0.45), transparent 80%), linear-gradient(180deg, #16293F 0%, #101F31 40%, #0B1624 78%, #070E18 100%);
  }
}
body.dark-mode {
  --body-bg-gradient: radial-gradient(ellipse 70% 45% at 15% 0%, rgba(175, 230, 250, 0.1), transparent 70%), radial-gradient(ellipse 60% 40% at 85% 18%, rgba(255, 255, 255, 0.05), transparent 65%), radial-gradient(ellipse 80% 55% at 50% 100%, rgba(27, 74, 102, 0.45), transparent 80%), linear-gradient(180deg, #16293F 0%, #101F31 40%, #0B1624 78%, #070E18 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g><animateMotion path='M-150 140 C 250 40, 500 260, 800 160 S 1300 60, 1750 200' dur='38s' begin='-10s' repeatCount='indefinite'/><g transform='scale(1.2) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.5s' repeatCount='indefinite'/><g transform='rotate(-6 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.2s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.2s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 320 C 1400 220, 1150 460, 850 360 S 350 240, -150 380' dur='46s' begin='-25s' repeatCount='indefinite'/><g transform='scale(0.95) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.8s' repeatCount='indefinite'/><g transform='rotate(7 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.18s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.18s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 700 C 250 620, 500 780, 800 690 C 950 645, 1080 660, 1140 765 C 1155 795, 1150 800, 1150 802 C 1150 766, 1190 700, 1280 640 C 1400 560, 1600 520, 1750 560 L 1900 980 L -300 980 L -150 730 C 0 700, 150 740, 300 700 C 370 680, 430 720, 448 780 C 452 795, 450 800, 450 802 C 450 760, 500 690, 600 660 C 850 600, 1100 720, 1350 640 C 1500 590, 1650 600, 1750 620 L 1900 980 L -300 980 L -150 680 C 150 620, 350 740, 560 690 C 660 660, 760 690, 812 770 C 822 795, 820 800, 820 802 C 820 760, 870 690, 970 650 C 1200 580, 1500 660, 1750 600 L 1900 980 L -300 980 L -150 700' dur='180s' begin='-20s' repeatCount='indefinite' keyPoints='0;0.06399;0.08924;0.09186;0.09146;0.09186;0.09146;0.09186;0.10617;0.1389;0.33545;0.36572;0.37826;0.37975;0.37935;0.37975;0.37935;0.37975;0.39436;0.44489;0.47198;0.66772;0.71552;0.73453;0.73675;0.73635;0.73675;0.73635;0.73675;0.75172;0.80421;1' keyTimes='0;0.15;0.19444;0.21111;0.21944;0.22778;0.23611;0.24444;0.26667;0.31667;0.33333;0.40556;0.42778;0.43889;0.44722;0.45556;0.46389;0.47222;0.49444;0.57778;0.62222;0.66667;0.76944;0.80278;0.81389;0.82222;0.83056;0.83889;0.84722;0.86944;0.95556;1' calcMode='linear'/><g transform='scale(1.3) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.3s' repeatCount='indefinite'/><g transform='rotate(-4 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.22s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.22s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 90 C 1350 160, 1050 40, 750 120 S 250 180, -150 80' dur='60s' begin='-5s' repeatCount='indefinite'/><g transform='scale(0.7) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='2s' repeatCount='indefinite'/><g transform='rotate(9 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.17s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.17s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 820 C 250 760, 500 560, 850 520 S 1350 320, 1750 240' dur='44s' begin='-18s' repeatCount='indefinite'/><g transform='scale(1.05) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.6s' repeatCount='indefinite'/><g transform='rotate(-12 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.21s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.21s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 600 C 1300 680, 1000 520, 700 620 S 250 720, -150 560' dur='36s' begin='-30s' repeatCount='indefinite'/><g transform='scale(0.85) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.7s' repeatCount='indefinite'/><g transform='rotate(5 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.19s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.19s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g transform='translate(1150 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.183;0.197;0.256;0.269;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(450 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.411;0.425;0.483;0.497;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(820 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.786;0.8;0.858;0.872;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.3;
}

body.bees-coral-visitor::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g><animateMotion path='M-150 140 C 250 40, 500 260, 800 160 S 1300 60, 1750 200' dur='38s' begin='-10s' repeatCount='indefinite'/><g transform='scale(1.2) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.5s' repeatCount='indefinite'/><g transform='rotate(-6 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.2s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.2s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 320 C 1400 220, 1150 460, 850 360 S 350 240, -150 380' dur='46s' begin='-25s' repeatCount='indefinite'/><g transform='scale(0.95) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.8s' repeatCount='indefinite'/><g transform='rotate(7 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.18s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.18s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 700 C 250 620, 500 780, 800 690 C 950 645, 1080 660, 1140 765 C 1155 795, 1150 800, 1150 802 C 1150 766, 1190 700, 1280 640 C 1400 560, 1600 520, 1750 560 L 1900 980 L -300 980 L -150 730 C 0 700, 150 740, 300 700 C 370 680, 430 720, 448 780 C 452 795, 450 800, 450 802 C 450 760, 500 690, 600 660 C 850 600, 1100 720, 1350 640 C 1500 590, 1650 600, 1750 620 L 1900 980 L -300 980 L -150 680 C 150 620, 350 740, 560 690 C 660 660, 760 690, 812 770 C 822 795, 820 800, 820 802 C 820 760, 870 690, 970 650 C 1200 580, 1500 660, 1750 600 L 1900 980 L -300 980 L -150 700' dur='180s' begin='-20s' repeatCount='indefinite' keyPoints='0;0.06399;0.08924;0.09186;0.09146;0.09186;0.09146;0.09186;0.10617;0.1389;0.33545;0.36572;0.37826;0.37975;0.37935;0.37975;0.37935;0.37975;0.39436;0.44489;0.47198;0.66772;0.71552;0.73453;0.73675;0.73635;0.73675;0.73635;0.73675;0.75172;0.80421;1' keyTimes='0;0.15;0.19444;0.21111;0.21944;0.22778;0.23611;0.24444;0.26667;0.31667;0.33333;0.40556;0.42778;0.43889;0.44722;0.45556;0.46389;0.47222;0.49444;0.57778;0.62222;0.66667;0.76944;0.80278;0.81389;0.82222;0.83056;0.83889;0.84722;0.86944;0.95556;1' calcMode='linear'/><g transform='scale(1.3) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.3s' repeatCount='indefinite'/><g transform='rotate(-4 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.22s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.22s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 90 C 1350 160, 1050 40, 750 120 S 250 180, -150 80' dur='60s' begin='-5s' repeatCount='indefinite'/><g transform='scale(0.7) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='2s' repeatCount='indefinite'/><g transform='rotate(9 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.17s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.17s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 820 C 250 760, 500 560, 850 520 S 1350 320, 1750 240' dur='44s' begin='-18s' repeatCount='indefinite'/><g transform='scale(1.05) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.6s' repeatCount='indefinite'/><g transform='rotate(-12 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.21s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.21s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 600 C 1300 680, 1000 520, 700 620 S 250 720, -150 560' dur='36s' begin='-30s' repeatCount='indefinite'/><g transform='scale(0.85) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.7s' repeatCount='indefinite'/><g transform='rotate(5 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.19s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.19s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g transform='translate(1150 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.183;0.197;0.256;0.269;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(450 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.411;0.425;0.483;0.497;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(820 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.786;0.8;0.858;0.872;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g></svg>");
}

body.bees-coral-pollinator::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g><animateMotion path='M-150 140 C 250 40, 500 260, 800 160 S 1300 60, 1750 200' dur='38s' begin='-10s' repeatCount='indefinite'/><g transform='scale(1.2) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.5s' repeatCount='indefinite'/><g transform='rotate(-6 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.2s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.2s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 320 C 1400 220, 1150 460, 850 360 S 350 240, -150 380' dur='46s' begin='-25s' repeatCount='indefinite'/><g transform='scale(0.95) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.8s' repeatCount='indefinite'/><g transform='rotate(7 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.18s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.18s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 700 C 250 620, 500 780, 800 690 C 950 645, 1080 660, 1140 765 C 1155 795, 1150 800, 1150 802 C 1150 766, 1190 700, 1280 640 C 1400 560, 1600 520, 1750 560 L 1900 980 L -300 980 L -150 730 C 0 700, 150 740, 300 700 C 370 680, 430 720, 448 780 C 452 795, 450 800, 450 802 C 450 760, 500 690, 600 660 C 850 600, 1100 720, 1350 640 C 1500 590, 1650 600, 1750 620 L 1900 980 L -300 980 L -150 680 C 150 620, 350 740, 560 690 C 660 660, 760 690, 812 770 C 822 795, 820 800, 820 802 C 820 760, 870 690, 970 650 C 1200 580, 1500 660, 1750 600 L 1900 980 L -300 980 L -150 700' dur='180s' begin='-20s' repeatCount='indefinite' keyPoints='0;0.06399;0.08924;0.09186;0.09146;0.09186;0.09146;0.09186;0.10617;0.1389;0.33545;0.36572;0.37826;0.37975;0.37935;0.37975;0.37935;0.37975;0.39436;0.44489;0.47198;0.66772;0.71552;0.73453;0.73675;0.73635;0.73675;0.73635;0.73675;0.75172;0.80421;1' keyTimes='0;0.15;0.19444;0.21111;0.21944;0.22778;0.23611;0.24444;0.26667;0.31667;0.33333;0.40556;0.42778;0.43889;0.44722;0.45556;0.46389;0.47222;0.49444;0.57778;0.62222;0.66667;0.76944;0.80278;0.81389;0.82222;0.83056;0.83889;0.84722;0.86944;0.95556;1' calcMode='linear'/><g transform='scale(1.3) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.3s' repeatCount='indefinite'/><g transform='rotate(-4 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.22s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.22s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 90 C 1350 160, 1050 40, 750 120 S 250 180, -150 80' dur='60s' begin='-5s' repeatCount='indefinite'/><g transform='scale(0.7) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='2s' repeatCount='indefinite'/><g transform='rotate(9 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.17s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.17s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 820 C 250 760, 500 560, 850 520 S 1350 320, 1750 240' dur='44s' begin='-18s' repeatCount='indefinite'/><g transform='scale(1.05) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.6s' repeatCount='indefinite'/><g transform='rotate(-12 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.21s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.21s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 600 C 1300 680, 1000 520, 700 620 S 250 720, -150 560' dur='36s' begin='-30s' repeatCount='indefinite'/><g transform='scale(0.85) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.7s' repeatCount='indefinite'/><g transform='rotate(5 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.19s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.19s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></g><g transform='translate(1150 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.183;0.197;0.256;0.269;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(450 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.411;0.425;0.483;0.497;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(820 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.786;0.8;0.858;0.872;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g></svg>");
}

body.bees-commemoration::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g><animateMotion path='M-150 140 C 250 40, 500 260, 800 160 S 1300 60, 1750 200' dur='38s' begin='-10s' repeatCount='indefinite'/><g transform='scale(1.2) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.5s' repeatCount='indefinite'/><g transform='rotate(-6 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.2s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.2s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 320 C 1400 220, 1150 460, 850 360 S 350 240, -150 380' dur='46s' begin='-25s' repeatCount='indefinite'/><g transform='scale(0.95) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.8s' repeatCount='indefinite'/><g transform='rotate(7 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.18s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.18s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 700 C 250 620, 500 780, 800 690 C 950 645, 1080 660, 1140 765 C 1155 795, 1150 800, 1150 802 C 1150 766, 1190 700, 1280 640 C 1400 560, 1600 520, 1750 560 L 1900 980 L -300 980 L -150 730 C 0 700, 150 740, 300 700 C 370 680, 430 720, 448 780 C 452 795, 450 800, 450 802 C 450 760, 500 690, 600 660 C 850 600, 1100 720, 1350 640 C 1500 590, 1650 600, 1750 620 L 1900 980 L -300 980 L -150 680 C 150 620, 350 740, 560 690 C 660 660, 760 690, 812 770 C 822 795, 820 800, 820 802 C 820 760, 870 690, 970 650 C 1200 580, 1500 660, 1750 600 L 1900 980 L -300 980 L -150 700' dur='180s' begin='-20s' repeatCount='indefinite' keyPoints='0;0.06399;0.08924;0.09186;0.09146;0.09186;0.09146;0.09186;0.10617;0.1389;0.33545;0.36572;0.37826;0.37975;0.37935;0.37975;0.37935;0.37975;0.39436;0.44489;0.47198;0.66772;0.71552;0.73453;0.73675;0.73635;0.73675;0.73635;0.73675;0.75172;0.80421;1' keyTimes='0;0.15;0.19444;0.21111;0.21944;0.22778;0.23611;0.24444;0.26667;0.31667;0.33333;0.40556;0.42778;0.43889;0.44722;0.45556;0.46389;0.47222;0.49444;0.57778;0.62222;0.66667;0.76944;0.80278;0.81389;0.82222;0.83056;0.83889;0.84722;0.86944;0.95556;1' calcMode='linear'/><g transform='scale(1.3) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.3s' repeatCount='indefinite'/><g transform='rotate(-4 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.22s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.22s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 90 C 1350 160, 1050 40, 750 120 S 250 180, -150 80' dur='60s' begin='-5s' repeatCount='indefinite'/><g transform='scale(0.7) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='2s' repeatCount='indefinite'/><g transform='rotate(9 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.17s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.17s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M-150 820 C 250 760, 500 560, 850 520 S 1350 320, 1750 240' dur='44s' begin='-18s' repeatCount='indefinite'/><g transform='scale(1.05) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.6s' repeatCount='indefinite'/><g transform='rotate(-12 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.21s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.21s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g><animateMotion path='M1750 600 C 1300 680, 1000 520, 700 620 S 250 720, -150 560' dur='36s' begin='-30s' repeatCount='indefinite'/><g transform='scale(0.85) translate(-32 -36)'><animateTransform attributeName='transform' type='rotate' additive='sum' values='-5 32 36;5 32 36;-5 32 36' keyTimes='0;0.5;1' calcMode='spline' keySplines='0.45 0 0.55 1;0.45 0 0.55 1' dur='1.7s' repeatCount='indefinite'/><g transform='rotate(5 32 36)'><g><animateTransform attributeName='transform' type='rotate' values='5 13.9 38;-9 13.9 38;5 13.9 38' dur='0.19s' repeatCount='indefinite'/><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-0.6s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><animateTransform attributeName='transform' type='rotate' values='-5 50.1 38;9 50.1 38;-5 50.1 38' dur='0.19s' repeatCount='indefinite'/><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><animate attributeName='opacity' values='0.45;0.95;0.45' dur='2.4s' begin='-1.8s' repeatCount='indefinite'/><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></g><g transform='translate(1150 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.183;0.197;0.256;0.269;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(450 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.411;0.425;0.483;0.497;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g><g transform='translate(820 898)'><g><animateTransform attributeName='transform' type='translate' values='0 95;0 95;0 0;0 0;0 95;0 95' keyTimes='0;0.786;0.8;0.858;0.872;1' dur='180s' begin='-20s' repeatCount='indefinite'/><path d='M0 2 C 3.5 -16, -3.5 -32, 0 -50' fill='none' stroke='%234E8F5F' stroke-width='3' stroke-linecap='round'/><path d='M-1.5 -22 C -9 -23.5, -15 -29, -16.5 -37 C -9 -35.5, -3 -30, -1.5 -22 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><path d='M1.5 -28 C 9 -29.5, 15 -35, 16.5 -43 C 9 -41.5, 3 -36, 1.5 -28 Z' fill='%2367AC76' stroke='%234E8F5F' stroke-width='1.5' stroke-linejoin='round'/><g transform='translate(0 -62)'><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(0)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(60)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(120)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(180)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(240)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='0' cy='-12.5' rx='6.8' ry='10.5' transform='rotate(300)' fill='%23F7C7D9' stroke='%232B2B3A' stroke-width='1.5'/><circle r='6.8' fill='%23F9B000' stroke='%232B2B3A' stroke-width='1.5'/><g fill='%232B2B3A' opacity='0.55'><circle cx='-2' cy='-1.5' r='0.8'/><circle cx='2.2' cy='0.8' r='0.8'/><circle cx='-0.4' cy='2.4' r='0.8'/></g></g></g></g></svg>");
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g transform='translate(200 150) scale(1.05) translate(-32 -36)'><g transform='rotate(-6 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1380 110) scale(0.75) translate(-32 -36)'><g transform='rotate(7 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1180 680) scale(1.2) translate(-32 -36)'><g transform='rotate(-4 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(320 760) scale(0.85) translate(-32 -36)'><g transform='rotate(-12 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(760 90) scale(0.9) translate(-32 -36)'><g transform='rotate(5 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1500 420) scale(1) translate(-32 -36)'><g transform='rotate(9 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></svg>");
  }
  body.bees-coral-visitor::before,
  body.bees-coral-pollinator::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g transform='translate(200 150) scale(1.05) translate(-32 -36)'><g transform='rotate(-6 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1380 110) scale(0.75) translate(-32 -36)'><g transform='rotate(7 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1180 680) scale(1.2) translate(-32 -36)'><g transform='rotate(-4 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(320 760) scale(0.85) translate(-32 -36)'><g transform='rotate(-12 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(760 90) scale(0.9) translate(-32 -36)'><g transform='rotate(5 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g><g transform='translate(1500 420) scale(1) translate(-32 -36)'><g transform='rotate(9 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23FFFFFF' opacity='0.85' stroke='%237FCDEB' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23A9DCF2' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%237FCDEB' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%232B2B3A' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%232B2B3A' stroke='%232B2B3A' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F9B000'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23FFE2A8'/><g clip-path='url(%23bb)' fill='%232B2B3A'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%232B2B3A' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%232B2B3A'/><circle cx='38.5' cy='33.5' r='2.3' fill='%232B2B3A'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%232B2B3A' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%232B2B3A' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23F2A2A2' opacity='0.7'/></g></g></svg>");
  }
  body.bees-commemoration::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><defs><clipPath id='b'><ellipse cx='32' cy='38' rx='19.5' ry='19'/></clipPath><clipPath id='bb'><ellipse cx='32' cy='54' rx='15' ry='10.5'/></clipPath></defs><g transform='translate(200 150) scale(1.05) translate(-32 -36)'><g transform='rotate(-6 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(1380 110) scale(0.75) translate(-32 -36)'><g transform='rotate(7 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(1180 680) scale(1.2) translate(-32 -36)'><g transform='rotate(-4 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(320 760) scale(0.85) translate(-32 -36)'><g transform='rotate(-12 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(760 90) scale(0.9) translate(-32 -36)'><g transform='rotate(5 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g><g transform='translate(1500 420) scale(1) translate(-32 -36)'><g transform='rotate(9 32 36)'><g><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g><g><g transform='matrix(-1 0 0 1 64 0)'><path d='M14.5 31 C13.6 28.4, 11.6 27.2, 9.4 27.7 C6.2 28.4, 3.8 30.6, 3.6 33.4 C3.5 35.7, 5.4 37.9, 8.1 38.4 C6.3 39, 4.6 40.3, 4.5 42.2 C4.5 44, 6 45.5, 8 45.4 C10 45.2, 11.8 44, 12.7 42.2 C14 39.2, 14.4 34.2, 14.5 31 Z' fill='%23EDEEF5' opacity='0.85' stroke='%23B9C0D4' stroke-width='1.5' stroke-linejoin='round'/><g fill='%23FFFFFF' opacity='0.9'><path d='M7 29.4 L7.4 30.5 L8.5 30.9 L7.4 31.3 L7 32.4 L6.6 31.3 L5.5 30.9 L6.6 30.5 Z'/><path d='M10.3 33.6 L10.65 34.6 L10.3 35.6 L9.95 34.6 Z'/><path d='M7.1 41.4 L7.4 42.3 L7.1 43.2 L6.8 42.3 Z'/></g><g fill='%23B9C0D4' opacity='0.55'><circle cx='5.3' cy='35.5' r='0.45'/><circle cx='9.3' cy='44.1' r='0.4'/><circle cx='11.3' cy='31.7' r='0.4'/></g></g></g><path d='M26 20 Q24.5 14.8 22.3 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><path d='M38 20 Q39.5 14.8 41.8 11.8' fill='none' stroke='%235A3A2C' stroke-width='2' stroke-linecap='round'/><circle cx='22.3' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><circle cx='41.8' cy='11.8' r='3.2' fill='%23F2917C' stroke='%235A3A2C' stroke-width='1.5'/><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='%23F2917C'/><g clip-path='url(%23b)'><ellipse cx='32' cy='54' rx='15' ry='10.5' fill='%23F8CFC0'/><g clip-path='url(%23bb)' fill='%237C4A38'><rect x='13' y='45' width='38' height='3.5'/><rect x='13' y='51' width='38' height='3.5'/><rect x='13' y='57' width='38' height='3.5'/></g></g><ellipse cx='32' cy='38' rx='19.5' ry='19' fill='none' stroke='%235A3A2C' stroke-width='2'/><circle cx='25.5' cy='33.5' r='2.3' fill='%23231F20'/><circle cx='38.5' cy='33.5' r='2.3' fill='%23231F20'/><path d='M23.25 33.04 L21.86 33.16 M23.43 32.49 L22.12 32.01 M23.81 31.94 L22.82 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M40.75 33.04 L42.14 33.16 M40.57 32.49 L41.88 32.01 M40.19 31.94 L41.18 30.95' fill='none' stroke='%23231F20' stroke-width='0.6' stroke-linecap='round'/><path d='M28.5 38.5 Q32 41.5 35.5 38.5' fill='none' stroke='%235A3A2C' stroke-width='1.8' stroke-linecap='round'/><ellipse cx='21.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/><ellipse cx='42.5' cy='38.5' rx='3' ry='1.8' fill='%23EE7E6B' opacity='0.7'/></g></g></svg>");
  }
}
@media (prefers-color-scheme: dark) {
  body:not(.light-mode)::before {
    opacity: 0.12;
  }
}
body.dark-mode::before {
  opacity: 0.12;
}

body.popup::before,
body.sidebar::before {
  content: none;
}

@media (prefers-color-scheme: light) {
  header {
    background: #24BBF2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }
  header nav a,
  header nav *[data--baton-controller--onclick] {
    color: #1E3A5F;
  }
  header nav a:hover,
  header nav *[data--baton-controller--onclick]:hover {
    background: #F5B625;
    color: #000000 !important;
  }
  header nav a:active,
  header nav *[data--baton-controller--onclick]:active {
    background: rgb(94.2641898865%, 67.0227038184%, 4.3240454076%);
    color: #000000 !important;
  }
}
body.light-mode header {
  background: #24BBF2;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
body.light-mode header nav a,
body.light-mode header nav *[data--baton-controller--onclick] {
  color: #1E3A5F;
}
body.light-mode header nav a:hover,
body.light-mode header nav *[data--baton-controller--onclick]:hover {
  background: #F5B625;
  color: #000000 !important;
}
body.light-mode header nav a:active,
body.light-mode header nav *[data--baton-controller--onclick]:active {
  background: rgb(94.2641898865%, 67.0227038184%, 4.3240454076%);
  color: #000000 !important;
}

body.popup .form-section,
body.sidebar .form-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1rem;
}
body.popup .form-grid .form-section,
body.sidebar .form-grid .form-section {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 0;
}

@media (max-width: 839px) {
  main > div {
    padding: 1rem;
  }
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  header > div {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
  }
  .header-left {
    order: 0;
  }
  .header-right {
    order: 1;
  }
  .nav-week {
    order: 2;
    flex-basis: 100%;
  }
  header nav {
    display: none;
  }
  button.nav-toggle {
    display: inline-flex;
  }
  .week-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .week-toolbar__nav {
    justify-content: center;
  }
  .week-toolbar__actions {
    margin-left: 0;
    justify-content: flex-end;
  }
  .week-toolbar__jumps {
    justify-content: center;
  }
  .week-toolbar__jumps select {
    min-width: 0;
    flex: 1 1 auto;
  }
  .week-toolbar-section {
    display: none;
  }
  .nav-week {
    margin-left: 0;
    flex-wrap: nowrap;
  }
  .nav-week .nav-week__label {
    display: none;
  }
  .nav-week .nav-week__status-badge {
    display: inline-flex;
  }
  .nav-week .nav-week__select {
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 599px) {
  .stat-cards {
    grid-template-columns: 1fr 1fr;
  }
  .week-nav:not(.week-nav--compact) {
    flex-wrap: wrap;
  }
  .location-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .location-nav::-webkit-scrollbar {
    display: none;
  }
}
.ability-subject {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.ability-subject + .ability-subject {
  border-top: 1px solid var(--md-outline-variant);
}

.ability-subject-name {
  min-width: 8rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--md-on-surface);
}

.ability-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ability-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 9999px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.ability-chip:hover {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}
.ability-chip--active {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-color: var(--md-primary);
}
.ability-chip--active:hover {
  background: var(--md-primary-hover, var(--md-primary));
  filter: brightness(1.1);
}

.inline-select {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.jump-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  vertical-align: middle;
}

.jump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.jump-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.jump-card:hover {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.jump-card__name {
  font-weight: 600;
  color: var(--md-on-surface);
}
.jump-card__id {
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
  font-family: monospace;
}
.jump-card__meta {
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.person-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.person-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--md-primary);
}
.person-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.person-card__head .status-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.person-card__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.person-card__name {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-card__sub {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-card__next {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface);
}
.person-card__next-label {
  display: block;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.person-card__none {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
  font-style: italic;
}

.person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
}
.person-avatar--tutor {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.person-avatar--pupil {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.person-avatar--guardian {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}

.link-text {
  color: var(--md-primary-text);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.link-text:hover {
  text-decoration-color: var(--md-primary-text);
}

.subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subject-chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.vacation-overview {
  margin-top: 1rem;
}

.vacation-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  color: var(--md-on-surface);
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.vacation-card--pending {
  background: color-mix(in srgb, var(--vacation-fill) 14%, var(--md-surface-container));
  border-color: var(--vacation-border);
  cursor: pointer;
}
.vacation-card--pending:hover {
  background: color-mix(in srgb, var(--vacation-fill) 24%, var(--md-surface-container));
}
.vacation-card .vacation-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  color: var(--vacation-border);
}
.vacation-card .vacation-info {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.vacation-card .vacation-tutor {
  font-weight: 600;
}
.vacation-card .vacation-dates {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: color-mix(in srgb, var(--md-on-surface), transparent 25%);
}

.vacation-status--pending {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--vacation-pending-fill);
  color: var(--vacation-pending-text);
  white-space: nowrap;
}
.vacation-status--approved {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
  white-space: nowrap;
}
.vacation-status--rejected {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-error);
  color: var(--md-on-error);
  white-space: nowrap;
}

.vacation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--vacation-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--vacation-fill) 6%, var(--md-surface-container-low));
  color: var(--md-on-surface-variant);
  text-align: center;
}
.vacation-empty .vacation-empty__icon {
  font-size: 1.75rem;
  opacity: 0.7;
}
.vacation-empty p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.affected-lessons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.affected-day {
  border: 1px solid var(--vacation-border);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--vacation-fill) 8%, var(--md-surface-container-low));
}

.affected-day__label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  color: var(--vacation-pending-text);
  margin-bottom: 0.5rem;
}

.affected-lesson-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--vacation-fill);
  color: var(--vacation-text);
  margin-bottom: 0.25rem;
}
.affected-lesson-tile:last-child {
  margin-bottom: 0;
}
.affected-lesson-tile .affected-lesson-time {
  font-weight: 700;
}
.affected-lesson-tile .affected-lesson-service {
  flex: 1;
}
.affected-lesson-tile .affected-lesson-pupils {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  opacity: 0.9;
}

.avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.avail-day {
  text-align: center;
  padding: 0.5rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.5rem;
  min-height: 4rem;
}

.avail-day__label {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  margin-bottom: 0.25rem;
}

.avail-block {
  display: block;
  padding: 0.25rem;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  cursor: pointer;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.avail-block:hover {
  opacity: 0.8;
}
.avail-block--availability {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.avail-block--vacation {
  background: var(--vacation-fill);
  color: var(--vacation-text);
}
.avail-block--vacation-pending {
  background: var(--vacation-pending-fill);
  color: var(--vacation-pending-text);
  border: 1.5px dashed var(--vacation-border);
}
.avail-block--cancelled {
  opacity: 0.4;
  text-decoration: line-through;
}

.avail-empty {
  margin: 0;
  padding: 0.25rem 0;
}

.cancel-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

label.cancel-option {
  display: flex !important;
  position: static !important;
  margin-bottom: 0 !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--md-outline-variant);
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.2, 0, 0, 1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
label.cancel-option:hover {
  background: var(--md-surface-variant);
}
label.cancel-option--active {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
label.cancel-option > input[type=radio] {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  height: auto !important;
  flex-shrink: 0;
  accent-color: var(--md-primary);
}
label.cancel-option > span {
  position: static !important;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  pointer-events: auto;
}

label.reminder-check {
  display: flex !important;
  position: static !important;
  margin-bottom: 0.5rem !important;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--md-outline-variant);
  cursor: pointer;
  transition: all 100ms cubic-bezier(0.2, 0, 0, 1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
label.reminder-check:hover {
  background: var(--md-surface-variant);
}
label.reminder-check--done {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
label.reminder-check > input[type=checkbox] {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  height: auto !important;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--md-primary);
}
label.reminder-check > span {
  position: static !important;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  pointer-events: auto;
}

.cancel-option__detail {
  padding-left: 2rem;
  margin-top: -0.25rem;
  margin-bottom: 0.25rem;
}
.cancel-option__detail select {
  width: 100%;
}

.unavailability-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--md-error-container);
  border: 1px solid var(--md-error);
  border-radius: 0.75rem;
  color: var(--md-on-error-container);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  margin: 0.75rem 0;
}

.status-badge.status--admin {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.status-badge.status--tutor {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.status-badge.status--pupil {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

.status-badge.status--guardian {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}

.search-input {
  flex: 1;
  min-width: 12rem;
  max-width: 20rem;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-outline:hover {
  background: var(--md-surface-container);
  border-color: var(--md-outline);
}

.row--inactive {
  opacity: 0.6;
}

.row--warning {
  background: color-mix(in srgb, var(--md-secondary-container) 30%, transparent);
}

.vouchers-section h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1rem;
  color: var(--md-on-surface-variant);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}

.text-muted {
  color: var(--md-on-surface-variant);
}

.form-hint--warn {
  color: var(--md-error);
}

.tutor-identity {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.tutor-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}
.tutor-meta .dot-sep {
  color: var(--md-outline);
}

.subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.subject-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}
.subject-chip .subject-chip__name {
  font-weight: 600;
  color: var(--md-on-surface);
}
.subject-chip .subject-chip__level {
  color: var(--md-on-surface-variant);
}

.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.stat-chip .stat-chip__value {
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1;
  color: var(--md-primary-text);
}
.stat-chip .stat-chip__label {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-top: 0.25rem;
}
.stat-chip.stat-chip--warn {
  background: var(--bee-gold-soft);
  border-color: var(--bee-gold);
}
.stat-chip.stat-chip--warn .stat-chip__value {
  color: var(--md-on-surface);
}
.stat-chip.stat-chip--warn .stat-chip__label {
  color: var(--md-on-surface);
}

.today-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.today-lesson {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-left: 4px solid var(--service-colour, var(--md-outline));
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.today-lesson:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateX(2px);
}
.today-lesson .today-lesson__time {
  display: flex;
  flex-direction: column;
  min-width: 4rem;
  flex-shrink: 0;
}
.today-lesson .today-lesson__start {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--md-on-surface);
}
.today-lesson .today-lesson__finish {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}
.today-lesson .today-lesson__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.today-lesson .today-lesson__who {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant);
}
.today-lesson .lesson-status {
  margin-left: auto;
  flex-shrink: 0;
}
.today-lesson.lesson-kwaliteitsles {
  border-left-color: #00802B;
}
.today-lesson.today-lesson--cancelled {
  opacity: 0.6;
}
.today-lesson.today-lesson--cancelled .today-lesson__start, .today-lesson.today-lesson--cancelled .service-code {
  text-decoration: line-through;
}

.lesson-status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.lesson-status.lesson-status--ok {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.lesson-status.lesson-status--todo {
  background: var(--bee-gold-soft);
  color: var(--md-on-surface);
}
.lesson-status.lesson-status--pending {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}
.lesson-status.lesson-status--none {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}
.lesson-status.lesson-status--cancelled {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.section-head h2 {
  margin: 0;
}

.section-sub {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 400;
  color: var(--md-on-surface-variant);
  margin-left: 0.5rem;
}

.action-subhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 1rem 0 0.5rem;
}

.week-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.week-strip__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 0;
  min-width: 3rem;
  padding: 0.5rem 0.25rem;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 0.75rem;
}
.week-strip__day .week-strip__abbr {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.week-strip__day .week-strip__count {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--md-on-surface);
}
.week-strip__day.week-strip__day--today {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
}
.week-strip__day.week-strip__day--today .week-strip__abbr, .week-strip__day.week-strip__day--today .week-strip__count {
  color: var(--md-on-primary-container);
}
.week-strip__day.week-strip__day--empty:not(.week-strip__day--today) .week-strip__count {
  color: var(--md-outline);
}

.btn-attend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--md-tertiary);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  cursor: pointer;
  white-space: nowrap;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), box-shadow 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-attend .check-icon {
  flex-shrink: 0;
}
.btn-attend:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  filter: brightness(1.03);
}
.btn-attend:active {
  transform: scale(0.97);
}
.btn-attend.btn-attend--sm {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  padding: 0.125rem 0.5rem;
}

.today-lesson .btn-attend {
  margin-left: auto;
  flex-shrink: 0;
}

.attendance-day-head td {
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}
.attendance-day-head td .attendance-day-head__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface);
  text-transform: capitalize;
}

.hours-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 1rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--md-outline-variant);
  border-left: 4px solid var(--md-primary-text);
  border-radius: 1rem;
  background: var(--md-surface-container-lowest);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}
@media (max-width: 599px) {
  .hours-hero {
    padding: 1rem;
    gap: 0.75rem;
  }
}

.hours-hero__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}

.hours-hero__value {
  font-size: 3.5625rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1;
  color: var(--md-primary-text);
}

.hours-hero__unit {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface);
}

.hours-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
  min-width: 0;
}
@media (max-width: 599px) {
  .hours-hero__aside {
    align-items: flex-start;
    text-align: left;
  }
}

.hours-hero__week {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.hours-hero__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
}
@media (max-width: 599px) {
  .hours-hero__status {
    justify-content: flex-start;
  }
}

.hours-report .stat-cards {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 14rem));
  justify-content: start;
}

.stat-card--muted {
  opacity: 0.85;
}
.stat-card--muted .stat-value {
  color: var(--md-on-surface-variant);
}

.hours-note {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
}

.hours-note--todo {
  background: var(--md-secondary-container);
  border-color: var(--md-secondary);
  color: var(--md-on-secondary-container);
}

.hours-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
}

.hours-service {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-lowest);
}

.hours-service__name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface);
}

.hours-service__hours {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--md-primary-text);
}

.hours-service__lessons {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-on-surface-variant);
}

.hours-trend {
  margin: 1.5rem 0 0 0;
  max-width: 44rem;
}
@media (max-width: 599px) {
  .hours-trend .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.hours-chart-scroll {
  overflow-x: auto;
}

.hours-chart {
  display: block;
  width: 100%;
  min-width: 30rem;
  max-width: 44rem;
  height: auto;
}

.hours-chart__axis {
  stroke: var(--md-outline-variant);
  stroke-width: 1.5px;
}

.hours-bar {
  cursor: pointer;
}
.hours-bar .hours-bar__hit {
  fill: transparent;
}
.hours-bar .hours-bar__delivered {
  fill: color-mix(in srgb, var(--md-primary-text), transparent 55%);
  transition: fill 100ms cubic-bezier(0.2, 0, 0, 1);
}
.hours-bar .hours-bar__planned {
  fill: color-mix(in srgb, var(--md-primary-text), transparent 88%);
  stroke: color-mix(in srgb, var(--md-primary-text), transparent 45%);
  stroke-width: 1.5px;
  stroke-dasharray: 4 3;
}
.hours-bar:hover .hours-bar__delivered {
  fill: color-mix(in srgb, var(--md-primary-text), transparent 25%);
}
.hours-bar--active .hours-bar__delivered {
  fill: var(--md-primary-text);
}
.hours-bar--active .hours-bar__week {
  fill: var(--md-primary-text);
  font-weight: 700;
}

.hours-bar__value {
  fill: var(--md-on-surface);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.hours-bar__extra {
  fill: var(--md-on-surface-variant);
  font-weight: 500;
}

.hours-bar__week {
  fill: var(--md-on-surface-variant);
  font-size: 13px;
  text-anchor: middle;
}

.hours-bar__date {
  fill: var(--md-on-surface-variant);
  font-size: 11px;
  text-anchor: middle;
  opacity: 0.7;
}

.hours-total-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--md-primary-text), transparent 88%);
  color: var(--md-primary-text);
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}

.hours-day-head td {
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: 0.5rem 0.75rem;
}

.hours-day-head__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface);
  text-transform: capitalize;
}

.hours-day-total {
  float: right;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-primary-text);
  white-space: nowrap;
}

.hours-row--excluded {
  color: var(--md-on-surface-variant);
}

.pay-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.pay-badge--paid {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}
.pay-badge--late {
  background: color-mix(in srgb, var(--md-error-container), var(--md-error) 20%);
  color: var(--md-on-error-container);
}
.pay-badge--todo {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.pay-badge--planned {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}
.pay-badge--off {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  opacity: 0.7;
}

.hours-explainer {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface-variant);
  margin: 0;
  padding-left: 1.25rem;
}
.hours-explainer li {
  margin-bottom: 0.5rem;
}