/* Demo layer: notice bar, lock cards and placeholders (the lesson UI itself is the real course UI) */
.demo-bar{position:fixed;bottom:0;inset-inline:0;z-index:9990;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:.55rem 1rem;background:#1e3a8a;color:#fff;font:600 .9rem/1.4 Heebo,Arial,sans-serif;box-shadow:0 -2px 10px rgba(0,0,0,.2)}
.demo-bar a,.demo-cta{display:inline-block;padding:.45rem 1.1rem;border-radius:.5rem;background:#f59e0b;color:#1f2937!important;font-weight:700;text-decoration:none}
.demo-bar a:hover,.demo-cta:hover{background:#fbbf24}
body{padding-bottom:3.2rem}
.demo-locked-box,.demo-lock-page{direction:rtl;text-align:center;font-family:Heebo,Arial,sans-serif;background:#f8fafc;border:2px dashed #94a3b8;border-radius:1rem;color:#334155}
.demo-locked-box{padding:2rem 1rem;margin:1rem 0}
.demo-lock-page{padding:3rem 2rem;margin:2rem auto;max-width:42rem}
.demo-lock-icon{font-size:2.5rem}
.demo-lock-title{font-size:1.25rem;font-weight:700;margin:.5rem 0}
.demo-lock-text{margin-bottom:1rem}
.demo-lock-page h2{font-size:1.6rem;font-weight:700;margin:.5rem 0 1rem;color:#1d4ed8}
.demo-lock-page p{margin:.75rem 0}
.demo-modal-overlay{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;background:rgba(15,23,42,.6);padding:1rem}
.demo-modal{position:relative;direction:rtl;text-align:center;max-width:28rem;width:100%;padding:2rem 1.5rem;border-radius:1rem;background:#fff;color:#334155;font-family:Heebo,Arial,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.demo-modal-x{position:absolute;top:.5rem;inset-inline-start:.75rem;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#64748b}
.demo-modal-close{margin-inline-start:.5rem;padding:.45rem 1.1rem;border:1px solid #cbd5e1;border-radius:.5rem;background:#fff;cursor:pointer;font-weight:600}

.demo-teaser{position:relative;background:#1f2937;border-radius:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer;overflow:hidden}
.demo-teaser-code{margin:0;padding:1rem;color:#e5e7eb;font-size:.85rem;white-space:pre-wrap;word-break:break-all;min-height:9rem}
.demo-teaser-blur{filter:blur(5px);user-select:none;pointer-events:none}
.demo-teaser-lock{position:absolute;inset:auto 0 0 0;padding:1.4rem 1rem .8rem;text-align:center;direction:rtl;color:#fff;font-family:Heebo,Arial,sans-serif;background:linear-gradient(transparent,#111827 65%)}
.demo-teaser-lock small{color:#cbd5e1}
.demo-teaser:hover .demo-teaser-lock b{text-decoration:underline}
.demo-teaser-out{margin:.75rem 0 0;padding:1rem;background:#0f172a;color:#86efac;border-radius:.75rem;font-size:.85rem}
/* a placeholder that replaces an embed sits inside the 16:9 padding-top box: drop the padding so no empty space shows above it */
html body .video-container:has(> .demo-locked-box){padding-top:0!important}
html body .video-container > .demo-locked-box{margin:0;border:0;border-radius:0}