/* Size the sample by available height as well as width. Keep navigation outside the slide. */
.sample-workspace main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden}
.sample-workspace .sample-heading{margin:0;gap:16px;min-width:0}
.sample-workspace .sample-heading .eyebrow{display:none}
.sample-workspace .sample-heading h1{font-size:24px;line-height:1.25;margin:0 0 4px}
.sample-workspace .sample-heading p:not(.eyebrow){font-size:13px}
.sample-workspace .sample-heading>.btn{display:none}
.sample-workspace .sample-layout{min-height:0;grid-template-columns:minmax(0,1fr) 280px;align-items:stretch;gap:20px}
.sample-workspace .sample-stage{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 48px 90px;gap:8px}
.sample-viewport{container-type:size;min-height:0;min-width:0;display:grid;place-items:center;background:#e9ede7;border-radius:12px;overflow:hidden}
.sample-workspace .sample-viewport .slide-canvas{width:min(100cqw,calc(100cqh * 16 / 9));max-width:100%;margin:0;aspect-ratio:16/9}
.sample-workspace .sample-controls{margin:0;gap:20px}
.sample-workspace .sample-controls>div{width:180px;min-width:0}
.sample-workspace .sample-strip{display:flex;min-height:0;overflow-x:auto;overflow-y:hidden;gap:8px;padding:2px;scroll-snap-type:none}
.sample-workspace .sample-thumb{flex:1 0 90px;width:auto;min-width:0;max-width:180px;display:flex;flex-direction:column;gap:3px;min-height:44px}
.sample-workspace .sample-thumb img{height:48px;min-height:0;object-fit:cover;aspect-ratio:auto;flex:1}
.sample-workspace .sample-thumb span{padding:2px;font-size:10px;flex-shrink:0;width:100%}
.sample-workspace .sample-about{min-height:0;overflow:auto;padding:18px;display:block}
.sample-workspace .sample-about h2{font-size:20px}
.sample-workspace .sample-about p,.sample-workspace .sample-about li{font-size:13px}
.sample-workspace .sample-bottom{position:static;margin:0;padding:0;border:0;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.sample-workspace .sample-bottom .btn{font-size:13px;min-height:44px;padding:8px 12px;white-space:nowrap}
.sample-workspace .sample-info-button{display:none}
.sample-workspace .sample-bottom [data-action=library]{margin-right:auto}
@media(max-width:1100px){.sample-workspace .sample-layout{grid-template-columns:minmax(0,1fr)}.sample-workspace .sample-about{display:none}.sample-workspace .sample-info-button{display:flex}.sample-workspace .sample-bottom [data-action=library]{font-size:0;min-width:44px;padding:8px}.sample-workspace .sample-bottom [data-action=library] .icon{margin:0}.sample-workspace .sample-stage{grid-template-rows:minmax(0,1fr) 48px 76px}}
@media(max-width:600px){.sample-workspace main{gap:8px}.sample-workspace .sample-heading h1{font-size:21px}.sample-workspace .sample-heading p:not(.eyebrow){font-size:11px}.sample-workspace .sample-stage{grid-template-rows:minmax(0,1fr) 44px 62px;gap:6px}.sample-workspace .sample-thumb{flex-basis:80px}.sample-workspace .sample-bottom .btn{font-size:11px;padding:6px 8px}.sample-workspace .sample-bottom [data-action=library]{display:none}.sample-workspace .sample-bottom .btn.primary{margin-left:auto;flex:0 1 auto}.sample-workspace .sample-info-button{flex-shrink:0}}
@media(max-height:500px){.sample-workspace .sample-heading h1{font-size:18px;margin:0}.sample-workspace .sample-heading p{display:none}.sample-workspace .sample-stage{grid-template-rows:minmax(0,1fr) 44px 44px;gap:4px}.sample-workspace .sample-thumb img{display:none}.sample-workspace .sample-thumb{justify-content:center}.sample-workspace main{gap:5px}.sample-workspace .sample-thumb span{white-space:normal}}