:root{--bg-primary: #0f1115;--bg-secondary: #1a1d24;--bg-sidebar: rgba(26, 29, 36, .85);--text-primary: #e2e8f0;--text-secondary: #94a3b8;--accent-primary: #3b82f6;--accent-hover: #2563eb;--border-color: #2d3748;--grid-line: rgba(255, 255, 255, .05);--grid-line-thick: rgba(255, 255, 255, .1);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-glow: 0 0 15px rgba(59, 130, 246, .5);--font-family: "Inter", system-ui, -apple-system, sans-serif}body.light-theme{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-sidebar: rgba(248, 250, 252, .85);--text-primary: #0f172a;--text-secondary: #475569;--border-color: #e2e8f0;--grid-line: rgba(0, 0, 0, .05);--grid-line-thick: rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);height:100vh;width:100vw;overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;height:100%;width:100%}#sidebar{width:280px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:10;box-shadow:var(--shadow-md)}.sidebar-header{padding:20px;border-bottom:1px solid var(--border-color)}.sidebar-header h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);letter-spacing:-.025em}.toolbox{padding:20px;flex:1;overflow-y:auto}.toolbox-section{margin-bottom:24px}.toolbox-section h3{font-size:.75rem;text-transform:uppercase;color:var(--text-secondary);font-weight:600;letter-spacing:.05em;margin-bottom:12px}.toolbox-item{display:flex;align-items:center;padding:12px 16px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:grab;transition:all .25s cubic-bezier(.4,0,.2,1);margin-bottom:12px;box-shadow:0 1px 3px #0000001a}.toolbox-item:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-glow),0 6px 16px #0003;transform:translateY(-2px) scale(1.02);background-color:var(--bg-primary)}.toolbox-item:active{cursor:grabbing;transform:translateY(0) scale(.98)}.toolbox-icon{width:28px;height:28px;margin-right:14px;border-radius:6px;background:var(--bg-secondary);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px;box-shadow:inset 0 1px 1px #ffffff26}.memory-icon{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#1d4ed8}.decoder-icon{background:linear-gradient(135deg,#10b981,#047857);border-color:#047857}.text-icon{background:linear-gradient(135deg,#a855f7,#7e22ce);border-color:#7e22ce}.shape-icon{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#d97706}.toolbox-item span{font-size:.9rem;font-weight:500;color:var(--text-primary)}#canvas-container{flex:1;position:relative;overflow:hidden;background-color:var(--bg-primary)}#main-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:grab}#main-canvas:active{cursor:grabbing}#zoom-controls{position:absolute;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px;border-radius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow-md)}#zoom-controls button{width:36px;height:36px;border-radius:8px;border:none;background:var(--bg-primary);color:var(--text-primary);font-size:1.2rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}#zoom-controls button:hover{background:var(--accent-primary);color:#fff}#zoom-controls button:active{transform:scale(.95)}#properties-sidebar{width:320px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid var(--border-color);display:flex;flex-direction:column;z-index:10;box-shadow:-4px 0 6px -1px #0000004d;transition:transform .3s ease;position:absolute;right:0;top:0;bottom:0}#properties-sidebar.hidden{display:none}.prop-group{margin-bottom:20px}.prop-group label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:6px;font-weight:500}.prop-input{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 12px;border-radius:6px;font-family:var(--font-family);font-size:.9rem;outline:none;transition:border-color .2s ease}.prop-input:focus{border-color:var(--accent-primary)}.color-picker-container{margin-top:6px}.color-swatches-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;outline:none;position:relative;box-shadow:0 2px 4px #0000004d}.color-swatch:hover{transform:scale(1.18);box-shadow:0 0 10px #fff6}.color-swatch.active{transform:scale(1.15);box-shadow:0 0 0 2px var(--bg-sidebar),0 0 0 4px var(--accent-primary)}.custom-picker-btn{background:conic-gradient(from 0deg,#ef4444,#f59e0b,#10b981,#06b6d4,#3b82f6,#8b5cf6,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.9);border:1px solid var(--border-color)}.custom-picker-btn:hover{transform:scale(1.18) rotate(45deg)}.custom-swatch-divider{width:1px;height:22px;background-color:var(--border-color);margin:0 2px}.hidden-color-input{opacity:0;position:absolute;width:0;height:0;pointer-events:none}.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.toggle-label{font-size:.85rem;color:var(--text-primary)}.toggle-switch{position:relative;display:inline-block;width:40px;height:22px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-secondary);transition:.4s;border-radius:22px;border:1px solid var(--border-color)}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:var(--text-secondary);transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:var(--accent-primary);border-color:var(--accent-primary)}input:checked+.toggle-slider:before{transform:translate(18px);background-color:#fff}#top-toolbar{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:8px 16px;border-radius:16px;border:1px solid var(--border-color);box-shadow:var(--shadow-md),0 8px 32px #0003;z-index:20}#input-filename{background:transparent;border:1px solid transparent;color:var(--text-primary);padding:4px 8px;border-radius:6px;font-family:var(--font-family);font-size:.85rem;font-weight:500;width:120px;outline:none;transition:all .2s ease}#input-filename:hover,#input-filename:focus{background:var(--bg-primary);border-color:var(--border-color)}#top-toolbar .icon-btn{background:transparent;color:var(--text-secondary);border:1px solid transparent;padding:6px;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}#top-toolbar .icon-btn:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color);transform:translateY(-1px)}#top-toolbar .icon-btn:active{transform:translateY(0)}#btn-theme{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:25;transition:all .2s ease}#btn-theme:hover{background:var(--accent-primary);color:#fff;transform:scale(1.05);box-shadow:var(--shadow-glow)}#btn-theme:active{transform:scale(.95)}