.app-demo { color: #163e35; font-size: 12px; line-height: 1.6; }
.app-demo__stage { position: relative; }
.app-demo button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; border: 1px solid #c7d6c6; border-radius: 8px; padding: 7px 10px; background: #fffdf7; color: #163e35; font: inherit; line-height: 1.5; cursor: pointer; }
.app-demo button:hover:not(:disabled) { background: #edf0df; }
.app-demo button:disabled { opacity: .45; cursor: default; }
.app-demo button svg { flex: none; }
.app-demo [hidden] { display: none !important; }
.app-demo button:focus-visible, .app-demo__panel:focus-visible { outline: 3px solid #537b2c; outline-offset: 3px; }
.app-demo__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.app-demo__count { margin-right: auto; display: flex; gap: 9px; align-items: center; white-space: nowrap; }
.app-demo__count b { font-size: 13px; font-variant-numeric: tabular-nums; }
.app-demo__count span { display: flex; gap: 4px; }
.app-demo__count i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #d5ddc7; }
.app-demo__count i.is-found { background: #267c57; }
.app-demo__expand { width: 44px; flex: none; padding: 0 !important; }
.app-demo__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-demo__panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.app-demo__panel { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 8px; background: #edf0e6; cursor: crosshair; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.app-demo__panel img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: inherit; pointer-events: none; visibility: hidden; }
.app-demo__stage[data-ready] .app-demo__panel img { visibility: visible; }
.app-demo__panel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.app-demo__ring { fill: none; stroke: #e04038; stroke-width: 6; }
.app-demo__hint { position: absolute; pointer-events: none; background: #e04038; border: 3px solid #e04038; border-radius: 16px; opacity: 0; }
.app-demo__miss { fill: none; stroke: #b96730; stroke-width: 4; animation: app-demo-miss .6s ease-out forwards; }
.app-demo__cursor { fill: #fff8; stroke: #163e35; stroke-width: 4; stroke-dasharray: 7 4; }
.app-demo__status:not(.app-demo__sr) { margin: 8px 0; font-size: 11px; color: #536354; }
[data-demo-cta-home]:not(:empty) { margin-top: 10px; }
.app-demo__result { position: relative; border-radius: 10px; background: #edf0e3; padding: 26px 14px 14px; text-align: center; animation: app-demo-result .35s ease-out; }
.app-demo__result > strong { display: block; font-size: 18px; line-height: 1.45; }
.app-demo__result p { font-size: 12px; margin: 5px 0 20px; }
.app-demo__result .app-promotion__stores { text-align: left; animation: app-demo-result .35s ease-out; }
.app-demo__celebration { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: #163e35; color: #fff; }
.app-demo__celebration > i { position: absolute; left: 20px; top: 20px; width: 8px; height: 8px; border-radius: 2px; background: #d28b39; animation: app-demo-spark .85s ease-out both; transform: rotate(calc(var(--spark) * 60deg)) translateY(-40px); }
.app-demo__celebration > i:nth-of-type(even) { background: #4d8870; }
.app-demo__stage.is-complete .app-demo__panels, .app-demo__stage.is-complete .app-demo__bar { display: none; }
.app-demo__retry { margin: 8px 0; }
.app-demo__dialog { width: min(960px,calc(100% - 24px)); max-width: none; max-height: calc(100svh - 24px); margin: auto; border: 1px solid #d5ddc7; border-radius: 16px; padding: 14px; background: #f8f9f0; color: #163e35; overscroll-behavior: contain; }
.app-demo__dialog::backdrop { background: #102820a8; }
.app-demo__dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.app-demo__dialog-bar strong { font-size: 14px; }
.app-demo__dialog-bar button { flex: none; }
.app-demo__dialog [data-demo-expand] { display: none; }
.app-demo__dialog .app-demo__panels { max-width: min(100%,calc((100svh - 250px) * 2 + 8px)); margin-inline: auto; }
.app-demo__dialog [data-demo-cta], .app-demo__dialog .app-demo__result { max-width: 600px; margin-inline: auto; }
@media (max-width: 700px) {
  .app-demo__count { gap: 6px; }
  .app-demo__count span { display: none; }
  .app-demo__panels { gap: 6px; }
  .app-demo__dialog { padding: 10px; }
  .app-demo__dialog .app-demo__panels { display: flex; flex-direction: column; align-items: center; max-width: none; }
  .app-demo__dialog .app-demo__panel { width: min(100%,max(180px,calc((100svh - 280px) / 2))); }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .app-demo__dialog .app-demo__panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 560px; }
  .app-demo__dialog .app-demo__panel { width: 100%; }
}
@keyframes app-demo-miss { from { opacity: .9; } to { opacity: 0; } }
@keyframes app-demo-result { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes app-demo-spark { from { opacity: 1; transform: rotate(calc(var(--spark) * 60deg)) translateY(-22px); } to { opacity: 0; transform: rotate(calc(var(--spark) * 60deg)) translateY(-60px); } }
@media (prefers-reduced-motion: reduce) { .app-demo__miss, .app-demo__result, .app-demo__result .app-promotion__stores, .app-demo__celebration > i { animation: none; } .app-demo__celebration > i { display: none; } }