:root{--bg-color:#0f0f11;--sidebar-bg:#141417b3;--sidebar-border:#ffffff14;--text-primary:#fff;--text-secondary:#a1a1aa;--accent-color:#646cff;--accent-hover:#747bff;--danger-color:#e04f54;--danger-hover:#c43c41;--slider-track:#27272a;--slider-thumb:#fff;--font-main:"Inter",sans-serif;--font-mono:"JetBrains Mono",monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;height:100vh;overflow:hidden}#app{width:100%;height:100%;display:flex;position:relative}.sidebar{background:var(--sidebar-bg);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--sidebar-border);z-index:60;flex-direction:column;gap:1.25rem;width:320px;height:100%;padding:1.5rem;transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar.hidden{opacity:0;pointer-events:none;transform:translate(-100%)}.drawer-handle{justify-content:center;align-items:center;margin-bottom:.5rem;padding:.75rem 0;display:none;position:relative}.drawer-bar{background:#ffffff4d;border-radius:2px;width:40px;height:4px}.drawer-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex;position:absolute;top:50%;right:.5rem;transform:translateY(-50%)}.drawer-close:hover{color:var(--text-primary);background:#ffffff1a}.tab-nav{background:#ffffff0d;border-radius:8px;margin-bottom:.5rem;padding:.25rem;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:.5rem;font-size:.875rem;font-weight:500;transition:all .2s}.tab-btn.active{color:var(--text-primary);background:#ffffff1a}.tab-content{flex-direction:column;gap:1.25rem;display:flex}.tab-content.hidden{display:none}.control-group{flex-direction:column;gap:.5rem;display:flex}.control-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.label-row{justify-content:space-between;align-items:center;display:flex}.value-display{font-family:var(--font-mono);color:var(--text-primary);background:#ffffff1a;border-radius:4px;padding:.125rem .375rem;font-size:.75rem}.file-upload-wrapper{width:100%;display:inline-block;position:relative;overflow:hidden}.file-input{opacity:0;cursor:pointer;z-index:2;width:100%;height:100%;position:absolute;top:0;left:0}.file-upload-button{border:1px dashed var(--sidebar-border);width:100%;color:var(--text-secondary);background:#ffffff0d;border-radius:8px;justify-content:center;align-items:center;padding:.75rem;font-size:.875rem;transition:all .2s;display:flex}.file-input:hover+.file-upload-button{border-color:var(--text-secondary);color:var(--text-primary);background:#ffffff1a}.select-input{border:1px solid var(--sidebar-border);width:100%;color:var(--text-primary);font-family:var(--font-main);cursor:pointer;background:#ffffff0d;border-radius:6px;outline:none;padding:.5rem;font-size:.875rem}.select-input:focus{border-color:var(--accent-color)}.select-input option{background:var(--bg-color);color:var(--text-primary)}.slider{appearance:none;background:var(--slider-track);border-radius:2px;outline:none;width:100%;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 2px 4px #0003}.slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.button-group{gap:.5rem;display:flex}.btn{cursor:pointer;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}.btn-primary{background:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{background:var(--danger-color);color:#fff}.btn-danger:hover{background:var(--danger-hover)}.toggle-wrapper{align-items:center;display:flex}.toggle-input{accent-color:var(--accent-color);cursor:pointer;width:1rem;height:1rem;margin-right:.5rem}.toggle-label{color:var(--text-primary);cursor:pointer;font-size:.875rem}.spacer{flex-grow:1}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--sidebar-border);z-index:20;background:#14141780;justify-content:space-between;align-items:center;width:100%;height:64px;padding:0 2rem;display:flex;position:absolute;top:0;left:0}.filename-display{color:var(--text-primary);cursor:pointer;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem;font-weight:500;transition:background .2s;display:flex}.nav-right{align-items:center;display:flex}.main-content{background:#000 radial-gradient(circle,#141417 0%,#000 100%);flex:1;justify-content:center;align-items:center;width:100%;margin-left:0;padding-top:64px;transition:margin-left .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.sidebar:not(.hidden)~.main-content{margin-left:320px}.canvas-container{cursor:grab;justify-content:center;align-items:center;width:100%;max-width:100%;height:100%;max-height:100%;padding:0;display:flex;position:relative;overflow:hidden}.canvas-container:active{cursor:grabbing}canvas{max-width:100%;max-height:100%;display:block}.upload-placeholder{color:var(--text-secondary);cursor:pointer;text-align:center;-webkit-backdrop-filter:blur(20px);z-index:10;background:#ffffff0d;border:2px dashed #ffffff1a;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;max-width:600px;padding:5rem;transition:all .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0000004d}.upload-placeholder:hover{border-color:var(--accent-color);background:#ffffff14;box-shadow:0 12px 48px #0006}.upload-icon-wrapper{background:linear-gradient(135deg,var(--accent-color),#4f56cc);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 8px 16px #646cff4d}.upload-placeholder:hover .upload-icon-wrapper{transform:scale(1.1)rotate(5deg);box-shadow:0 12px 24px #646cff80}.upload-icon{opacity:1;color:#fff;filter:drop-shadow(0 2px 4px #0003);width:40px;height:40px}.upload-title{color:var(--text-primary);letter-spacing:-.025em;font-size:1.5rem;font-weight:700}.upload-subtitle{color:var(--text-secondary);font-size:1rem;line-height:1.5}.toast{-webkit-backdrop-filter:blur(10px);color:var(--text-primary);border:1px solid var(--sidebar-border);z-index:100;opacity:1;background:#141417e6;border-radius:9999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;transition:opacity .3s,transform .3s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.toast.hidden{opacity:0;pointer-events:none;transform:translate(-50%,1rem);display:block!important}.sub-controls{border-left:2px solid var(--sidebar-border);flex-direction:column;gap:.5rem;margin-top:.75rem;padding-left:.5rem;display:flex}.mt-2{margin-top:.5rem}.color-input{appearance:none;cursor:pointer;background:0 0;border:none;border-radius:50%;width:32px;height:32px;padding:0;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:1px solid var(--sidebar-border);border-radius:50%}.loader{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;border-radius:12px;flex-direction:column;align-items:center;gap:1rem;padding:2rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spinner{border:3px solid #ffffff1a;border-top-color:var(--accent-color);border-radius:50%;width:40px;height:40px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sidebar-footer{border-top:1px solid var(--sidebar-border);color:var(--text-secondary);text-align:center;opacity:.6;margin-top:auto;padding-top:1rem;font-size:.75rem}.mobile-only{display:none!important}@media (max-width:768px){.toast{top:80px;bottom:auto;left:50%;transform:translate(-50%)}#app{flex-direction:column}.navbar{width:100%;padding:0 1rem;position:fixed}.main-content{padding-top:64px;padding-bottom:0;margin-left:0!important}.sidebar{border-right:none;border-top:1px solid var(--sidebar-border);z-index:100;border-top-left-radius:20px;border-top-right-radius:20px;width:100%;height:auto;max-height:70vh;transition:transform .3s cubic-bezier(.16,1,.3,1);position:fixed;top:auto;bottom:0;left:0;transform:translateY(100%);box-shadow:0 -10px 40px #00000080}.drawer-handle{display:flex}.sidebar.hidden{transform:translateY(100%)}.sidebar.open{transform:translateY(0)!important}.desktop-only{display:none!important}.mobile-only{display:flex!important}.toolbar{z-index:50;border-top:1px solid var(--sidebar-border);background:#141417f2;border-bottom:none;border-left:none;border-right:none;border-radius:0;justify-content:space-around;width:100%;position:fixed;bottom:100px;left:0;transform:none}.upload-placeholder{max-width:90%;padding:2rem}}.backdrop-canvas{z-index:1;pointer-events:none;opacity:.3;width:100vw;height:100vh;position:fixed;top:0;left:0}.backdrop-canvas.hidden{display:none}.hidden{display:none!important}.toolbar{-webkit-backdrop-filter:blur(12px);border:1px solid var(--sidebar-border);z-index:50;background:#141417cc;border-radius:12px;align-items:center;gap:.5rem;padding:.5rem;transition:all .3s;display:flex;position:absolute;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0006}@media (min-width:769px){.sidebar:not(.hidden)~.toolbar{left:calc(50% + 160px)}}@media (max-width:768px){.toolbar{align-items:start;height:10rem;padding-top:1rem;bottom:0}}.tool-btn{width:40px;height:40px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.tool-btn img{opacity:.7;width:20px;height:20px;transition:opacity .2s}.tool-btn:hover{color:var(--text-primary);background:#ffffff1a}.tool-btn:hover img{opacity:1}.tool-btn.active{color:var(--text-primary);background:#ffffff26}.tool-btn.active img{opacity:1}.tool-separator{background:var(--sidebar-border);width:1px;height:24px;margin:0 .25rem}.dropdown{position:relative}.dropdown-trigger{background:var(--accent-color);color:#fff;gap:.5rem;width:auto;padding:0 .75rem;font-size:.875rem;font-weight:500}.dropdown-trigger:hover{background:var(--accent-hover)}.dropdown-trigger img,.dropdown-trigger svg{opacity:1}.dropdown-menu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--sidebar-border);opacity:1;background:#141417f2;border-radius:8px;flex-direction:column;gap:.125rem;min-width:120px;margin-bottom:.5rem;padding:.25rem;transition:all .2s;display:flex;position:absolute;bottom:100%;right:0;transform:translateY(0);box-shadow:0 4px 12px #0000004d}.dropdown-menu.hidden{opacity:0;pointer-events:none;transform:translateY(10px);display:flex!important}.dropdown-item{text-align:left;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.5rem .75rem;font-size:.875rem;transition:all .2s}.dropdown-item:hover{color:var(--text-primary);background:#ffffff1a}.zoom-controls{z-index:50;flex-direction:column;gap:.5rem;display:flex;position:absolute;bottom:2rem;right:2rem}.zoom-btn{-webkit-backdrop-filter:blur(12px);border:1px solid var(--sidebar-border);width:40px;height:40px;color:var(--text-primary);cursor:pointer;background:#141417cc;border-radius:8px;justify-content:center;align-items:center;font-size:1.25rem;font-weight:500;transition:all .2s;display:flex;box-shadow:0 4px 12px #0000004d}.zoom-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.zoom-btn:active{transform:translateY(0)}.filename-display{color:var(--text-primary);cursor:pointer;border:1px solid #0000;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem;font-weight:500;transition:background .2s;display:flex}.filename-display:hover{background:#ffffff0d}.filename-display.editing{border-color:var(--accent-color);cursor:text;background:#00000080}#filenameText{outline:none;min-width:50px}@media (max-width:768px){.zoom-controls{bottom:5rem;right:1rem;display:none!important}}