:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#fff;background:#000;min-width:320px}button,input{font:inherit}button{color:inherit}h1,p{margin:0}a{color:inherit}.app-shell{flex-direction:column;height:100svh;display:flex;overflow:hidden}.top-bar{background:#111;justify-content:center;align-items:center;gap:.5rem;padding:.3rem .6rem;display:flex}.layout-picker{align-items:center;gap:.25rem;display:inline-flex}.layout-button,.utility-button,.toolbar-button,.drag-handle,.primary-button,.secondary-button,.text-button,.tile-empty-state{cursor:pointer;font:inherit;border:0}.layout-button,.utility-button,.toolbar-button,.drag-handle,.primary-button,.secondary-button,.text-button{transition:background-color .16s,color .16s}.layout-button{color:#ffffff80;background:0 0;border-radius:.4rem;min-width:2rem;min-height:2rem;font-size:.8rem;font-weight:700}.layout-button:hover{color:#fff;background:#ffffff1a}.layout-button--active{color:#000;background:#fff}.layout-button--active:hover{color:#000;background:#e0e0e0}.utility-button{color:#fff9;background:#ffffff14;border-radius:.4rem;min-height:2rem;padding:.4rem .7rem;font-size:.75rem;font-weight:600}.utility-button:hover{color:#fff;background:#ffffff26}.workspace{flex:1;min-height:0;position:relative}.workspace-stage{height:100%}.viewer-grid{background:#111;gap:4px;height:100%;display:grid}.viewer-grid--1{grid-template-columns:1fr}.viewer-grid--2{grid-template-rows:1fr;grid-template-columns:1fr 1fr}.viewer-grid--3{grid-template-rows:minmax(0,1.2fr) minmax(0,.8fr);grid-template-columns:repeat(2,minmax(0,1fr))}.viewer-grid--3>:first-child{grid-column:1/-1}.viewer-grid--4{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}.viewer-grid--dragging iframe{pointer-events:none}.video-tile{background:#000;min-width:0;min-height:0;position:relative;overflow:hidden}.video-tile--dragging{opacity:.4}.video-tile--ghost{aspect-ratio:16/9;border-radius:.5rem;width:min(20rem,100vw - 2rem)}.tile-player{background:#000;border:0;width:100%;height:100%;position:absolute;inset:0}.tile-overlay{opacity:0;z-index:10;background:linear-gradient(#0000 0%,#000000b3 100%);justify-content:flex-end;align-items:center;gap:.35rem;padding:.5rem;transition:opacity .2s;display:flex;position:absolute;bottom:0;left:0;right:0}.video-tile:hover .tile-overlay{opacity:1}.toolbar-button,.drag-handle{color:#ffffffd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1f;border-radius:.35rem;min-height:1.75rem;padding:.35rem .65rem;font-size:.75rem;font-weight:600}.toolbar-button:hover,.drag-handle:hover{color:#fff;background:#ffffff40}.tile-empty-state{color:#ffffff40;background:#0a0a0a;place-items:center;width:100%;height:100%;transition:color .2s,background .2s;display:grid;position:absolute;inset:0}.tile-empty-state:hover{color:#ffffff80;background:#111}.tile-empty-icon{font-size:2.5rem;font-weight:300;line-height:1}.video-tile--editing{display:flex}.tile-editor{background:#0a0a0a;flex-wrap:wrap;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:1rem;display:flex}.tile-input{color:#fff;min-width:12rem;font:inherit;background:#ffffff0d;border:1px solid #ffffff26;border-radius:.4rem;flex:1;padding:.6rem .8rem;font-size:.85rem}.tile-input::placeholder{color:#ffffff4d}.tile-input:focus{outline-offset:0;border-color:#ffffff4d;outline:1px solid #ffffff4d}.tile-error{color:#ff6b6b;text-align:center;width:100%;margin:0;font-size:.8rem}.tile-editor-actions{gap:.35rem;display:flex}.primary-button{color:#000;background:#fff;border-radius:.4rem;min-height:2rem;padding:.5rem .85rem;font-size:.8rem;font-weight:700}.primary-button:hover{background:#e0e0e0}.secondary-button,.text-button{color:#ffffffb3;background:#ffffff14;border-radius:.4rem;min-height:2rem;padding:.5rem .7rem;font-size:.8rem}.secondary-button:hover,.text-button:hover{color:#fff;background:#ffffff26}.tile-ghost-panel{background:#111;border-radius:.5rem;place-items:center;width:100%;height:100%;display:grid}.tile-ghost-title{color:#fff9;font-size:.9rem;font-weight:600}@keyframes tile-enter{0%{opacity:0}to{opacity:1}}.video-tile{animation:.2s both tile-enter}
