@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Bebas+Neue&family=League+Spartan:wght@400;500;600;700;800;900&family=Jost:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=Lato:wght@400;700;900&family=Syne:wght@400;500;600;700;800&family=Eczar:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&family=Spectral:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600;700;800;900&family=Lora:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Anton&family=Alegreya:wght@400;500;600;700;800;900&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#e8eaed;background:#000;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;overflow:hidden}.app{background:#000;flex-direction:column;height:100%;display:flex}.topbar{-webkit-user-select:none;user-select:none;background:#000;border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding:15px 24px;display:flex}.logo{text-transform:uppercase;letter-spacing:.28em;color:#fff;cursor:pointer;background:0 0;border:none;padding:0;font-family:Bebas Neue,sans-serif;font-size:14pt;font-weight:400;transition:opacity .15s}.logo:hover{opacity:.6}.topbar-right{align-items:center;gap:14px;display:flex}.status{color:#888;font-size:12px}.bitrate{color:#888;align-items:center;gap:4px;font-size:11px;display:flex}.bitrate input{color:#fff;background:#111;border:1px solid #333;border-radius:6px;width:50px;padding:3px 6px;font-size:11px}.export-btn{color:#000;cursor:pointer;font-variant-numeric:tabular-nums;background:#fff;border:none;border-radius:6px;padding:5px 14px;font-size:12px;font-weight:600}.export-btn:disabled{color:#999;cursor:default;background:#333}.open-btn{color:#ccc;cursor:pointer;background:#111;border:1px solid #333;border-radius:6px;padding:4px 12px;font-size:12px}.open-btn:hover{color:#fff;border-color:#555}.prefs{align-items:center;display:flex;position:relative}.prefs-btn{color:#ccc;cursor:pointer;background:#111;border:1px solid #333;border-radius:6px;place-items:center;width:30px;height:28px;display:grid}.prefs-btn:hover{color:#fff;border-color:#555}.prefs-backdrop{z-index:60;position:fixed;inset:0}.prefs-pop{z-index:61;background:#0c0c0c;border:1px solid #333;border-radius:10px;flex-direction:column;gap:12px;min-width:168px;padding:14px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 28px #0009}.pref-row{color:#aaa;justify-content:space-between;align-items:center;gap:16px;font-size:11px;display:flex}.pref-bitrate{color:#888;align-items:center;gap:5px;display:flex}.prefs-pop input[type=number]{color:#fff;background:#111;border:1px solid #333;border-radius:6px;width:52px;padding:3px 6px;font-size:11px}.body{background:#000;flex:1;min-height:0;display:flex;overflow:hidden}.stage-wrap{background-color:#000;background-image:url(/cross-grid.svg?v=3);background-position:50%;background-size:43.2px 43.2px;flex:1;min-width:0;position:relative}.stage{position:absolute;inset:0}.stage canvas{display:block}.stage-wrap.dragover:after{content:"Drop clip to load";color:#fff;z-index:30;pointer-events:none;background:#00000073;border:2px dashed #888;border-radius:12px;place-items:center;font-size:14px;display:grid;position:absolute;inset:12px}.notice{color:#ddd;pointer-events:none;z-index:40;text-align:center;background:#141414eb;border:1px solid #333;border-radius:8px;max-width:80%;padding:8px 14px;font-size:12px;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}.download-ready{color:#ddd;z-index:41;background:#141414f2;border:1px solid #3a3a3a;border-radius:8px;align-items:center;gap:10px;max-width:92%;padding:7px 8px 7px 14px;font-size:12px;display:flex;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}.download-ready a{color:#000;white-space:nowrap;background:#fff;border-radius:6px;padding:5px 14px;font-weight:600;text-decoration:none}.download-ready a:hover{background:#e6e6e6}.download-ready .dl-x{color:#888;cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:13px;line-height:1}.download-ready .dl-x:hover{color:#ddd}.transport{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:25;opacity:0;pointer-events:none;background:#141414d1;border:1px solid #2b313b;border-radius:10px;align-items:center;gap:12px;width:min(640px,72%);padding:8px 14px;transition:opacity .3s;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.stage-wrap:hover .transport{opacity:1;pointer-events:auto}.play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:6px;flex:none;width:32px;height:26px;font-size:11px}.transport input[type=range]{flex:1}.transport .time{color:#cfcfcf;font-variant-numeric:tabular-nums;flex:none;font-size:11px}.mute-btn{color:#cfcfcf;cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;width:26px;height:26px;padding:0;transition:color .15s;display:inline-flex}.mute-btn:hover{color:#fff}.fps-sel{color:#fff;background:#111;border:1px solid #333;border-radius:6px;padding:2px 4px;font-size:11px}.credit{z-index:45;color:#555;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px;position:fixed;bottom:10px;left:16px}.credit a{color:#8a8a8a;pointer-events:auto;text-decoration:none}.credit a:hover{color:#fff;text-decoration:underline}.sidebar{-webkit-user-select:none;user-select:none;z-index:46;background:#000;border-left:1px solid #222;flex:0 0 290px;width:290px;padding:12px;transition:margin-right .32s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden auto}.sidebar.closed{margin-right:-290px}.reopen-tab{color:#ccc;cursor:pointer;z-index:50;opacity:0;pointer-events:none;background:#111;border:1px solid #333;border-right:none;border-radius:8px 0 0 8px;place-items:center;width:22px;height:60px;transition:opacity .2s .12s,color .15s,background .15s;display:grid;position:fixed;top:50%;right:0;transform:translateY(-50%)}.reopen-tab.show{opacity:1;pointer-events:auto}.reopen-tab:hover{color:#fff;background:#1a1a1a}.sidebar-head{letter-spacing:.16em;text-transform:uppercase;color:#fff;justify-content:space-between;align-items:center;padding:4px 4px 12px;font-size:12px;font-weight:700;display:flex}.sidebar-close{color:#888;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:13px}.sidebar-close:hover{color:#fff}.fx{background:#000;border:1px solid #222;border-radius:10px;margin-bottom:10px;overflow:hidden}.fx.on{border-color:#444}.fx-head{align-items:center;gap:10px;padding:10px 12px;display:flex}.fx-name{color:#fff;cursor:pointer;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:0;font-size:13px;font-weight:500;display:flex}.fx-body{border-top:1px solid #222;flex-direction:column;gap:12px;padding:12px;display:flex}.switch{flex:none;width:34px;height:18px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.switch .slider{background:#333;border-radius:18px;transition:background .15s;position:absolute;inset:0}.switch .slider:before{content:"";background:#777;border-radius:50%;width:14px;height:14px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.switch input:checked+.slider{background:#9a9a9a}.switch input:checked+.slider:before{background:#fff;transform:translate(16px)}.control{color:#fff;justify-content:space-between;align-items:center;gap:8px;font-size:12px;display:flex}.control .val{text-align:right;color:#cfcfcf;font-variant-numeric:tabular-nums;width:38px}.xy{flex-direction:column;gap:6px;display:flex}.xy-label{color:#cfcfcf;font-size:12px}.xy-pad{aspect-ratio:3/2;cursor:crosshair;touch-action:none;background:#0b0b0d;border:1px solid #2b313b;border-radius:10px;width:100%;position:relative;overflow:hidden}.xy-grid{width:100%;height:100%;position:absolute;inset:0}.xy-grid line{stroke:#23262c;stroke-width:1px;vector-effect:non-scaling-stroke}.xy-cross-h{background:#3a3f47;height:1px;position:absolute;left:0;right:0;transform:translateY(-.5px)}.xy-cross-v{background:#3a3f47;width:1px;position:absolute;top:0;bottom:0;transform:translate(-.5px)}.xy-dot{pointer-events:none;background:#fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;box-shadow:0 1px 4px #0009}input[type=range]{appearance:none;background:#555;border-radius:2px;outline:none;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:none;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:14px;height:14px}.overlay-ctl{flex-direction:column;gap:10px;display:flex}.overlay-row{align-items:stretch;gap:6px;display:flex}.overlay-upload{color:#ccc;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:#111;border:1px solid #333;border-radius:6px;flex:1;min-width:0;padding:7px;font-size:11px;overflow:hidden}.overlay-upload:hover{color:#fff;border-color:#555}.overlay-remove{color:#999;cursor:pointer;background:#111;border:1px solid #333;border-radius:6px;flex:none;justify-content:center;align-items:center;width:30px;display:flex}.overlay-remove:hover{color:#ff6b6b;border-color:#a33}.overlay-tint{color:#fff;justify-content:space-between;align-items:center;font-size:12px;display:flex}.overlay-tint input[type=color]{background:0 0;border:1px solid #333;border-radius:4px;width:28px;height:22px;padding:0}.section-head{letter-spacing:.16em;text-transform:uppercase;color:#fff;border-top:1px solid #2b313b;margin-top:6px;padding:14px 4px 8px;font-size:12px;font-weight:700}.type-ctl{flex-direction:column;gap:10px;display:flex}.type-text{box-sizing:border-box;color:#eee;resize:vertical;background:#111;border:1px solid #333;border-radius:6px;width:100%;min-height:38px;padding:7px 8px;font-family:inherit;font-size:12px}.type-text:focus{border-color:#555;outline:none}.type-row{align-items:center;gap:8px;display:flex}.type-sel{color:#ccc;cursor:pointer;background:#111;border:1px solid #333;border-radius:6px;flex:1;min-width:0;padding:6px 7px;font-size:11px}.type-sel:hover{color:#fff;border-color:#555}.type-align{display:flex}.type-align button{color:#888;cursor:pointer;background:#111;border:1px solid #333;justify-content:center;align-items:center;width:30px;height:28px;display:inline-flex}.type-align button:first-child{border-radius:6px 0 0 6px}.type-align button:last-child{border-radius:0 6px 6px 0}.type-align button:not(:first-child){border-left:none}.type-align button:hover{color:#fff}.type-align button.active{color:#000;background:#fff;border-color:#fff}.type-color{color:#fff;align-items:center;gap:6px;font-size:12px;display:flex}.type-color input[type=color]{background:0 0;border:1px solid #333;border-radius:4px;width:28px;height:22px;padding:0}.ramp{flex-direction:column;gap:8px;display:flex}.ramp-head{color:#fff;justify-content:space-between;align-items:center;font-size:12px;display:flex}.ramp-head select{color:#fff;background:#111;border:1px solid #333;border-radius:6px;padding:2px 6px;font-size:11px}.ramp:focus,.ramp:focus-visible{outline:none}.ramp-bar-wrap{padding-bottom:20px;position:relative}.ramp-bar{cursor:crosshair;border:1px solid #333;border-radius:6px;height:20px}.ramp-knot{cursor:grab;background:0 0;border:none;margin:0;padding:0;line-height:0;position:absolute;top:16px;transform:translate(-50%)}.ramp-knot:active{cursor:grabbing}.ramp-knot svg path{stroke:#333;stroke-width:1px}.ramp-knot.sel svg path{stroke:#fff;stroke-width:2px}.ramp-pop{background:#111;border:1px solid #333;border-radius:8px;outline:none;flex-direction:column;gap:8px;padding:8px;display:flex;position:relative}.ramp-pop-x{z-index:2;color:#ddd;cursor:pointer;background:#00000080;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;line-height:1;display:flex;position:absolute;top:4px;right:4px}.ramp-pop-x:hover{color:#fff;border-color:#666}.ramp-sv{cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);border-radius:6px;height:96px;position:relative}.ramp-sv-cursor,.ramp-hue-cursor{pointer-events:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 1px #0009}.ramp-sv-cursor{border-radius:50%;width:12px;height:12px;transform:translate(-50%,-50%)}.ramp-hue{cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:4px;height:14px;position:relative}.ramp-hue-cursor{border-radius:2px;width:4px;top:-1px;bottom:-1px;transform:translate(-50%)}