.demo-bar{display:block;background:linear-gradient(110deg,#111b46,#221743);border-bottom:1px solid #763CFF;flex:none;color:#E2E8F0}
.demo-toggle{display:flex;align-items:center;gap:8px;padding:7px 16px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;user-select:none}
.demo-toggle::-webkit-details-marker{display:none}
.demo-toggle::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:3px}
.demo-bar[open] .demo-toggle::before{transform:rotate(45deg)}
.demo-toggle:focus-visible{outline:2px solid #0291FF;outline-offset:-2px}
.demo-sample-label{color:#aab9df;font-size:11px;font-weight:400;margin-left:auto}
.demo-content{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px 12px}
.demo-bar:not([open])>.demo-content{display:none}
.demo-copy{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px;line-height:1.4}
.demo-copy strong{font-size:14px;color:#fff}
.demo-copy>span{color:#c1cced}
.demo-copy #demoHint{color:#fff}
.demo-actions{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;max-width:55%}
.demo-actions .btn{white-space:nowrap}
.demo-actions .btn.primary{background:#2953FD;border-color:#0291FF}
@media(max-width:800px){.demo-toggle{padding:7px 12px}.demo-content{align-items:flex-start;flex-direction:column;padding:6px 12px 9px;gap:8px}.demo-actions{max-width:100%;gap:5px}.demo-actions .btn{font-size:11px;padding:6px 8px}.demo-copy>span{font-size:11px}}