.jampad-box{width:100%;height:calc(100dvh - 11rem);min-height:600px;container:jampad/inline-size}@media (min-width:1024px){.jampad-box{height:calc(100dvh - 8.5rem)}}.jampad{box-sizing:border-box;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#110e0b;--panel:#1b1612;--raise:#241e18;--line:#382e25;--ink:#f4ecdf;--sub:#ab9d8a;--scrim:#0403089e;--l1:#f5a524;--l2:#e8643c;--l3:#a9c442;--l4:#3fbfa8;--l5:#e58ab0;--l6:#7baaeb;--display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--gap:8px;height:100%}.jampad[data-genre=forest]{--bg:#070c09;--panel:#0e1712;--raise:#142019;--line:#213529;--ink:#e5f2e8;--sub:#8da696;--l1:#b6ee4c;--l2:#3ed69e;--l3:#9472ff;--l4:#4c8dff;--l5:#f25adf;--l6:#f2c14e}.jampad[data-genre=phonk]{--bg:#0b0709;--panel:#150e12;--raise:#1e141a;--line:#36232d;--ink:#f5ecf0;--sub:#a795a0;--l1:#e8253f;--l2:#b43cff;--l3:#ff7a1a;--l4:#f2c94c;--l5:#ff4fa3;--l6:#7cf2e5}.jampad[data-genre=house]{--bg:#080a14;--panel:#10142a;--raise:#161b36;--line:#262f57;--ink:#eef1ff;--sub:#9aa3c8;--l1:#ffc93c;--l2:#ff6b6b;--l3:#4ade80;--l4:#60a5fa;--l5:#f472b6;--l6:#c084fc}.jampad[data-genre=techhouse]{--bg:#0b090d;--panel:#151118;--raise:#1d1721;--line:#33293a;--ink:#f3edf5;--sub:#a497a8;--l1:#ff9f1c;--l2:#e63946;--l3:#2ec4b6;--l4:#b8b8d1;--l5:#f72585;--l6:#7b61ff}.jampad[data-genre=dabke]{--bg:#0a0c07;--panel:#13170e;--raise:#1a2013;--line:#2e3822;--ink:#f4f0de;--sub:#a7ab8e;--l1:#e9b949;--l2:#d9573b;--l3:#6fbf73;--l4:#e6d3a3;--l5:#4fb0c6;--l6:#c77dff}.jampad[data-genre=trap]{--bg:#08070c;--panel:#110f18;--raise:#181522;--line:#2b2640;--ink:#efeafb;--sub:#9c95b5;--l1:#8b5cf6;--l2:#f43f5e;--l3:#22d3ee;--l4:#e2e8f0;--l5:#facc15;--l6:#34d399}.jampad[data-genre=techno]{--bg:#0a0a0a;--panel:#141414;--raise:#1c1c1c;--line:#2e2e2e;--ink:#ededed;--sub:#9a9a9a;--l1:#d4ff00;--l2:#ff3b30;--l3:#00e5ff;--l4:#b0b0b0;--l5:#ff00a8;--l6:#7c7cff}.jampad[data-genre=rock]{--bg:#0c0c0c;--panel:#171615;--raise:#201f1d;--line:#36322e;--ink:#f2eee6;--sub:#a8a198;--l1:#ef3b36;--l2:#f2a93b;--l3:#e3d7bf;--l4:#5fa8d3;--l5:#f2668e;--l6:#9bc53d}.jampad[data-genre=shaabi]{--bg:#06100f;--panel:#0c1a19;--raise:#112523;--line:#1f3b38;--ink:#f7eedc;--sub:#9fb6af;--l1:#f2b636;--l2:#ee5a4f;--l3:#34c6b4;--l4:#e27fe0;--l5:#ff9548;--l6:#7fa7ff}.jampad{background:var(--bg);height:100%;color:var(--ink);border-radius:24px;overflow:hidden}.jampad [hidden]{display:none!important}.jampad{font-family:var(--body);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.4;transition:background-color .4s}.jampad button{font:inherit;color:inherit}.jampad :focus-visible{outline:3px solid var(--l4);outline-offset:2px}.jampad svg{fill:currentColor}.jampad [data-lane=drums]{--lc:var(--l1)}.jampad [data-lane=perc]{--lc:var(--l2)}.jampad [data-lane=bass]{--lc:var(--l3)}.jampad [data-lane=keys]{--lc:var(--l4)}.jampad [data-lane=lead]{--lc:var(--l5)}.jampad [data-lane=fx]{--lc:var(--l6)}.jampad .app{box-sizing:border-box;flex-direction:column;gap:12px;height:100%;min-height:600px;margin:0 auto;padding:12px 14px 14px;display:flex}.jampad .top{flex-wrap:nowrap;align-items:center;gap:10px 12px;display:flex}.jampad .brand h1{font-family:var(--display);letter-spacing:.01em;margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:400;line-height:1}.jampad .brand,.jampad .tools{flex:none}.jampad .genres{background:var(--panel);border:1.5px solid var(--line);scrollbar-width:none;border-radius:999px;flex:0 auto;gap:4px;min-width:0;margin-right:auto;padding:3px;scroll-padding-inline:8px;display:flex;overflow-x:auto}.jampad .genres::-webkit-scrollbar{display:none}.jampad .genres.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000)}.jampad .genres.more-l{-webkit-mask-image:linear-gradient(90deg,#0000,#000 44px);mask-image:linear-gradient(90deg,#0000,#000 44px)}.jampad .genres.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,#0000,#000 44px calc(100% - 44px),#0000);mask-image:linear-gradient(90deg,#0000,#000 44px calc(100% - 44px),#0000)}.jampad .genres button{color:var(--sub);font:700 13.5px/1 var(--body);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;flex:none;padding:8px 11px}.jampad .genres button:hover{color:var(--ink)}.jampad .genres button[aria-selected=true]{background:var(--ink);color:var(--bg)}.jampad .tempo{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;flex:none;align-items:center;gap:2px;padding:3px;display:flex}.jampad .tbtn{color:var(--ink);min-width:32px;height:30px;font:700 17px/1 var(--body);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:999px;place-items:center;padding:0 8px;display:grid}.jampad .tbtn:hover:not(:disabled){background:var(--raise)}.jampad .tbtn:disabled{opacity:.3;cursor:default}.jampad .tbtn.tap{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);border-left:1.5px solid var(--line);border-radius:0 999px 999px 0;margin-left:2px;padding:0 12px 0 10px}.jampad .bpm{cursor:ns-resize;font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:4px;min-width:62px;padding:0 4px;display:flex}.jampad .bpm b{font:600 15px/1 var(--mono)}.jampad .bpm small{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--sub)}.jampad .tools{gap:8px;display:flex}.jampad .btn{font:600 14px/1 var(--body);border:1.5px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:7px;padding:9px 14px;text-decoration:none;display:inline-flex}.jampad .btn:hover:not(:disabled){border-color:var(--ink)}.jampad .btn:disabled{opacity:.4;cursor:default}.jampad .btn.round{width:38px;padding:9px 0;font-weight:800}.jampad .btn.round svg{width:14px;height:14px}.jampad #recBtn svg{color:#e8253f}.jampad .btn.rec{color:#fff;background:#e8253f;border-color:#e8253f;animation:1s steps(2,jump-none) infinite recblink}.jampad .btn.rec svg{color:#fff}@keyframes recblink{50%{opacity:.72}}.jampad #vRec{color:#ff4e5a;white-space:nowrap;font-weight:600}.jampad .btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}.jampad .btn svg{width:13px;height:13px}@container jampad (max-width:900px){.jampad .top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools""genres tempo";gap:10px 8px;display:grid}.jampad .brand{grid-area:brand}.jampad .tools{grid-area:tools}.jampad .genres{grid-area:genres;margin:0}.jampad .tempo{grid-area:tempo}}@container jampad (max-width:640px){.jampad .genres button{padding:9px 11px;font-size:13px}.jampad .tbtn{min-width:30px;height:29px;padding:0 6px}.jampad .tbtn.tap{display:none}.jampad .bpm{min-width:34px;padding:0 2px}.jampad .bpm small{display:none}.jampad .btn{padding:8px 12px;font-size:13px}.jampad .btn.round{width:34px}}.jampad .main{flex-direction:column;flex:auto;gap:12px;min-height:0;display:flex}@container jampad (min-width:900px){.jampad .main{grid-template-columns:minmax(0,1fr) min(560px,52cqw);gap:16px;display:grid}}.jampad .viz{background:var(--panel);border:1.5px solid var(--line);isolation:isolate;border-radius:22px;flex:auto;min-height:150px;position:relative;overflow:hidden}.jampad .viz canvas{cursor:pointer;width:100%;height:100%;display:block;position:absolute;inset:0}.jampad .vinfo{font:500 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--sub);pointer-events:none;font-variant-numeric:tabular-nums;justify-content:space-between;gap:10px;display:flex;position:absolute;top:12px;left:14px;right:14px}.jampad .vinfo b{color:var(--ink);font-weight:600}.jampad .idle{text-align:center;pointer-events:none;place-content:center;justify-items:center;gap:6px;padding:16px;display:grid;position:absolute;inset:0}.jampad .idle b{font-family:var(--display);text-wrap:balance;font-size:clamp(22px,3.2vw,34px);font-weight:400;line-height:1.05}.jampad .idle span{color:var(--sub);max-width:36ch;font-size:13px}.jampad .vbar{justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;bottom:10px;left:10px;right:10px}.jampad .vgroup{align-items:center;gap:6px;min-width:0;display:flex}.jampad .vstyle{-webkit-backdrop-filter:blur(6px);background:#00000075;border-radius:999px;align-items:center;min-width:0;padding:2px;display:flex}.jampad .vstyle .vbtn{-webkit-backdrop-filter:none;background:0 0;width:30px;height:30px}.jampad .vname{color:#f4f1fa;font:700 12.5px/1 var(--body);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;min-width:84px;padding:0 6px;overflow:hidden}.jampad .vbtn{color:#f4f1fa;cursor:pointer;-webkit-backdrop-filter:blur(6px);background:#00000075;border:0;border-radius:999px;flex:none;place-items:center;width:32px;height:32px;display:grid}.jampad .vbtn:hover,.jampad .vchip:hover{background:#000000a8}.jampad .vstyle .vbtn:hover{background:#ffffff1f}.jampad .vbtn svg{width:15px;height:15px}.jampad .vbtn[aria-pressed=true]{color:#121018;background:#f4f1fa}.jampad .vname:after{content:"";vertical-align:2px;opacity:.7;border:4px solid #0000;border-top-color:currentColor;border-bottom:0;width:0;height:0;margin-left:6px;display:inline-block}.jampad .vmenu{z-index:6;-webkit-backdrop-filter:blur(10px);box-sizing:border-box;background:#0a080ed1;border-radius:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:min(300px,100% - 20px);max-height:calc(100% - 64px);padding:6px;display:grid;position:absolute;bottom:52px;left:10px;overflow:auto}.jampad .vmenu button{color:#edeaf3;font:600 13px/1.1 var(--body);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:9px 10px}.jampad .vmenu button:hover{background:#ffffff1a}.jampad .vmenu button[aria-pressed=true]{color:#121018;background:#f4f1fa}.jampad .vchip{color:#f4f1fa;height:32px;font:600 12px/1 var(--body);cursor:pointer;-webkit-backdrop-filter:blur(6px);white-space:nowrap;background:#00000075;border:0;border-radius:999px;align-items:center;gap:7px;padding:0 11px 0 8px;display:inline-flex}.jampad .vchip i{border-radius:4px;width:22px;height:12px;box-shadow:inset 0 0 0 1px #ffffff40}.jampad .toast{background:var(--ink);color:var(--bg);text-align:center;opacity:0;pointer-events:none;z-index:5;border-radius:999px;width:max-content;max-width:calc(100% - 32px);padding:9px 16px;font-size:13.5px;font-weight:700;transition:opacity .2s;position:absolute;top:44px;left:50%;transform:translate(-50%)}.jampad .toast.show{opacity:1}.jampad .app.big .deck{display:none}@container jampad (min-width:900px){.jampad .app.big .main{grid-template-columns:1fr}}.jampad .viz:fullscreen{border:0;border-radius:0}.jampad .deck{flex-direction:column;gap:12px;min-width:0;display:flex}@container jampad (min-width:900px){.jampad .deck{justify-content:center}}.jampad .scenes{align-items:center;gap:8px;min-width:0;display:flex}.jampad .lbl{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);flex:none}.jampad .pills{scrollbar-width:none;flex:1;gap:6px;min-width:0;padding:2px;display:flex;overflow-x:auto}.jampad .pills::-webkit-scrollbar{display:none}.jampad .pill{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font:700 13px/1 var(--body);cursor:pointer;white-space:nowrap;border-radius:999px;flex:none;padding:7px 12px}.jampad .pill:hover{border-color:var(--ink)}.jampad .pill[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.jampad .pill.mine{border-style:dashed}.jampad .psep{background:var(--line);flex:none;align-self:center;width:1.5px;height:20px;margin:0 3px}.jampad .btn.small{flex:none;padding:7px 12px;font-size:13px}.jampad .board{gap:var(--gap);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.jampad .lh{font:600 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--lc);text-align:center;white-space:nowrap;text-overflow:ellipsis;padding-bottom:1px;overflow:hidden}.jampad .pad{aspect-ratio:1;border:1.5px solid var(--line);background:var(--raise);color:var(--ink);cursor:pointer;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:14px;justify-content:flex-start;align-items:flex-end;padding:0;transition:background-color .12s,border-color .12s,color .12s;display:flex;position:relative;overflow:hidden}@supports (color:color-mix(in oklab, red, blue)){.jampad .pad{background:color-mix(in oklab,var(--lc) 13%,var(--panel));border-color:color-mix(in oklab,var(--lc) 40%,transparent)}.jampad .pad:hover{background:color-mix(in oklab,var(--lc) 22%,var(--panel))}}.jampad .pn{font:700 12.5px/1.15 var(--body);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;min-width:0;padding:0 8px 9px;display:block}.jampad .pk{font:500 9px/1 var(--mono);color:var(--sub);text-transform:uppercase;position:absolute;top:7px;left:8px}.jampad .p1{font:600 9px/1 var(--mono);color:var(--lc);position:absolute;top:6px;right:7px}.jampad .pad.shot{border-style:dashed}.jampad .pad.on{background:var(--lc);border-color:var(--lc);color:#0b0a0e;box-shadow:0 0 calc(6px + var(--hit,0) * 26px) var(--lc);filter:brightness(calc(.9 + var(--hit,0) * .22))}.jampad .pad.on .pk,.jampad .pad.on .p1{color:#0000008c}.jampad .pad:after{content:"";background:linear-gradient(90deg,#00000080 calc(var(--prog,0) * 100%),#00000024 0);opacity:0;border-radius:2px;height:3px;position:absolute;bottom:5px;left:8px;right:8px}.jampad .pad.on:after{opacity:1}.jampad .pad.on .pn{padding-bottom:12px}.jampad .pad.wait{animation:.5s steps(2,jump-none) infinite blink}@keyframes blink{0%{border-color:var(--lc)}to{border-color:#0000}}.jampad .pad.flash{background:var(--lc);color:#0b0a0e}@media (hover:none){.jampad .pk{display:none}}@container jampad (max-width:374px){.jampad .pn{letter-spacing:-.02em!important;padding:0 4px 7px!important;font-size:10px!important}}@container jampad (max-width:640px){.jampad{--gap:6px}.jampad .pad{border-radius:11px}.jampad .pn{letter-spacing:-.01em;padding:0 5px 7px;font-size:10.5px}.jampad .pad.on .pn{padding-bottom:10px}.jampad .p1{top:5px;right:5px}.jampad .lh{letter-spacing:.05em;font-size:9px}}.jampad .fx{gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.jampad .fxw{--fx:0;min-width:0;position:relative}.jampad .hold{border:1.5px solid var(--line);background:var(--panel);width:100%;height:100%;color:var(--ink);cursor:ew-resize;text-align:left;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;isolation:isolate;border-radius:14px;flex-direction:column;gap:3px;min-width:0;padding:10px 10px 9px;display:flex;position:relative;overflow:hidden}.jampad .hold .fill{z-index:-1;transform-origin:0;transform:scaleX(var(--fx));background:var(--ink);opacity:.2;position:absolute;inset:0}.jampad .hold:after{content:"";height:3px;width:calc(var(--fx) * 100%);background:var(--ink);position:absolute;bottom:0;left:0}.jampad .hold b{font:800 14px/1.1 var(--body)}.jampad .hold small{font:500 11px/1.2 var(--body);color:var(--sub);white-space:nowrap;gap:6px;display:flex;overflow:hidden}.jampad .hold .fxv{font:600 10.5px/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}.jampad .hold kbd{font:500 9px/1 var(--mono);color:var(--sub);margin-left:4px}.jampad .fxw.on .hold{border-color:var(--ink)}.jampad .fxw.on .fxd{display:none}.jampad .fxw.max .hold{box-shadow:0 0 18px color-mix(in oklab,var(--ink) 35%,transparent)}.jampad .fxw.locked .hold{border-color:var(--ink);border-width:2px;padding:9.5px 9.5px 8.5px}.jampad .fxw.locked .hold .fill{opacity:.3}@media (hover:none){.jampad .hold kbd{display:none}}@container jampad (max-width:640px){.jampad .hold{border-radius:12px;padding:12px 8px 11px}.jampad .fxw.locked .hold{padding:11.5px 7.5px 10.5px}.jampad .hold b{font-size:13px}.jampad .hold small{display:none}.jampad .fxw.on .hold small{display:flex}.jampad .hold .fxv{font-size:9px}}.jampad .sheet{z-index:70;background:var(--scrim);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));place-items:center;display:grid;position:fixed;inset:0}.jampad .card{background:var(--panel);color:var(--ink);border:1.5px solid var(--line);box-sizing:border-box;border-radius:22px;flex-direction:column;gap:14px;width:100%;max-width:540px;max-height:100%;padding:22px 22px 18px;display:flex;overflow:auto}.jampad .card h2{font-family:var(--display);margin:0;font-size:26px;font-weight:400;line-height:1.1}.jampad .card h3{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin:4px 0 0}.jampad .card ol{gap:10px;margin:0;padding:0;list-style:none;display:grid}.jampad .card li{color:var(--sub);align-items:flex-start;gap:10px;font-size:14px;display:flex}.jampad .card li b,.jampad .card p b{color:var(--ink)}.jampad .card .n{border:1.5px solid var(--ink);width:24px;height:24px;font:600 11px/1 var(--mono);color:var(--ink);border-radius:50%;flex:none;place-items:center;display:grid}.jampad .card p{color:var(--sub);max-width:62ch;margin:0;font-size:14px}.jampad .keys{color:var(--sub);grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;display:grid}.jampad .keys kbd{font:500 11px/1.4 var(--mono);color:var(--ink);white-space:nowrap}.jampad .actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.jampad .card form{flex-direction:column;gap:14px;display:flex}.jampad .field{flex-direction:column;gap:7px;display:flex}.jampad .field label{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}.jampad .field input{font:600 16px/1.2 var(--body);color:var(--ink);background:var(--raise);border:1.5px solid var(--line);box-sizing:border-box;border-radius:12px;width:100%;padding:11px 12px}.jampad .field input:focus{border-color:var(--ink);outline:none}.jampad .chips{flex-wrap:wrap;gap:6px;display:flex}.jampad .chip{background:var(--raise);border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 7px;font-size:12.5px;font-weight:700;display:inline-flex}.jampad .chip i{background:var(--lc);border-radius:3px;width:9px;height:9px}.jampad .mylist{gap:8px;margin:0;padding:0;list-style:none;display:grid}.jampad .mylist li{background:var(--raise);border-radius:14px;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0;padding:9px 9px 9px 12px;display:flex}.jampad .mylist .mn{overflow-wrap:anywhere;flex:1;min-width:0;font-size:14px;font-weight:800}.jampad .mylist .ms{color:var(--sub);flex-basis:100%;font-size:12px;line-height:1.3}.jampad .mylist .btn{padding:6px 11px;font-size:12px}.jampad .mylist .btn.confirm{background:var(--l2);border-color:var(--l2);color:#0b0a0e}.jampad .note{color:var(--sub);margin:0;font-size:12.5px}.jampad .btn.confirm{background:var(--l2);border-color:var(--l2);color:#0b0a0e}.jampad .cview{box-sizing:border-box;min-height:100%;padding:20px 16px 48px}.jampad .cview-in{flex-direction:column;gap:14px;max-width:720px;margin:0 auto;display:flex}.jampad .cview .back{align-self:flex-start}.jampad .cview h1{font-family:var(--display);margin:10px 0 2px;font-size:clamp(34px,6vw,50px);font-weight:400;line-height:1}.jampad .cview h2{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin:18px 0 2px}.jampad .cview p{color:var(--sub);max-width:64ch;margin:0;font-size:15px;line-height:1.55}.jampad .cview p b{color:var(--ink)}.jampad .cview ul{color:var(--sub);margin:0;padding-left:18px;font-size:15px;line-height:1.6}.jampad .cview li b{color:var(--ink)}@media (prefers-reduced-motion:reduce){.jampad .pad.wait{border-style:dotted;animation:none}.jampad{transition:none}}