.lab-thread-demo{margin:0}.lab-thread-demo .lab-thread-stage{position:relative;height:690px;border:1px solid #291a2c22;background:#fff;overflow:hidden}.lab-thread-demo .lab-thread-stage>iframe{display:block;border:0;width:100%;height:100%;opacity:0}.lab-thread-demo.is-ready .lab-thread-stage>iframe{opacity:1}.lab-thread-fallback{position:absolute;inset:0;display:block;overflow:hidden;background:#faf9f6}.lab-thread-fallback[hidden]{display:none}.lab-thread-fallback img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}.lab-thread-demo>figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0 0;color:#291a2c;font-size:11px;line-height:1.5}.lab-thread-controls{display:flex;align-items:center;gap:28px}.lab-thread-controls[hidden]{display:none}.lab-thread-steps{display:flex;gap:17px}.lab-thread-controls button{font:inherit;color:inherit;border:0;background:none;padding:4px 0;cursor:pointer}.lab-thread-steps button{opacity:.5;border-bottom:1px solid transparent}.lab-thread-steps button[aria-pressed=true]{opacity:1;border-bottom-color:currentColor}.lab-thread-controls button:hover{opacity:1}.lab-thread-controls button:focus-visible{outline:2px solid currentColor;outline-offset:4px}.lab-thread-actions{display:flex;align-items:center;gap:15px}.lab-thread-source{color:inherit;opacity:.65;text-underline-offset:4px}.lab-thread-demo:not(.is-ready) .lab-thread-source{opacity:1}
@media(max-width:800px){.lab-thread-demo>figcaption{align-items:flex-start;flex-wrap:wrap;gap:12px}.lab-thread-controls{flex:1;justify-content:space-between;gap:12px}.lab-thread-steps{gap:12px}.lab-thread-source{flex-basis:100%}}
@media(max-width:710px){.lab-thread-demo .lab-thread-stage{height:1010px}.lab-thread-fallback img{object-fit:contain}.lab-thread-demo>figcaption{font-size:10px}.lab-thread-controls{width:100%;flex-basis:100%}}