/* demo finder: "See a template in action" */
.demo{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px;max-width:980px;margin-inline:auto}
.demo-search{position:relative;max-width:560px;margin:0 auto}
.demo-search label{display:block;font-weight:700;margin-bottom:6px}
.demo-field{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:14px;background:var(--g0);padding:4px 6px 4px 14px}
[dir=rtl] .demo-field{padding:4px 14px 4px 6px}
.demo-field:focus-within{border-color:var(--g5);background:#fff}
.demo-field input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16.5px;padding:9px 0;color:var(--ink);outline:none}
.demo-clear{background:none;border:0;color:var(--mut);cursor:pointer;padding:8px;border-radius:10px;display:inline-flex}
.demo-clear:hover{background:var(--g1);color:var(--g7)}
.demo-list{position:absolute;z-index:20;inset-inline:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);max-height:300px;overflow:auto}
.demo-list li{padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:600;font-size:15px}
.demo-list li:hover,.demo-list li[aria-selected=true]{background:var(--g1);color:var(--g7)}
.demo-hint{text-align:center;color:var(--mut);margin:16px 0 0}
.demo-view{margin:20px auto 0;max-width:760px}
.demo-name{text-align:center;font-size:20px;margin:0 0 12px}
.demo-stage{position:relative;border-radius:14px;overflow:hidden;background:var(--g0);border:1px solid var(--line);aspect-ratio:4/3}
.demo-stage img{width:100%;height:100%;object-fit:contain;opacity:1}
.demo-stage img.in{animation:demoIn .45s ease}
@keyframes demoIn{from{opacity:.25}to{opacity:1}}
.demo-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(17,32,26,.72);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.demo-nav:hover{background:var(--g7)}
.demo-prev{inset-inline-start:10px}.demo-next{inset-inline-end:10px}
.demo-prev .ic{transform:scaleX(-1)}
[dir=rtl] .demo-prev .ic{transform:none}[dir=rtl] .demo-next .ic{transform:scaleX(-1)}
.demo-count{position:absolute;top:10px;inset-inline-end:10px;background:rgba(17,32,26,.72);color:#fff;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px}
.demo-cap{text-align:center;font-weight:600;margin:12px auto 6px;max-width:720px;min-height:3.2em}
.demo-ctrl{display:flex;align-items:center;justify-content:center;gap:10px}
.demo-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.demo-dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:#c9d6cf;cursor:pointer}
.demo-dot[aria-current=true]{background:var(--g6);width:26px;border-radius:6px}
.demo-pp{background:none;border:1px solid var(--line);border-radius:10px;width:34px;height:30px;cursor:pointer;color:var(--g7);display:inline-flex;align-items:center;justify-content:center}
.demo-pp .play{display:none}.demo-pp.is-paused .play{display:block}.demo-pp.is-paused .pause{display:none}
.demo-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:16px}
.demo-buy .btn{flex:0 0 auto}
@media (max-width:640px){
  .demo{padding:14px}
  .demo-nav{width:38px;height:38px}
  .demo-cap{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.demo-stage img.in{animation:none}}