@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css");
@import url("https://cdn.jsdelivr.net/npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.css");
h1:focus {
  outline: none;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.zw-code-block {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color, #dee2e6);
}

.zw-code-label {
  background: var(--bs-secondary-bg, #e9ecef);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color, #6c757d);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.zw-code-heading {
  margin-bottom: 0.5rem;
}

.zw-code-block pre {
  margin: 0;
  border-radius: 0;
}

.navbar .navbar-toggler {
  display: none;
}

.zw-nav-desktop {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zw-nav-desktop .nav-item.dropdown:hover > .dropdown-menu,
.zw-nav-desktop .dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0;
}

.zw-nav-desktop .dropend > .dropdown-menu {
  top: 0;
  left: 100%;
}

.zw-nav-mobile {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  z-index: 1050;
  transition: left 0.25s ease;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  display: none;
}
.zw-nav-mobile.open {
  left: 0;
}

.zw-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1040;
}

.zw-nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  font-weight: 600;
  font-size: 1.1rem;
}

.zw-nav-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  color: var(--bs-body-color, #212529);
}

.zw-nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.zw-nav-mobile-list li {
  padding: 0.5rem 1rem;
}
.zw-nav-mobile-list a {
  color: var(--bs-body-color, #212529);
  text-decoration: none;
  display: block;
}
.zw-nav-mobile-list a:hover {
  text-decoration: underline;
}

.zw-nav-mobile-label {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 991.98px) {
  .navbar .navbar-toggler {
    display: inline-flex;
  }
  .zw-nav-desktop {
    display: none !important;
  }
  .zw-nav-mobile {
    display: block;
  }
}
.zw-hero {
  position: relative;
  width: 100%;
  max-height: var(--zw-hero-max-height, none);
  max-width: var(--zw-hero-max-width, none);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.zw-hero-image {
  position: relative;
  width: 100%;
}

.zw-hero-slide-img {
  display: block;
  width: 100%;
  height: var(--zw-hero-max-height, 300px);
  object-fit: cover;
}

.zw-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background: radial-gradient(ellipse at var(--zw-overlay-x, 50%) var(--zw-overlay-y, 100%), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%);
}

.zw-hero-overlay-left {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 2rem;
}

.zw-hero-overlay-center {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.zw-hero-overlay-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding: 2rem;
}

.zw-hero-caption {
  max-width: 700px;
  padding: 1.5rem;
  animation: zwHeroFadeUp 0.8s ease-out;
}

.zw-hero-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .zw-hero-title {
    font-size: 3rem;
  }
}
@media (min-width: 1200px) {
  .zw-hero-title {
    font-size: 3.5rem;
  }
}

.zw-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
  .zw-hero-subtitle {
    font-size: 1.25rem;
  }
}

