.playlist{--playlist-label:134px;--playlist-cell:64px}.playlist-heading{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #363b33}.playlist-icon{background:#3c4436;color:#c8de91}.playlist-count{font-size:9px;letter-spacing:1px;font-weight:700;color:#c9d4b6}.playlist-count span{color:#777f72}.playlist-instructions{padding:14px 20px 0;color:#9ba494;font-size:11px;line-height:1.5}.playlist-tools{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;padding:13px 20px 15px}.playlist-tools-group{display:flex;align-items:center;gap:6px}.playlist-tools label{display:flex;align-items:center;gap:5px;color:#8d9687;font-size:8px;letter-spacing:.8px;font-weight:700}.playlist-tools button,.playlist-tools select{height:27px;padding:0 8px;border:1px solid #454d41;border-radius:4px;background:#2b312a;color:#bfc9b9;font:600 10px 'DM Sans',sans-serif}.playlist-tools button:hover,.playlist-tools select:hover{border-color:#a4b988;color:#e3ebd8}.playlist-tools button:disabled{opacity:.38;cursor:not-allowed}.playlist-tools select{padding:0 5px;min-width:42px;color:#e0e9d8}.playlist-scroll{overflow-x:auto;border-top:1px solid #363c34;border-bottom:1px solid #363c34;scrollbar-color:#65715c #20241e;scrollbar-width:thin}.playlist-scroll:focus-visible{outline:2px solid #d4ec74;outline-offset:-2px}.playlist-grid{width:max-content;min-width:100%;background:#1c201c}.playlist-ruler,.playlist-lane{display:flex}.playlist-ruler{height:30px;border-bottom:1px solid #384037}.playlist-ruler-label,.playlist-lane-label{width:var(--playlist-label);min-width:var(--playlist-label);position:sticky;left:0;z-index:2;background:#242924;border-right:1px solid #3b4339}.playlist-ruler-label{display:flex;align-items:center;padding-left:14px;color:#7d8779;font-size:8px;font-weight:700;letter-spacing:1px}.playlist-numbers,.playlist-cells{display:grid;grid-template-columns:repeat(var(--playlist-bars),var(--playlist-cell));flex:1}.playlist-bar-number{border:0;border-right:1px solid #343c33;background:#1e231e;text-align:left;padding:0 8px;color:#818c7c;font-size:9px}.playlist-bar-number.playlist-selected{color:#d4ec9a;background:#333c2c}.playlist-bar-number.playlist-playing{box-shadow:inset 0 2px #d4ec74;color:#e6f2c8}.playlist-lane{height:47px;border-bottom:1px solid #30382f}.playlist-lane:last-child{border-bottom:0}.playlist-lane-label{display:flex;gap:8px;align-items:center;border-top:0;border-left:0;border-bottom:0;text-align:left;padding:0 12px;color:#dfe4d7;cursor:pointer}.playlist-lane-label:hover{background:#30382e}.playlist-pattern-dot{width:8px;height:8px;flex-shrink:0;background:var(--clip-color);border-radius:50%}.playlist-lane-label strong,.playlist-lane-label small{display:block;white-space:nowrap}.playlist-lane-label strong{font-size:10px}.playlist-lane-label small{font-size:7px;letter-spacing:.7px;color:#83907e;margin-top:4px}.playlist-cell{position:relative;border:0;border-right:1px solid #353d33;border-radius:0;background:#242a23;color:var(--clip-color);padding:5px 4px;text-align:left;min-width:0}.playlist-cell:nth-child(4n + 1){background:#293028}.playlist-cell:hover{background:#394436}.playlist-cell.playlist-selected:after{content:'';position:absolute;inset:0;border-left:1px solid #a9bd87;pointer-events:none}.playlist-cell.playlist-playing{box-shadow:inset 2px 0 #d4ec74}.playlist-cell.playlist-clip{background:color-mix(in srgb,var(--clip-color) 28%,#293029);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--clip-color) 52%,#293029)}.playlist-cell.playlist-clip.playlist-playing{box-shadow:inset 2px 0 #e7f6b6,inset 0 0 0 1px color-mix(in srgb,var(--clip-color) 52%,#293029)}.playlist-cell span,.playlist-cell i{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}.playlist-cell span{font-size:8px;font-weight:700}.playlist-cell i{font-size:7px;letter-spacing:2px;opacity:.7;font-style:normal;margin-top:3px}.playlist-footer{height:35px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;color:#7e897b;font-size:8px;letter-spacing:.8px;font-weight:700}@media(max-width:700px){.playlist{--playlist-label:112px;--playlist-cell:56px}.playlist-heading{padding:0 15px}.playlist-instructions{padding:13px 15px 0}.playlist-tools{padding:12px 15px 14px}.playlist-footer{gap:12px;font-size:7px}.playlist-footer span:last-child{display:none}}
/* Keep long pattern libraries navigable without expanding the entire page. */
.playlist-scroll{overflow:auto;max-height:360px}.playlist-ruler{position:sticky;top:0;z-index:3}.playlist-ruler-label{z-index:4}.playlist-lane-label>span:last-child{min-width:0;overflow:hidden}.playlist-lane-label strong{overflow:hidden;text-overflow:ellipsis}.playlist-tools select[data-playlist-fill-pattern]{max-width:150px}
.playlist-cell.playlist-continued{background:color-mix(in srgb,var(--clip-color) 18%,#293029)}.playlist-cell.playlist-continued i{letter-spacing:0;margin-top:0}.playlist-cell.playlist-continued:hover{background:color-mix(in srgb,var(--clip-color) 36%,#293029)}

/* Render only viewport cells while preserving absolute song scroll positions. */
.playlist-numbers,.playlist-cells{display:block;position:relative;flex:none;width:calc(var(--playlist-bars)*var(--playlist-cell));background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--playlist-cell) - 1px),#343c33 calc(var(--playlist-cell) - 1px),#343c33 var(--playlist-cell))}.playlist-bar-number,.playlist-cell{position:absolute;top:0;bottom:0;width:var(--playlist-cell)}.playlist-tools input[data-playlist-select-bar]{width:82px;height:27px;padding:0 6px;border:1px solid #454d41;border-radius:4px;background:#2b312a;color:#e0e9d8}
.playlist-arrange-scroll{max-height:440px;min-height:220px;overscroll-behavior:contain}.playlist-arrange-grid{position:relative;min-width:100%;background:#151b1e}.playlist-arrange-row{display:flex;height:48px;position:relative;border-bottom:1px solid #30383a}.playlist-arrange-row>.playlist-lane-label,.playlist-arrange-row>.playlist-ruler-label{position:sticky;left:0;flex:0 0 134px;width:134px;z-index:5;box-sizing:border-box;background:#20282c}.playlist-arrange-lane{position:relative;flex-shrink:0;height:48px;overflow:visible;touch-action:none}.playlist-arrange-ruler{height:58px;position:sticky;top:0;z-index:7;background:#222a2d}.playlist-arrange-numbers{position:relative;flex-shrink:0;height:58px}.playlist-beat-bar{position:absolute;top:0;height:27px;text-align:left;padding:0 9px;border:0;border-left:1px solid #3f494d;border-radius:0;background:#222a2d;color:#aebbbd;font-size:11px}.playlist-beat-bar.playlist-selected{background:#333e40;color:#e3ee9b}.playlist-beat-bar.playlist-playing{background:#48533e;color:#f0f9b1}.playlist-bar-line{position:absolute;top:0;bottom:0;width:1px;background:#333d40;pointer-events:none}.playlist-pattern-clip{position:absolute;top:5px;height:38px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:3px 11px;overflow:hidden;white-space:nowrap;border:1px solid color-mix(in srgb,var(--clip-color) 60%,#202728);border-radius:4px;background:color-mix(in srgb,var(--clip-color) 25%,#202728);color:var(--clip-color);text-align:left;cursor:grab;touch-action:none;z-index:2}.playlist-pattern-clip>span{font-size:11px;font-weight:650;pointer-events:none}.playlist-pattern-clip>small{font-size:8px;letter-spacing:.06em;opacity:.8;pointer-events:none}.playlist-pattern-clip:hover{filter:brightness(1.15)}.playlist-pattern-clip.is-selected{outline:2px solid #e2efaf;outline-offset:1px;z-index:3}.playlist-clip-handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;background:#ffffff09}.playlist-clip-handle:hover{background:#ffffff50}.playlist-clip-handle.left{left:0}.playlist-clip-handle.right{right:0}.playlist-edit-cursor{position:absolute;top:0;bottom:0;width:1px;background:#e7eaa07a;pointer-events:none;z-index:4}.playlist-section-marker{position:absolute;top:30px;max-width:180px;height:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#485241;color:#dce9bd;font-size:10px;padding:2px 8px;border:0;border-radius:3px;z-index:2}.playlist-clip-inspector{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px 14px;background:#20272a;border-bottom:1px solid #333c3f;font-size:10px;color:#b1bfc0}.playlist-clip-inspector>label{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.04em}.playlist-clip-inspector input{box-sizing:border-box;width:76px;background:#141b1e;color:#d9e5e3;border:1px solid #3b474a;border-radius:4px;padding:5px;font:inherit}.playlist-clip-inspector input[data-marker-property="name"]{width:180px}.playlist-clip-inspector input[type="checkbox"]{width:auto;accent-color:#d6e887}.playlist-clip-inspector button{padding:5px 9px;border:1px solid #3d494c;background:#293337;border-radius:4px;color:#d2dddc;font-size:10px}.playlist-tools input[data-clip-zoom]{width:90px;accent-color:#d6e887}.playlist-loop-toggle{white-space:nowrap}.playlist-footer{gap:12px;flex-wrap:wrap}.playlist-pattern-clip:focus-visible,.playlist-section-marker:focus-visible{outline:2px solid #e2efaf;outline-offset:2px}