.qet-puzzle {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 344px;
  margin: auto;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 11px;
  border: 1px solid #cdd7d1;
  border-radius: 4px;
  background: #f8faf9;
  color: #24352c;
  font: 14px/1.5 Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  clear: both;
}
.qet-puzzle:not([open]) { display: none !important; }
.qet-puzzle[open] { display: block; }
.qet-puzzle::backdrop { background: rgb(15 25 20 / 48%); }
.qet-puzzle .qet-puzzle-actions { display: flex; gap: 8px; }
.qet-puzzle *, .qet-puzzle *::before, .qet-puzzle *::after { box-sizing: border-box; }
.qet-puzzle .qet-puzzle-heading { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin: 0 0 8px; }
.qet-puzzle .qet-puzzle-refresh, .qet-puzzle .qet-puzzle-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid #cdd7d1;
  border-radius: 4px;
  background: #fff;
  color: #245e45;
  font: 26px/1 Arial, sans-serif;
  cursor: pointer;
}
.qet-puzzle .qet-puzzle-refresh::before, .qet-puzzle .qet-puzzle-refresh::after,
.qet-puzzle .qet-puzzle-close::before, .qet-puzzle .qet-puzzle-close::after { content: none; }
.qet-puzzle .qet-puzzle-refresh:disabled { opacity: .45; cursor: wait; }
.qet-puzzle .qet-puzzle-picture { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 2px; background: #e1eae5; }
.qet-puzzle .qet-puzzle-picture[hidden] { display: block !important; visibility: hidden; }
.qet-puzzle .qet-puzzle-background { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; pointer-events: none; }
.qet-puzzle .qet-puzzle-piece { position: absolute; left: 0; max-width: none; height: auto; margin: 0; padding: 0; border: 0; pointer-events: none; filter: drop-shadow(1px 2px 2px #253d3980); }
.qet-puzzle input.qet-puzzle-slider {
  display: block;
  appearance: auto;
  -webkit-appearance: auto;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: #267a56;
  cursor: ew-resize;
  touch-action: pan-y;
}
.qet-puzzle .qet-puzzle-status { display: block; min-height: 42px; margin: 2px 0 0; padding: 0; font: 13px/21px Arial, sans-serif; color: #40574a; overflow-wrap: anywhere; }
.qet-puzzle[data-state="passed"] { border-color: #267a56; }
.qet-puzzle[data-state="passed"] .qet-puzzle-status { color: #17613e; }
.qet-puzzle[data-state="error"] .qet-puzzle-status, .qet-puzzle[data-state="expired"] .qet-puzzle-status { color: #a23737; }
.qet-puzzle .qet-puzzle-trap { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.qet-puzzle button:focus-visible, .qet-puzzle input:focus-visible { outline: 2px solid #166c4c; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .qet-puzzle * { transition: none !important; } }