:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--accent-color:#7c3aed;--accent-hover:#8b5cf6;--bg-panel:#17171acc;--border-color:#ffffff1a;--glass-bg:#ffffff08;background-color:#0a0a0c;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex;overflow:hidden}#app{background:radial-gradient(circle,#16161d 0%,#0a0a0c 100%);grid-template-columns:320px 1fr;width:100vw;height:100vh;display:grid}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;flex-direction:column;gap:1.5rem;padding:2rem;display:flex;overflow-y:auto}h1{background:linear-gradient(135deg,#fff 0%,#aaa 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;margin:0;font-size:1.5rem;font-weight:700}.control-group{flex-direction:column;gap:.75rem;display:flex}label{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:500}input[type=range]{width:100%;accent-color:var(--accent-color)}select,input[type=color],button{background:var(--glass-bg);border:1px solid var(--border-color);color:#fff;border-radius:8px;outline:none;padding:.75rem;font-size:.9rem;transition:all .2s}input[type=color]{cursor:pointer;height:40px;padding:.2rem}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}input[type=color]::-moz-color-swatch{border:none;border-radius:4px}select option{color:#fff;background-color:#1a1a1e}select:hover,button:hover{border-color:var(--accent-color);background:#ffffff0d}button.primary{background:var(--accent-color);cursor:pointer;border:none;margin-top:1rem;font-weight:600}button.primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #7c3aed4d}.main-content{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:2rem;display:flex;position:relative;overflow:hidden}.canvas-container{border:1px solid var(--border-color);background:#000;border-radius:12px;justify-content:center;align-items:center;width:100%;height:calc(100% - 60px);display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000080}canvas{object-fit:contain;max-width:100%;max-height:100%}.drop-zone{border:2px dashed var(--border-color);cursor:pointer;background:#ffffff05;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;margin:1rem;transition:all .3s;display:flex;position:absolute;inset:0}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent-color);background:#7c3aed0d}.drop-zone i{opacity:.5;margin-bottom:1rem;font-size:3rem}.status-bar{color:#666;justify-content:space-between;align-items:center;width:100%;font-size:.8rem;display:flex}.checkbox-group{cursor:pointer;align-items:center;gap:.5rem;display:flex}.checkbox-group input{cursor:pointer;width:18px;height:18px}@media (width<=900px){#app{grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border-color);height:auto}}