:root{--bg:#0b1220;--fg:#e5e7eb;--muted:#94a3b8;--slate-700:#334155;--slate-800:#1f2937;--indigo-500:#6366f1;--indigo-600:#5458e0;--success:#22c55e;--success-d:#16a34a;--danger:#ef4444;--danger-d:#b91c1c;--panel-bg:rgba(30,41,59,.45);--panel-border:var(--slate-800);--radius:1rem;--ring:var(--indigo-500);--ring-contrast-bg:var(--bg);--floating-desktop-display:block;--btn-icon-size:clamp(46px, 6.5vw, 64px);--emoji-btn-size:clamp(54px, 8vw, 76px);--emoji-font-size:clamp(22px, 3vw, 30px);--btn-min-h:clamp(38px, 5.3vw, 50px);--btn-svg:clamp(18px, 3.2vw, 24px);--header-logo-h:84px;--header-gap:.75rem;--header-btn-fz:1rem;--header-btn-py:.5rem;--header-btn-px:.75rem;--header-icon-size:32px;--search-max-h:clamp(520px, 70vh, 820px)}@media(pointer:coarse){:root{--btn-icon-size:clamp(52px, 8vw, 72px);--emoji-btn-size:clamp(60px, 9vw, 84px);--emoji-font-size:clamp(24px, 4vw, 32px);--btn-min-h:clamp(42px, 6.2vw, 56px);--btn-svg:clamp(20px, 4vw, 26px)}}@media(min-width:1280px)and (pointer:fine){:root{--emoji-btn-size:clamp(56px, 4.5vw, 72px);--emoji-font-size:clamp(24px, 2vw, 28px)}}html,body{height:100%}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{scrollbar-width:auto;scrollbar-color:#475569 transparent}*::-webkit-scrollbar{width:14px;height:14px}*::-webkit-scrollbar-thumb{background:#475569;border-radius:8px;border:3px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-track{background:transparent}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}.card{border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:var(--radius);padding:1rem}@media(max-width:640px){.card{padding:.75rem}}.btn-primary,.btn-ghost,.btn-danger,.btn-success,.btn-xs,.btn-icon,.btn-emoji{transition:background-color .2s,border-color .2s,box-shadow .2s,transform .05s,opacity .2s}.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-danger:focus-visible,.btn-success:focus-visible,.btn-xs:focus-visible,.btn-icon:focus-visible,.btn-emoji:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring-contrast-bg),0 0 0 4px var(--ring)}.btn-primary:active,.btn-ghost:active,.btn-danger:active,.btn-success:active,.btn-xs:active,.btn-icon:active,.btn-emoji:active{transform:translateY(.5px) scale(.99)}.btn-primary[disabled],.btn-ghost[disabled],.btn-danger[disabled],.btn-success[disabled],.btn-xs[disabled],.btn-icon[disabled],.btn-emoji[disabled]{opacity:.6;cursor:not-allowed}.btn-primary,.btn-ghost,.btn-danger,.btn-success{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-min-h);border-radius:.75rem;padding:.5rem .75rem;font-weight:700;gap:.45rem;line-height:1}.btn-primary{background:var(--indigo-500);color:#fff;border:1px solid transparent}.btn-primary:hover{background:var(--indigo-600)}.btn-ghost{border:1px solid var(--slate-700);background:transparent;color:var(--fg);border-radius:.65rem;font-weight:600}.btn-danger{background:var(--danger);border:1px solid var(--danger-d);color:#fff}.btn-success{background:var(--success);border:1px solid var(--success-d);color:#fff}.btn-success:hover{background:var(--success-d)}.btn-primary svg,.btn-ghost svg,.btn-danger svg,.btn-success svg{width:var(--btn-svg)!important;height:var(--btn-svg)!important;flex:0 0 auto}.btn-icon{display:grid;place-items:center;text-align:center;vertical-align:middle;width:var(--btn-icon-size)!important;height:var(--btn-icon-size)!important;border:1px solid var(--slate-700);border-radius:.75rem;background:transparent;color:var(--fg);line-height:1;font-size:calc(var(--btn-icon-size)*.7)!important}.btn-icon>svg{width:calc(var(--btn-icon-size)*.52)!important;height:calc(var(--btn-icon-size)*.52)!important}.btn-xs{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;padding:.25rem .5rem;font-size:.8rem;border:1px solid var(--slate-700);background:transparent;color:var(--fg);min-height:calc(var(--btn-min-h)*.66);gap:.35rem}.btn-xs svg{width:calc(var(--btn-svg)*.8);height:calc(var(--btn-svg)*.8)}.btn-chip{display:inline-flex;align-items:center;justify-content:center;padding:.18rem .5rem;font-size:.78rem;line-height:1;border-radius:.5rem;border:1px solid var(--slate-700);background:transparent;color:var(--fg);min-height:calc(var(--btn-min-h)*.6);gap:.35rem}.btn-chip:hover{border-color:#64748b}.btn-emoji{display:inline-grid;place-items:center;width:var(--emoji-btn-size);height:var(--emoji-btn-size);font-size:var(--emoji-font-size);line-height:1;padding:0}.tab{border-bottom:2px solid transparent;padding:.55rem .8rem;cursor:pointer;white-space:nowrap}.tab.active{border-color:var(--indigo-500)}.dropzone{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:2.2/1;padding:0;border-radius:.75rem;border:1px dashed var(--panel-border);background:var(--panel-bg)}.dropzone.drag{background:#6366f11a;border-color:var(--indigo-500)}.pad{position:relative}.pad.drag:after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--indigo-500);box-shadow:0 0 0 2px #0f172ae6;pointer-events:none}.pad .close{position:absolute;top:.5rem;right:.5rem;width:22px;height:22px;display:grid;place-items:center;border-radius:9px;font-size:smaller;background:var(--bg);border:1px solid var(--panel-border);z-index:5;background-color:#0b122083}@media(max-width:640px){.pad{padding:.5rem}.pad .close{width:26px;height:26px}}.cover{width:100%;aspect-ratio:2.2 / 1;object-fit:cover;border-radius:.75rem;border:1px solid var(--panel-border);display:block;position:relative;z-index:0}.playOverlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:.35rem;z-index:10;pointer-events:none}.playBtn{position:relative;z-index:11;width:clamp(36px,7vw,40px);height:clamp(36px,7vw,40px);border-radius:999px;display:grid;place-items:center;font-size:clamp(20px,2.4vw,24px);font-weight:800;background:#0f172ae6;border:1px solid rgba(148,163,184,.35);pointer-events:auto;transition:transform .12s,border-color .2s,box-shadow .2s}.playBtn:hover{border-color:var(--indigo-500);box-shadow:0 0 0 2px #6366f159 inset;transform:scale(1.02)}.playBtn:active{transform:scale(.98)}.playingRing{position:absolute;inset:6px;border-radius:1rem;box-shadow:0 0 0 2px #38bdf8d9 inset,0 0 16px #38bdf8b3;z-index:1;pointer-events:none;animation:pad-pulse 1.2s ease-in-out infinite}.pad-plus{display:grid;place-items:center;width:clamp(62px,9.5vw,84px);height:clamp(62px,9.5vw,84px);border-radius:999px;border:1px solid var(--slate-700);background:#02061799;color:#cbd5e1;font-size:clamp(24px,3.2vw,32px);font-weight:800;line-height:1;transition:transform .12s,border-color .2s,box-shadow .2s,color .2s}.pad-plus:hover{border-color:#94a3b859;box-shadow:0 0 0 2px #6366f159 inset}.pad-plus:active{transform:scale(.98)}.pad-hotkey{position:absolute;top:.5rem;left:.5rem;z-index:6;min-width:20px;height:20px;padding:0 .35rem;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;color:#cbd5e1;border:1px solid var(--slate-700);border-radius:.4rem;background:#0206178c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pad-title-overlay{position:absolute;inset-inline:0;bottom:0;padding:.25rem .4rem .3rem;background:linear-gradient(to top,#0f172ac9,#0f172aa6,#0f172a00);color:var(--fg);font-size:.9rem;line-height:1.2;z-index:3;display:flex;flex-direction:column;gap:.15rem;pointer-events:auto}@media(hover:none){.pad-title-overlay,.pad-title-overlay .pad-time-input{pointer-events:none}}@media(pointer:coarse){[data-pad-key]{cursor:grab}body.touch-dnd-active [data-pad-key]{cursor:grabbing}}.pad-title-row{display:flex;align-items:center;justify-content:center;gap:.35rem}.pad-title-text{flex:0 1 auto;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.6)}.pad-count-badge{flex:0 0 auto;font-size:.65rem;padding:.05rem .4rem;border-radius:999px;border:1px solid rgba(248,250,252,.4);background:#0f172ae6}.pad-times-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.05rem}.pad-time-label{display:flex;align-items:center;gap:.2rem;font-size:.67rem;opacity:.98}.pad-time-input{width:3.6rem;padding:.08rem .3rem;border-radius:.3rem;border:1px solid rgba(56,90,138,.084);background:#8c90a212;color:inherit;font-size:.75rem;font-weight:400;text-align:center}.floating{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0f172af5;border-top:1px solid #0f172a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@media(min-width:1024px){.floating{display:var(--floating-desktop-display)}}.fp-bar{height:.5rem;background:#0b1220;border-radius:.4rem;position:relative}.fp-bar .p{position:absolute;left:0;top:0;bottom:0;background:var(--indigo-500);border-radius:.4rem;z-index:1}.fp-marker{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;z-index:2;box-shadow:0 0 0 1px #00000040}.fp-marker-start{background:#22c55e}.fp-marker-end{background:#ef4444}.square-thumb{width:clamp(44px,8.5vw,60px);height:clamp(44px,8.5vw,60px);aspect-ratio:1/1;object-fit:cover;border-radius:.4rem}#bg{position:fixed;inset:0;z-index:-1;background-position:center;background-repeat:no-repeat;background-size:cover;opacity:.22;pointer-events:none}#bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top,#00000059,#0000008c);pointer-events:none}#content-grid{align-items:stretch}#search-col,#pads-col{display:flex;min-height:0}#search-col>.card,#pads-col>.card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.card-scroll{flex:1 1 auto;min-height:0;overflow:auto}.card-scroll thead{position:sticky;top:0;z-index:1}.search-fixed{max-height:var(--search-max-h);overflow:hidden}.pads-grid>*{min-width:0}.pad,#pads-col,#search-col{min-width:0}.synth-wrap{width:100%}.synth-wrap.fullbleed{width:100dvw;max-width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw);padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px);box-sizing:border-box}#content-grid .synth-wrap.open{grid-column:1 / -1}.synth-wrap.fullbleed .card{border-left:none;border-right:none;border-radius:0;padding-left:0;padding-right:0}#search-col>.card,.synth-wrap{will-change:opacity,transform;transition:opacity .28s ease,transform .28s ease,filter .28s ease}body.synth-open #search-col>.card{opacity:.25;transform:translateY(0);pointer-events:none}.synth-wrap.closed{opacity:0;transform:translateY(8px);pointer-events:none}.synth-wrap.open{opacity:1;transform:translateY(0)}body.synth-open .synth-wrap.open .card{filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}@media(prefers-reduced-motion:reduce){#search-col>.card,.synth-wrap{transition:opacity .001ms linear}.synth-wrap{transform:none!important;filter:none!important}body.synth-open #search-col>.card{opacity:0}.synth-wrap.closed{opacity:0}.synth-wrap.open{opacity:1}}@media(orientation:portrait)and (pointer:coarse){.synth-wrap.fullbleed{width:100svw!important;max-width:100svw!important;margin:0!important;transform:none!important;position:relative!important;left:0!important;right:0!important;padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px)}}@supports not (width:100svw){@media(orientation:portrait)and (pointer:coarse){.synth-wrap.fullbleed{width:100vw!important;max-width:100vw!important;margin:0!important;transform:none!important;left:0!important;right:0!important}}}#page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--header-gap);white-space:nowrap;min-width:0;overflow:hidden}#page-header>*{min-width:0}#page-header .header-logo{height:var(--header-logo-h);max-height:100%}#page-header .btn{font-size:var(--header-btn-fz);padding:var(--header-btn-py) var(--header-btn-px)}#page-header .btn-icon{--btn-icon-size:var(--header-icon-size);font-size:var(--header-icon-size);line-height:1}#page-header .btn-icon{--btn-icon-size: calc(var(--header-icon-size) + 16px)}body.compact-header{--header-logo-h:68px;--header-gap:.5rem;--header-btn-fz:.95rem;--header-btn-py:.4rem;--header-btn-px:.6rem;--header-icon-size:28px}body.compact-tiny{--header-logo-h:56px;--header-gap:.4rem;--header-btn-fz:.9rem;--header-btn-py:.32rem;--header-btn-px:.5rem;--header-icon-size:24px}@media(min-width:1024px){#content-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,3fr);gap:1.5rem;align-items:stretch}#pads-col{grid-column:1}#search-col{grid-column:2}}.synth-wrap.closed{display:none!important;height:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;overflow:hidden!important}.synth-wrap.open{display:block}#synth-dock{display:block;width:100%;flex:0 0 auto}.synth-wrap{width:100%;min-width:100%}.synth-wrap.open,.synth-wrap.open.closed{display:block!important;width:100svw;max-width:100svw;margin-left:calc(50% - 50svw);margin-right:calc(50% - 50svw);position:relative;left:0;right:0;box-sizing:border-box;height:auto!important;overflow:visible!important}@supports not (width: 100svw){.synth-wrap.open,.synth-wrap.open.closed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}.synth-wrap .piano{width:100%;min-width:100%}.synth-wrap.closed{display:none}.synth-wrap{display:block;width:100%;min-width:100%}.synth-wrap.open,.synth-wrap.open.closed{display:block!important;position:relative;left:50%;transform:translate(-50%);width:100svw;max-width:100svw;margin:0!important;padding-left:max(env(safe-area-inset-left),0px);padding-right:max(env(safe-area-inset-right),0px);box-sizing:border-box;height:auto!important;overflow:visible!important}@supports not (width:100svw){.synth-wrap.open,.synth-wrap.open.closed{width:100vw;max-width:100vw}}.piano{width:100%}.white-keys{display:flex;flex-wrap:nowrap;width:100%}.white-key{flex:1 1 0;min-width:0}.synth-wrap.open{display:block!important;width:100svw;max-width:100svw;margin-left:calc(50% - 50svw);margin-right:calc(50% - 50svw)}@supports not (width:100svw){.synth-wrap.open{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}.piano{display:block!important;width:100%!important;height:clamp(160px,24vh,210px)!important}.piano,.piano *{box-sizing:border-box}.piano{position:relative;height:clamp(160px,24vh,210px)!important;background:transparent}.white-keys{display:flex;height:100%!important;align-items:stretch!important;gap:2px}.white-key{position:relative;flex:1 1 0;height:100%!important;border-radius:.5rem;background:linear-gradient(#f8fafc,#e2e8f0)!important;border:1px solid #94a3b8!important;box-shadow:inset 0 -3px #0000001f;transition:filter .1s;z-index:1}.white-key .lab{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;font-weight:700;color:#0b1220}.black-keys{position:absolute!important;left:.5rem;right:.5rem;top:.5rem;height:60%!important;pointer-events:none;z-index:2}.black-key{position:absolute;pointer-events:auto;height:100%;background:linear-gradient(#0b1220,#111827)!important;border:1px solid #0b1220!important;border-radius:0 0 .5rem .5rem;box-shadow:inset 0 -3px #00000059,0 2px 6px #00000059;transition:filter .1s}.black-key.active{filter:brightness(1.15)}.white-key.active{filter:brightness(.92)}.black-key .lab{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:10px;color:#cbd5e1;pointer-events:none}#page-header .header-logo{flex:0 0 auto;max-width:44vw}@media(max-width:480px){#page-header .header-logo{max-width:38vw}}@media(min-width:1024px){#content-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,3fr);gap:1.25rem;align-items:stretch}#pads-col{position:relative;z-index:1;min-width:0}#search-col{position:relative;z-index:2;min-width:0}}@media(min-width:1280px){#content-grid{gap:1.5rem}}#pads-col,#search-col{min-width:0}.synth-wrap.open{margin-top:.25rem}@media(max-width:540px)and (orientation:portrait){#page-header{display:flex;flex-wrap:wrap;gap:.5rem}#page-header .header-logo{order:0;flex:1 1 100%;max-width:100%;height:clamp(56px,12vw,72px);margin-bottom:.25rem}#page-header .toolbar,#page-header .controls{order:1;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:.4rem;white-space:nowrap;min-width:0}}[data-pad-key].drag{outline:none}.dropzone.drag{background:var(--panel-bg);border-color:var(--panel-border)}@media(pointer:fine){[data-pad-key].drag{outline:2px dashed var(--indigo-500);outline-offset:2px;border-radius:1rem}.dropzone.drag{background:#6366f11a;border-color:var(--indigo-500)}}@media(pointer:fine){[data-pad-key].drag-hold{outline:2px dashed var(--indigo-500);outline-offset:2px;border-radius:1rem}}@media(pointer:coarse){.dj-no-callout,.square-thumb,.fp-cover,[data-pad-key],[data-drag-source],[data-drag-source] *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.dj-no-callout img,img.dragsrc,.square-thumb,.fp-cover,[data-drag-source] img{-webkit-user-drag:none}}@media(pointer:coarse){.dj-thumb-proxy{pointer-events:none}.fp-cover{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}}@media(pointer:coarse)and (orientation:portrait)and (max-width:640px){.pads-grid{gap:1px!important}}.pads-grid [data-pad-key]{aspect-ratio:2.2 / 1;padding:0!important;border-radius:.9rem}@media(max-width:640px){.pad-hotkey{display:none!important}}[data-pad-key]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}body.touch-dnd-active [data-pad-key]{touch-action:none}body.touch-dnd-active{touch-action:none;overscroll-behavior:contain}.touch-dnd-active{cursor:grabbing}.touch-dnd-active *{user-select:none!important;-webkit-user-select:none!important}body.is-dragging .pads-grid [data-hover-ui],body.is-dragging .pads-grid .hover-only{display:none!important}.floating [data-hover-ui],.floating .hover-only{display:revert!important;opacity:1!important;visibility:visible!important}img,a{-webkit-user-drag:none}.btn,.btn-chip,.btn-primary,.btn-ghost{touch-action:manipulation;-ms-touch-action:manipulation}img[draggable=true],[draggable=true]{-webkit-user-drag:element;user-drag:element}@media(pointer:coarse){body.is-dragging .floating,body.is-dragging .playBtn{pointer-events:none!important}.fp-cover[draggable=true]{-webkit-user-drag:element!important}}.playBtn,.pad-plus{background-color:#111e3768;width:clamp(50px,7vw,50px);height:clamp(50px,7vw,50px);font-size:clamp(24px,2.4vw,24px)}@media(max-width:640px){.pad .close{width:24px;height:24px}}.playingRing{z-index:12!important}@keyframes pad-pulse{0%{box-shadow:0 0 #38bdf8e6 inset,0 0 10px #38bdf899}50%{box-shadow:0 0 0 4px #38bdf866 inset,0 0 22px #38bdf8}to{box-shadow:0 0 #38bdf8e6 inset,0 0 10px #38bdf899}}@media(max-width:640px){.pads-grid{row-gap:.4rem}.cover,.dropzone{aspect-ratio:2.2 / 1}.pad-title-overlay{padding:.35rem .5rem .4rem;font-size:.9rem}.pad-title-text{font-size:.95rem;font-weight:700;text-align:left}.pad-count-badge,.pad-times-row{display:none}.playBtn{width:2.3rem;height:2.3rem;font-size:1.1rem}}@media(pointer:coarse)and (max-width:639px){.pads-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(pointer:coarse)and (min-width:640px){.pads-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}@media(max-width:980px){body.search-closed #search-col{display:none!important}body.search-open #search-col{display:block!important;position:fixed!important;inset:0!important;z-index:900!important;padding:calc(env(safe-area-inset-top) + 88px) 12px calc(env(safe-area-inset-bottom) + 12px) 12px;background:#020617eb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:auto}#page-header{position:sticky;top:0;z-index:1000;background:#020617d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}body.search-open{overflow:hidden}}@media(max-width:640px){.floating .fp-wrap{padding:.45rem .55rem!important}.floating .fp-cover{width:34px!important;height:34px!important}}@media(max-width:620px)and (orientation:portrait){#page-content{padding:.55rem!important}.card{border-radius:18px!important}.pads-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.1rem!important;row-gap:.1rem!important;align-content:start}.pad{padding:0!important;background:#00000034!important;border:0!important}.pad>.relative,.pad .relative{border:1px solid rgba(26,42,72,.336)!important;background:#18233b3b!important;border-radius:16px!important;padding:0rem!important;display:grid!important;grid-template-columns:44px 1fr!important;column-gap:.2rem;align-items:center;min-height:58px!important}.pad .cover{width:40px!important;height:40px!important;aspect-ratio:1/1!important;border-radius:6px!important;border:1px solid rgba(21,56,104,.445)!important}.pad-title-overlay{position:static!important;inset:auto!important;padding:0!important;background:none!important;gap:.1rem!important;pointer-events:none}.pad-title-row{justify-content:flex-start!important;gap:.35rem!important;align-items:center!important}.pad-title-text{text-align:left!important;font-size:.7rem!important;font-weight:500!important;letter-spacing:-.01em;text-shadow:none!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.pad-count-badge,.pad-times-row,.pad-hotkey{display:none!important}.playOverlay{position:static!important;inset:auto!important;padding:0!important;pointer-events:auto;justify-content:flex-end!important;align-items:center!important}.playBtn{width:34px!important;height:34px!important;font-size:17px!important;border-radius:999px!important}.playingRing{inset:0!important;border-radius:8px!important}.pad .close{top:6px!important;right:6px!important;width:20px!important;height:20px!important;opacity:.7!important}.pad .dropzone{height:48px!important;border-radius:8px!important;aspect-ratio:auto!important}.pad .dropzone .pad-plus{width:36px!important;height:36px!important;font-size:18px!important}body.search-closed #search-col{display:none!important}body.search-open #search-col{display:block!important;position:fixed!important;inset:0!important;z-index:90!important}body.search-open #search-col:before{content:"";position:absolute;inset:0;background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}body.search-open #search-col>.card{position:absolute!important;left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:78vh!important;max-height:78vh!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 20px 60px #0000008c!important}body.search-open #search-col>.card:before{content:"";position:absolute;top:10px;left:50%;width:68px;height:6px;transform:translate(-50%);border-radius:999px;background:#94a3b859;z-index:2}body.search-open #search-col>.card>*{padding-top:18px}body.search-open{overflow:hidden}.floating .fp-wrap{padding:.45rem .5rem!important}.floating .fp-cover{width:36px!important;height:36px!important}.floating .fp-bar{height:.32rem!important}.floating .tabular-nums,.floating [title="-5s"],.floating [title="+5s"]{display:none!important}.floating .btn-primary,.floating .btn-danger,.floating .btn-ghost{min-height:34px!important;padding:.35rem .5rem!important;border-radius:.75rem!important}}@media(max-width:620px)and (orientation:portrait){.pad .playOverlay,.pad .playBtn{display:none!important}[data-pad-key],.pad,.pad>.relative,.pad .relative,.pad-title-overlay{min-width:0!important;overflow:hidden!important}.pad-title-text{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;word-break:break-word!important}}@media(max-width:620px)and (orientation:portrait){.pad-title-overlay,.pad-title-row{min-width:0!important;overflow:hidden!important}.pad-title-text{font-size:.86rem!important;line-height:1.15!important;max-width:100%!important;overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;word-break:break-word!important}}@media(max-width:620px)and (orientation:portrait){.pad>.relative,.pad .relative{min-height:64px!important}.pad-title-overlay,.pad-title-row{min-width:0!important;overflow:hidden!important}.pad-title-text{font-size:.86rem!important;line-height:1.15!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;min-height:2.5em!important}}@media(max-width:620px)and (orientation:portrait){.pad>.relative,.pad .relative{min-height:56px!important;padding-top:.18rem!important;padding-bottom:.18rem!important}.playingRing{inset:1px!important;border-radius:12px!important}}@media(pointer:coarse)and (orientation:portrait)and (max-width:640px){[data-pad-key],.cover,.dropzone{aspect-ratio:1.9 / 1}.playingRing{inset:4px;z-index:12}}@media(max-width:640px)and (pointer:coarse)and (orientation:portrait){[data-pad-key]{aspect-ratio:auto!important;height:auto!important}.pad>.relative,.pad .relative{min-height:68px!important}.playingRing{inset:1px!important}}@media(pointer:coarse)and (orientation:landscape)and (max-height:520px)and (max-width:980px){.pads-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.1rem!important;row-gap:.1rem!important}}@media(max-width:620px)and (orientation:portrait){#search-col .card>.flex.items-center.gap-2{flex-wrap:wrap;align-items:flex-start}#search-col .card>.flex.items-center.gap-2>.ml-auto{margin-left:0!important;width:100%;min-width:0;justify-content:flex-start;flex-wrap:wrap;gap:.4rem}#search-col .card>.flex.items-center.gap-2>.ml-auto .btn-ghost,#search-col .card>.flex.items-center.gap-2>.ml-auto .btn-primary{padding:.2rem;font-size:.88rem;border-radius:.65rem;white-space:nowrap}}@media(max-width:620px)and (orientation:portrait){.profiles-panel .pp-actions{flex-wrap:nowrap;gap:.35rem!important;--btn-min-h: 34px;--btn-svg: 16px}.profiles-panel .pp-actions .btn-ghost,.profiles-panel .pp-actions .btn-danger{padding:.18rem .38rem!important;border-radius:.65rem!important}.profiles-panel .pp-actions .text-base{font-size:14px!important;line-height:1!important}}@media(max-width:620px){button[title^="Rensa alla pad-räknare"]{display:none!important}}@media(max-width:620px){button[data-ij=reset-counts]{display:none!important}}@media(max-width:540px)and (orientation:portrait){#page-header{flex-wrap:nowrap!important;gap:.35rem!important;align-items:center}#page-header>#root{flex:0 0 auto!important;min-width:0}#page-header>#spotify-mini{flex-shrink:1!important;min-width:0}#spotify-mini .card{padding:0!important;background:transparent!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}#spotify-mini .card>.flex{gap:.35rem!important;flex-wrap:nowrap!important}#spotify-mini .btn-primary .ml-1,#spotify-mini .btn-danger .ml-1,#spotify-mini .btn-success .ml-1{display:none!important}#page-header #spotify-mini .card>.flex{--mini-btn: calc(var(--header-icon-size) + 16px)}#page-header #spotify-mini .card>.flex .btn-icon{--btn-icon-size: var(--mini-btn) !important}#page-header #spotify-mini .card>.flex>.btn-ghost,#page-header #spotify-mini .card>.flex>.btn-primary,#page-header #spotify-mini .card>.flex>.btn-danger,#page-header #spotify-mini .card>.flex>.btn-success{width:var(--mini-btn)!important;min-width:var(--mini-btn)!important;height:var(--mini-btn)!important;min-height:var(--mini-btn)!important;padding:0!important;display:grid!important;place-items:center!important;gap:0!important}#page-header #spotify-mini .card>.flex>.btn-ghost{font-size:calc(var(--mini-btn) * .55)!important;line-height:1!important}}.z-\[99999\] .absolute.w-56{padding:.35rem!important;width:13rem}.z-\[99999\] .btn-ghost.w-full.text-left{padding:.35rem .55rem!important;min-height:34px!important;border-radius:.6rem}.z-\[99999\] .text-xs.uppercase{padding:.2rem .55rem!important}.z-\[99999\] .h-px{margin:.35rem 0!important}.z-\[99999\] .btn-xs{padding:.2rem .45rem!important;min-height:28px!important}@media(pointer:coarse)and (orientation:landscape)and (max-height:520px)and (max-width:980px){:root{--fp-h: 58px}#page-header,#quickbar-dock,#search-col,#mobile-search-mount,#synth-dock{display:none!important}#page-content{padding:6px!important;padding-bottom:calc(6px + var(--fp-h) + env(safe-area-inset-bottom))!important}#page-content>:not([hidden])~:not([hidden]){margin-top:0!important}#content-grid{display:block!important;gap:0!important}#pads-col{height:calc(100dvh - 12px - var(--fp-h) - env(safe-area-inset-bottom))!important}#pads-col>.card{height:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}#pads-col>.card>.flex:first-child{display:none!important}#pads-col>.card .card-scroll{padding:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--fp-h) + 8px)!important}#pads-col>.card .card-scroll>.h-6,#pads-col>.card .card-scroll>.md\:h-10{display:none!important}#pads-col .pads-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:.1rem!important;row-gap:.1rem!important;align-content:start}#pads-col .pad{padding:0!important;background:#00000034!important;border:0!important}#pads-col .pad>.relative,#pads-col .pad .relative{border:1px solid rgba(26,42,72,.336)!important;background:#18233b3b!important;border-radius:16px!important;display:grid!important;grid-template-columns:44px 1fr!important;column-gap:.2rem!important;align-items:left!important;min-height:58px!important;padding:0!important}#pads-col .pad .cover{width:40px!important;height:40px!important;aspect-ratio:1/1!important;border-radius:6px!important;border:1px solid rgba(21,56,104,.445)!important}#pads-col .pad-title-overlay{position:static!important;inset:auto!important;padding:0!important;background:none!important;gap:.1rem!important;pointer-events:none!important;display:flex!important;flex-direction:column!important}#pads-col .pad-title-row{justify-content:flex-start!important;gap:.35rem!important;align-items:left!important}#pads-col .pad-title-text{font-size:.86rem!important;line-height:1.15!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;min-height:2.5em!important}#pads-col .pad-count-badge,#pads-col .pad-times-row,#pads-col .pad-hotkey,#pads-col .pad .close,#pads-col .playOverlay,#pads-col .playBtn{display:none!important}#pads-col .pad .dropzone{height:48px!important;border-radius:8px!important;aspect-ratio:auto!important}#pads-col .pad .dropzone .pad-plus{width:36px!important;height:36px!important;font-size:18px!important}#floating-player .floating .fp-wrap{padding:.25rem .4rem!important}#floating-player .floating .fp-cover{width:30px!important;height:30px!important}#floating-player .floating .fp-bar{height:.28rem!important}#floating-player .floating .fullbleed{display:none!important}#floating-player .floating .btn-primary,#floating-player .floating .btn-danger,#floating-player .floating .btn-ghost{min-height:30px!important;padding:.25rem .45rem!important;border-radius:.7rem!important}#floating-player .floating .mt-2{margin-top:.35rem!important}#pads-col .pad-title-overlay{align-items:flex-start!important;text-align:left!important;justify-content:flex-start!important}#pads-col .pad-title-row{justify-content:flex-start!important;text-align:left!important}#pads-col .pad-title-text{text-align:left!important;margin-left:0!important}#pads-col .pad-title-overlay *{text-align:left!important}}html.dj-touch-dragging #page-content{touch-action:none!important;overscroll-behavior:none!important}html.dj-touch-dragging .card-scroll{overflow:auto!important;-webkit-overflow-scrolling:touch;touch-action:none!important;overscroll-behavior:none!important}html.dj-touch-dragging [data-pad-key],html.dj-touch-dragging [data-quick-key]{touch-action:none!important}@media(pointer:coarse)and (max-width:600px),(pointer:coarse)and (orientation:portrait){body.touch-dnd-active.search-open #search-col{opacity:0!important;pointer-events:none!important}}html.dj-touch-dragging,body.touch-dnd-active,html.dj-touch-dragging .card-scroll,html.dj-touch-dragging #page-content{touch-action:none!important;overscroll-behavior:none!important}@media(pointer:coarse){[data-pad-key],[data-quick-key],.quickslot,.quickbar,.fp-cover,.square-thumb,[data-drag-source]{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}[data-pad-key] *:not(input):not(textarea):not(select),[data-quick-key] *:not(input):not(textarea):not(select),.quickslot *:not(input):not(textarea):not(select),[data-drag-source] *:not(input):not(textarea):not(select){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img,a{-webkit-user-drag:none}}html.dj-touch-dragging,html.dj-touch-dragging body,body.touch-dnd-active{touch-action:none!important;overscroll-behavior:none!important}html.dj-touch-dragging [data-pad-key],html.dj-touch-dragging [data-quick-key],html.dj-touch-dragging .quickslot,html.dj-touch-dragging .fp-cover,html.dj-touch-dragging .square-thumb,html.dj-touch-dragging [data-drag-source]{touch-action:none!important}html.dj-touch-dragging #page-content,html.dj-touch-dragging .card-scroll{overscroll-behavior:none!important}.quickpads-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.quickpad{position:relative;border-radius:16px;border:1px solid rgba(51,65,85,.8);background:#0f172a8c;overflow:hidden;min-height:64px;cursor:pointer;-webkit-user-select:none;user-select:none}.quickpad.drag{outline:2px solid rgba(99,102,241,.9);outline-offset:2px}.quickpad.playing{box-shadow:0 0 0 2px #38bdf8bf,0 0 16px #38bdf859}.quickpad-emoji{position:absolute;left:8px;top:6px;font-size:18px;line-height:1;opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}.quickpad-empty{height:100%;display:flex;align-items:flex-end;padding:10px 10px 8px}.quickpad-title{font-size:11px;line-height:1.1;color:#e2e8f0f2;font-weight:700}.quickpad-cover{width:100%;height:100%;object-fit:cover;display:block}.quickpad-label{position:absolute;left:8px;right:8px;bottom:6px;display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:12px;background:#020617a6;border:1px solid rgba(30,41,59,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.quickpad-label-text{font-size:11px;font-weight:700;color:#e2e8f0fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quickpad-count{font-size:11px;font-weight:800;color:#e2e8f0f2;padding:2px 8px;border-radius:999px;background:#6366f140;border:1px solid rgba(99,102,241,.35)}.quickpad-playbtn{position:absolute;right:8px;top:6px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(51,65,85,.8);background:#0f172ab3}.quickpad-clear{position:absolute;right:42px;top:8px;width:22px;height:22px;border-radius:10px;border:1px solid rgba(51,65,85,.8);background:#0f172ab3;color:#e2e8f0f2;line-height:1}@media(min-width:1024px){.quickpads-grid{grid-template-columns:repeat(6,minmax(0,110px));justify-content:center}}@media(min-width:640px){.quickpads-grid .pad-quick .qcover{aspect-ratio:auto!important;height:64px;width:100%!important}}@media(min-width:1024px){.quickpads-grid .pad-quick .qcover{height:72px}}@media(pointer:coarse)and (orientation:landscape)and (max-height:520px)and (max-width:980px){#pads-col .pad-quick>.relative,#pads-col .pad-quick .relative{display:block!important;grid-template-columns:none!important;column-gap:0!important;min-height:0!important;padding:0!important}#pads-col .pad-quick .qcover{display:flex!important;width:100%!important;align-items:center!important}}@media(min-width:1024px){#content-grid{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(320px,3fr)!important;grid-template-areas:"pads search"!important;align-items:start!important}#pads-col{grid-area:pads!important;align-self:start!important}#search-col{grid-area:search!important;align-self:start!important;z-index:2}#quickbar-dock{margin:0!important;padding:0!important}}@media(pointer:coarse){html.touch-dnd-arming,body.touch-dnd-arming{overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important;touch-action:none!important}body.touch-dnd-arming #page-content,body.touch-dnd-arming #content-grid,body.touch-dnd-arming #pads-col,body.touch-dnd-arming #pads-col .card-scroll,body.touch-dnd-arming #search-col,body.touch-dnd-arming .pads-grid,body.touch-dnd-arming .quickbar,body.touch-dnd-arming .quickslot,body.touch-dnd-arming [data-pad-key],body.touch-dnd-arming [data-quick-key]{touch-action:none!important}body.touch-dnd-arming,body.touch-dnd-arming *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important}}@media(pointer:coarse)and (max-width:980px){#pads-col [data-has-trim="0"] .pad-times-row{display:none!important}#pads-col [data-has-trim="1"] .pad-times-row{display:flex!important;justify-content:flex-start;gap:.25rem;margin-top:.12rem}#pads-col .pad-times-row .pad-time-input,#pads-col [data-has-start="0"] .pad-times-row .pad-time-label:first-child{display:none!important}#pads-col [data-has-end="0"] .pad-times-row .pad-time-label:last-child{display:none!important}#pads-col .pad-times-row .pad-time-label span{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 .38rem;border-radius:999px;border:1px solid rgba(99,102,241,.55);background:#6366f12e;font-size:11px;font-weight:800;line-height:1}}@media(pointer:coarse)and (max-width:980px){#pads-col .pad-times-row .pad-time-label:first-child span{border-color:#22c55ea6!important;background:#22c55e2e!important;color:#eafff2}#pads-col .pad-times-row .pad-time-label:last-child span{border-color:#ef4444a6!important;background:#ef44442e!important;color:#fff1f1}}#page-content{padding-bottom:calc(var(--floating-h, 0px) + env(safe-area-inset-bottom) + 10px)!important}