.demo-mount[data-demo="switchyard"].is-live { height: 680px; padding: 0; }
.demo-mount[data-demo="switchyard"] .sy-host { height: 100%; }
@media (max-width: 640px) {
  .demo-mount[data-demo="switchyard"].is-live { height: 600px; }
}
.demo-mount[data-demo="switchyard"] { position: relative; }
.sy-tour-play {
  position: absolute; left: 50%; top: 42%; z-index: 5; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--page);
  font: 600 15px/1 inherit; cursor: pointer; box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
  transition: opacity 150ms var(--ease);
}
.sy-tour-play::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sy-tour-play:hover { opacity: 0.88; }
.sy-tour-control {
  margin-left: 8px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--raised); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.sy-tour-control:hover { border-color: var(--line-strong); }