:root{--color-bg:#0a0918;--color-surface:#15121f;--color-surface-alt:#1e1a2e;--color-border:#2c2640;--color-text:#f5f3fb;--color-text-muted:#a89fc2;--accent-1:#8ea2f4;--accent-2:#c9a0f0;--accent-3:#f78cbc;--accent-4:#fd9c7c;--accent-5:#ffd27a;--color-accent:var(--accent-3);--color-accent-hover:var(--accent-2);--gradient-accent:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-4), var(--accent-5));--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--color-text);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}button{font:inherit;letter-spacing:inherit}#meloop{box-sizing:border-box;text-align:center;background-image:linear-gradient(to bottom, #0a09188c, var(--color-bg) 65%), url(/meloop-banner.png);background-position:top;background-repeat:no-repeat;background-size:cover;flex-direction:column;align-items:center;gap:20px;min-height:100svh;padding:32px 24px 48px;display:flex;position:relative}.brand{align-items:center;gap:12px;display:flex}.brand img{border-radius:10px;width:40px;height:40px}.brand h1{letter-spacing:-.5px;margin:0;font-size:32px;font-weight:600}.tagline{color:var(--color-text-muted);margin:-8px 0 4px}.canvas-wrapper{border:1px solid var(--color-border);background:#fff;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000059}.canvas-overlay{pointer-events:none;position:absolute;inset:0}.bar-marker{stroke:var(--color-border);stroke-width:2px}.beat-marker{stroke:var(--color-border);stroke-width:1px;stroke-dasharray:2 4}.playhead{stroke:var(--color-accent);stroke-width:2px;filter:drop-shadow(0 0 4px var(--color-accent))}.tool-toggle{gap:8px;display:flex;position:absolute;bottom:10px;left:10px}.tool-toggle button{padding:6px 12px;font-size:13px}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:16px 20px;display:flex}.panel label{color:var(--color-text-muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.panel select,.panel input{font:inherit;background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;padding:6px 8px}.actions{gap:12px;display:flex}button{cursor:pointer;border:1px solid var(--color-border);background:var(--color-surface-alt);color:var(--color-text);border-radius:8px;padding:10px 18px;transition:background .2s,opacity .2s}button:hover:not(:disabled){background:var(--color-border)}button:disabled{opacity:.4;cursor:not-allowed}.actions button:not(:disabled){background:var(--gradient-accent);color:#17111f;border-color:#0000;font-weight:600}.actions button:not(:disabled):hover{filter:brightness(1.08)}.tool-toggle button.active{background:var(--gradient-accent);color:#17111f;border-color:#0000;font-weight:600}