/* Portable demo navigation, isolated from the mockup navigation. */
:root{--demo-bar-height:58px}html{scroll-padding-top:250px}.demo-banner{box-sizing:border-box;position:sticky;top:0;z-index:70;height:var(--demo-bar-height);padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#17252d;color:#fff;font:13px/1.4 Manrope,Arial,sans-serif;border-bottom:1px solid #3d4b51}.demo-banner a{color:inherit;text-decoration:none;white-space:nowrap}.demo-home{font-weight:700}.demo-label{font-size:10px;letter-spacing:.12em;color:#c0cbd0}.demo-banner .demo-tabs{position:static;display:flex;align-items:center;gap:5px;width:auto;max-height:none;padding:0;margin:0;background:transparent;color:#fff;box-shadow:none;overflow:visible}.demo-banner .demo-tabs a{display:block;padding:10px 14px;border:1px solid #56656c;border-radius:5px;font-size:12px;font-weight:600}.demo-banner .demo-tabs a:hover{background:#344750;color:white}.demo-banner .demo-tabs a[aria-current]{background:#fff;color:#17252d;border-color:#fff}.demo-banner a:focus-visible{outline:3px solid #ffd079;outline-offset:3px}.header{top:var(--demo-bar-height)!important}.demo-banner~main{min-width:0}
@media(max-width:760px){:root{--demo-bar-height:103px}.demo-banner{height:103px;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:8px}.demo-label{font-size:8px}.demo-banner .demo-tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.demo-banner .demo-tabs a{padding:10px 7px;text-align:center;font-size:11px}.demo-home{font-size:12px}html{scroll-padding-top:220px}}