@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;background:#0a0a0a;color:#e4e4e7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark}.app{display:grid;grid-template-columns:1fr 300px;grid-template-rows:48px 1fr;width:100vw;height:100vh;overflow:hidden}.topbar{grid-column:1 / -1;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #1f1f1f;background:#0a0a0a;gap:16px;z-index:10}.app-name{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e4e4e7}.topbar-divider{width:1px;height:16px;background:#2a2a2a}.topbar-meta{font-size:12px;color:#52525b;font-weight:400}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}.processing-badge{font-size:11px;color:#71717a;font-weight:500;letter-spacing:.04em;opacity:0;transition:opacity .2s}.processing-badge.visible{opacity:1}.status-pill{display:flex;align-items:center;gap:6px;font-size:11px;color:#52525b;font-weight:500}.status-dot{width:5px;height:5px;border-radius:50%;background:#2a2a2a;transition:background .4s}.status-dot.live{background:#22c55e}.canvas-area{background:#060606;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.dropzone-inner{width:calc(100% - 48px);height:calc(100% - 48px);border:1px dashed #232323;border-radius:2px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden;transition:border-color .2s}.dropzone-inner:hover,.canvas-area.dragging .dropzone-inner{border-color:#3a3a3a}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:12px;color:#3a3a3a;pointer-events:none;transition:color .2s}.canvas-area:hover .upload-prompt{color:#52525b}.upload-icon{width:44px;height:44px;stroke:currentColor;stroke-width:1;fill:none}.upload-label{font-size:13px;font-weight:500;color:inherit}.upload-sub{font-size:11px;color:inherit;opacity:.6;margin-top:-4px}.preview-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .2s,filter .2s}.preview-canvas.faded{opacity:.35;filter:blur(4px) saturate(.3)}.sidebar{border-left:1px solid #1f1f1f;background:#0a0a0a;display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#232323 transparent}.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#232323;border-radius:2px}.section{padding:16px;flex-shrink:0}.sep{height:1px;background:#1a1a1a;flex-shrink:0;margin:0}.section-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#3f3f46;margin-bottom:12px}.palette-drop-hint{font-size:10px;color:#3f3f46;margin-bottom:10px;margin-top:-6px}.palette-drop-hint.dragging-palette{color:#71717a}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}.swatch-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.swatch-wrap{width:100%;aspect-ratio:1;border-radius:3px;overflow:hidden;position:relative;cursor:pointer;border:1px solid rgba(255,255,255,.06);transition:transform .12s,border-color .15s}.swatch-wrap:hover{transform:scale(1.08);border-color:#ffffff26}.swatch-wrap:active{transform:scale(.93)}.swatch-wrap input[type=color]{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;width:200%;height:200%;opacity:0;cursor:pointer;border:none;padding:0;background:none}.swatch-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.hex-label{width:100%;font-size:8.5px;font-weight:500;font-family:SFMono-Regular,monospace;color:#4a4a52;background:transparent;border:1px solid transparent;border-radius:2px;padding:2px 3px;text-align:center;outline:none;cursor:text;transition:border-color .15s,color .15s,background .15s;-webkit-appearance:none}.hex-label:focus{border-color:#333;color:#a1a1aa;background:#111}.palette-actions{display:flex;gap:6px;margin-top:2px}.sliders{display:flex;flex-direction:column;gap:16px}.slider-row{display:flex;flex-direction:column;gap:6px}.slider-top{display:flex;justify-content:space-between;align-items:baseline}.slider-name{font-size:12px;font-weight:500;color:#a1a1aa}.slider-val{font-size:11px;color:#52525b;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}.range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;background:#222;border-radius:99px;outline:none;cursor:pointer;transition:background .15s}.range:hover{background:#2e2e2e}.range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#e4e4e7;cursor:pointer;border:1.5px solid #1a1a1a;box-shadow:0 1px 4px #00000080;transition:transform .12s}.range::-webkit-slider-thumb:hover{transform:scale(1.25)}.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#e4e4e7;border:1.5px solid #1a1a1a}.toggle-row{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:12px;font-weight:500;color:#a1a1aa}.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-track{width:30px;height:17px;border-radius:99px;background:#222;border:1px solid #2e2e2e;position:relative;transition:background .2s,border-color .2s}.toggle-track.on{background:#e4e4e7;border-color:#e4e4e7}.toggle-thumb{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#52525b;transition:transform .2s,background .2s}.toggle-track.on .toggle-thumb{transform:translate(13px);background:#0a0a0a}.actions-bar{display:flex;gap:6px;padding:12px 16px 16px;flex-shrink:0}.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:3px;font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid #1f1f1f;background:#111;color:#71717a;transition:background .15s,color .15s,transform .1s,border-color .15s;outline:none;white-space:nowrap}.btn:hover{background:#1c1c1c;color:#e4e4e7;border-color:#2a2a2a}.btn:active{transform:scale(.95)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:#e4e4e7;color:#0a0a0a;border-color:#e4e4e7;flex:0 0 auto;padding:8px 14px}.btn-primary:hover{background:#cfcfd4;color:#0a0a0a;border-color:#cfcfd4}.btn-primary:disabled{background:#1f1f1f;color:#3f3f46;border-color:#1f1f1f}.btn-pill{font-size:10px;padding:5px 10px;flex:none;border-radius:2px;letter-spacing:.04em}.band-map{display:flex;flex-direction:column;gap:4px;margin-top:4px}.band-row{display:flex;align-items:center;gap:8px}.band-label{font-size:10px;color:#3f3f46;width:40px;flex-shrink:0}.band-track{flex:1;height:20px;border-radius:2px;position:relative;display:flex;align-items:center}.band-fill{height:100%;border-radius:2px;width:100%;transition:background .3s}.hidden{position:fixed;opacity:0;pointer-events:none;top:-9999px;left:-9999px}@media (max-width: 680px){html,body,#root{overflow:auto}.app{grid-template-columns:1fr;grid-template-rows:48px 55vw 1fr;height:auto;min-height:100vh}.sidebar{border-left:none;border-top:1px solid #1f1f1f;overflow:visible}}