:root{--bg: #f2f2f0;--panel: #ffffff;--panel-2: #f4f4f2;--panel-border: rgba(22,22,42,.05);--accent: #7c5cff;--accent-2: #ff6ec7;--accent-3: #2f9bff;--text: #16162a;--muted: #8686a0;--gradient-1: linear-gradient(135deg, #7c5cff 0%, #b18aff 45%, #ff6ec7 100%);--gradient-2: linear-gradient(135deg, #ff6ec7 0%, #7c5cff 100%);--shadow-soft: 0 1px 2px rgba(22,22,42,.04);--code-bg: #121218;--code-panel: #1a1a23;--font-display: "Fraunces", Georgia, serif;--cat-tempo: #7c5cff;--cat-volume: #c1666b;--cat-reverb: #1d9e75;--cat-delay: #2f9bff;--cat-filter: #e0a316;--cat-pump: #ff6ec7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding:16px 12px 20px;position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column}button,input,select,textarea{font-family:inherit}h1{font-family:var(--font-display);font-size:26px;margin:0 0 4px;text-align:center;font-weight:600;letter-spacing:-.01em;color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px}#titleWave{display:block;flex-shrink:0}p.subtitle{color:var(--muted);margin:0 auto 10px;font-size:12px;font-weight:500;text-align:center;max-width:560px;line-height:1.4;letter-spacing:-.01em}.layout{display:flex;gap:16px;flex:1 1 0;min-height:0;max-width:1600px;width:100%;margin:0 auto}.left-col{flex:1 1 0;max-width:420px;min-width:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--panel-border) transparent}.left-col::-webkit-scrollbar{width:4px}.left-col::-webkit-scrollbar-track{background:transparent}.left-col::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:2px}.left-col .code-col{flex:1 1 0;min-height:80px;border-radius:18px}.right-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;overflow:hidden}.action-row{width:100%;display:flex;gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid var(--panel-border)}.action-row button{flex:1;white-space:nowrap}.code-col{background:var(--code-panel);border:1px solid rgba(255,255,255,.04);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:none}.code-col-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}.code-col-head h2{font-size:15px;margin:0;color:var(--accent)}.live-badge{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent);font-family:SF Mono,Menlo,Consolas,monospace}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent),0 0 12px var(--accent);animation:livePulse 1.3s ease-in-out infinite}@keyframes livePulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}.visualizer{display:flex;gap:3px;align-items:flex-end;height:16px}.visualizer span{width:3px;background:var(--accent);border-radius:2px;height:4px;box-shadow:0 0 4px var(--accent)}.visualizer.is-playing span{animation:barBounce .55s ease-in-out infinite}.visualizer span:nth-child(2){animation-delay:.08s}.visualizer span:nth-child(3){animation-delay:.16s}.visualizer span:nth-child(4){animation-delay:.24s}.visualizer span:nth-child(5){animation-delay:.32s}@keyframes barBounce{0%,to{height:3px}50%{height:16px}}.code-col-panels{flex:1;min-height:0;position:relative;margin:12px 16px 16px;background:#0a0b10;border-radius:10px;box-shadow:inset 0 0 40px #50fa7b0f;overflow:hidden}.code-col-body{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;scrollbar-gutter:stable}.code-col-body.tab-hidden{visibility:hidden;pointer-events:none;opacity:0}.code-col-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 3px);border-radius:10px}.code-col-body pre{margin:0;padding:16px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:14px;line-height:1.85;color:#8be9fd;text-shadow:0 0 6px rgba(139,233,253,.25);white-space:pre-wrap;word-break:break-word;transition:filter .15s ease}.code-col-body pre.flash{filter:brightness(2)}.code-col-body pre:focus{outline:1px dashed rgba(80,250,123,.4);outline-offset:4px}.code-col-body pre.editing-note:after{content:"✏️ editing your own code — click Sync to match the board again";display:block;margin-top:10px;color:#ffb86c;font-style:italic;font-size:11px}.tok-fn{color:#ff79c6}.tok-str{color:#b18aff}.tok-num{color:#ffb86c}.tok-comment{color:#6272a4;font-style:italic}.tok-muted{color:#4c5061;text-decoration:line-through}.tok-punct{color:#8be9fd}.cursor{display:inline-block;color:var(--accent);animation:blink 1s steps(1) infinite}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.copy-btn{position:sticky;top:8px;float:right;margin:8px 8px 0 0;border:none;background:#2a2a35;color:#e8e8f0;padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer}.view-tabs{display:flex;align-items:center;gap:6px;padding:6px 20px 0;height:44px;box-sizing:border-box;flex-shrink:0;overflow:hidden}.view-tab{border:none;background:transparent;color:var(--muted);padding:7px 12px;border-radius:8px 8px 0 0;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}.view-tab.active{background:#101117;color:var(--accent)}.view-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}.expand-btn{background:none;border:1px solid var(--panel-border);border-radius:8px;color:var(--muted);font-size:16px;line-height:1;padding:4px 8px;cursor:pointer;margin-left:6px;transition:color .15s,background .15s}.expand-btn:hover{background:var(--panel-2);color:var(--text)}.code-col.code-fullscreen{position:fixed;top:12px;right:12px;bottom:12px;left:12px;z-index:200;border-radius:18px;box-shadow:0 24px 80px #0009}.code-fullscreen-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:199;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.code-fullscreen-backdrop.visible{display:block}.panel{background:var(--panel);border:none;border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;width:100%;box-shadow:var(--shadow-soft)}.panel-hero{display:flex;align-items:center;gap:14px}.hero-sliders{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.hero-sliders .field{flex-direction:row;align-items:center;gap:10px;min-width:0}.hero-sliders .field label{white-space:nowrap;min-width:0;flex-shrink:0}.hero-sliders input[type=range]{flex:1;width:auto;min-width:60px}.panel-section{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--panel-border)}.panel-patterns .panel-section{border-top:none;padding-top:0}.panel-section--patterns{flex-direction:column;align-items:stretch;gap:8px}.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}.panel-effects{gap:10px}.effects-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.effects-grid .field{align-items:flex-start;gap:5px;min-width:0}.effects-grid input[type=range]{width:100%}button.big{border:none;border-radius:999px;width:76px;height:76px;cursor:pointer;background:var(--gradient-1);color:#fff;transition:transform .1s ease,box-shadow .2s ease;flex-shrink:0;box-shadow:0 12px 32px #7c5cff66;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}button.big svg{display:block}button.big:hover{transform:scale(1.05)}button.big:active{transform:scale(.93)}button.big.playing{background:linear-gradient(135deg,#7c5cff,#ff6ec7,#2f9bff,#b18aff,#7c5cff);background-size:400% 400%;animation:playPulse 1.1s ease-in-out infinite,gradientFlow 3.2s linear infinite}@keyframes playPulse{0%,to{box-shadow:0 16px 40px #ff6ec766,0 0 #ff6ec766}50%{box-shadow:0 16px 40px #ff6ec766,0 0 0 16px #ff6ec700}}@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.panel-main{position:relative;isolation:isolate}.panel-main.is-playing:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:17px;pointer-events:none;background:linear-gradient(135deg,#7c5cff1a,#ff6ec714,#2f9bff17,#7c5cff1a);background-size:400% 400%;animation:gradientFlow 4s linear infinite}.field{display:flex;flex-direction:column;align-items:center;gap:6px;--cat: var(--accent)}.field label{font-size:11px;font-weight:700;color:var(--text);text-align:center;text-transform:uppercase;letter-spacing:.06em}.field-value{color:var(--cat);font-weight:700;font-variant-numeric:tabular-nums}.field.cat-tempo{--cat: var(--cat-tempo)}.field.cat-volume{--cat: var(--cat-volume)}.field.cat-reverb{--cat: var(--cat-reverb)}.field.cat-delay{--cat: var(--cat-delay)}.field.cat-filter{--cat: var(--cat-filter)}.field.cat-pump{--cat: var(--cat-pump)}input[type=range]{width:110px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:999px;background:linear-gradient(var(--cat, var(--accent)),var(--cat, var(--accent))) 0 / var(--fill, 50%) 100% no-repeat,var(--panel-2);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--cat, var(--accent));box-shadow:0 1px 3px #16162a33;cursor:pointer}input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--cat, var(--accent));box-shadow:0 1px 3px #16162a33;cursor:pointer}.style-row{display:flex;align-items:center;gap:8px}.style-row select{flex:1;min-width:0}.btn-icon{padding:9px 11px;font-size:15px;line-height:1}button.small{border:1px solid var(--panel-border);border-radius:10px;background:var(--panel-2);color:var(--text);padding:9px 14px;font-size:13px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .08s ease}button.small:hover{background:#eae8f5}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus:not(:focus-visible){outline:none}button.small:active{transform:scale(.96)}button.small.active{background:var(--gradient-1);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 16px #7c5cff4d}.bank-group{display:flex;gap:8px;justify-content:center}.pattern-slot{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:8px;border-radius:12px;background:var(--panel-2);border:1px solid transparent;transition:border-color .15s ease;flex:1 1 0}.pattern-btn{padding:7px 10px;font-size:14px;font-weight:700;min-width:34px;width:100%;position:relative;background:var(--panel);border-radius:8px}button.pattern-btn.active{background:var(--panel);color:var(--accent);border:1.5px solid var(--accent);box-shadow:none;font-weight:700}.pattern-btn.has-content:after{content:"";position:absolute;bottom:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.pattern-btn.active.has-content:after{background:var(--accent)}.pattern-ms-row{display:flex;gap:4px}.mute-btn,.solo-btn{flex:1 1 0;border:1px solid var(--panel-border);border-radius:6px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;padding:3px 4px;cursor:pointer;transition:background .12s ease,color .12s ease,box-shadow .12s ease;text-align:center}.mute-btn:hover,.solo-btn:hover{background:#eae8f5;color:var(--text)}.mute-btn.muted{background:#ff4757;border-color:transparent;color:#fff;box-shadow:0 2px 6px #ff475759}.solo-btn.soloed{background:#ffb020;border-color:transparent;color:#fff;box-shadow:0 2px 6px #ffb02066}.pattern-btn.soloed-out{opacity:.35}.pattern-actions{display:flex;gap:6px;flex-wrap:wrap}.pattern-actions button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px}.btn-icon-glyph{font-size:13px;opacity:.8}select,input[type=text]{background:var(--panel-2);color:var(--text);border:1px solid var(--panel-border);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:500;letter-spacing:-.01em}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238686a0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.step-group{display:flex;gap:6px}.segmented{display:flex;gap:2px;background:var(--panel-2);border-radius:10px;padding:3px;flex:1}.segmented-btn{flex:1 1 0;border:none;background:transparent;color:var(--muted);padding:7px 10px;font-size:13px;font-weight:600;letter-spacing:-.01em;border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease,box-shadow .15s ease}.segmented-btn:hover{color:var(--text)}.segmented-btn.active{background:var(--panel);color:var(--accent);box-shadow:0 2px 6px #16162a1a}.grid-toolbar{display:flex;align-items:center;justify-content:flex-end;padding:0 4px 6px}.grid-wrap{flex:1 1 0;min-height:0;width:100%;background:var(--panel);border:none;border-radius:18px;padding:18px;overflow-x:auto;overflow-y:auto;box-shadow:var(--shadow-soft);scrollbar-width:thin}.grid-inner{min-width:800px}.group-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:12px 0 6px;display:flex;align-items:center;gap:8px}.group-title #clearMSBtn{font-size:10px;font-weight:600;letter-spacing:-.01em;text-transform:none;padding:2px 7px;margin-left:2px}.track-row{display:grid;grid-template-columns:110px repeat(var(--steps, 32),1fr);gap:5px;align-items:center;margin-bottom:6px}.track-label{font-size:11px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:4px}.track-label .name{flex:1}.track-label .name-preview{cursor:pointer;border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:background .12s ease}.track-label .name-preview:hover{background:var(--panel-2)}.track-label .name-preview:active{background:var(--accent);color:#fff}.mini-btn{border:none;border-radius:5px;width:20px;height:20px;font-size:10px;font-weight:700;cursor:pointer;background:var(--panel-2);color:var(--muted);flex-shrink:0;transition:background .15s ease}.mini-btn.mute.active{background:var(--accent-2);color:#fff}.mini-btn.solo.active{background:#ffb020;color:#fff}.mini-btn.melodic-cp.paste-ready{background:#22c55e2e;color:#16a34a}.step{aspect-ratio:1/1;min-width:12px;border-radius:6px;border:none;background:var(--panel-2);cursor:pointer;position:relative;transition:transform .1s ease;display:flex;align-items:center;justify-content:center;font-size:7px;font-family:SF Mono,Menlo,monospace;font-weight:700;letter-spacing:-.03em;overflow:hidden;line-height:1}.step:hover{transform:scale(1.05)}.step:active{transform:scale(.9)}@keyframes longClearFlash{0%{background:#ff50508c}to{background:transparent}}.step.long-clear{animation:longClearFlash .35s ease-out forwards}.step.drag-fill{outline:2px solid rgba(120,200,255,.8);outline-offset:-2px;transition:outline .05s}.step.beat-marker:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;box-shadow:inset 0 0 0 1px #16162a0f}.step.on{background:var(--track-color, var(--accent));box-shadow:0 2px 8px color-mix(in srgb,var(--track-color, var(--accent)) 35%,transparent);color:#ffffffeb}.step.on.tone-1,.note-picker-note.tone-1,.npb-fill.tone-1{background:#4c35de;box-shadow:0 2px 8px #4c35de59}.step.on.tone-2,.note-picker-note.tone-2,.npb-fill.tone-2{background:#4062e7;box-shadow:0 2px 8px #4062e759}.step.on.tone-3,.note-picker-note.tone-3,.npb-fill.tone-3{background:#198cf0;box-shadow:0 2px 8px #198cf059}.step.on.tone-4,.note-picker-note.tone-4,.npb-fill.tone-4{background:#0bbad5;box-shadow:0 2px 8px #0bbad559}.step.on.tone-5,.note-picker-note.tone-5,.npb-fill.tone-5{background:#13c3a0;box-shadow:0 2px 8px #13c3a059}.step.on.tone-6,.note-picker-note.tone-6,.npb-fill.tone-6{background:#18bf66;box-shadow:0 2px 8px #18bf6659}.step.on.tone-7,.note-picker-note.tone-7,.npb-fill.tone-7{background:#24bc29;box-shadow:0 2px 8px #24bc2959}.step.on.tone-8,.note-picker-note.tone-8,.npb-fill.tone-8{background:#70c11f;box-shadow:0 2px 8px #70c11f59}.step.on.tone-9,.note-picker-note.tone-9,.npb-fill.tone-9{background:#e8f00f;box-shadow:0 2px 8px #e8f00f59}.step.on.tone-10,.note-picker-note.tone-10,.npb-fill.tone-10{background:#f9b310;box-shadow:0 2px 8px #f9b31059;color:#000000bf}.step.on.tone-11,.note-picker-note.tone-11,.npb-fill.tone-11{background:#f9851f;box-shadow:0 2px 8px #f9851f59}.step.on.tone-12,.note-picker-note.tone-12,.npb-fill.tone-12{background:#f25b36;box-shadow:0 2px 8px #f25b3659}.step.on.tone-13,.note-picker-note.tone-13,.npb-fill.tone-13{background:#ef3447;box-shadow:0 2px 8px #ef344759}.step.on.tone-14,.note-picker-note.tone-14,.npb-fill.tone-14{background:#eb3785;box-shadow:0 2px 8px #eb378559}.step.on.tone-15,.note-picker-note.tone-15,.npb-fill.tone-15{background:#e73cbf;box-shadow:0 2px 8px #e73cbf59}.step.on.tone-16,.note-picker-note.tone-16,.npb-fill.tone-16{background:#d142e0;box-shadow:0 2px 8px #d142e059}.step.on.tone-17,.note-picker-note.tone-17,.npb-fill.tone-17{background:#ac52e0;box-shadow:0 2px 8px #ac52e059}.step.on.tone-18,.note-picker-note.tone-18,.npb-fill.tone-18{background:#8d5ce0;box-shadow:0 2px 8px #8d5ce059}.step.on.tone-19,.note-picker-note.tone-19,.npb-fill.tone-19{background:#7367e0;box-shadow:0 2px 8px #7367e059}.step.on.tone-20,.note-picker-note.tone-20,.npb-fill.tone-20{background:#6c80e5;box-shadow:0 2px 8px #6c80e559}.step.current{outline:1px solid rgba(120,200,255,.62);outline-offset:-1px}.step.on.current{transform:scale(1.1);transition:transform .08s ease-out;z-index:1}.playhead-row{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--panel-border)}.playhead-cell{background:var(--panel-2);box-shadow:inset 0 0 0 1px #16162a0d}.playhead-cell:hover{background:#eae8f5}.step.ghost{background:#00000006;border:1px dashed rgba(0,0,0,.07);cursor:default;pointer-events:none}.playhead-cell.current{background:#78c8ff9e;outline:none;box-shadow:none}.note-picker-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#16162a73;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;animation:notePickerFade .15s ease}@keyframes notePickerFade{0%{opacity:0}to{opacity:1}}.note-picker-dial{position:relative;width:280px;height:280px}.note-picker-note{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:2px solid rgba(255,255,255,.55);font-size:9px;font-weight:700;letter-spacing:-.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fffffff2;transform:translate(var(--tx, 0),var(--ty, 0));transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;box-shadow:0 4px 12px #00000047}.note-picker-note:hover{z-index:2;transform:translate(var(--tx,0),var(--ty,0)) scale(1.18);filter:brightness(1.12)}.note-picker-note.active{border-color:#fff;box-shadow:0 0 0 3px var(--accent),0 6px 18px #00000059}.note-picker-clear{position:absolute;top:50%;left:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:none;background:var(--panel);color:var(--muted);font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0000004d;transition:background .12s ease,color .12s ease}.note-picker-clear:hover,.note-picker-clear.active{background:#ff4757;color:#fff}.note-picker-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}.note-picker-staff{background:var(--panel);padding:12px 14px 8px;border-radius:14px;box-shadow:0 4px 16px #00000040;width:min(92vw,620px)}.note-picker-staff .npf-note ellipse{transition:transform .12s ease,filter .12s ease}.note-picker-staff .npf-note:hover ellipse{filter:brightness(1.25);transform:rotate(-20deg) scale(1.45)}#waveCanvas{display:block;width:100%;height:100%;padding:8px;box-sizing:border-box}@media (max-width: 980px){body{height:auto;overflow:auto;padding:12px 10px 20px}.layout{flex-direction:column;flex:none}.left-col{flex:none;width:100%;overflow-y:visible}.left-col .code-col{min-height:240px;flex:none}.right-col{flex:none;width:100%;overflow:visible;height:auto;display:block}.grid-wrap{flex:none;min-height:0;overflow-x:auto;overflow-y:visible;height:auto}}@media (max-width: 600px){h1{font-size:22px}.style-row{flex-wrap:nowrap}.style-row select{flex:1 1 0;min-width:0}.style-row #randomBtn{flex:1 1 0;min-width:0;white-space:nowrap}}@media (max-width: 700px){.track-row{grid-template-columns:72px repeat(var(--steps,32),1fr);gap:2px}.track-label{font-size:9px;gap:2px}.track-label .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-btn{width:16px;height:16px;font-size:8px}.grid-wrap{padding:12px 10px}}