/* ns-hugo-imp:D:\DEVEL\dataforge-core\docs\hugo\src\assets\appshot\appshot.css */
html[data-theme=dark] .appshot,
body.dark .appshot,
html.dark .appshot,
html[data-bs-theme=dark] .appshot,
body[data-bs-theme=dark] .appshot {
  --appshot-bg: #0f172a;
  --appshot-panel: #111827;
  --appshot-panel-hover: #172136;
  --appshot-border: #334155;
  --appshot-border-strong: #475569;
  --appshot-text: #e5edf7;
  --appshot-muted: #94a3b8;
  --appshot-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.55);
  --appshot-shadow-soft: 0 4px 8px 1px rgba(0, 0, 0, 0.45);
  --appshot-accent: #60a5fa;
  --appshot-backdrop: rgba(2, 6, 23, 0.78);
  --appshot-shadow-light: #ffffff6a;
}
.appshot {
  --appshot-bg: #ffffff;
  --appshot-panel: #f6f7f9;
  --appshot-panel-hover: #eef1f6;
  --appshot-border: #d8dde6;
  --appshot-border-strong: #b9c2cf;
  --appshot-text: #1e293b;
  --appshot-muted: #64748b;
  --appshot-shadow: 0 4px 20px 1px rgba(15, 23, 42, 0.12);
  --appshot-shadow-soft: 0 2px 8px 2px rgba(15, 23, 42, 0.1);
  --appshot-accent: #2563eb;
  --appshot-backdrop: rgba(15, 23, 42, 0.62);
  --appshot-shadow-light: #0000004a;
  margin: 1.5rem 0;
  pointer-events: none;
}
.appshot .appshot__container-justify-center {
  display: flex;
  justify-content: center;
}
.appshot .appshot__controls {
  display: inline grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  padding: 0.3rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--appshot-border);
  border-radius: 999px;
  background: var(--appshot-panel);
  box-shadow: var(--appshot-shadow-soft);
  transition: all 100ms ease-in-out;
}
.appshot .appshot__toggle {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--appshot-muted);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  line-height: 1;
  transition: all 200ms ease-in;
  pointer-events: all;
}
.appshot .appshot__toggle:enabled:hover {
  cursor: pointer;
  color: var(--appshot-text);
}
.appshot .appshot__toggle[aria-pressed=true] {
  color: var(--appshot-text);
  box-shadow: inset 0 0 0px 0.5px var(--appshot-shadow-light), inset 0 0 4px 0.5px var(--appshot-shadow-light);
}
.appshot .appshot__preview {
  display: block;
  width: 100%;
  margin-inline: auto;
  max-width: min(70%, 70rem);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: inherit;
}
@media (max-width: 768px) {
  .appshot .appshot__preview {
    max-width: 100%;
  }
}
.appshot.appshot--no-device .appshot__controls {
  display: none;
}
.appshot.appshot--no-device .appshot__frame {
  max-width: 18rem;
  border: 1px solid var(--appshot-border);
  border-radius: 1.25rem;
  padding: 0.5rem;
}
.appshot.appshot--no-device .appshot__frame.landscape {
  max-width: 70%;
  place-items: center;
  align-content: center;
}
.appshot.appshot--no-device .appshot__frame.landscape img.appshot__image {
  border-radius: 0.75rem;
  object-fit: scale-down;
  max-height: clamp(15rem, 27vh, 35rem);
}
.appshot .appshot__frame {
  background:
    linear-gradient(
      180deg,
      var(--appshot-panel),
      var(--appshot-bg));
  display: block;
  width: max-content;
  box-shadow: var(--appshot-shadow);
  margin-inline: auto;
  transition: all 250ms ease-in-out;
  position: relative;
  pointer-events: all;
  align-content: center;
}
.appshot .appshot__frame:hover {
  transition: none;
  background: var(--appshot-panel-hover);
  cursor: zoom-in;
}
.appshot .appshot__frame.is-desktop {
  max-width: 80%;
  border: 1px solid var(--appshot-border);
  border-radius: 1rem;
  padding: 0.8rem;
}
.appshot .appshot__frame.is-desktop::before {
  content: "";
  display: block;
  height: 0.8rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 0.5rem center,
      #fb7185 0 0.24rem,
      transparent 0.3rem),
    radial-gradient(
      circle at 1.4rem center,
      #fbbf24 0 0.24rem,
      transparent 0.3rem),
    radial-gradient(
      circle at 2.3rem center,
      #34d399 0 0.24rem,
      transparent 0.3rem);
  opacity: 0.7;
}
.appshot .appshot__frame.is-mobile {
  max-width: 18rem;
  border: 1px solid var(--appshot-border-strong);
  border-radius: 2rem;
  padding: 0.65rem;
}
.appshot .appshot__frame.is-mobile::before {
  content: "";
  display: block;
  width: 34%;
  height: 0.35rem;
  margin: 0 auto 0.7rem;
  border-radius: 999px;
  background: var(--appshot-border-strong);
  opacity: 0.9;
}
.appshot .appshot__frame.is-mobile .appshot__image {
  border-radius: 1.35rem;
}
.appshot .appshot__frame.is-mobile.landscape {
  max-width: 80%;
  width: max-content;
  place-items: center;
  align-content: center;
  padding: 0.65rem 0.65rem 0.65rem 1.35rem;
  border-radius: 1.5rem;
  height: auto;
}
.appshot .appshot__frame.is-mobile.landscape::before {
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.35rem;
  height: 37%;
  margin: 0;
}
.appshot .appshot__frame.is-mobile.landscape .appshot__image {
  border-radius: 0.75rem;
  object-fit: scale-down;
  max-height: clamp(15rem, 27vh, 35rem);
}
.appshot .appshot__image {
  display: block;
  border-radius: 0.8rem;
  border: 1px solid var(--appshot-border);
  background: var(--appshot-bg);
  place-self: center;
}
.appshot .appshot__caption {
  margin-top: 0.65rem;
  color: var(--appshot-muted);
  max-width: 70%;
  text-align: center;
  text-wrap: pretty;
}
.appshot dialog.appshot__dialog {
  pointer-events: all;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  overflow: auto;
}
.appshot dialog.appshot__dialog::backdrop {
  background: var(--appshot-backdrop);
  backdrop-filter: blur(3px);
}
.appshot dialog.appshot__dialog .appshot__dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 30;
}
.appshot dialog.appshot__dialog .appshot__controls--modal {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  pointer-events: auto;
}
.appshot dialog.appshot__dialog .appshot__close--modal {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 31;
  box-shadow: var(--appshot-shadow-soft);
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--appshot-border);
  border-radius: 999px;
  background: var(--appshot-panel);
  color: var(--appshot-text);
  font-size: 1.5rem;
  margin: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 1;
}
.appshot dialog.appshot__dialog .appshot__close--modal:hover {
  filter: contrast(0.8);
}
.appshot dialog.appshot__dialog .appshot__dialog-stage {
  height: fit-content;
  text-align: center;
  place-items: center;
  display: block;
  cursor: default;
}
.appshot dialog.appshot__dialog .appshot__frame--modal {
  display: inline-block;
  max-width: none !important;
  width: max-content;
  max-height: 100%;
  margin: 4rem 0 0;
  box-shadow: var(--appshot-shadow);
}
.appshot dialog.appshot__dialog .appshot__frame--modal:hover {
  background-color: var(--appshot-panel);
}
.appshot dialog.appshot__dialog .appshot__image--modal {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.appshot dialog.appshot__dialog.is-zoomed .appshot__dialog-stage {
  overflow: auto;
}
.appshot dialog.appshot__dialog.is-zoomed .appshot__frame--modal .appshot__image--modal {
  cursor: zoom-out;
  zoom: 2;
}
@media (max-width: 768px) {
  .appshot .appshot__dialog {
    width: calc(100vw - 1rem);
  }
  .appshot .appshot__dialog-topbar {
    flex-direction: row;
    align-items: center;
  }
  .appshot .appshot-toggle {
    padding: 0.45rem 0.7rem;
  }
}
figure.appshot--desktop-disabled .appshot__controls {
  filter: grayscale(0.5);
  border: none;
  box-shadow: none;
}
figure.appshot--desktop-disabled .appshot__toggle[aria-disabled=true] {
  filter: opacity(0.3);
}
.appshot-hidden {
  display: none;
}
dialog,
dialog::backdrop {
  overscroll-behavior: contain;
}
body:has(dialog[open]) {
  overflow: hidden;
}

/* <stdin> */
:root {
  interpolate-size: allow-keywords;
}
.icon-button {
  border: none;
  margin-inline: 0.5rem;
  background-color: transparent;
}
.beat-on-hover {
  color: var(--bs-primary);
}
:hover[data-appshot-target] {
  cursor: pointer;
}
:hover[data-appshot-target] .beat-on-hover,
:hover[data-appshot-target].beat-on-hover {
  animation: beat 1s ease-in-out infinite alternate;
}
@keyframes beat {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.3;
  }
  100% {
    scale: 1;
  }
}