/* The preloaded app demo's own few elements; everything else is the app's stylesheet. */
.demo-context { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 11px; color: #777570; }
.demo-badge { flex-shrink: 0; padding: 3px 7px; border: 1px solid #dcdcdc; border-radius: 4px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #5e5b55; background: #fafafa; }
.demo-context-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-context a { flex-shrink: 0; color: #4c4a45; text-decoration: none; white-space: nowrap; }
.demo-context a:hover { text-decoration: underline; }
.workspace-breadcrumb { flex-shrink: 1; }
.demo-sample { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; flex-basis: 100%; }
.demo-sample a { font-size: 11px; color: #5f5f5f; }
.demo-message, .error.demo-message { color: #6b675f; background: #f6f5f2; border-radius: 5px; padding: 9px 11px; font-size: 11px; line-height: 1.7; }
#demo-replay:empty { display: none; }
#demo-replay { margin-top: 8px; }
#demo-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; width: min(560px, calc(100vw - 32px)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: #302f2c; color: #fff; border-radius: 8px; padding: 12px 16px; font-size: 12px; line-height: 1.6; box-shadow: 0 10px 40px #302f2c33; }
#demo-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1250px) { .demo-context-text { display: none; } }
@media (max-width: 760px) {
  .demo-context { gap: 8px; }
  .demo-context a { font-size: 10px; }
  .workspace-breadcrumb { overflow: hidden; }
}
@media (max-width: 400px) { .demo-badge { display: none; } }