/* Walkthrough controls belong to the website, outside the recreated app. */
[data-demo]:not([data-demo-ready]) .workspace-demo-controls { display: none; }
[data-demo-playing="false"] * { animation-play-state: paused !important; }
.workspace-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; font-family: Inter, Arial, sans-serif; }
.workspace-demo-controls button { cursor: pointer; font: inherit; line-height: 1.4; font-size: 13px; font-weight: 600; border: 1px solid #c7cdd0; border-radius: 4px; background: transparent; color: #303638; padding: 10px 14px; transition: background-color .2s, border-color .2s; }
.workspace-demo-controls .workspace-demo-play { background: #171b1d; color: #fff; border-color: #171b1d; min-width: 163px; }
.workspace-demo-controls .workspace-demo-play:hover { background: #343c40; }
.workspace-demo-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.workspace-demo-controls button[aria-pressed="true"] { color: #15586a; border-color: #56bfd3; background: #e9f7fa; }
.workspace-demo-controls button:hover { border-color: #56bfd3; }
.workspace-demo-controls button:focus-visible { outline: 2px solid #1687a1; outline-offset: 3px; }
.workspace-demo-status { flex-basis: 100%; margin: 0; color: #566267; font-size: 13px; line-height: 1.55; }
@media (max-width: 600px) { .workspace-demo-controls { gap: 10px; } .workspace-demo-steps { width: 100%; } .workspace-demo-steps button { flex: 1; padding: 9px 7px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .workspace-demo-controls button { transition: none; } }