.demo-app{--demo-sidebar-width:17rem;background:var(--tblr-bg-surface-secondary);color:var(--tblr-body-color);place-items:initial;min-height:100vh;padding:0;display:flex}.demo-sidebar{flex:0 0 var(--demo-sidebar-width);height:100vh;width:var(--demo-sidebar-width);z-index:1040;background:#14213d;position:sticky;top:0}.demo-sidebar>.container-fluid{height:100%;padding:0 1rem;display:flex}.demo-brand-row{border-bottom:1px solid #ffffff1f;justify-content:space-between;align-items:center;min-width:0;min-height:4.25rem;display:flex}.demo-brand{color:#fff;background:0 0;border:0;justify-content:flex-start;align-items:center;gap:.75rem;width:auto;min-width:0;margin:0;padding:.75rem 0;display:flex;overflow:hidden}.demo-brand strong{text-overflow:ellipsis;overflow:hidden}.demo-close{flex:none}.demo-logo{background:var(--tblr-primary);letter-spacing:.04em;border-radius:.65rem;flex:0 0 2.25rem;justify-content:center;align-items:center;height:2.25rem;font-size:.75rem;font-weight:700;display:inline-flex}.demo-nav-label{color:#ffffff6b;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .75rem;font-size:.65rem;font-weight:700}.demo-sidebar .navbar-nav{gap:.2rem}.demo-sidebar .nav-link{color:#ffffffad;text-align:start;background:0 0;border:0;border-radius:.5rem;align-items:center;width:100%;min-height:2.5rem;padding:.55rem .75rem;display:flex}.demo-sidebar .nav-link:hover{color:#fff;background:#ffffff12}.demo-sidebar .nav-link.active,.demo-sidebar .nav-link[aria-current=page]{background:rgb(var(--tblr-primary-rgb) / 28%);color:#fff;font-weight:600}.demo-sidebar .nav-link-icon{color:currentColor;margin-inline-end:.55rem}.demo-sidebar-footer{border-top:1px solid #ffffff1f;gap:1rem;padding:1rem 0;display:grid}.demo-mode-note{color:#ffffff94;align-items:flex-start;gap:.5rem;font-size:.75rem;line-height:1.4;display:flex}.demo-main{min-width:0;width:calc(100% - var(--demo-sidebar-width))}.demo-topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--tblr-border-color);background:#ffffffeb;min-height:4.25rem}.demo-topbar .container-fluid{gap:.75rem}.demo-hero-card{background-image:radial-gradient(circle at 90% 10%, rgb(var(--tblr-primary-rgb) / 15%), transparent 35%)}.demo-hero-card .btn,.demo-topbar .btn{align-items:center;gap:.45rem;display:inline-flex}.demo-backdrop{z-index:1035;background:#0f172a8c;border:0;position:fixed;inset:0}.demo-app :is(a,button):focus-visible{outline:3px solid rgb(var(--tblr-primary-rgb) / 35%);outline-offset:2px}@media (max-width:991.98px){.demo-sidebar{box-shadow:var(--tblr-shadow-card-hover);transition:transform .2s;position:fixed;left:0;transform:translate(-105%)}.demo-sidebar.is-open{transform:translate(0)}.demo-main{width:100%}}@media (max-width:575.98px){.demo-topbar .btn{padding-inline:.75rem}}@media (prefers-reduced-motion:reduce){.demo-sidebar{transition:none}}