:root{--demo-bar-height:42px}
body{padding-top:var(--demo-bar-height)!important}
.demo-bar{position:fixed;inset:0 0 auto;height:42px;z-index:10000;display:flex;align-items:center;gap:18px;padding:0 22px;background:#172644;color:#fff;font:12px/1.3 "Microsoft YaHei",Arial,sans-serif;box-sizing:border-box}
.demo-bar strong{font-size:14px;white-space:nowrap}.demo-bar strong span{font-size:11px;color:#a6c1ff;font-weight:500;margin-left:8px}
.demo-bar p{margin:0;color:#c8d4ec}.demo-bar nav{margin-left:auto;display:flex;gap:6px}.demo-bar a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:5px;white-space:nowrap}.demo-bar a:hover,.demo-bar a:focus-visible{background:#304b78;outline:1px solid #b3cdff}
.demo-notice{position:fixed;z-index:20000;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(560px,90vw);padding:13px 20px;border-radius:9px;background:#172644;color:#fff;box-shadow:0 8px 24px #0003;font:14px/1.6 "Microsoft YaHei",sans-serif}
.demo-notice[hidden]{display:none}
@media(max-width:640px){.demo-bar{padding:0 10px;gap:6px}.demo-bar p{display:none}.demo-bar strong span{margin-left:4px}.demo-bar nav{gap:0}.demo-bar a{padding:6px}}