.blog-article-content .blog-lab-demo { display:block; margin:28px 0; border:1px solid var(--border-strong); border-radius:18px; overflow:hidden; background:var(--surface-soft); }
.blog-article-content .blog-lab-demo__preview { display:flex; align-items:center; gap:20px; padding:20px 24px; color:var(--text); text-decoration:none; background:radial-gradient(ellipse at 12% 50%,#604dff22,transparent 65%); }
.blog-article-content .blog-lab-demo__preview[hidden] { display:none; }
.blog-article-content .blog-lab-demo__preview img { width:96px; height:96px; margin:0; flex-shrink:0; border:0; border-radius:0; }
.blog-lab-demo__caption { display:grid; gap:6px; flex:1; }
.blog-lab-demo__caption strong { font-size:1.05rem; }
.blog-lab-demo__caption > span { font-size:.85rem; color:var(--muted); }
.blog-lab-demo__play { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--border-strong); border-radius:50%; background:#6b51ff22; }
.blog-lab-demo__preview:focus-visible,.blog-lab-demo__close:focus-visible { outline:2px solid #63dbff; outline-offset:-4px; }
/* A top-layer dialog stays above the site header and traps focus natively. */
.blog-lab-modal { box-sizing:border-box; width:min(1200px,calc(100vw - 40px)); height:90vh; height:90svh; max-width:none; max-height:none; padding:0; border:1px solid var(--border-strong,#444); border-radius:18px; background:var(--bg,#050505); color:var(--text,#f4f2ec); overflow:hidden; }
.blog-lab-modal[open] { display:grid; grid-template-rows:auto minmax(0,1fr); }
.blog-lab-modal::backdrop { background:rgba(0,0,0,.8); }
.blog-lab-modal .blog-lab-demo__toolbar strong { margin-right:auto; }
.blog-lab-modal .blog-lab-demo__frame { min-height:0; height:100%; }
.blog-lab-demo__toolbar { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:.85rem; }
.blog-lab-demo__close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; font:inherit; cursor:pointer; }
.blog-lab-demo__frame { display:block; width:100%; height:760px; border:0; background:#050505; }
@media(max-width:720px) {
  .blog-article-content .blog-lab-demo__preview { gap:12px; padding:14px; }
  .blog-article-content .blog-lab-demo__preview img { width:64px; height:64px; }
  .blog-lab-modal { width:calc(100vw - 16px); height:94vh; height:94svh; border-radius:12px; }
  .blog-lab-demo__toolbar { gap:10px; flex-wrap:nowrap; }
  .blog-lab-demo__toolbar strong { min-width:0; }
}

.blog-lab-demo__close > span { font-size:28px; line-height:1; font-weight:400; }