:root{--bg-color: #202020;--bg-color2: #303030;--bg-color-hover: #3a3a3a;--bg-color-active: #3a79c0;--border-color:#111111;--text-color:#dddddd;--text-color-hover:#f7f7f7}body{margin:0;color:var(--text-color);font-family:Arial,Helvetica,sans-serif;background-color:var(--bg-color)}body .app{position:fixed;inset:2.25em 0 0;display:flex}body .app .lpanel{width:80%;height:100%;position:relative}body .app .rpanel{width:20%;height:100%}body .player{position:fixed;inset:0}body .help{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body .help div{background-color:gray;border-radius:2em;padding:2em}body .help img{width:auto;height:50vh}.btn{cursor:pointer;text-align:center;padding:.25em .5em;border-radius:.25em;background-color:var(--bg-color2)}.btn:hover{background-color:var(--bg-color-hover)}.menu{width:100%;height:2.25em;display:flex;align-items:center}.menu .menu-bg{position:fixed;display:none;inset:0;z-index:10}.menu .menu-bg.active{display:initial}.menu .menu-item{padding:.25em .75em;cursor:pointer;position:relative;min-width:2em}.menu .menu-item:hover{background-color:var(--bg-color-hover)}.menu .menu-item.active .sub-menu-content{display:initial}.menu .menu-item .sub-menu-content{display:none;position:absolute;top:1.875em;left:0;z-index:100;width:10em;min-width:5em;background-color:var(--bg-color);padding:.5em}.menu .menu-item .sub-menu-item{padding:.5em 1em;cursor:pointer}.menu .menu-item .sub-menu-item:hover{background-color:var(--bg-color-hover)}.view-port{width:100%;height:72%}.asset-browser{width:100%;height:28%;display:flex;flex-direction:column}.asset-browser .breadcrumb{padding:.5em 1em;display:flex;flex-wrap:wrap;border-radius:.25rem}.asset-browser .breadcrumb .breadcrumb-item{cursor:pointer}.asset-browser .breadcrumb .breadcrumb-item+.breadcrumb-item:before{display:inline-block;padding-right:.5rem;padding-left:.5rem;content:"/"}.asset-browser .content{padding:.5em 1em;flex:1;overflow-y:auto;display:block;background-color:var(--bg-color2);position:relative}.asset-browser .content .content-bg{position:absolute;inset:0;z-index:1}.asset-browser .content .content-list{position:absolute;inset:0;z-index:2}.asset-browser .content .content-item{display:inline-flex;flex-direction:column;width:6em;height:8em;padding:.25em;cursor:grab}.asset-browser .content .content-item:hover{background-color:var(--bg-color-hover)}.asset-browser .content .content-item img{width:100%;height:auto}.asset-browser .content .content-item span{font-size:.75em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline{width:100%;height:50%;font-size:.875em;padding:1em;overflow-y:auto}.outline .outline-item{padding:.125em;cursor:pointer;display:flex}.outline .outline-item.active{background-color:var(--bg-color-active)}.outline .outline-item:hover{background-color:var(--bg-color-hover)}.outline .outline-item span{padding:.125em;flex:1}.outline .outline-item img{height:1em;margin-right:.25em}.property{width:100%;height:50%}.property .content{padding:.5em 0;background-color:var(--bg-color-hover);height:100%;overflow-y:auto}.property .actor{display:flex;padding:.25em .5em}.property .actor .label{margin:0 .25em;flex:1}.property .actor input,.property .actor select{flex:3;margin:0 .25em}.property .actor .vec{display:flex;flex:3}.property .actor .vec input{min-width:unset;flex:unset;width:33%}.property .actor .btn{flex:3;border:1px solid #dddddd}.context-menu{display:none;position:absolute;background-color:#fff;border:1px solid #ccc;box-shadow:2px 2px 6px #0000004d;padding:.25em .5em;margin:0;list-style:none;z-index:1000;border-radius:.75em;color:var(--bg-color-hover);font-size:.875em}.context-menu ul{list-style:none;padding:0;margin:0}.context-menu .context-menu-item{padding:8px 12px;cursor:pointer}.context-menu .context-menu-item:hover{background-color:#f2f2f2}.app .file-browser .dialog-content{width:60vw;background-color:var(--bg-color)}.app .file-browser .dialog-content .dialog-body{background-color:var(--bg-color-hover);min-height:8em}.app .file-browser .dialog-content .dialog-footer{padding:.75em;gap:.5em}.app .file-browser .dialog-content .dialog-footer .label{padding:.25em .5em}.app .file-browser .dialog-content .dialog-footer input{flex:1}.app .file-browser .dialog-content .breadcrumb{padding:.5em 1em;display:flex;flex-wrap:wrap;border-radius:.25rem}.app .file-browser .dialog-content .breadcrumb .breadcrumb-item{cursor:pointer}.app .file-browser .dialog-content .breadcrumb .breadcrumb-item+.breadcrumb-item:before{display:inline-block;padding-right:.5rem;padding-left:.5rem;content:"/"}.app .file-browser .dialog-content .content-item{display:inline-flex;flex-direction:column;width:6em;height:8em;padding:.25em;cursor:pointer}.app .file-browser .dialog-content .content-item:hover{background-color:var(--bg-color-hover)}.app .file-browser .dialog-content .content-item img{width:100%;height:auto}.app .file-browser .dialog-content .content-item span{font-size:.75em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog{position:fixed;inset:0;display:none;z-index:10}.dialog.active{display:block}.dialog .dialog-bg{width:100%;height:100%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dialog .dialog-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#0b0f184f;border-radius:1em;padding:1em;min-width:20em}.dialog .dialog-content .dialog-footer{display:flex}
