:root{--primary-color: #1a1a1a;--accent-color: #6d28d9;--accent-color-light: #7c3aed;--bg-color: #0f0f0f;--text-color: #ffffff;--panel-bg: rgba(255, 255, 255, .05);--border-radius: 12px;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--sidebar-width: 320px;--header-height: 80px;--border-color: rgba(255, 255, 255, .1);--hover-bg: rgba(255, 255, 255, .05);--shadow-color: rgba(109, 40, 217, .2);--overlay-bg: rgba(0, 0, 0, .85);--transition-fast: .2s;--transition-normal: .3s;--z-header: 1000;--z-sidebar: 900;--z-modal: 1000;--z-overlay: 1000}header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);background:var(--bg-color);padding:var(--spacing-md);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);height:var(--header-height)}.header-content{display:flex;align-items:center;gap:var(--spacing-md);max-width:1400px;margin:0 auto;padding:0 var(--spacing-md);justify-content:space-between;width:100%}.logo{height:50px;width:auto;border-radius:var(--border-radius)}h1{color:var(--text-color);font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-color-light),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-right:auto}.sidebar-toggle{display:none;background:none;border:none;color:var(--text-color);cursor:pointer;width:40px;height:40px;padding:8px;transition:transform var(--transition-normal) ease;border-radius:var(--border-radius)}.sidebar-toggle:hover{transform:scale(1.1);background:var(--hover-bg)}.sidebar-toggle svg{width:24px;height:24px;display:block}@media (max-width: 768px){.header-content{padding:0 var(--spacing-md)}.sidebar-toggle{display:flex;align-items:center;justify-content:center}.logo{height:40px}h1{font-size:1.5rem}}.controls-panel{width:var(--sidebar-width);background:var(--bg-color);border-left:1px solid var(--border-color);padding:var(--spacing-md);height:calc(100vh - var(--header-height));position:fixed;right:0;top:var(--header-height);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg);transition:transform var(--transition-normal) ease;z-index:var(--z-sidebar)}.upload-section{background:var(--panel-bg);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color);backdrop-filter:blur(10px)}.image-input{position:relative}#imageUpload{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);background:#ffffff08;border-radius:calc(var(--border-radius) / 2);border:2px dashed var(--border-color);cursor:pointer;transition:all var(--transition-normal) ease;gap:var(--spacing-md)}.upload-label:hover,.upload-label.drag-over{border-color:var(--accent-color);background:var(--hover-bg)}.upload-icon{color:var(--text-color);opacity:.6;transition:all var(--transition-normal) ease}.upload-label:hover .upload-icon{opacity:1;color:var(--accent-color);transform:scale(1.1)}.upload-text{color:var(--text-color);opacity:.8;text-align:center;font-size:.9rem}.url-link{display:block;text-align:center;margin-top:10px;color:var(--accent-color);text-decoration:none;font-size:14px;cursor:pointer}.url-link:hover{color:var(--accent-color-light);text-decoration:underline}@media (max-width: 768px){.controls-panel{transform:translate(100%);width:100%}.controls-panel.show{transform:translate(0)}}.controls-panel::-webkit-scrollbar{width:8px}.controls-panel::-webkit-scrollbar-track{background:#ffffff05;border-radius:4px}.controls-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.controls-panel::-webkit-scrollbar-thumb:hover{background:#fff3}.preview-section{flex:1;padding:var(--spacing-md);margin-right:var(--sidebar-width);transition:margin var(--transition-normal) ease;max-width:1600px;width:100%;margin-left:auto;margin-right:auto;padding-right:calc(var(--sidebar-width) + var(--spacing-md))}.canvas-container{width:100%;aspect-ratio:16/9;background:var(--panel-bg);border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--border-color);position:relative;max-height:70vh}#glitchCanvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;width:auto;height:auto;display:block}#dropZone.drag-over:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#6d28d91a;backdrop-filter:blur(4px);z-index:var(--z-overlay);pointer-events:none}@media (max-width: 768px){.preview-section{margin-right:0;padding:var(--spacing-sm);padding-right:var(--spacing-sm);max-width:100%}}@media (min-width: 2000px){.preview-section{padding:var(--spacing-lg);padding-right:calc(var(--sidebar-width) + var(--spacing-lg));max-width:2000px}.canvas-container{max-height:80vh}}.gui-container{margin:var(--spacing-md) 0;background:var(--panel-bg);border-radius:var(--border-radius);border:1px solid var(--border-color);padding:var(--spacing-md)}.dg.main{width:100%!important;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.dg.main .close-button{display:none!important}.dg.main .title{background:#ffffff0d!important}.dg.main .cr.function{background:#ffffff08!important}.dg.main .c input[type=text],.dg.main .c .slider{background:#ffffff1a!important}.dg.main .c .slider-fg{background:var(--accent-color)!important}.dg.main .c .slider:hover .slider-fg{background:var(--accent-color-light)!important}.export-controls{display:none}.export-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);max-width:600px;margin:0 auto}.progress-bar{position:fixed;bottom:0;left:0;right:0;height:24px;background:#000000d9;z-index:9999;display:none;border-radius:0;border:none;border-top:1px solid rgba(255,255,255,.1);pointer-events:none}.progress-fill{background:linear-gradient(135deg,var(--accent-color-light),var(--accent-color));height:100%;width:0%;transition:width var(--transition-normal) ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-color);font-size:.875rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}@media (max-width: 768px){.gui-container{margin:var(--spacing-sm) 0;padding:var(--spacing-sm)}.dg.main{font-size:12px!important}.export-controls{padding:var(--spacing-md);margin-top:var(--spacing-md)}.export-buttons{grid-template-columns:1fr}.export-controls{display:none}.progress-bar{height:20px;bottom:env(safe-area-inset-bottom,0)}.progress-text{font-size:.75rem}}@media (min-width: 2000px){.export-controls{padding:var(--spacing-lg) var(--spacing-lg)}}.shader-selector{background:var(--panel-bg);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color);margin-bottom:var(--spacing-md);max-height:400px;overflow-y:auto}.shader-selector h2{margin-bottom:var(--spacing-sm);position:sticky;top:0;background:var(--panel-bg);padding:var(--spacing-sm) 0;z-index:1}.shader-category{margin-bottom:var(--spacing-md)}.shader-category h3{color:var(--accent-color);font-size:.9rem;margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em}.shader-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-sm)}.shader-button{padding:var(--spacing-sm) var(--spacing-md);background:#ffffff08;border:1px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);color:var(--text-color);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal) ease;display:flex;align-items:center;justify-content:space-between}.shader-button:hover{background:#ffffff0d;border-color:var(--accent-color)}.shader-button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.shader-button .effect-name{flex:1}.shader-button .effect-preview{width:20px;height:20px;border-radius:3px;margin-left:var(--spacing-sm);background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.shader-button.disabled{opacity:.5;cursor:not-allowed;background:#ffffff05}.shader-button.disabled:hover{border-color:var(--border-color);background:#ffffff05}.shader-button.disabled .effect-preview{background:#ffffff0d;border-color:#ffffff1a}.effect-switcher{position:relative;display:flex;align-items:center;gap:var(--spacing-sm);background:var(--panel-bg);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color);margin-bottom:var(--spacing-md);cursor:pointer;transition:all var(--transition-normal) ease}.effect-switcher:hover{border-color:var(--accent-color);background:#ffffff0d}.effect-switcher .current-effect{flex:1;font-weight:500}.effect-switcher .change-effect{padding:var(--spacing-sm) var(--spacing-md);background:var(--accent-color);color:#fff;border-radius:calc(var(--border-radius) / 2);font-size:.9rem;transition:all var(--transition-normal) ease}.effect-switcher:hover .change-effect{background:var(--accent-color-light)}.effects-modal-overlay{position:fixed;inset:0;background:#000000d9;display:none;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(4px)}.effects-modal-overlay.show{display:flex}.effects-modal{background:var(--panel-bg);border-radius:var(--border-radius);border:1px solid var(--border-color);width:90%;max-width:1200px;max-height:90vh;overflow-y:auto;position:relative;padding:var(--spacing-lg);overscroll-behavior:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.effects-modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:none;border:none;color:var(--text-color);cursor:pointer;padding:var(--spacing-sm);font-size:1.5rem;line-height:1;opacity:.7;transition:opacity var(--transition-normal) ease;z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.effects-modal-close:hover{opacity:1}.effects-modal h2{margin-bottom:var(--spacing-lg);font-size:1.5rem;padding-right:calc(var(--spacing-xl) + 20px)}.effects-category{margin-bottom:var(--spacing-xl)}.effects-category:last-child{margin-bottom:0}.effects-category h3{color:var(--accent-color);font-size:1rem;margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.05em;padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(255,255,255,.1)}.effects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.effect-card{background:#ffffff08;border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden;cursor:pointer;transition:all var(--transition-normal) ease;padding:var(--spacing-md)}.effect-card:hover{border-color:var(--accent-color);background:#ffffff0d;transform:translateY(-1px)}.effect-card.active{border-color:var(--accent-color);background:rgba(var(--accent-color-rgb),.1)}.effect-name{font-weight:500;margin-bottom:var(--spacing-xs);color:var(--text-color)}.effect-description{font-size:.9rem;opacity:.7;line-height:1.4}.effect-card.disabled{opacity:.5;cursor:not-allowed;background:#ffffff05}.effect-card.disabled:hover{border-color:var(--border-color);background:#ffffff05;transform:none}.input-controls{display:flex;flex-direction:column;gap:var(--spacing-md)}button.camera-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-md);background:var(--bg-color-secondary);border:2px dashed var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;width:100%;min-height:100px;transform:none;box-shadow:none}button.camera-button:hover{background:var(--bg-color-hover);border-color:var(--accent-color);transform:none;box-shadow:none}button.camera-button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}button.camera-button .camera-icon{margin-bottom:var(--spacing-sm)}button.camera-button .camera-text{font-size:.9rem;color:var(--text-color-secondary)}button.camera-button:hover .camera-text{color:var(--accent-color)}button.camera-button.active .camera-text{color:#fff}.audio-button{display:none!important}.audio-visualizer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#00000080;display:none}.audio-visualizer.show{display:block}.canvas-container{position:relative;width:100%;height:100%}.fullscreen-button{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;border-radius:var(--border-radius);background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal) ease;z-index:10;padding:0}.fullscreen-button:hover{background:#000000b3;border-color:var(--accent-color)}.fullscreen-button svg{width:24px;height:24px;transition:transform var(--transition-normal) ease}.fullscreen-button:hover svg{transform:scale(1.1)}.canvas-container:-webkit-full-screen{width:100vw;height:100vh;background:#000;display:flex;align-items:center;justify-content:center}.canvas-container:-moz-full-screen{width:100vw;height:100vh;background:#000;display:flex;align-items:center;justify-content:center}.canvas-container:fullscreen{width:100vw;height:100vh;background:#000;display:flex;align-items:center;justify-content:center}.canvas-container:fullscreen canvas{max-width:100%;max-height:100%;object-fit:contain}.canvas-container:fullscreen .fullscreen-button,.canvas-container:fullscreen .download-button{opacity:0;transition:opacity .3s ease}.canvas-container:fullscreen:hover .fullscreen-button,.canvas-container:fullscreen:hover .download-button{opacity:1}.canvas-container:fullscreen .fullscreen-button,.canvas-container:fullscreen .download-button{z-index:10000;pointer-events:auto}.download-modal-overlay{z-index:10001}.header-controls{display:flex;align-items:center;gap:var(--spacing-md)}.effect-picker-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#ffffff0d;border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal) ease}.effect-picker-button:hover{background:#ffffff1a;border-color:var(--accent-color)}.effect-picker-button .current-effect{font-weight:500}.effect-picker-button svg{opacity:.7;transition:transform var(--transition-normal) ease}.effect-picker-button:hover svg{opacity:1;transform:translateY(2px)}@media (max-width: 768px){.effect-picker-button .current-effect{display:none}.effect-picker-button{padding:var(--spacing-sm)}.effect-picker-button svg{width:24px;height:24px}.preview-section{margin-top:0;margin-bottom:0}.canvas-container{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.export-controls{display:none}header{padding:var(--spacing-sm)}.controls-panel{padding:var(--spacing-sm)}.gui-container{margin:var(--spacing-sm) 0}}.download-button{position:absolute;top:var(--spacing-md);right:calc(var(--spacing-md) + 50px);width:40px;height:40px;border-radius:var(--border-radius);background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal) ease;z-index:10;padding:0}.download-button:hover{background:#000000b3;border-color:var(--accent-color)}.download-button svg{width:24px;height:24px;transition:transform var(--transition-normal) ease}.download-button:hover svg{transform:scale(1.1)}.download-modal-overlay{position:fixed;inset:0;background:#000000d9;display:none;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(4px)}.download-modal-overlay.show{display:flex}.download-modal{background:var(--panel-bg);border-radius:var(--border-radius);border:1px solid var(--border-color);width:90%;max-width:400px;padding:var(--spacing-lg);position:relative}.download-modal h3{margin-bottom:var(--spacing-lg);font-size:1.2rem;text-align:center}.download-options{display:grid;gap:var(--spacing-md)}.download-option{padding:var(--spacing-md);background:#ffffff08;border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-normal) ease;display:flex;align-items:center;gap:var(--spacing-md)}.download-option:hover{background:#ffffff0d;border-color:var(--accent-color)}.download-option-icon{width:24px;height:24px;opacity:.7}.download-option-text{flex:1}.download-option-format{font-size:.8rem;opacity:.7}button.camera-switch-button{display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);background:var(--bg-color-secondary);border:2px dashed var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;width:40px;height:40px;margin-left:var(--spacing-sm);transform:none;box-shadow:none}button.camera-switch-button:hover{background:#0000004d;border-color:var(--accent-color);transform:none;box-shadow:none}button.camera-switch-button .camera-switch-icon{display:flex;align-items:center;justify-content:center}button{background:linear-gradient(135deg,var(--accent-color-light),var(--accent-color));color:var(--text-color);border:none;padding:.8rem 1.2rem;border-radius:calc(var(--border-radius) / 2);cursor:pointer;font-weight:600;transition:all var(--transition-normal) ease;width:100%;text-shadow:0 1px 3px rgba(0,0,0,.3)}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow-color)}.export-button{margin:0;font-size:1.1rem;padding:1rem 1.5rem}button.cancel{background:#ffffff1a}button.cancel:hover{background:#ffffff26}@media (max-width: 768px){.export-button{font-size:1rem;padding:.8rem 1.2rem}}@media (min-width: 2000px){.export-button{font-size:1.2rem;padding:1.2rem 2rem}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay-bg);backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--transition-normal) ease,visibility var(--transition-normal) ease}.modal-overlay.show{opacity:1;visibility:visible}.modal{background:var(--bg-color);border-radius:var(--border-radius);padding:var(--spacing-lg);width:90%;max-width:500px;border:1px solid var(--border-color);transform:translateY(20px);opacity:0;transition:transform var(--transition-normal) ease,opacity var(--transition-normal) ease}.modal-overlay.show .modal{transform:translateY(0);opacity:1}.modal h3{color:var(--text-color);margin-bottom:var(--spacing-md);font-size:1.25rem;font-weight:600}.modal input{width:100%;padding:.8rem 1rem;background:#ffffff0d;border:1px solid var(--border-color);border-radius:calc(var(--border-radius) / 2);color:var(--text-color);font-size:1rem;margin-bottom:var(--spacing-md);transition:border-color var(--transition-normal) ease}.modal input:focus{outline:none;border-color:var(--accent-color)}.modal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}@media (max-width: 768px){.modal{width:calc(100% - var(--spacing-lg));padding:var(--spacing-md)}}.presets-gallery{background:var(--panel-bg);padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color);backdrop-filter:blur(10px)}.preset-thumbnails{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--spacing-sm)}.preset-thumbnail{position:relative;aspect-ratio:1;cursor:pointer;border-radius:calc(var(--border-radius) / 2);overflow:hidden;border:2px solid transparent;transition:all var(--transition-normal) ease;background:#ffffff08}.preset-thumbnail:hover{border-color:var(--accent-color);transform:translateY(-2px)}.preset-thumbnail.active{border-color:var(--accent-color);box-shadow:0 0 15px var(--shadow-color)}.preset-thumbnail img{width:100%;height:100%;object-fit:cover}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.6;overflow-x:hidden}.app-container{min-height:100vh;position:relative}main{display:flex;padding-top:var(--header-height);min-height:calc(100vh - var(--header-height));position:relative}h2{color:var(--text-color);font-size:1.25rem;margin-bottom:var(--spacing-md);font-weight:600}