/* 06b · živá ukázka: zavřená je světlý slajd s náhledem dema (1280 × 720) a pilulkou Spustit demo;
   .otevreno roztáhne demo přes celou plochu 1920 × 1080, při výpadku serveru návod */
#s-ukazka .otevrit { position: absolute; left: 50%; top: 248px; width: 1280px; height: 720px; margin-left: -640px; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: var(--stin-velky); cursor: pointer; font: inherit; transition: transform 500ms var(--ven); }
#s-ukazka .otevrit:hover { transform: scale(1.01); }
#s-ukazka .nahled { display: block; width: 100%; height: 100%; object-fit: cover; }
#s-ukazka .otevrit .pilulka { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 34px; padding: 20px 40px 22px 32px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
#s-ukazka .hraj { width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--text); }

#s-ukazka .demo { position: absolute; inset: 0; width: 1920px; height: 1080px; border: 0; background: #000; opacity: 0; visibility: hidden; z-index: 3; transition: opacity 500ms var(--ven), visibility 0s linear 500ms; }
#s-ukazka.otevreno .demo { opacity: 1; visibility: visible; transition: opacity 500ms var(--ven); }
#s-ukazka .zavrit { position: absolute; right: 28px; top: 24px; z-index: 4; width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, 0.55); color: #fff; font: 400 40px/1 var(--pismo); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ven); }
#s-ukazka.otevreno .zavrit { opacity: 0.6; pointer-events: auto; }
#s-ukazka.otevreno .zavrit:hover { opacity: 1; }
.plocha:has(#s-ukazka.aktivni.otevreno) .prubeh { opacity: 0; }

#s-ukazka .demo-chyba {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); width: 1100px; padding: 48px 56px; border-radius: var(--r);
  background: var(--sklo); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--stin-velky); text-align: center;
}
#s-ukazka .demo-chyba .nadpis { font-size: 52px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
#s-ukazka .demo-chyba code { display: block; margin: 18px 0; padding: 18px 24px; border-radius: var(--r2); background: var(--text); color: #f5f5f7; font: 600 26px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
@media print { #s-ukazka .demo, #s-ukazka .zavrit, #s-ukazka .demo-chyba, #s-ukazka .otevrit .pilulka { display: none !important; } }