@layer components{.pb-lab{color:var(--gp-ink-3);font-size:11.5px;font-weight:600}.pb-num{font-variant-numeric:tabular-nums}.pb-capo{flex:none;align-items:center;gap:6px;display:flex}.pb-icon{border-radius:var(--gp-r-s);width:36px;height:36px;color:var(--gp-ink-3);cursor:pointer;transition:color var(--gp-d-state) linear, background-color var(--gp-d-state) linear;flex:none;place-items:center;display:grid}.pb-icon svg{width:19px;height:19px}.pb-icon:not(:disabled):hover{background:var(--gp-well);color:var(--gp-ink)}.pb-icon:disabled{color:var(--gp-edge);cursor:default;background:0 0}.pb-icon[aria-pressed=true]{background:var(--gp-m-100);color:var(--gp-m-700)}.pb-icon[data-muted]{color:var(--gp-ink-mute)}.pb-area{position:relative}.pb-remote{z-index:20;max-width:calc(100% - 24px);position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.pb-pill{background:var(--gp-card);box-shadow:var(--gp-ring-c), var(--gp-shadow-pop);border-radius:22px;align-items:center;gap:10px;padding:8px 10px 8px 16px;display:flex}.pb-pill-move[data-dragging] .pb-pill{cursor:grabbing;box-shadow:var(--gp-ring-c), 0 24px 48px -18px #00000059}.pb-pill-grip{border-radius:var(--gp-r-s);width:22px;height:40px;color:var(--gp-ink-mute);cursor:grab;touch-action:none;transition:color var(--gp-d-state) linear, background-color var(--gp-d-state) linear;flex:none;place-items:center;margin-left:-8px;display:grid}.pb-pill-grip:hover{background:var(--gp-well);color:var(--gp-ink-3)}.pb-pill-grip svg{width:18px;height:18px}.pb-remote[data-dock=left]{max-height:calc(100% - 24px);top:50%;bottom:auto;left:16px;transform:translateY(-50%)}.pb-remote[data-dock=left] .pb-pill{grid-template-columns:36px 36px;grid-template-areas:"grip grip""now now""play play""slower faster""bpm bpm""loop tray";justify-items:center;gap:6px;padding:8px 12px 12px;display:grid}.pb-remote[data-dock=left] .pb-pill[data-stop]{grid-template-areas:"grip grip""now now""play play""slower faster""stop stop""bpm bpm""loop tray"}.pb-remote[data-dock=left] .pb-pill-stop{grid-area:stop}.pb-pill-stop svg{width:15px;height:15px}.pb-remote[data-dock=left] .pb-pill-grip{grid-area:grip;width:40px;height:20px;margin:0}.pb-remote[data-dock=left] .pb-pill-now{text-align:center;grid-area:now;align-items:center;width:78px;margin:6px 0 12px}.pb-remote[data-dock=left] .pb-bar-now small{display:block}.pb-remote[data-dock=left] .pb-pill-play{grid-area:play;margin-bottom:8px}.pb-remote[data-dock=left] .pb-pill-slower{grid-area:slower}.pb-remote[data-dock=left] .pb-pill-faster{grid-area:faster}.pb-remote[data-dock=left] .pb-bpm{flex-direction:column;grid-area:bpm;align-items:center;gap:0;width:100%;min-width:0;line-height:1.15}.pb-pill-loop{position:relative}.pb-loop-gap{background:var(--gp-m-500);min-width:18px;color:var(--gp-m-on);box-shadow:0 0 0 2px var(--gp-card);text-align:center;pointer-events:none;animation:pb-fade var(--gp-d-state) linear;border-radius:999px;padding:1px 4px;font-size:10px;font-weight:750;line-height:13px;position:absolute;bottom:-4px;right:-5px}.pb-remote[data-dock=left] .pb-pill-loop,.pb-remote[data-dock=left] .pb-pill-tray{box-shadow:0 -12px 0 -11px var(--gp-line);margin-top:14px}.pb-remote[data-dock=left] .pb-pill-loop{grid-area:loop}.pb-remote[data-dock=left] .pb-pill-tray{grid-area:tray}.pb-dock-ghost{z-index:19;border:2px dashed color-mix(in srgb, var(--gp-m-500) 55%, transparent);background:color-mix(in srgb, var(--gp-m-500) 8%, transparent);pointer-events:none;border-radius:22px;animation:.26s cubic-bezier(.3,1.45,.45,1) both pb-ghost-in;position:absolute}.pb-dock-ghost[data-dock=bottom]{width:min(480px,100% - 24px);height:68px;bottom:18px;left:50%;translate:-50%}.pb-dock-ghost[data-dock=left]{width:100px;height:min(324px,100% - 24px);top:50%;left:16px;translate:0 -50%}@keyframes pb-ghost-in{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@media (prefers-reduced-motion:reduce){.pb-dock-ghost{animation:.15s linear both pb-fade}}.pb-pill-now{flex-direction:column;width:112px;min-width:0;display:flex}.pb-bar-now{text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:750;overflow:hidden}.pb-bar-now small{color:var(--gp-ink-3);font-size:12px;font-weight:600}.pb-bpm{border-radius:var(--gp-r-s);cursor:pointer;align-items:baseline;gap:4px;min-width:70px;padding:2px 8px;font-size:15px;font-weight:750;display:inline-flex}.pb-bpm:hover{background:var(--gp-well)}.pb-tray{flex-direction:column;gap:16px;display:flex;container:tray/inline-size}.pb-tray[data-dock=left]{justify-content:space-between;gap:12px;overflow-y:auto}.pb-tempo-val{min-width:6.5ch;font-size:24px;font-weight:800}.pb-mix{box-shadow:0 -1px 0 var(--gp-line);grid-template-columns:44px minmax(44px,auto) auto minmax(88px,1fr) 36px;align-items:center;gap:12px 10px;padding-top:14px;display:grid}.pb-mix-row{display:contents}.pb-mix-row>:first-child{justify-self:center}.pb-mix-name{white-space:nowrap;font-size:14px;font-weight:650}.pb-mix-extra{justify-self:start}.pb-mix-val{text-align:right;min-width:36px}@container tray (max-width:400px){.pb-mix{flex-direction:column;align-items:stretch;gap:14px;display:flex}.pb-mix-row{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"icon name extra extra""level level level value";align-items:center;gap:6px 10px;display:grid}.pb-mix-row>:first-child{grid-area:icon}.pb-mix-name{grid-area:name}.pb-mix-extra{grid-area:extra;justify-self:end}.pb-mix-row>.gp-slider{grid-area:level}.pb-mix-val{grid-area:value}}.pb-tray-hint{margin:0;display:none}@media (hover:none) and (pointer:coarse){.pb-tray-hint{display:block}}.pb-bpm{position:relative}.pb-bpm-tag{top:-8px;bottom:auto;right:-6px}.pb-speed{flex-direction:column;grid-column:2/-1;gap:6px;margin-top:-6px;display:flex}.pb-speed-meter{background:var(--gp-well);border-radius:6px;height:6px;display:block;overflow:hidden}.pb-speed-meter>i{background:var(--gp-m-500);height:100%;transition:width var(--gp-d-rise) var(--gp-e-rise);border-radius:6px;display:block}.pb-speed-meter[data-off]>i{background:var(--gp-edge)}@container tray (max-width:400px){.pb-speed{grid-column:1/-1}}@container gp-page (max-width:719px){.pb-pill-now,.pb-pill-loop{display:none}.pb-pill{gap:8px;padding:6px 8px 6px 12px}.pb-remote{bottom:10px}}@container gp-page (max-width:359px){.pb-pill{gap:4px;padding-left:8px}}@keyframes pb-fade{0%{opacity:0}}}