.view{height:calc(100vh - var(--menu-bar-height));flex-direction:row;width:100%;display:flex}.view-wrapper{flex-direction:column;display:flex;position:relative}.canvas-element-list-container{flex-direction:column;align-items:center;width:100%;display:flex}.add-element-button{background-color:var(--background-light);border:1px solid var(--border);width:80%;height:36px;color:var(--foreground);border-radius:7px;align-self:center;margin-bottom:20px;font-family:Outfit,Arial,Helvetica,sans-serif;font-size:18px;transition:all .15s}.add-element-button:hover{background-color:var(--background-lighter);border-color:var(--border-lighter)}.add-element-button:active{background-color:#3d3d3d}.controls-section-container{height:calc(100vh - var(--menu-bar-height));border-right:1px solid var(--border);grid-template-rows:2fr 3fr;width:480px;padding:20px 0;display:grid}.canvas-section-container{flex-direction:column;justify-content:space-between;align-items:start;width:100%;display:flex;overflow:auto}.canvas-container{aspect-ratio:16/9;width:100%}.canvas-container canvas{object-fit:block;width:100%!important;height:100%!important}.canvas-element-list{border-bottom:1px solid var(--border);flex-direction:column;align-items:center;gap:10px;width:100%;height:100%;min-height:300px;max-height:300px;padding:0 20px 10px;list-style-type:none;display:flex;overflow:scroll}.canvas-element-editor-container{height:100%;overflow:scroll}.add-element-section-overlay{z-index:500;background-color:#000000c5;justify-content:center;align-items:center;gap:20px;display:flex;position:absolute;inset:0}.canvas-element-editor-container{padding:20px}.missing-element-state{width:100%;height:100%;color:var(--border-lighter);flex-direction:column;place-content:center;gap:10px;padding:10px;display:flex}.missing-element-state span{text-align:center;display:block}.missing-element-state-emote{letter-spacing:-10px;margin-bottom:10px;font-family:monospace;font-size:70px}.missing-element-state-text{font-size:25px}
.edit-element-section{flex-direction:column;gap:10px;display:flex}.editable-property-input-container{justify-content:space-between;align-items:center;display:flex}.editable-property-input{appearance:none;background:linear-gradient(to right, var(--green) 0%, var(--green) var(--pct,100%), var(--border) var(--pct,100%), var(--border) 100%);cursor:pointer;border-radius:2px;outline:none;height:4px}.editable-property-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px;transition:transform .1s}.player-volume-fader::-moz-range-thumb{background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px}.edit-name-input-field{border:1px solid var(--border);background-color:var(--background-lighter);border-radius:7px;outline:none;width:100%;height:3em;padding:5px 20px;font-family:Outfit,Arial,Helvetica,sans-serif;font-size:15px;transition:all .2s}.edit-name-input-field:focus{border:2px solid var(--green)}
li{overflow:hidden}.canvas-element-list-item{background-color:var(--background-light);border:1px solid var(--border);border-radius:7px;justify-content:space-between;align-items:center;width:100%;min-height:50px;padding:5px 10px;transition:all .15s;display:flex}.canvas-element-list-item p{white-space:nowrap;text-overflow:ellipsis;text-align:center;flex:1;min-width:0;overflow:hidden}.canvas-element-list-item.selected{background-color:var(--dark-green);border-color:var(--green);color:var(--green)}.canvas-element-list-item:hover{cursor:grab;background-color:var(--background-lighter);border-color:var(--border-lighter)}.canvas-element-list-item:active,.canvas-element-list-item.dragging{background-color:#3d3d3d}.canvas-element-list-item:before{display:none}.canvas-item-list-action-button{width:25px;height:25px}.canvas-item-list-actions-container svg{color:var(--foreground);justify-content:center;align-items:center;width:25px;min-width:25px;height:25px;display:flex}.canvas-element-list-item.selected .canvas-item-list-actions-container svg{color:var(--green)}.canvas-element-list-item:has(.canvas-element-list-action-remove:hover) svg{color:var(--red);transition:all .15s}.canvas-element-list-item:has(.canvas-element-list-action-remove:hover){border-color:var(--red);color:var(--red);background-color:#301616}
.add-element-section-container{background-color:var(--background);border-right:1px solid var(--border);border-left:1px solid var(--border);flex-direction:column;width:500px;height:100vh;padding:40px;display:flex}.add-element-tab-button-container{gap:15px;margin-top:15px;display:flex}.add-element-tab-button{border-bottom:1px solid var(--border);padding:8px 20px;transition:all .2s}.add-element-tab-button:hover{background-color:#161616}.add-element-tab-button:active{background-color:var(--border-lighter);transition:all 50ms}.add-element-tab-button.tab-button-active,.add-element-tab-button.tab-button-active:hover{background-color:var(--border)}.add-element-tab-button.tab-button-active:active{background-color:var(--border-lighter);transition:all 50ms}.creation-tab{flex-direction:column;gap:20px;display:flex}.add-element-input-container{flex-direction:column;gap:5px;display:flex;position:relative}.add-element-input{border:1px solid var(--border);border-radius:7px;padding:10px 20px}.grid-2{grid-template-columns:1fr 1fr;gap:20px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:20px;display:grid}.grid-4{grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;display:grid}.add-button{background-color:#132213;border:1px solid #335a33;border-radius:7px;align-self:center;width:100%;padding:10px 20px;font-weight:700;transition:all .2s}.add-button:hover{background-color:#243f24;border:1px solid #335a33;border-radius:7px;transition:all .2s}.add-el-view{justify-content:center;align-items:center;gap:50px;display:flex}.preview-canvas-wrapper{aspect-ratio:16/9;border:1px solid var(--border);background:#000;border-radius:12px;width:750px;position:relative;overflow:hidden}.preview-canvas-container{width:100%;height:100%}.preview-canvas-container canvas{width:100%!important;height:100%!important}.preview-canvas-empty{color:#000;pointer-events:none;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:0}
.filter-section{flex-direction:column;gap:12px;padding:10px 0;display:flex}.filter-panel{background-color:var(--background);width:100%}.filter-panel-heading{margin-bottom:10px}.filter-header{justify-content:space-between;align-items:center;font-size:18px;display:flex}.filter-panel-overlay{z-index:10;background-color:#0009;border-radius:20px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.filter-adjustments-container{flex-direction:column;gap:10px;padding:10px 0 0 20px;display:flex}.checkbox-container{-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.checkbox-container input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.checkbox-container .checkmark{border:1.5px solid var(--border);background:var(--background-light);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:border-color .16s,background .16s;display:flex}.checkbox-container input:checked+.checkmark{background:var(--green);border-color:var(--green)}.checkmark:after{content:"";border:2px solid #0000;border-top:none;border-left:none;width:5px;height:9px;transition:border-color .1s;display:block;transform:rotate(45deg)translate(-1px,-1px)}.checkbox-container input:checked+.checkmark:after{border-color:var(--background)}.checkbox-container .checkmark-smaller{width:18px;height:18px}
.player-wrapper{width:100%;height:100%;position:relative}.player-player{background:var(--background);flex-direction:column;justify-content:space-evenly;gap:10px;width:100%;height:100%;padding:12px 16px;display:flex}.player-controls-row{justify-content:space-between;align-items:center;display:flex}.player-left-controls{align-items:center;gap:6px;display:flex}.player-right-controls{align-items:center;gap:8px;display:flex}.player-button{border:1px solid var(--border);background:var(--background-light);color:#aaa;cursor:pointer;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:5em;height:34px;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.player-button svg{width:15px;height:15px}.player-button:hover{background:var(--background-lighter);color:var(--foreground);border-color:var(--border-lighter)}.player-button--active{background:var(--dark-green);color:var(--green);border-color:var(--green)}.player-button--muted{color:var(--red);border-color:var(--red)}.player-button--recording{color:var(--red);border-color:var(--red);animation:1s ease-in-out infinite pulse-record}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.4}}.player-volume-fader{appearance:none;background:linear-gradient(to right, var(--green) 0%, var(--green) var(--pct,100%), var(--border) var(--pct,100%), var(--border) 100%);cursor:pointer;border-radius:2px;outline:none;width:90px;height:4px}.player-volume-fader::-webkit-slider-thumb{-webkit-appearance:none;background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px;transition:transform .1s}.player-volume-fader::-webkit-slider-thumb:hover{transform:scale(1.2)}.player-volume-fader::-moz-range-thumb{background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px}.player-progress-row{align-items:center;gap:8px;display:flex}.player-time{color:var(--border-lighter);letter-spacing:.03em;min-width:34px;font-size:13px}.player-time:last-child{text-align:right;font-size:13px}.player-seek{appearance:none;background:linear-gradient(to right, var(--green) 0%, var(--green) var(--pct,0%), var(--border) var(--pct,0%), var(--border) 100%);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.player-seek::-webkit-slider-thumb{-webkit-appearance:none;background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px;transition:transform .1s}.player-seek::-webkit-slider-thumb:hover{transform:scale(1.2)}.player-seek::-moz-range-thumb{background:var(--foreground);border:2px solid var(--green);cursor:pointer;border-radius:50%;width:13px;height:13px}.player-overlay{cursor:pointer;z-index:10;background:#000000a6;border-radius:10px;justify-content:center;align-items:center;transition:background .2s;display:flex;position:absolute;inset:0}.player-overlay:hover{background:#000000a6}.player-overlay-content{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex}.player-overlay-icon{color:#acacac;font-size:30px;font-weight:300;line-height:.8}.player-overlay-dropzone{border:2px dashed var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:5px;padding:8px 22px;display:flex}.player-overlay-dropzone span{color:#acacac;letter-spacing:.05em;text-transform:uppercase;justify-content:center;font-size:15px}
.menu-bar{height:var(--menu-bar-height);background:var(--background);border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:2px;padding:0 8px;display:flex}.menu-bar-item{position:relative}.sonos-logo{padding-left:20%;font-family:Courier New,Courier,monospace;font-weight:900}.menu-bar-trigger{height:26px;color:var(--foreground);cursor:pointer;background:0 0;border:none;border-radius:5px;padding:0 10px;font-family:Outfit,Arial,Helvetica,sans-serif;font-size:15px;transition:background .15s}.menu-bar-trigger:hover,.menu-bar-trigger--active{background:var(--background-lighter)}.menu-dropdown{background:var(--background-light);border:1px solid var(--border);z-index:1000;border-radius:8px;min-width:180px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;box-shadow:0 8px 24px #0006}.menu-dropdown-item{width:100%;color:var(--foreground);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:5px;padding:7px 10px;font-family:Outfit,Arial,Helvetica,sans-serif;font-size:15px;transition:background .15s}.menu-dropdown-item:hover{background:var(--background-lighter)}.menu-dropdown-item--danger{color:var(--red)}.menu-dropdown-item--danger:hover{background:#301616}.menu-dropdown-separator{background:var(--border);height:1px;margin:4px 0}