.app-main{display:grid;grid-template-rows:1fr auto;border-top-width:1px}.app-main canvas{cursor:crosshair}.app-main__canvas-wrapper{position:absolute;inset:0}.app-colors__item{display:grid;grid-template-columns:auto 1fr auto;cursor:pointer;font-size:.9rem}.app-colors__color{width:40px;height:40px;border-radius:50%;border:1px solid var(--bs-body-bg);outline:1px solid var(--bs-border-color);position:relative}.app-colors__color span{position:absolute;inset:0;background-repeat:no-repeat;background-size:20px;background-position:center;transform:scale(0);transition:transform ease .3s}.app-colors__item:focus{outline:0}.app-colors__item:focus .app-colors__color,.app-colors__item:hover .app-colors__color{outline:1px solid var(--bs-primary)}.app-colors__item:focus .app-colors__color span,.app-colors__item:hover .app-colors__color span{transform:scale(1)}.app-sidebar{display:grid;grid-template-rows:auto 1fr}.app-sidebar .btn-group-sm .btn{--bs-btn-padding-x:.25rem}.app-sidebar__current-color{font-size:.9rem}.app-sidebar__current-color div:nth-child(1){width:40px;height:40px;outline:1px solid var(--bs-border-color)}.app-sidebar__section:nth-child(2){scrollbar-width:thin}.app-magnifier{background:var(--bs-primary-bg-subtle);padding:1px}.app-magnifier table{border:1px solid var(--bs-border-color)}.app-magnifier tr:nth-child(5) td:nth-child(6){border-bottom-color:red}.app-magnifier tr:nth-child(6) td:nth-child(5){border-right-color:red}.app-magnifier tr:nth-child(6) td:nth-child(6){border-color:red}.app-magnifier td{width:8px;height:8px;border:1px solid var(--bs-primary-bg-subtle)}.app-main,.app-sidebar{height:50vh;min-height:500px}@media (min-width:992px){.app-sidebar{border-top-width:1px}}