/* Demonstration bar only. The workspace itself uses style.css and workspace-design.css. */
.demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding:9px 18px;background:#16204a;color:#fff;font-size:13px;line-height:1.4;box-shadow:0 -2px 14px rgba(0,0,0,.18)}
.demo-bar b{font-weight:700}
.demo-bar-actions{display:flex;gap:16px;align-items:center}
.demo-bar a,.demo-bar button{color:#fff;font:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:4px 0;cursor:pointer;min-height:24px}
.demo-bar a:hover,.demo-bar button:hover{text-decoration-thickness:2px}
body{padding-bottom:48px}
@media (max-width:640px){.demo-bar{font-size:12px;padding:8px 12px}body{padding-bottom:124px}}
.demo-explain{background:#eef0f8;border-left:4px solid #1f338b;border-radius:6px;padding:14px 18px;margin:14px 0 18px;font-size:15px;line-height:1.55}
.demo-explain p{margin:6px 0}
.demo-bar a.demo-bar-new{color:#ffd27a;font-weight:700}
/* Phone: keep the demo bar to one slim row; links scroll sideways. */
@media (max-width:640px){.demo-bar{flex-wrap:nowrap;gap:12px;padding:0 0 0 12px;min-height:48px}.demo-bar>span:first-child{flex:none;font-size:0}.demo-bar>span:first-child b{font-size:12px}.demo-bar-actions{flex:1;min-width:0;gap:14px;overflow-x:auto;scrollbar-width:none;padding-right:12px}.demo-bar-actions::-webkit-scrollbar{display:none}.demo-bar a,.demo-bar button{flex:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}body{padding-bottom:64px}}