:root{--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--bg-app: #0f1115;--bg-panel: #181b21;--bg-input: #22262e;--bg-hover: #2a2f38;--accent-primary: #4f46e5;--accent-hover: #6366f1;--accent-active: #4338ca;--accent-danger: #ef4444;--accent-success: #10b981;--text-main: #e2e8f0;--text-muted: #94a3b8;--text-dim: #64748b;--border-light: 1px solid rgba(255, 255, 255, .08);--border-focus: 1px solid rgba(99, 102, 241, .5);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 12px;--shadow-panel: 0 4px 20px rgba(0, 0, 0, .4);color-scheme:dark}*{box-sizing:border-box}body{margin:0;height:100vh;font-family:var(--font-main);background-color:var(--bg-app);color:var(--text-main);overflow:hidden}#app{display:flex;height:100vh;width:100vw;overflow:hidden}.sidebar{width:360px;height:100%;background-color:var(--bg-panel);border-right:var(--border-light);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.25,.8,.25,1);z-index:100;position:relative;flex-shrink:0}.sidebar.closed{transform:translate(-360px);margin-right:-360px}.sidebar-content{padding:1.5rem;overflow-y:auto;flex:1}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--bg-input);border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:var(--border-light)}.sidebar-title{font-size:1.1rem;font-weight:600;color:var(--text-main);margin:0;display:flex;align-items:center;gap:.5rem}.control-section{background:var(--bg-input);border:var(--border-light);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem}.control-section h3{margin:0 0 1rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;display:flex;align-items:center}.drop-zone{border:2px dashed var(--text-dim);border-radius:var(--radius-md);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .2s ease;background:#ffffff05;margin-bottom:.75rem}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent-primary);background:#4f46e51a;color:var(--text-main)}.drop-zone p{margin:0;font-size:.85rem;color:var(--text-muted);pointer-events:none}.drop-zone strong{color:var(--accent-primary)}.modern-btn,.lock-btn{width:100%;padding:.6rem 1rem;background-color:var(--bg-hover);border:var(--border-light);color:var(--text-main);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;justify-content:center;align-items:center;gap:.5rem}.modern-btn:hover,.lock-btn:hover{background-color:var(--accent-primary);color:#fff;border-color:transparent}.modern-btn:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg-input)}.lock-btn{width:auto;padding:.4rem .8rem;font-size:.8rem}.slider-control{margin-bottom:1rem}.slider-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem}.slider-value{font-family:var(--font-mono);color:var(--accent-primary)}.modern-slider{width:100%;-webkit-appearance:none;height:4px;background:var(--bg-hover);border-radius:2px;outline:none}.modern-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text-main);cursor:pointer;border:2px solid var(--bg-input);box-shadow:0 2px 5px #0000004d;transition:transform .1s}.modern-slider::-webkit-slider-thumb:hover{background:var(--accent-primary);transform:scale(1.1)}.checkbox-control{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;cursor:pointer}.checkbox-control label{font-size:.9rem;color:var(--text-muted);cursor:pointer;flex:1}.modern-checkbox{appearance:none;background-color:transparent;margin:0;width:36px;height:20px;border:1px solid var(--text-dim);border-radius:20px;position:relative;cursor:pointer;transition:all .3s ease}.modern-checkbox:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background-color:var(--text-dim);border-radius:50%;transition:all .3s ease}.modern-checkbox:checked{background-color:var(--accent-primary);border-color:var(--accent-primary)}.modern-checkbox:checked:after{transform:translate(16px);background-color:#fff}.frame-input,input[type=text],input[type=number]{background:var(--bg-app);border:1px solid var(--bg-hover);color:var(--text-main);padding:.4rem .6rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9rem;outline:none}.frame-input:focus,input[type=text]:focus{border-color:var(--accent-primary)}input[type=color]{background:none;border:none;width:30px;height:30px;cursor:pointer}.main-content{flex:1;position:relative;display:flex;flex-direction:column;background:radial-gradient(circle at center,#1a1d24,#0f1115)}.header{position:absolute;top:1rem;left:1rem;z-index:10;pointer-events:none}.header h1{font-size:1.2rem;font-weight:700;color:#ffffff4d;margin:0;text-transform:uppercase;letter-spacing:.1em}.header p{display:none}.sidebar-toggle{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:var(--bg-panel);border:var(--border-light);border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:200;box-shadow:var(--shadow-panel);transition:background .2s}.sidebar-toggle:hover{background:var(--bg-hover)}#canvas-container{width:100%;height:100%;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px}#status{position:absolute;bottom:20px;right:20px;background:#0f1115cc;padding:.5rem 1rem;border-radius:var(--radius-sm);border:var(--border-light);font-size:.85rem;color:var(--text-muted);pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#animations-container{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem;padding:.5rem;background:#181b21cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:var(--border-light);border-radius:var(--radius-lg);max-width:90%;overflow-x:auto;z-index:50}#animations-container button,.animation-btn{background:transparent;border:1px solid transparent;color:var(--text-muted);padding:.4rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .2s}#animations-container button:hover,.animation-btn:hover{background:#ffffff0d;color:var(--text-main)}#animations-container button.active,.animation-btn.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 10px #4f46e566}.animation-dropdown{background:var(--bg-input);color:var(--text-main);border:var(--border-light);padding:.5rem;border-radius:var(--radius-sm)}#diagnostics-panel p{display:flex;justify-content:space-between;margin:.4rem 0;font-size:.85rem;color:var(--text-muted)}#diagnostics-panel span{font-family:var(--font-mono);color:var(--text-main)}.hidden{display:none!important}.background-control,.brightness-control{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem;color:var(--text-muted)}#brightness-slider{width:60%}@media (max-width: 768px){.sidebar{position:absolute;width:100%;transform:translate(-100%)}.sidebar.open{transform:translate(0)}#animations-container{bottom:1rem;width:95%;flex-wrap:wrap;justify-content:center}}