.demo-toolbar { position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: #fff; color: #20314a; border-bottom: 1px solid #cddbf1; font: 14px/1.4 system-ui,sans-serif; box-shadow: 0 2px 10px #1234560d; }
.demo-toolbar div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-toolbar a { color: #2458b8; text-decoration: underline; text-underline-offset: 3px; }
.demo-toolbar a.demo-create { display: inline-flex; padding: 10px 16px; border-radius: 999px; background: #386dec; color: white; text-decoration: none; font-weight: 600; }
.demo-toolbar a:focus-visible { outline: 3px solid #386dec; outline-offset: 3px; }
.demo-preview .demo-toolbar { display: none; }
@media(max-width:575px) { .demo-toolbar { position: relative; padding: 12px 16px; } .demo-toolbar > div { width: 100%; } }