/* Názvy vlevo, zoom a stálé Play vpravo; obraz má vlastní volný prostor. */
.showcase-3{--control-height:64px;grid-template-rows:var(--control-height) minmax(0,1fr)}
.showcase-3 .showcase-stage{height:calc(100cqh - var(--control-height))}
.showcase-3 .showcase-bar{
  height:var(--control-height);
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:0;
}
.showcase-tools{display:flex;align-items:center;gap:8px;width:272px;max-width:100%;flex-shrink:0}
.showcase-zoom{display:flex;align-items:center;width:220px;max-width:100%;height:44px;gap:10px}
.showcase-zoom button,.showcase-play{
  flex:0 0 32px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:20px;
  line-height:1;
}
.showcase-zoom button:hover,.showcase-play:hover{color:var(--accent)}
.showcase-zoom button:disabled,.showcase-play:disabled{color:#aaa;cursor:default}
.showcase-zoom input{flex:1;min-width:0;height:32px;margin:0;accent-color:var(--accent);cursor:pointer}
.showcase-zoom input:disabled{cursor:default}
.showcase-play{flex-basis:44px}
.showcase-play svg{width:18px;height:18px}
.showcase-play .icon-play path{fill:currentColor;stroke:none}
.showcase-play .icon-pause,.showcase-play[aria-pressed=true] .icon-play{display:none}
.showcase-play[aria-pressed=true] .icon-pause{display:block}
.model-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:grid;place-items:center;width:52px;height:52px;padding:0;
  border:1px solid #171b1838;border-radius:50%;background:#fffffff0;color:var(--ink);
}
.model-play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.model-play:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:700px){
  .showcase-3{--control-height:112px}
  .showcase-3 .showcase-bar{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding-top:10px}
  .showcase-tools{align-self:flex-end}
}