.app-preview{transition:all .3s ease;scrollbar-width:thin;inset:0}.app-preview__breakpoint{position:absolute;top:.5rem;right:.5rem;font-size:.8rem}.app-flex-container{background-color:var(--bs-body-bg);outline:1px dashed var(--bs-primary);cursor:pointer}.app-flex-container.active{background-color:rgba(var(--bs-primary-rgb),.2);outline:1px solid var(--bs-primary)}.app-flex-item{background-color:var(--bs-gray-500);color:#fff;cursor:pointer;align-content:center;text-align:center;position:relative}.app-flex-item:before{display:block;position:absolute;content:"";top:0;left:0;right:0;bottom:0;pointer-events:none;border:1px solid rgba(0,0,0,.1)}.app-flex-item.active{background-color:var(--bs-primary)}.app-sidebar-breakpoints{grid-template-rows:1fr auto}.app-sidebar-breakpoints__list{scrollbar-width:thin}.app-sidebar-breakpoints__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sidebar__nav .icon-devices{--size:1.5rem;filter:none}[data-bs-theme=dark] .app-sidebar__nav .icon-devices{filter:brightness(160%)}.app-sidebar__nav .active .icon-devices{filter:brightness(0) grayscale(100%) contrast(200%)}[data-bs-theme=dark] .app-sidebar__nav .active .icon-devices{filter:brightness(200%) grayscale(100%) contrast(200%)}.app-projects__item{display:grid;justify-content:unset}.app-projects__preview{border-radius:0;background:rgba(var(--bs-primary-rgb),.1);outline:1px dashed var(--bs-primary)}.app-projects__preview-item{background:var(--bs-gray-500)}.app-projects__breakpoints{display:flex;justify-content:center;position:absolute;width:100%;bottom:.2rem;left:0;gap:.2rem;z-index:15;padding:0 15px;flex-wrap:wrap}.app-projects__breakpoint{width:7px;height:7px;border-radius:50%;background:#fff;padding:0;margin:0;border:1px solid var(--bs-body-bg);outline:1px solid var(--bs-gray-500)}.app-projects__breakpoint:focus,.app-projects__breakpoint:hover{outline:1px solid var(--bs-primary)}.app-projects__breakpoint.active{outline:1px solid var(--bs-primary)!important;background:var(--bs-primary)}.app-main,.app-sidebar{height:50vh;min-height:400px}.breakpoints-list li{cursor:pointer}.icon-devices{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%234361ee'%3e%3cpath d='M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z'/%3e%3c/svg%3e")}