@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}#root{height:100vh;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#000;color:#fff}.app-layout{display:grid;grid-template-columns:280px 1fr 280px;height:100vh;overflow:hidden}.left-panel{background:#121212;border-right:1px solid #1f1f1f;padding:18px 18px 0;overflow-x:hidden;overflow-y:hidden;min-height:0;display:flex;flex-direction:column;gap:0;position:relative}.left-panel-header{flex-shrink:0}.left-panel-stack{flex:1 1 auto;min-height:0;min-width:0;position:relative;display:flex;flex-direction:column}.left-panel-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding-bottom:16px}.left-panel-stack:has(.sidebar-info-panel) .left-panel-body{overflow:hidden;pointer-events:none}.left-panel-footer{flex-shrink:0;margin-left:-18px;margin-right:-18px;padding:12px 18px 18px;border-top:1px solid #1f1f1f;background:#121212;position:sticky;bottom:0;z-index:2}.panel-header{display:flex;flex-direction:column;gap:4px;padding-bottom:8px;border-bottom:1px solid #1f1f1f}.logo{font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.6px;color:#d0d0d0}.logo-brand{color:#f65833;text-decoration:none;cursor:pointer;transition:opacity .2s ease}.logo-brand:hover{opacity:.85}.section.section--media{gap:0}.section.section--media .media-toggle{margin-bottom:0}.section.section--media .video-error{margin-top:6px}.section.section--effects{gap:8px;min-width:0;min-height:0;flex-shrink:0}.effects-grid-scroll{--effects-row-stride: 76px ;--effects-scroll-viewport: calc(4 * var(--effects-row-stride) + 68px / 2);height:var(--effects-scroll-viewport);max-height:var(--effects-scroll-viewport);min-height:0;flex-shrink:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.effects-grid-scroll::-webkit-scrollbar{display:none;width:0;height:0}.section{display:flex;flex-direction:column;gap:10px}.section h3{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#666;text-transform:uppercase;margin-bottom:4px}.btn-select-image{background:transparent;color:#f65833;border:1px solid #f65833;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:background .2s ease,box-shadow .2s ease;width:100%;position:relative;overflow:hidden}.btn-select-image:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#f65833;box-shadow:0 0 6px 1px #f65833a6;opacity:0;transition:opacity .25s ease}.btn-select-image:hover{background:#f658330f}.btn-select-image:hover:before{opacity:1}.image-info{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:5px;min-width:0}.image-filename{font-family:Roboto Mono,monospace;font-size:9px;color:#a1a1a1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.btn-clear-file{background:transparent;border:none;color:#f65833;font-size:12px;font-weight:700;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0;transition:opacity .2s ease}.btn-clear-file:hover{opacity:.6}.btn-secondary{flex:1;background:transparent;color:#999;border:1px solid #2a2a2a;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{background:#1a1a1a;color:#fff;border-color:#3a3a3a}.aspect-ratio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.aspect-ratio-item{background:#1a1a1a;border:1px solid #2a2a2a;padding:7px 4px;border-radius:5px;cursor:pointer;transition:background .15s ease,border-color .15s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.aspect-ratio-item:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#f65833;opacity:0;transition:opacity .2s ease}.aspect-ratio-item span{font-family:Roboto Mono,monospace;font-size:9px;font-weight:600;color:#ccc;letter-spacing:.2px}.aspect-ratio-item.active{background:#1f1f1f;border-color:#f65833;box-shadow:0 0 0 1px #f6583326}.aspect-ratio-item.active span{color:#f65833}.aspect-ratio-item.active:before{opacity:1}.aspect-ratio-item:hover{background:#1f1f1f;border-color:#3a3a3a}.effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.effect-card{background:#1a1a1a;background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid #2a2a2a;border-radius:6px;padding:14px;cursor:pointer;transition:all .2s ease;position:relative;min-height:68px;max-height:68px;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;overflow:hidden}.effect-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#f65833;opacity:0;transition:opacity .25s ease}.effect-card.active{background-color:#1f1f1f;border-color:#f65833;box-shadow:0 0 0 1px #f6583333}.effect-card.active:before{opacity:1}.effect-card:hover{background-color:#1f1f1f;border-color:#3a3a3a;transform:translateY(-1px)}.effect-card:focus-visible{outline:2px solid #f65833;outline-offset:2px}.effect-name{font-size:15px;font-weight:600;line-height:1;color:#fff}.effect-badge{font-family:Roboto Mono,monospace;font-size:10px;font-weight:400;letter-spacing:.05em;color:#666;text-transform:uppercase}.export-section{margin-top:0;padding-top:0;border-top:none;display:flex;flex-direction:column;gap:8px}.left-panel-footer .export-section{margin-top:0}.export-scale{display:flex;flex-direction:column;gap:6px}.export-scale label{font-size:10px;color:#999;font-weight:500}.scale-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.scale-btn{background:#1a1a1a;border:1px solid #2a2a2a;color:#999;padding:6px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.left-panel .scale-btn{padding:3px 5px;font-size:9px;border-radius:4px}.scale-btn:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f65833,transparent);opacity:0;transition:opacity .3s ease}.scale-btn.active{background:#1f1f1f;border-color:#f65833;color:#f65833}.scale-btn.active:before{opacity:1}.scale-btn:hover{background:#1f1f1f;border-color:#3a3a3a;color:#fff}.btn-export{background:#1e1e1e;color:#eee;border:1px solid #2a2a2a;padding:10px 20px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%}.btn-export:hover{background:#252525;border-color:#3a3a3a;color:#fff}.btn-export:disabled{opacity:.5;cursor:not-allowed}.left-panel-footer .sidebar-info{flex-shrink:0;min-width:0;overflow-x:hidden;margin-top:10px;padding-top:10px;border-top:1px solid #1f1f1f}.sidebar-info .tabs{flex-shrink:0;width:100%;min-width:0;overflow-x:hidden}.sidebar-info .tab{flex:1 1 0;min-width:0;padding:6px 2px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:7px;font-weight:700;letter-spacing:.12em;line-height:1.15;border:none;margin:0;background:transparent}.left-panel-footer .sidebar-info .tab.active{color:#f65833;border-bottom-color:#f65833;background:#121212}.sidebar-info-panel{position:absolute;inset:0 -18px;z-index:5;box-sizing:border-box;width:auto;background:#121212;display:flex;flex-direction:column;overflow:hidden}.sidebar-info-panel-close{position:absolute;top:8px;right:10px;z-index:2;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;color:#888;font-size:22px;line-height:1;cursor:pointer;transition:color .15s ease,background .15s ease}.sidebar-info-panel-close:hover{color:#f65833;background:#ffffff0a}.sidebar-info-panel-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:40px 16px 18px;-webkit-overflow-scrolling:touch}.sidebar-info-panel .sidebar-info-inner a{color:#f65833;text-decoration:none;cursor:pointer}.sidebar-info-panel .sidebar-info-inner a:hover{opacity:.88}.sidebar-info-inner{font-size:10px;line-height:1.45;color:#9a9a9a}.sidebar-info-inner>*:first-child{margin-top:0}.sidebar-info-inner>*:last-child{margin-bottom:0}.sidebar-info-label{font-size:8px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#666;margin:10px 0 4px}.sidebar-info-label:first-child{margin-top:0}.sidebar-info-text{margin:0 0 8px;color:#9a9a9a}.sidebar-info-text:last-child{margin-bottom:0}.sidebar-info-muted{color:#777;margin-top:4px}.sidebar-info a{color:#f65833;text-decoration:none;cursor:pointer}.sidebar-info a:hover{opacity:.88}.sidebar-info-changelog{margin:0;padding-left:14px;list-style:disc;color:#9a9a9a}.sidebar-info-changelog li{margin-bottom:8px}.sidebar-info-changelog li:last-child{margin-bottom:0}.sidebar-info-changelog-date{color:#888;font-weight:600}.sidebar-info-kv{margin:0 0 6px;font-size:9px;color:#888;line-height:1.4}.sidebar-info-kv span{display:inline-block;min-width:52px;margin-right:6px;font-weight:600;color:#666;letter-spacing:.04em}.canvas-area{background:#000;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;overflow:hidden}.canvas-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%}.canvas-container{position:relative;flex-shrink:0;background:#0a0a0a;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #00000080;cursor:grab}.canvas-container.dragging{cursor:grabbing}.canvas-container.overlay-mode{cursor:crosshair}.canvas-container.overlay-dragging{cursor:move}#mainCanvas{width:100%;height:100%;display:block;touch-action:none}.drop-zone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000e6;border:1px solid #1f1f1f;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .3s}.drop-zone.active{opacity:1;pointer-events:all}.drop-content p{color:#666;font-size:14px;text-align:center}.canvas-controls{display:flex;gap:16px;align-items:center;background:#121212;padding:6px 16px;border-radius:6px;border:1px solid #1f1f1f;box-shadow:0 2px 8px #0000004d}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:8px;color:#666;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-right:2px}.zoom-control{display:flex;gap:6px;align-items:center}.zoom-slider{width:80px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2px;background:linear-gradient(to right,#f65833 0%,#f65833 var(--zoom-progress, 20%),#2a2a2a var(--zoom-progress, 20%),#2a2a2a 100%);border-radius:2px;outline:none;cursor:pointer}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:#f65833;border-radius:50%;cursor:pointer;-webkit-transition:all .15s ease;transition:all .15s ease;box-shadow:0 1px 4px #f6583380}.zoom-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 6px #f65833b3}.zoom-slider::-moz-range-thumb{width:10px;height:10px;background:#f65833;border-radius:50%;cursor:pointer;border:none;-moz-transition:all .15s ease;transition:all .15s ease;box-shadow:0 1px 4px #f6583380}.zoom-slider::-moz-range-progress{background:#f65833;height:2px;border-radius:2px}.rotation-control{display:flex;gap:6px;align-items:center}.rotation-dial{position:relative;width:46px;height:46px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:grab;transition:border-color .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rotation-dial:hover{border-color:#f65833}.rotation-dial.dragging{cursor:grabbing;border-color:#f65833}.dial-indicator{position:absolute;top:4px;left:50%;transform:translate(-50%);width:2px;height:10px;background:#f65833;border-radius:2px;pointer-events:none}.dial-value{font-family:Roboto Mono,monospace;font-size:9px;color:#ccc;font-weight:600;background:transparent;border:none;outline:none;width:30px;text-align:center;cursor:text;padding:0;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;position:relative;z-index:1}.dial-value::-webkit-outer-spin-button,.dial-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-btn{background:#1a1a1a;color:#fff;border:1px solid #2a2a2a;width:22px;height:22px;border-radius:5px;font-size:14px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#252525;border-color:#f65833}.control-btn:active{transform:scale(.95)}.control-value{font-family:Roboto Mono,monospace;font-size:9px;color:#999;min-width:38px;text-align:center;font-weight:600}.btn-reset-view{background:transparent;color:#999;border:1px solid #2a2a2a;padding:4px 10px;border-radius:5px;font-size:9px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-left:4px}.btn-reset-view:hover{background:#1a1a1a;color:#fff;border-color:#3a3a3a}.right-panel{background:#121212;border-left:1px solid #1f1f1f;display:flex;flex-direction:column;overflow:hidden}.tabs{display:flex;border-bottom:1px solid #1f1f1f;background:#0f0f0f}.tab{background:none;border:none;font-family:inherit;flex:1;padding:18px 16px;font-size:10px;font-weight:700;letter-spacing:1px;text-align:center;cursor:pointer;color:#666;transition:all .2s ease;border-bottom:2px solid transparent;text-transform:uppercase}.tab.active{color:#f65833;border-bottom-color:#f65833;background:#121212}.tab:hover{color:#ccc;background:#151515}.tab:focus-visible{outline:2px solid #f65833;outline-offset:-2px}.tab-content{display:none;padding:24px;overflow-y:auto;flex:1}.tab-content.active{display:block}.param-group{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #1f1f1f}.param-group label{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#666;display:block;margin-bottom:16px;text-transform:uppercase}.param-item{margin-bottom:28px}.param-hint{font-size:10px;color:#555;margin-top:-18px;margin-bottom:28px;line-height:1.4}.param-section-title{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#555;text-transform:uppercase;padding-top:20px;margin-bottom:16px;border-top:1px solid #1f1f1f}.param-item>span{font-size:10px;color:#666;display:block;margin:0 0 2px;padding:0;font-weight:600;letter-spacing:.6px;text-transform:uppercase;line-height:1}.slider-group{display:flex;flex-direction:column;gap:0}.slider-group h4{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#666;margin-top:8px;margin-bottom:16px;text-transform:uppercase}.slider-item{display:flex;flex-direction:column;gap:2px;margin-bottom:28px}.slider-item:last-child{margin-bottom:0}.slider-item label{font-size:10px;color:#666;font-weight:600;letter-spacing:.6px;text-transform:uppercase;line-height:1;margin:0;padding:0}.slider-row{display:flex;align-items:center;gap:16px}.preset-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.preset-btn{background:#1a1a1a;border:1px solid #2a2a2a;color:#999;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-btn.active{background:#1f1f1f;border-color:#f65833;color:#f65833}.preset-btn:hover{background:#1f1f1f;border-color:#3a3a3a;color:#fff}.slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:linear-gradient(to right,#f65833 0%,#f65833 var(--slider-progress, 0%),#2a2a2a var(--slider-progress, 0%),#2a2a2a 100%);border-radius:2px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#f65833;border-radius:50%;cursor:pointer;-webkit-transition:all .15s ease;transition:all .15s ease;box-shadow:0 2px 8px #f6583380,0 0 #f658334d;border:2px solid #000}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px #f65833b3,0 0 0 4px #f6583333}.slider::-webkit-slider-thumb:active{transform:scale(1.1);box-shadow:0 2px 8px #f65833cc,0 0 0 6px #f6583340}.slider::-moz-range-thumb{width:16px;height:16px;background:#f65833;border-radius:50%;cursor:pointer;border:2px solid #000;-moz-transition:all .15s ease;transition:all .15s ease;box-shadow:0 2px 8px #f6583380}.slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px #f65833b3}.slider::-moz-range-thumb:active{transform:scale(1.1);box-shadow:0 2px 8px #f65833cc}.slider::-moz-range-progress{background:#f65833;height:3px;border-radius:2px}.slider-value{font-family:Roboto Mono,monospace;font-size:13px;color:#fff;min-width:48px;text-align:right;font-weight:500;background:transparent;border:1px solid transparent;border-radius:3px;padding:1px 4px;outline:none;cursor:text;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;box-sizing:content-box}.slider-value::-webkit-outer-spin-button,.slider-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-value:hover{border-color:#333}.slider-value:focus{background:#1a1a1a;border-color:#f65833}.btn-group{display:flex;flex-wrap:wrap;gap:4px}.btn-group[data-count="5"] .btn-group-item{flex:0 0 calc(20% - 4px)}.btn-group[data-count="6"] .btn-group-item{flex:0 0 calc(33.33% - 3px)}.btn-group[data-count="8"] .btn-group-item{flex:0 0 calc(25% - 3px)}.btn-group[data-columns="3"] .btn-group-item{flex:0 0 calc(33.33% - 3px)}.btn-group-item{flex:1;background:#1a1a1a;border:1px solid #2a2a2a;color:#666;padding:5px 4px;border-radius:4px;font-family:Roboto Mono,monospace;font-size:9px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;text-align:center}.btn-group-item.active{background:#f658331f;border-color:#f65833;color:#f65833;box-shadow:0 0 8px #f6583338}.btn-group-item:hover:not(.active){background:#222;border-color:#3a3a3a;color:#ccc}.param-select{width:100%;background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;padding:10px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.param-select:hover{background:#1f1f1f;border-color:#3a3a3a}.param-select:focus{border-color:#f65833}.param-text-input{width:100%;background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;padding:10px 12px;border-radius:6px;font-size:13px;font-family:monospace;letter-spacing:.05em;outline:none;transition:border-color .2s ease;box-sizing:border-box}.param-text-input:hover{border-color:#3a3a3a}.param-text-input:focus{border-color:#f65833}.param-text-input::-moz-placeholder{color:#555}.param-text-input::placeholder{color:#555}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:13px;color:#ccc;cursor:pointer;font-weight:400;padding:6px 0}.checkbox-label input[type=checkbox]{accent-color:#f65833;width:16px;height:16px;cursor:pointer}.radio-group{display:flex;flex-direction:column;gap:10px}.radio-group label{display:flex;align-items:center;gap:10px;font-size:13px;color:#ccc;cursor:pointer;font-weight:400;padding:6px 0}.radio-group input[type=radio]{accent-color:#f65833;width:16px;height:16px}.btn-file-upload{width:100%;text-align:center}.reset-all-section{padding:16px 24px;border-top:1px solid #1f1f1f;background:#0f0f0f}.btn-reset-all{width:100%;background:transparent;color:#999;border:1px solid #2a2a2a;padding:10px 20px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .3s ease;text-transform:uppercase}.btn-reset-all:hover{background:#1a1a1a;color:#f65833;border-color:#f65833;box-shadow:0 0 15px #f6583333}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0a0a0a}::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.media-toggle{display:flex;gap:4px;background:#111;border:1px solid #222;border-radius:6px;padding:3px;margin-bottom:10px}.media-tab{flex:1;padding:6px 0;border-radius:4px;border:none;background:transparent;color:#555;font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .15s,color .15s}.media-tab:hover{color:#aaa}.media-tab.active{background:#1e1e1e;color:#eee}.video-error{margin:6px 0 0;font-size:11px;color:#f65833;line-height:1.4}.video-duration{font-size:11px;color:#555;margin-left:auto;margin-right:6px;white-space:nowrap;font-family:Roboto Mono,monospace}.video-controls{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0f0f0f;border-top:1px solid #1e1e1e;border-bottom:1px solid #1e1e1e}.vc-btn{flex-shrink:0;width:28px;height:28px;border-radius:4px;border:1px solid #2a2a2a;background:#1a1a1a;color:#aaa;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;padding:0}.vc-btn:hover{border-color:#f65833;color:#f65833}.vc-btn.active{border-color:#f65833;color:#f65833;background:#f6583314}.vc-scrubber{flex:1;height:3px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#2a2a2a;border-radius:2px;outline:none;cursor:pointer}.vc-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#f65833;cursor:pointer}.vc-scrubber::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f65833;border:none;cursor:pointer}.vc-time{flex-shrink:0;font-size:11px;color:#555;font-family:Roboto Mono,monospace;white-space:nowrap}.export-progress-bar{margin-top:8px;height:3px;background:#1e1e1e;border-radius:2px;overflow:hidden}.export-progress-fill{height:100%;background:#f65833;border-radius:2px;transition:width .3s ease}:root{--mobile-drawer-h: 254px}.mobile-header,.mobile-drawer,.mobile-export-btn,.mobile-canvas-tap,.mobile-bottom-bar,.mobile-canvas-actions,.mp-float-layer{display:none}@media(max-width:768px){.app-layout{position:fixed;top:48px;left:0;right:0;bottom:calc(44px + var(--mobile-drawer-h));height:auto;display:block;width:100%}.left-panel,.right-panel{display:none!important}.canvas-area{width:100%;height:100%;min-height:unset!important;padding:8px}.canvas-wrapper{justify-content:center}.canvas-controls{display:none}.mobile-canvas-tap{display:flex;position:fixed;inset:48px 0 44px;align-items:center;justify-content:center;z-index:5;pointer-events:all;cursor:pointer}.drop-zone .drop-content{display:none}.mobile-canvas-tap-label{font-size:12px;color:#555;border:1px solid #2a2a2a;border-radius:8px;padding:10px 20px;background:#12121299;pointer-events:none}.mobile-header{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:48px;padding:0 16px;background:#121212;border-bottom:1px solid #1f1f1f;z-index:50}.mobile-logo{font-family:Roboto Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.6px;color:#d0d0d0}.mobile-media-toggle{display:flex;gap:4px;background:#111;border:1px solid #222;border-radius:6px;padding:3px}.mobile-media-tab{padding:5px 14px;border-radius:4px;border:none;background:transparent;color:#555;font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .15s,color .15s}.mobile-media-tab.active{background:#1e1e1e;color:#eee}.mobile-media-tab:active{background:#252525;color:#fff}.mobile-drawer{display:flex;flex-direction:column;position:fixed;bottom:44px;left:0;right:0;background:#121212;border-top:1px solid #2a2a2a;border-radius:14px 14px 0 0;z-index:40;transition:height .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.mobile-drawer-handle{display:flex;align-items:center;justify-content:center;height:24px;flex-shrink:0;cursor:grab;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mobile-drawer-handle:active{cursor:grabbing}.mobile-drawer-chevron{display:block;opacity:.35;transition:opacity .15s,transform .2s ease}.mobile-drawer-handle:active .mobile-drawer-chevron{opacity:.7}.mobile-drawer--open .mobile-drawer-chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.mobile-drawer-chevron{transition:opacity .15s}}.mobile-effects-row{display:flex;gap:10px;overflow-x:auto;padding:4px 16px 12px;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}.mobile-effects-row::-webkit-scrollbar{display:none}.mobile-effect-card{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;padding:4px;border-radius:8px;border:1.5px solid transparent;transition:border-color .15s}.mobile-effect-card.active{border-color:#f65833}.mobile-effect-card:focus-visible{outline:2px solid #f65833;outline-offset:2px}.mobile-params{display:flex;flex-direction:column;gap:8px;padding:4px 0 0;flex-shrink:0}.mp-chips{display:flex;gap:6px;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}.mp-chips::-webkit-scrollbar{display:none}.mp-chip{flex-shrink:0;background:none;border:1px solid #2a2a2a;border-radius:999px;padding:5px 11px;font-family:Roboto Mono,monospace;font-size:10px;letter-spacing:.3px;color:#888;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}.mp-chip.active{color:#f65833;border-color:#f65833;background:#f6583314}.mp-chip:focus-visible{outline:2px solid #f65833;outline-offset:2px}.mp-groups{display:flex;border-top:1px solid #1f1f1f;background:#101010}.mp-group{flex:1;background:none;border:none;border-bottom:2px solid transparent;padding:11px 4px 9px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.3px;color:#6e6e6e;cursor:pointer;transition:color .15s,border-color .15s}.mp-group.active{color:#f65833;border-bottom-color:#f65833}.mp-group:focus-visible{outline:2px solid #f65833;outline-offset:-2px}.mp-control{min-height:40px;display:flex;align-items:center;padding:0 16px}.mp-control:empty{min-height:0}.mp-options{display:flex;gap:6px;overflow-x:auto;width:100%;scrollbar-width:none;-ms-overflow-style:none}.mp-options::-webkit-scrollbar{display:none}.mp-opt{flex-shrink:0;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:5px;padding:8px 13px;font-size:11px;font-weight:500;color:#bbb;cursor:pointer;white-space:nowrap;transition:all .15s}.mp-opt.active{background:#1f1f1f;border-color:#f65833;color:#f65833}.mp-opt:focus-visible{outline:2px solid #f65833;outline-offset:2px}.mp-mini{flex-shrink:0;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:6px 9px;font-family:Roboto Mono,monospace;font-size:10px;color:#ddd;cursor:pointer;white-space:nowrap}.mp-mini:active{border-color:#f65833;color:#f65833}.mp-mini:focus-visible{outline:2px solid #f65833;outline-offset:2px}.mp-text{width:100%;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:5px;padding:9px 11px;font-family:Roboto Mono,monospace;font-size:13px;color:#eee}.mp-text:focus{outline:none;border-color:#f65833}.mobile-canvas-actions{position:fixed;left:12px;bottom:calc(44px + var(--mobile-drawer-h) + 10px);z-index:46;display:flex;gap:6px}.mca-btn{width:34px;height:34px;border-radius:8px;background:#101010d1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.09);color:#ddd;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,opacity .15s}.mca-btn:disabled{color:#4a4a4a;border-color:#ffffff0d;cursor:default}.mca-btn:not(:disabled):active{color:#f65833;border-color:#f65833}.mca-btn--compare.active{color:#f65833;border-color:#f65833}.mca-btn:focus-visible{outline:2px solid #f65833;outline-offset:2px}.mp-float-layer{display:block;position:fixed;left:0;right:0;bottom:calc(44px + var(--mobile-drawer-h) + 52px);z-index:45;padding:0 16px;pointer-events:none}.mp-float{pointer-events:auto;background:#101010d1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:9px 13px 11px;display:flex;flex-direction:column;gap:7px}.mp-float-head{display:flex;justify-content:space-between;align-items:baseline}.mp-float-label{font-family:Roboto Mono,monospace;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#9a9a9a}.mp-float-value{font-family:Roboto Mono,monospace;font-size:13px;color:#f65833;font-variant-numeric:tabular-nums}.mp-float-row{display:flex;align-items:center;gap:10px}.mp-float-row .slider{flex:1;min-width:0}.mobile-effect-thumb{width:64px;height:64px;background-color:#2a2a2a;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:8px}.mobile-effect-name{font-family:Roboto Mono,monospace;font-size:9px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.3px}.mobile-effect-card.active .mobile-effect-name{color:#f65833}.mobile-settings{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.mobile-settings .right-panel{display:flex!important;border-left:none;flex:1;min-height:0;overflow-y:auto}.mobile-settings .param-group>label{display:none}.mobile-settings .reset-all-section{display:flex;justify-content:center;padding:10px 24px 14px;background:transparent;border-top:none}.mobile-settings .btn-reset-all{width:auto;padding:5px 18px;font-size:9px;opacity:.45;border-color:#2a2a2a}.mobile-settings .btn-reset-all:hover,.mobile-settings .btn-reset-all:active{opacity:1;color:#f65833;border-color:#f65833;box-shadow:none}.mobile-settings .reset-all-section{display:block;flex-shrink:0}.mobile-bottom-bar{display:flex;position:fixed;bottom:0;left:0;right:0;height:44px;z-index:100}.mobile-reset-btn{flex:0 0 92px;background:#141414;color:#8a8a8a;border:none;border-top:1px solid #2a2a2a;border-right:1px solid #2a2a2a;font-family:Roboto Mono,monospace;font-size:11px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:color .2s,background .2s}.mobile-reset-btn:active{background:#1a1a1a;color:#f65833}.mobile-reset-btn:disabled{opacity:.4;cursor:default}.mobile-reset-btn:focus-visible{outline:2px solid #f65833;outline-offset:-2px}.mobile-export-btn{display:block;position:static;flex:1;height:44px;background:#1e1e1e;color:#eee;border:none;border-top:1px solid #2a2a2a;font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;z-index:100;transition:background .2s}.mobile-export-btn:active{background:#252525}.mobile-export-btn:disabled{opacity:.5;cursor:not-allowed}.video-controls{position:fixed;left:0;right:0;bottom:calc(44px + var(--mobile-drawer-h));z-index:35;border-top:1px solid #1e1e1e;border-bottom:none;background:#0f0f0f;transition:bottom .3s cubic-bezier(.4,0,.2,1)}html,body,#root{height:100%;overflow:hidden}.mobile-info-btn{background:none;border:none;color:#aaa;font-size:20px;line-height:1;padding:0 4px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;height:28px}.mobile-info-btn:active{color:#eee}.mobile-info-overlay{position:fixed;inset:0;background:#000000a6;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.mobile-info-panel{background:#111;border:1px solid #222;border-radius:8px;width:100%;max-width:380px;max-height:80vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.mobile-info-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;padding:4px;z-index:1}.mobile-info-close:active{color:#eee}.mobile-info-tabs{display:flex;gap:4px;padding:14px 14px 0;flex-shrink:0}.mobile-info-tab{font-family:Roboto Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.04em;padding:5px 12px;border-radius:4px;border:1px solid #2a2a2a;background:none;color:#666;cursor:pointer;transition:background .15s,color .15s}.mobile-info-tab.active{background:#1e1e1e;color:#eee}.mobile-info-tab:active{background:#252525;color:#fff}.mobile-info-content{padding:16px 14px 20px;overflow-y:auto;flex:1}.mobile-info-content::-webkit-scrollbar{display:none}.mobile-info-section{margin-bottom:16px}.mobile-info-section:last-child{margin-bottom:0}.mobile-info-label{font-family:Roboto Mono,monospace;font-size:9px;letter-spacing:.08em;color:#555;margin-bottom:4px}.mobile-info-content p{font-family:Roboto Mono,monospace;font-size:11px;color:#aaa;line-height:1.6;margin:0}.mobile-info-content a{color:#f65833;text-decoration:none}.mobile-info-content a:active{opacity:.8}.mobile-info-kofi{color:#f65833!important;font-weight:600}}