.zw-hero-cta {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zw-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.zw-hero-carousel .carousel-indicators {
  margin-bottom: 1.5rem;
}
.zw-hero-carousel .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: transparent;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.zw-hero-carousel .carousel-indicators [data-bs-target].active {
  background-color: #fff;
  opacity: 1;
  transform: scale(1.2);
}
.zw-hero-carousel .carousel-control-prev,
.zw-hero-carousel .carousel-control-next {
  width: 5%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zw-hero-carousel:hover .carousel-control-prev,
.zw-hero-carousel:hover .carousel-control-next {
  opacity: 0.8;
}

@keyframes zwHeroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* zword-slider2.css — styles for the ZwordSlider2 component (docs/done/ACTION_PLAN_HeroRebuild.md).
   Compiled into css/zw-client.css (ZwordStyle.scss); sites link it when they switch to ZwordSlider2.

   Sizing rule: the hero has a shape (aspect ratio), not a height, so the crop is the
   same at any width. Text sizes use cqi (1% of the slider's own width), so a 1440px
   hero shown smaller in the editor looks the same, only scaled.
   The phone layout switches on the slider's width (< 768px), not the window's. */
.zword-slider2 {
  container: zword-slider2/inline-size;
  position: relative;
  width: 100%;
  max-width: var(--zw-max-w, none);
  margin-inline: auto;
}

.zword-slider2:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.zword-slider2--bleed {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* ---- stage --------------------------------------------------------- */
.zword-slider2__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--zw-ratio, 2.4);
  max-height: var(--zw-max-h, none);
  min-height: var(--zw-min-h, 0);
  background: #111;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.zword-slider2__slide {
  --zw-d: 1;
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
}

.zword-slider2__slide[data-dir="-1"] {
  --zw-d: -1;
}

/* Before the script runs (or without it), show the first slide. */
.zword-slider2:not([data-ready]) .zword-slider2__slide:first-child,
.zword-slider2__slide[data-state=active] {
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

.zword-slider2__slide[data-state=leaving] {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

/* ---- transitions (the incoming slide's choice) ----------------------- */
.zword-slider2__slide[data-state=active][data-anim=crossfade] {
  animation: zws2-fade-in 0.8s ease both;
}

.zword-slider2__slide[data-state=active][data-anim=zoom] {
  animation: zws2-zoom-in 0.9s ease both;
}

.zword-slider2__slide[data-state=leaving][data-anim=zoom] {
  animation: zws2-fade-out 0.9s ease both;
}

.zword-slider2__slide[data-state=active][data-anim=slide] {
  animation: zws2-slide-in 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.zword-slider2__slide[data-state=leaving][data-anim=slide] {
  animation: zws2-slide-out 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* ---- image --------------------------------------------------------- */
.zword-slider2__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.zword-slider2__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform-origin: var(--fx, 50%) var(--fy, 50%);
}

/* Ken Burns runs through the slide and its exit, starting at the focal point. */
.zword-slider2__slide[data-kenburns=in][data-state] .zword-slider2__img {
  animation: zws2-kb-in var(--zw-kb, 6s) linear both;
}

.zword-slider2__slide[data-kenburns=out][data-state] .zword-slider2__img {
  animation: zws2-kb-out var(--zw-kb, 6s) linear both;
}

/* Editor holding a still slide: no zoom, so the crop shown is the real crop. */
.zword-slider2[data-still=true] .zword-slider2__img {
  animation: none !important;
}

/* ---- slice transitions (URS2 style) ---------------------------------
   The script adds .zword-slider2__slices to the incoming slide: N pieces, each a copy of
   the slide's image clipped to one strip/box, so they line up exactly with the real crop.
   While it runs the real image is hidden; when the last piece lands the layer is removed. */
.zword-slider2__slide[data-slicing] > .zword-slider2__media {
  visibility: hidden;
}

.zword-slider2__slices {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.zword-slider2__piece {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation-duration: var(--zw-piece-ms, 650ms);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.zword-slider2__piece--drop {
  animation-name: zws2-piece-drop;
}

.zword-slider2__piece--sweep {
  animation-name: zws2-piece-sweep;
}

.zword-slider2__piece--pop {
  animation-name: zws2-piece-pop;
}

.zword-slider2__piece--curtain {
  animation-name: zws2-piece-curtain;
}

/* The incoming slide's shade fades in with the pieces instead of popping over the old slide. */
.zword-slider2__slide[data-slicing] > .zword-slider2__shade {
  animation: zws2-fade-in 0.8s ease both;
}

/* ---- overlay ------------------------------------------------------- */
.zword-slider2__shade {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the slice pieces (1) */
  pointer-events: none;
  background: radial-gradient(ellipse at var(--ox, 50%) var(--oy, 85%), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%);
}

/* The caption moves inside this padded box: 0% = flush to the padding, 100% = flush the other side. */
.zword-slider2__layer {
  position: absolute;
  inset: 4cqi 6cqi;
  z-index: 3;
  pointer-events: none;
}

.zword-slider2__caption {
  position: absolute;
  left: var(--ox, 50%);
  top: var(--oy, 85%);
  transform: translate(calc(var(--ox, 50%) * -1), calc(var(--oy, 85%) * -1));
  max-width: 60%;
  pointer-events: auto;
}

.zword-slider2__slide[data-state=active] .zword-slider2__caption {
  animation: zws2-caption-in 0.8s 0.15s ease-out both;
}

.zword-slider2__title {
  color: #fff;
  font-size: clamp(1.25rem, 4.4cqi, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.35em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.zword-slider2__subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.9rem, 1.7cqi, 1.5rem);
  line-height: 1.35;
  margin: 0 0 1em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.zword-slider2__cta {
  font-size: clamp(0.8rem, 1.2cqi, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6em 1.4em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zword-slider2__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Editor: the caption can be dragged. */
.zword-slider2--edit .zword-slider2__caption {
  cursor: move;
  outline: 1px dashed rgba(255, 255, 255, 0.75);
  outline-offset: 0.5cqi;
  touch-action: none;
}

/* ---- arrows -------------------------------------------------------- */
.zword-slider2__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(2rem, 4cqi, 3.25rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: clamp(1.4rem, 2.8cqi, 2.2rem);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
}

.zword-slider2__arrow--prev {
  left: 1.5cqi;
}

.zword-slider2__arrow--next {
  right: 1.5cqi;
}

.zword-slider2:hover .zword-slider2__arrow,
.zword-slider2:focus-within .zword-slider2__arrow {
  opacity: 0.85;
}

.zword-slider2__arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}

.zword-slider2__arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

@media (hover: none) {
  .zword-slider2__arrow {
    opacity: 0.7;
  }
}
/* ---- dots ---------------------------------------------------------- */
.zword-slider2__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5cqi;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  pointer-events: none;
}

.zword-slider2__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.zword-slider2__dot[aria-current=true],
.zword-slider2:not([data-ready]) .zword-slider2__dot:first-child {
  background: #fff;
  transform: scale(1.2);
}

/* ---- timer bar (URS2 style) ---------------------------------------- */
.zword-slider2__timer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 6;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.zword-slider2__timer > span {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: left center;
  animation: zws2-timer var(--zw-dur, 5s) linear both;
}

.zword-slider2[data-paused=true] .zword-slider2__timer > span {
  animation-play-state: paused;
}

.zword-slider2:not([data-playing=true]) .zword-slider2__timer {
  visibility: hidden;
}

/* ---- thumbnails ---------------------------------------------------- */
.zword-slider2__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  overflow-x: auto;
}

.zword-slider2__thumb {
  flex: 0 0 auto;
  width: clamp(56px, 12cqi, 140px);
  aspect-ratio: 16/10;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #222;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

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

.zword-slider2__thumb:hover {
  opacity: 0.85;
}

.zword-slider2__thumb[aria-current=true],
.zword-slider2:not([data-ready]) .zword-slider2__thumb:first-child {
  opacity: 1;
  border-color: #fff;
}

/* ---- phone shape: switches on the slider's own width ----------------- */
@container zword-slider2 (max-width: 767.98px) {
  .zword-slider2__stage {
    aspect-ratio: var(--zw-ratio-sm, var(--zw-ratio, 2.4));
  }
  .zword-slider2__img {
    object-position: var(--fx-sm, var(--fx, 50%)) var(--fy-sm, var(--fy, 50%));
    transform-origin: var(--fx-sm, var(--fx, 50%)) var(--fy-sm, var(--fy, 50%));
  }
  .zword-slider2__shade {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  }
  .zword-slider2__caption {
    max-width: 100%;
  }
}
/* ---- reduced motion: the script switches every transition to crossfade ---- */
@media (prefers-reduced-motion: reduce) {
  .zword-slider2__img,
  .zword-slider2__caption {
    animation: none !important;
  }
}
/* ---- keyframes ----------------------------------------------------- */
@keyframes zws2-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zws2-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes zws2-zoom-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zws2-slide-in {
  from {
    transform: translateX(calc(100% * var(--zw-d)));
  }
  to {
    transform: none;
  }
}
@keyframes zws2-slide-out {
  from {
    transform: none;
  }
  to {
    transform: translateX(calc(-100% * var(--zw-d)));
  }
}
@keyframes zws2-kb-in {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}
@keyframes zws2-kb-out {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
/* Uses the separate translate property so it adds to the caption's positioning transform. */
@keyframes zws2-caption-in {
  from {
    opacity: 0;
    translate: 0 20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes zws2-timer {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* ---- slice piece keyframes (--zw-d is the slide's direction: 1 forward, -1 back) ---- */
@keyframes zws2-piece-drop {
  from {
    opacity: 0;
    transform: translateY(calc(-100% * var(--zw-d, 1)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zws2-piece-sweep {
  from {
    opacity: 0;
    transform: translateX(calc(-100% * var(--zw-d, 1)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zws2-piece-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zws2-piece-curtain {
  from {
    opacity: 0.4;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
:root {
  --zw-bs-primary: var(--bs-primary);
  --zw-bs-primary-rgb: var(--bs-primary-rgb);
  --zw-bs-secondary: var(--bs-secondary);
  --zw-bs-secondary-rgb: var(--bs-secondary-rgb);
  --zw-bs-success: var(--bs-success);
  --zw-bs-success-rgb: var(--bs-success-rgb);
  --zw-bs-info: var(--bs-info);
  --zw-bs-info-rgb: var(--bs-info-rgb);
  --zw-bs-warning: var(--bs-warning);
  --zw-bs-warning-rgb: var(--bs-warning-rgb);
  --zw-bs-danger: var(--bs-danger);
  --zw-bs-danger-rgb: var(--bs-danger-rgb);
  --zw-bs-light: var(--bs-light);
  --zw-bs-light-rgb: var(--bs-light-rgb);
  --zw-bs-dark: var(--bs-dark);
  --zw-bs-dark-rgb: var(--bs-dark-rgb);
  --zw-bs-body-bg: var(--bs-body-bg);
  --zw-bs-body-bg-rgb: var(--bs-body-bg-rgb);
  --zw-bs-body-color: var(--bs-body-color);
  --zw-bs-body-color-rgb: var(--bs-body-color-rgb);
  --zw-bs-link-color: var(--bs-link-color);
  --zw-bs-link-color-rgb: var(--bs-link-color-rgb);
  --zw-bs-link-hover-color: var(--bs-link-hover-color);
  --zw-bs-link-hover-color-rgb: var(--bs-link-hover-color-rgb);
  --zw-bs-body-font-family: var(--bs-body-font-family);
  --zw-bs-body-font-size: var(--bs-body-font-size);
  --zw-bs-body-line-height: var(--bs-body-line-height);
  --zw-bs-border-radius: var(--bs-border-radius);
}

.zw-theme {
  --bs-primary: var(--zw-color-primary, var(--zw-bs-primary));
  --bs-primary-rgb: var(--zw-color-primary-rgb, var(--zw-bs-primary-rgb));
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, white);
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, white);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 40%, black);
  --bs-secondary: var(--zw-color-secondary, var(--zw-bs-secondary));
  --bs-secondary-rgb: var(--zw-color-secondary-rgb, var(--zw-bs-secondary-rgb));
  --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 20%, white);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 40%, white);
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 40%, black);
  --bs-success: var(--zw-color-success, var(--zw-bs-success));
  --bs-success-rgb: var(--zw-color-success-rgb, var(--zw-bs-success-rgb));
  --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 20%, white);
  --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 40%, white);
  --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 40%, black);
  --bs-info: var(--zw-color-info, var(--zw-bs-info));
  --bs-info-rgb: var(--zw-color-info-rgb, var(--zw-bs-info-rgb));
  --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 20%, white);
  --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 40%, white);
  --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 40%, black);
  --bs-warning: var(--zw-color-warning, var(--zw-bs-warning));
  --bs-warning-rgb: var(--zw-color-warning-rgb, var(--zw-bs-warning-rgb));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 20%, white);
  --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 40%, white);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 40%, black);
  --bs-danger: var(--zw-color-danger, var(--zw-bs-danger));
  --bs-danger-rgb: var(--zw-color-danger-rgb, var(--zw-bs-danger-rgb));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 20%, white);
  --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 40%, white);
  --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 40%, black);
  --bs-light: var(--zw-color-light, var(--zw-bs-light));
  --bs-light-rgb: var(--zw-color-light-rgb, var(--zw-bs-light-rgb));
  --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 20%, white);
  --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 40%, white);
  --bs-light-text-emphasis: color-mix(in srgb, var(--bs-light) 40%, black);
  --bs-dark: var(--zw-color-dark, var(--zw-bs-dark));
  --bs-dark-rgb: var(--zw-color-dark-rgb, var(--zw-bs-dark-rgb));
  --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 20%, white);
  --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 40%, white);
  --bs-dark-text-emphasis: color-mix(in srgb, var(--bs-dark) 40%, black);
  --bs-body-bg: var(--zw-color-body-bg, var(--zw-bs-body-bg));
  --bs-body-bg-rgb: var(--zw-color-body-bg-rgb, var(--zw-bs-body-bg-rgb));
  --bs-body-color: var(--zw-color-body-color, var(--zw-bs-body-color));
  --bs-body-color-rgb: var(--zw-color-body-color-rgb, var(--zw-bs-body-color-rgb));
  --bs-link-color: var(--zw-color-link, var(--zw-bs-link-color));
  --bs-link-color-rgb: var(--zw-color-link-rgb, var(--zw-bs-link-color-rgb));
  --bs-link-hover-color: var(--zw-color-link-hover, var(--zw-bs-link-hover-color));
  --bs-link-hover-color-rgb: var(--zw-color-link-hover-rgb, var(--zw-bs-link-hover-color-rgb));
  --bs-body-font-family: var(--zw-font-body, var(--zw-bs-body-font-family));
  --bs-body-font-size: var(--zw-font-size-base, var(--zw-bs-body-font-size));
  --bs-body-line-height: var(--zw-line-height, var(--zw-bs-body-line-height));
  --bs-border-radius: var(--zw-radius, var(--zw-bs-border-radius));
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}
.zw-theme h1, .zw-theme h2, .zw-theme h3, .zw-theme h4, .zw-theme h5, .zw-theme h6, .zw-theme .h1, .zw-theme .h2, .zw-theme .h3, .zw-theme .h4, .zw-theme .h5, .zw-theme .h6 {
  font-family: var(--zw-font-heading, inherit);
  font-weight: var(--zw-heading-weight, 500);
}
.zw-theme .btn-primary {
  --bs-btn-color: var(--zw-on-primary, #fff);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--zw-on-primary, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-color: var(--zw-on-primary, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-primary, #fff);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.zw-theme .btn-secondary {
  --bs-btn-color: var(--zw-on-secondary, #fff);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--zw-on-secondary, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
  --bs-btn-active-color: var(--zw-on-secondary, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-secondary, #fff);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}
.zw-theme .btn-success {
  --bs-btn-color: var(--zw-on-success, #fff);
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: var(--zw-on-success, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black);
  --bs-btn-active-color: var(--zw-on-success, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-success, #fff);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}
.zw-theme .btn-info {
  --bs-btn-color: var(--zw-on-info, #000);
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--zw-on-info, #000);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black);
  --bs-btn-active-color: var(--zw-on-info, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-info, #000);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}
.zw-theme .btn-warning {
  --bs-btn-color: var(--zw-on-warning, #000);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--zw-on-warning, #000);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, black);
  --bs-btn-active-color: var(--zw-on-warning, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-warning, #000);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}
.zw-theme .btn-danger {
  --bs-btn-color: var(--zw-on-danger, #fff);
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: var(--zw-on-danger, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
  --bs-btn-active-color: var(--zw-on-danger, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-danger, #fff);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}
.zw-theme .btn-light {
  --bs-btn-color: var(--zw-on-light, #000);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--zw-on-light, #000);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 80%, black);
  --bs-btn-active-color: var(--zw-on-light, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-light, #000);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}
.zw-theme .btn-dark {
  --bs-btn-color: var(--zw-on-dark, #fff);
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--zw-on-dark, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 80%, black);
  --bs-btn-active-color: var(--zw-on-dark, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 75%, black);
  --bs-btn-disabled-color: var(--zw-on-dark, #fff);
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
}

.zw-surface--primary {
  --zw-surface-bg: var(--bs-primary);
  --zw-surface-fg: var(--zw-on-primary, #fff);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-primary-rgb, 255, 255, 255);
  --bs-link-hover-color-rgb: var(--zw-on-primary-rgb, 255, 255, 255);
}

.zw-surface--secondary {
  --zw-surface-bg: var(--bs-secondary);
  --zw-surface-fg: var(--zw-on-secondary, #fff);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-secondary-rgb, 255, 255, 255);
  --bs-link-hover-color-rgb: var(--zw-on-secondary-rgb, 255, 255, 255);
}

.zw-surface--success {
  --zw-surface-bg: var(--bs-success);
  --zw-surface-fg: var(--zw-on-success, #fff);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-success-rgb, 255, 255, 255);
  --bs-link-hover-color-rgb: var(--zw-on-success-rgb, 255, 255, 255);
}

.zw-surface--info {
  --zw-surface-bg: var(--bs-info);
  --zw-surface-fg: var(--zw-on-info, #000);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-info-rgb, 0, 0, 0);
  --bs-link-hover-color-rgb: var(--zw-on-info-rgb, 0, 0, 0);
}

.zw-surface--warning {
  --zw-surface-bg: var(--bs-warning);
  --zw-surface-fg: var(--zw-on-warning, #000);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-warning-rgb, 0, 0, 0);
  --bs-link-hover-color-rgb: var(--zw-on-warning-rgb, 0, 0, 0);
}

.zw-surface--danger {
  --zw-surface-bg: var(--bs-danger);
  --zw-surface-fg: var(--zw-on-danger, #fff);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-danger-rgb, 255, 255, 255);
  --bs-link-hover-color-rgb: var(--zw-on-danger-rgb, 255, 255, 255);
}

.zw-surface--light {
  --zw-surface-bg: var(--bs-light);
  --zw-surface-fg: var(--zw-on-light, #000);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-light-rgb, 0, 0, 0);
  --bs-link-hover-color-rgb: var(--zw-on-light-rgb, 0, 0, 0);
}

.zw-surface--dark {
  --zw-surface-bg: var(--bs-dark);
  --zw-surface-fg: var(--zw-on-dark, #fff);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
  --bs-link-color-rgb: var(--zw-on-dark-rgb, 255, 255, 255);
  --bs-link-hover-color-rgb: var(--zw-on-dark-rgb, 255, 255, 255);
}

.zw-surface--body-bg {
  --zw-surface-bg: var(--bs-body-bg);
  --zw-surface-fg: var(--bs-body-color);
  background-color: var(--zw-surface-bg);
  color: var(--zw-surface-fg);
}

.navbar[class*=zw-surface--] {
  --bs-navbar-color: color-mix(in srgb, currentColor 75%, transparent);
  --bs-navbar-hover-color: currentColor;
  --bs-navbar-active-color: currentColor;
  --bs-navbar-brand-color: currentColor;
  --bs-navbar-brand-hover-color: currentColor;
}

:where(.zw-theme) .zw-top-nav {
  --zw-nav-auto: rgba(var(--bs-emphasis-color-rgb), .65);
  --bs-navbar-color: var(--zw-navbar-text, var(--zw-nav-auto));
  --bs-navbar-hover-color: var(--zw-navbar-hover, var(--zw-navbar-text, rgba(var(--bs-emphasis-color-rgb), .8)));
  --bs-navbar-active-color: var(--zw-navbar-hover, var(--zw-navbar-text, rgba(var(--bs-emphasis-color-rgb), 1)));
}
:where(.zw-theme) .zw-top-nav[class*=zw-surface--] {
  --zw-nav-auto: color-mix(in srgb, var(--zw-surface-fg, currentColor) 85%, transparent);
}
:where(.zw-theme) .zw-top-nav .navbar-toggler {
  color: var(--zw-navbar-toggler, var(--bs-navbar-color));
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}
:where(.zw-theme) .zw-top-nav .zw-nav-mobile {
  background: var(--zw-navbar-mobile-bg, var(--zw-surface-bg, var(--bs-body-bg)));
  color: var(--zw-navbar-mobile-fg, var(--zw-surface-fg, var(--bs-body-color)));
}
:where(.zw-theme) .zw-top-nav .zw-nav-mobile-list a,
:where(.zw-theme) .zw-top-nav .zw-nav-close,
:where(.zw-theme) .zw-top-nav .zw-nav-mobile-label {
  color: inherit;
}
:where(.zw-theme) .zw-top-nav .zw-nav-mobile-header {
  border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}

:where(.zw-theme) .navbar-toggler-icon {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/100% 100% no-repeat;
}

.zw-row {
  position: relative;
}

.zw-row--grow {
  flex: 1 0 auto;
}

.zw-row--bg {
  background-image: var(--zw-row-bg-image);
  background-size: cover;
  background-position: center;
}

.zw-theme .zw-header-logo img {
  max-height: var(--zw-logo-header-height, 3.5rem);
  width: auto;
}
.zw-theme .zw-footer-logo img {
  max-height: var(--zw-logo-footer-height, 2.5rem);
  width: auto;
}
.zw-theme .zw-sidebar-logo img {
  max-height: var(--zw-logo-sidebar-height, 2.5rem);
  width: auto;
}

.zw-font--heading {
  font-family: var(--zw-font-heading, inherit);
}

.zw-font--body {
  font-family: var(--zw-font-body, inherit);
}