/* The guided demo's own packaging, kept by the website: the bar above the workspace that says what this is and holds
   the controls, the room the workspace is given inside the frame, and the ring that shows where the example clicks.
   The workspace itself is styled by the application's stylesheets next door (../markly-workspace/), unchanged. */
html, body.demo-body { height: 100%; }
body.demo-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; }
/* the workspace fills what is left under the bar, and is exactly as wide as the frame (never as wide as its content) */
.demo-body .main { flex: 1; min-height: 0; min-width: 0; }
.demo-body .wrap.wide { width: auto; height: 100%; min-height: 0; margin: 0; padding: 10px 12px 12px; }

.demo-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; background: hsl(60 4% 11%); color: hsl(60 10% 96%); font-size: 13px; line-height: 1.35; }
.demo-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: #f2c14e; color: hsl(45 40% 10%); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.demo-say { flex: 1; min-width: 0; margin: 0; }
.demo-dots { flex: none; display: flex; gap: 5px; }
.demo-dots i { width: 6px; height: 6px; border-radius: 50%; background: hsl(0 0% 100% / 0.26); transition: background-color 150ms; }
.demo-dots i.done { background: hsl(0 0% 100% / 0.62); }
.demo-dots i.on { background: #f2c14e; }
.demo-btns { flex: none; display: flex; gap: 6px; }
.demo-btn { min-height: 30px; padding: 0 12px; border: 1px solid hsl(0 0% 100% / 0.34); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms; }
.demo-btn:hover { background: hsl(0 0% 100% / 0.12); border-color: hsl(0 0% 100% / 0.6); }
.demo-btn:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
.demo-btn.demo-go { background: hsl(60 10% 96%); border-color: hsl(60 10% 96%); color: hsl(60 4% 11%); }
.demo-btn.demo-go:hover { background: #fff; border-color: #fff; }
.demo-btn[hidden] { display: none; }

.demo-tap { position: fixed; z-index: 95; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid #1a8a4a; border-radius: 50%; background: hsl(146 68% 32% / 0.18); pointer-events: none; opacity: 0; }
.demo-tap.go { animation: demo-tap 0.6s ease-out; }
@keyframes demo-tap { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1); } }

@media (pointer: coarse) { .demo-btn { min-height: 38px; } }
@media (max-width: 760px) {
  .demo-bar { flex-wrap: wrap; gap: 6px 8px; padding: 7px 10px; }
  .demo-say { flex: 1 1 100%; order: 4; font-size: 14px; }
  .demo-dots { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-tap { display: none; }
  .demo-dots i, .demo-btn { transition: none; }
}