body{--primary-color:#8f7ef4;--hover-color:#b9adff;-webkit-user-select:none;user-select:none;color:#282c4a;margin:0}::-webkit-scrollbar{display:none}.app{flex-flow:column;justify-content:stretch;height:100dvh;display:flex;overflow:hidden}.head{z-index:1;flex:none;grid-template-columns:repeat(3,minmax(auto,1fr));align-items:center;height:64px;padding:0 16px;display:grid;position:relative;box-shadow:4px 10px 10px #00000008}.head .head-left{display:flex}.head .head-left .icon-button{flex:none;margin-right:8px}.head .head-center{text-wrap:nowrap;text-overflow:ellipsis;box-sizing:border-box;justify-self:center;max-width:min(100%,300px);padding-inline:16px;overflow:hidden}.head .head-right{justify-self:end}.body{flex:1;justify-content:stretch;display:flex;overflow:hidden}.material-library{box-sizing:border-box;border-right:1px solid #eee;flex:none;width:240px;overflow-y:auto}.material-category{padding:12px}.material-category-name{margin-bottom:8px}.property{box-sizing:border-box;border-left:1px solid #eee;flex:none;width:240px}.canvas-wrapper{flex:1;min-width:400px;position:relative;overflow:hidden}.zoom-control{background:#fff;border:1px solid #e0e0e0;border-radius:18px;align-items:center;padding-left:8px;padding-right:8px;display:flex;position:absolute;bottom:24px;right:24px}.zoom-control .icon{margin:5px;padding:4px;font-size:16px}.icon{color:#282c4a;cursor:pointer}.icon.disabled{opacity:.4}.zoom-control .label{color:#282c4a;text-align:center;width:40px;font-size:14px}.view-control{filter:drop-shadow(0 2px 8px #00000026);background:#fff;border-radius:8px;flex-flow:column;padding:12px 16px;display:flex;position:absolute;top:12px;left:12px}.undo-control .icon{border-radius:4px;padding:8px;font-size:24px}.undo-control .icon:hover{background:#f5f5f5}.detail{padding:24px}.detail>div{margin-bottom:12px}.detail-name{margin-bottom:4px}.detail-image{object-fit:contain;background-image:linear-gradient(45deg,#ccc 25%,#0000 0 75%,#ccc 0),linear-gradient(45deg,#ccc 25%,#0000 0 75%,#ccc 0);background-position:0 0,8px 8px;background-size:16px 16px;width:104px;height:104px}.detail .icon{margin-right:4px;padding:8px}.detail .icon.active{color:var(--primary-color);background-color:#f5f5f5;border-radius:4px}.menu-mask{z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0}.menu{background:#fff;border-radius:4px;width:132px;padding:4px;position:absolute;box-shadow:0 0 8px #0003}.menu-item{color:#282c4a;cursor:pointer;border-radius:2px;justify-content:center;align-items:center;height:40px;font-size:12px;line-height:20px;display:flex}.menu-item:hover{background:#f6f6f6}.menu-divider{background:#e0e0e0;border-radius:1px;height:1px;margin-top:4px;margin-bottom:4px}.svg-icon{width:24px;height:24px}.icon-button{cursor:pointer;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.icon-button:not(.disabled):hover{background-color:#f5f5f5;border-radius:4px}.icon-button.active{color:var(--primary-color);background-color:#f5f5f5;border-radius:4px}.icon-button.disabled{opacity:.4;cursor:not-allowed}.material-list{gap:12px;display:flex}.material{cursor:pointer;flex:none;width:60px;height:60px}.material:hover{outline:var(--hover-color) solid 2px;outline-offset:2px}.material.active{outline:var(--primary-color) solid 2px;outline-offset:2px}