body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background-color:#3e3e3e;color:#fff;width:100vw;height:100vh;overflow:hidden;--example-list-width: 200px}#app{width:100%;height:100%}.example-list{position:absolute;width:var(--example-list-width);height:100%;box-shadow:2px 0 5px #000000bf;box-sizing:border-box;overflow:hidden scroll;scrollbar-width:thin;background-color:#3e3e3e;scrollbar-color:#3e3e3e #1e1e1e}.example-list.expanded{display:grid;grid-template-columns:1fr 1fr 1fr;place-content:start;grid-gap:8px}.example-list>.toolbar{display:flex;width:100%;height:50px;padding-block:8px;box-sizing:border-box;background-color:#3e3e3e;box-shadow:0 2px 5px #000000bf;position:sticky;top:0;z-index:10}.example-list.expanded>.toolbar{grid-column:span 3}.example-list>.toolbar>input.search{width:calc(100% - 49px);height:100%;border:none;border-radius:4px;background-color:#0e0e0e;color:#fff;padding:0 8px;box-sizing:border-box;font-size:14px}.example-list>.toolbar>input.search:focus{outline:none;background-color:#1e1e1e;box-shadow:0 0 5px #000000bf}.example-list>.toolbar>button{width:42px;height:100%;margin-left:2px;border:none;box-sizing:border-box;border-radius:4px;background-color:#1e1e1e;color:#fff;cursor:pointer}.example-list>.toolbar>button.expand>img{width:20px;height:20px;position:relative;top:2px;object-fit:contain}.example-list.expanded>.toolbar>button.expand>img{transform:rotate(180deg)}.example-list>.example-item{width:calc(100% - 16px);height:130px;margin:16px 8px;box-sizing:border-box;overflow:hidden;box-shadow:0 0 5px #000000bf;transition:box-shadow .3s ease-in-out;border-radius:8px}.example-list>.example-item:hover{box-shadow:0 0 16px #000000bf}.example-list>.example-item>.item-image{width:100%;height:calc(100% - 20px);object-fit:contain;transform:scale(1);box-sizing:border-box;background-color:#1e1e1e}.example-list>.example-item>.item-title{width:100%;height:20px;text-align:center;font-size:14px;line-height:14px;font-weight:700;color:#fff;background-color:#3e3e3e;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;padding-inline:12px}.canvas-container{width:calc(100% - 205px);height:100%;margin-left:205px}@media screen and (max-width: 600px){body{background-color:#3e3e3e}#app{width:100%;height:100%}.example-list{position:absolute;width:100%;height:200px;box-shadow:0 2px 5px #000000bf}}