/* Audio looper: 12 pads */
.lp-tool{max-width:1060px;margin:0 auto}
.lp-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:18px 20px;margin-bottom:16px;border-radius:22px;border:1px solid var(--line);background:var(--glass)}
.lp-ctl .fld{margin:0;flex:1 1 150px}
.lp-ctl select{width:100%;min-height:46px;padding:10px 12px;border-radius:12px;border:1px solid rgba(14,27,36,.28);background:var(--bg2);color:var(--ink);font:inherit;font-size:16px}
.lp-ctl .btn{min-height:46px}
.lp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pad{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;border:1px solid var(--line);background:var(--glass);transition:border-color .3s,box-shadow .3s}
.pad-top{display:flex;align-items:center;gap:6px}
.pad-n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--ink);color:#fff}
.pad-name{flex:1;min-width:0;height:32px;border:1px solid transparent;background:transparent;font:inherit;font-weight:700;font-size:15px;color:var(--ink);padding:0 6px;border-radius:8px}
.pad-name::placeholder{color:var(--ink2);opacity:1}
.pad-name:hover,.pad-name:focus{background:var(--bg2);border-color:var(--line)}
.pad-more{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--ink2);cursor:pointer}
.pad-more:hover{background:var(--bg2);color:var(--ink)}
.pad-time{font-family:"Bricolage Grotesque","Bricolage Fallback",sans-serif;font-weight:800;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--mut)}
.pad-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.pad-bar i{display:block;height:100%;width:0;background:var(--grad)}
.pad-btns{display:flex;gap:8px}
.pad-btns button{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);cursor:pointer;transition:transform .2s var(--ease)}
.pad-btns button:hover:not(:disabled){transform:translateY(-2px)}
.pad .rec{color:#C93838}
.pad .play{flex:1;background:var(--ink);color:#fff;border-color:transparent}
.pad .play:disabled{opacity:.3;cursor:default}
.pad .play .i-stop,.pad[data-state=play] .play .i-play{display:none}
.pad[data-state=play] .play .i-stop{display:block}
.pad[data-state=rec]{border-color:#C93838;animation:lp-pulse 1.2s infinite}
.pad[data-state=rec] .rec{background:#C93838;color:#fff;border-color:transparent}
.pad[data-state=rec] .pad-time{color:#C93838}
.pad[data-state=ready] .pad-time,.pad[data-state=play] .pad-time{color:var(--ink)}
.pad[data-state=play]{border-color:var(--leaf);box-shadow:0 0 0 3px rgba(35,168,122,.22)}
@keyframes lp-pulse{0%,100%{box-shadow:0 0 0 3px rgba(201,56,56,.25)}50%{box-shadow:0 0 0 8px rgba(201,56,56,.1)}}
.lp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:12px;font-size:14px;color:var(--mut)}
.lp-foot kbd{font:inherit;font-weight:700;padding:1px 6px;border-radius:6px;border:1px solid var(--line);background:var(--bg2)}
#lp-status{min-height:22px;font-size:15px;font-weight:600;color:var(--leaf);margin-top:10px;text-align:center}
#lp-menu{margin:auto;width:min(340px,calc(100% - 32px));padding:20px;border-radius:20px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
#lp-menu::backdrop{background:rgba(7,17,24,.45)}
#lp-menu h2{font-size:20px;margin:0 0 14px;overflow-wrap:anywhere}
#lp-menu form{display:grid;gap:8px}
#lp-menu .btn{width:100%}
#lp-menu [hidden]{display:none}
:root[data-theme="dark"] .pad-n,:root[data-theme="dark"] .pad .play{background:#fff;color:#0E1B24}
:root[data-theme="dark"] .pad .rec,:root[data-theme="dark"] .pad[data-state=rec] .pad-time{color:#FF8A80}
:root[data-theme="dark"] .pad[data-state=rec] .rec{background:#E5534B;color:#fff}
:root[data-theme="dark"] .pad[data-state=rec]{border-color:#FF8A80}
:root[data-theme="dark"] .lp-ctl select{border-color:rgba(255,255,255,.28)}
:root[data-theme="dark"] #lp-status{color:#7CEABD}
@media (prefers-reduced-motion:reduce){.pad[data-state=rec]{animation:none;box-shadow:0 0 0 3px rgba(201,56,56,.25)}}
@media (max-width:900px){.lp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:none){.lp-keys{display:none}}
@media (max-width:600px){.lp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pad{padding:12px}.pad-btns{gap:6px}}
@media (max-width:760px){
  body main .lp-ctl{padding:14px;justify-content:center}
  body main .lp-ctl .fld,body main .lp-ctl label{text-align:center}
  body main .lp-foot{justify-content:center;text-align:center}
  body main .pad-time{text-align:center}
}
#lp-trim{margin:auto;width:min(560px,calc(100% - 32px));padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
#lp-trim::backdrop{background:rgba(7,17,24,.45)}
#lp-trim h2{font-size:20px;margin:0 0 6px;overflow-wrap:anywhere}
#lp-trim p{font-size:14.5px;line-height:1.5;color:var(--ink2);margin:0 0 12px}
#lp-wave{display:block;width:100%;height:96px;border-radius:12px;background:var(--bg);margin-bottom:12px}
#lp-trim .fld{margin-bottom:8px}
#lp-trim label{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
#lp-trim output{font-variant-numeric:tabular-nums;color:var(--ink2)}
#lp-trim input[type=range]{width:100%;height:28px;accent-color:var(--leaf)}
#lp-trim #lp-trim-len{font-weight:700;color:var(--ink)}
.lp-trim-btns{display:flex;flex-wrap:wrap;gap:8px}
.lp-trim-btns .btn{flex:1 1 auto;min-height:44px;padding:0 16px}
/* metronome */
.lp-metro{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 28px;padding:20px 24px;margin-bottom:14px;border-radius:22px;border:1px solid var(--line);background:var(--glass)}
.lp-pend{width:110px;height:138px;display:block}
.lp-body{fill:url(#lp-g)}
.lp-face{fill:var(--bg2);opacity:.92}
.lp-ticks path{stroke:var(--ink2);stroke-width:2;stroke-linecap:round;fill:none;opacity:.5}
.lp-rod{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.lp-weight{fill:var(--ink)}
.lp-pivot{fill:var(--ink)}
.lp-tempo{display:grid;gap:10px;justify-items:center;min-width:0}
.lp-bpmrow{display:flex;align-items:center;gap:14px}
.lp-round{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.lp-round:disabled{opacity:.4;cursor:default}
.lp-bpm{display:flex;align-items:baseline;gap:6px;min-width:150px;justify-content:center}
.lp-bpm output{font-family:"Bricolage Grotesque","Bricolage Fallback",sans-serif;font-weight:800;font-size:54px;line-height:1;font-variant-numeric:tabular-nums}
.lp-bpm span{font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--mut)}
#lp-bpm{width:100%;max-width:320px;accent-color:var(--leaf);height:28px}
#lp-dots{display:flex;gap:10px;height:16px}
#lp-dots i{width:16px;height:16px;border-radius:50%;background:var(--line);transition:background .06s,transform .06s}
#lp-dots i.on{background:var(--sky);transform:scale(1.2)}
#lp-dots i.on.down{background:var(--sun)}
#lp-pos{font-size:14px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;margin:0}
.lp-mctl{display:grid;gap:12px;justify-items:start}
.lp-mctl fieldset{border:0;min-width:0}
.lp-mctl legend{font-weight:700;font-size:15px;margin-bottom:6px}
.lp-mctl .seg{margin:0;gap:6px}
.lp-mctl .seg label{padding:7px 12px}
.lp-mbtns{display:flex;flex-wrap:wrap;gap:8px}
.lp-mbtns .btn{min-height:44px;padding:0 18px}
#lp-click[aria-pressed=true]{background:var(--leaf);color:#fff}
.lp-mctl .fld{margin:0;width:100%}
#lp-vol{width:100%;accent-color:var(--leaf)}
.pad[data-state=wait]{border-color:var(--leaf);border-style:dashed}
.pad[data-state=wait] .pad-time{color:var(--leaf)}
:root[data-theme="dark"] #lp-dots i.on.down{background:#F6CC48}
:root[data-theme="dark"] .pad[data-state=wait] .pad-time{color:#7CEABD}
@media (max-width:720px){.lp-metro{grid-template-columns:1fr;justify-items:center;padding:16px}.lp-pend{width:80px;height:100px}.lp-mctl{grid-template-columns:1fr;justify-items:center;width:100%}.lp-bpm output{font-size:46px}.lp-mbtns{justify-content:center}}