/* قاب نمایش زنده‌ی نمونه‌سایت (فقط در صفحه‌ی نمونه‌کارهای دارای نمونه‌ی زنده) */
.live{margin-block:8px 56px}
.live-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.live-dev{display:inline-flex;background:var(--soft);border-radius:999px;padding:4px}
.live-dev button{border:0;background:none;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:700;color:var(--mut);transition:background .2s,color .2s}
.live-dev button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.live-act{display:flex;gap:10px;flex-wrap:wrap}
.live-act .btn{padding:9px 20px;font-size:14px}
.live-stage{background:var(--soft);border-radius:var(--r);padding:clamp(10px,2.4vw,28px);display:flex;justify-content:center;overflow:hidden;transition:background .3s}
.live-fit{position:relative;transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.2);overflow:hidden;background:#fff;flex:none}
.live[data-dev="390"] .live-fit{border-radius:34px;box-shadow:0 0 0 8px #1b1b1f,0 18px 50px rgba(0,0,0,.3)}
.live[data-dev="820"] .live-fit{border-radius:22px;box-shadow:0 0 0 6px #1b1b1f,0 18px 50px rgba(0,0,0,.25)}
.live iframe{position:absolute;top:0;right:0;border:0;background:#fff;transform-origin:top right;transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1)}
.live-note{margin-top:14px;font-size:14px;color:var(--mut);display:flex;gap:8px;align-items:center}
.live-note i{width:8px;height:8px;border-radius:50%;background:#2DBE7B;display:inline-block;animation:livep 1.8s infinite}
@keyframes livep{50%{opacity:.25}}
@media(max-width:700px){.live-dev button{padding:7px 12px}}