/* Demo-only styles, on top of src/styles.css. Generated by tools/build-demo.py. */
.demobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:-6px 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13.5px}
.demobar b{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.demobar a{color:var(--accent);font-weight:600}
.demobar .btn.primary{text-decoration:none}
#copyPlay{display:none}
/* Embedded on the sales page: just the board and the step card, always in the dark theme to match the screens there. */
.embed .wrap{padding:8px;max-width:none}
.embed .top,.embed .demobar,.embed .lib,.embed details.card,.embed .deskonly,.embed #bPrint,.embed .firstrun{display:none}
.embed .mobile-pick{display:block}
.embed .seg[aria-label="Board mode"],.embed .seg[aria-label="Display"]{display:none} /* play, step and quiz only */
.embed .toolbar{justify-content:flex-end}
.embed .ib.play{width:72px}
.embed .say{font-size:16.5px}
.embed .app{grid-template-columns:minmax(0,1fr) 300px;gap:14px}
.embed #field{max-height:calc(100vh - 240px)} /* the play buttons stay in view inside the frame */
@media (max-width:840px){.embed .app{grid-template-columns:minmax(0,1fr)}.embed #field{max-height:none}}