/* Pieces is intentionally self-contained. App themes may position the page,
   but do not repaint this musical object. */
.app-main{position:relative}
#pieces-library-entry{all:unset;position:absolute;z-index:109;top:8px;right:0;display:grid;align-items:start;justify-items:end;box-sizing:border-box;width:44px;height:44px;border-radius:14px;background:transparent;color:#fff;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#pieces-library-entry[hidden]{display:none}#pieces-library-entry img{display:block;width:25px;height:25px;object-fit:contain}#pieces-library-entry:focus-visible{outline:2px solid #fff;outline-offset:2px}
#pieces-library-entry[data-count]:not([data-count="0"])::after{content:attr(data-count);position:absolute;right:20px;top:1px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#36c7dc;color:#07131b;font:800 10px/1 system-ui;box-shadow:0 0 0 2px #111318}

#pieces-library-popover{--piece-panel:#15212a;--piece-panel-edge:#2d414f;--piece-row:#182731;--piece-row-hover:#1d303b;--piece-accent:#5bd4ee;--piece-accent-2:#63aef2;--piece-accent-soft:#254657;--piece-selected:#2c6782;--piece-text:#f4f8fb;--piece-muted:#a8bdc9;all:initial;box-sizing:border-box;position:fixed;z-index:110;top:var(--pieces-top);right:var(--pieces-right);display:flex;flex-direction:column;width:min(440px,calc(100vw - 24px));max-height:min(590px,var(--pieces-max-height));overflow:hidden;border:1px solid var(--piece-panel-edge);border-radius:22px;background:var(--piece-panel);color:var(--piece-text);box-shadow:0 24px 70px #0009,inset 0 1px 0 #ffffff10;font-family:system-ui,-apple-system,sans-serif;opacity:0;transform:scale(.88);transform-origin:calc(100% - 20px) 0;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1);color-scheme:dark}
#pieces-library-popover[hidden]{display:none}#pieces-library-popover.is-open{opacity:1;transform:scale(1)}
.pieces-header{all:initial;display:flex;align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box;padding:14px 14px 12px 18px;border-bottom:1px solid var(--piece-panel-edge);color:var(--piece-text);font-family:inherit}.pieces-header>div{display:flex;flex-direction:column;gap:2px}.pieces-header strong{font:750 17px/1.2 system-ui}.pieces-header span{color:var(--piece-muted);font:500 10px/1.3 system-ui}.pieces-close{all:unset;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--piece-muted);font:300 28px/1 system-ui;cursor:pointer}.pieces-close:focus-visible{outline:2px solid var(--piece-accent)}
.pieces-status{box-sizing:border-box;padding:0 16px;color:#efb0bb;font:500 11px/1.4 system-ui}.pieces-status:empty{display:none}.pieces-list{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:0 12px 12px;scrollbar-width:thin;scrollbar-color:var(--piece-panel-edge) transparent}.pieces-empty{margin:0;padding:24px 10px;color:var(--piece-muted);text-align:center;font:500 12px/1.5 system-ui}
.piece-row{--piece-role-color:var(--piece-muted);all:initial;display:grid;grid-template-columns:108px minmax(76px,1fr) auto 42px;align-items:center;gap:9px;box-sizing:border-box;min-height:76px;padding:10px 0;border-bottom:1px solid var(--piece-panel-edge);color:var(--piece-text);font-family:inherit}.piece-row:last-child{border-bottom:0}.piece-row[data-role="drums"]{--piece-role-color:var(--track-drums)}.piece-row[data-role="bass"]{--piece-role-color:var(--track-bass)}.piece-row[data-role="chords"]{--piece-role-color:var(--track-chords)}.piece-row[data-role="melody"]{--piece-role-color:var(--track-melody)}.piece-row[data-role="vocals"]{--piece-role-color:var(--track-vocals)}.piece-play{all:unset;position:relative;display:block;box-sizing:border-box;width:108px;height:52px;border:1px solid color-mix(in srgb,var(--piece-role-color) 62%,transparent);border-radius:11px;background:#071015;overflow:hidden;cursor:pointer}.piece-play:focus-visible{outline:2px solid var(--piece-role-color);outline-offset:2px}.piece-play-glyph{position:absolute;left:6px;bottom:4px;display:grid;place-items:center;width:13px;height:13px;color:#fff;font:800 8px/1 system-ui;text-shadow:0 1px 3px #000}
.piece-detail{display:flex;min-width:0;flex-direction:column;gap:2px}.piece-role{overflow:hidden;color:var(--piece-role-color);font:600 9px/1.2 system-ui;text-overflow:ellipsis;white-space:nowrap}.piece-detail strong{overflow:hidden;color:var(--piece-text);font:750 13px/1.25 system-ui;text-overflow:ellipsis;white-space:nowrap}.piece-meta{overflow:hidden;color:var(--piece-muted);font:500 9px/1.25 system-ui;text-overflow:ellipsis;white-space:nowrap}
.piece-select{all:unset;display:grid;place-items:center;box-sizing:border-box;min-width:68px;height:40px;padding:0 11px;border-radius:13px;background:var(--piece-accent-soft);color:var(--piece-text);font:700 10px/1 system-ui;cursor:pointer}.piece-select[data-selected="true"]{background:var(--piece-selected);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--piece-accent) 58%,transparent)}.piece-select:focus-visible{outline:2px solid var(--piece-accent);outline-offset:2px}
.piece-more{all:unset;display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;border-radius:13px;background:transparent;color:var(--piece-muted);cursor:pointer;touch-action:manipulation}.piece-more:active{background:var(--piece-accent-soft);color:var(--piece-text)}.piece-more svg{width:20px;height:20px;fill:currentColor}.piece-more:focus-visible{outline:2px solid var(--piece-accent);outline-offset:2px}
.piece-timeline{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 24%),linear-gradient(180deg,#0b151b,#060b0e)}.piece-timeline::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--piece-accent-soft) 50%,transparent);opacity:.15}.piece-timeline i{--piece-event-color:var(--piece-role-color);position:absolute;z-index:1;left:var(--piece-x);top:var(--piece-y);width:var(--piece-w);height:3px;border-radius:3px;background:var(--piece-event-color);box-shadow:0 0 7px color-mix(in srgb,var(--piece-event-color) 72%,transparent);opacity:var(--piece-velocity);transform:translateY(-50%)}.piece-timeline i[data-role="drums"]{--piece-event-color:var(--track-drums)}.piece-timeline i[data-role="bass"]{--piece-event-color:var(--track-bass)}.piece-timeline i[data-role="chords"]{--piece-event-color:var(--track-chords)}.piece-timeline i[data-role="melody"]{--piece-event-color:var(--track-melody)}.piece-timeline i[data-role="vocals"]{--piece-event-color:var(--track-vocals)}.piece-timeline.is-drums i{width:3px;height:13px;border-radius:3px}.piece-timeline.is-empty::before{content:'—';position:absolute;inset:0;display:grid;place-items:center;color:var(--piece-muted)}
.piece-context-strip{display:flex;align-items:center;gap:6px;box-sizing:border-box;width:100%;height:38px;min-height:38px;padding:2px 7px 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}.piece-context-strip::-webkit-scrollbar{display:none}.piece-context-strip[hidden]{display:none}.piece-context-chip{--piece-chip-color:color-mix(in srgb,var(--track-chords) 50%,var(--track-melody));all:unset;position:relative;display:grid;grid-template-columns:30px auto;align-items:center;gap:5px;flex:0 0 auto;box-sizing:border-box;height:34px;max-width:102px;padding:2px 18px 2px 2px;border:1px solid color-mix(in srgb,var(--piece-chip-color) 58%,transparent);border-radius:9px;background:color-mix(in srgb,var(--piece-chip-color) 13%,#121218);color:#f4eef8;box-shadow:0 2px 8px #0003;cursor:pointer}.piece-context-chip[data-role="drums"]{--piece-chip-color:var(--track-drums)}.piece-context-chip[data-role="bass"]{--piece-chip-color:var(--track-bass)}.piece-context-chip[data-role="chords"]{--piece-chip-color:var(--track-chords)}.piece-context-chip[data-role="melody"]{--piece-chip-color:var(--track-melody)}.piece-context-chip[data-role="vocals"]{--piece-chip-color:var(--track-vocals)}.piece-context-chip .piece-timeline{width:30px;height:28px;border-radius:6px}.piece-context-chip>span{overflow:hidden;font:650 8px/1 system-ui;text-overflow:ellipsis;white-space:nowrap}.piece-context-chip>b{position:absolute;right:-4px;top:-6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#584451;color:#fff;font:500 13px/1 system-ui}.piece-context-chip:focus-visible{outline:2px solid var(--piece-chip-color);outline-offset:2px}
@media(max-width:420px){.piece-row{grid-template-columns:92px minmax(62px,1fr) 60px 38px;gap:6px}.piece-play{width:92px}.piece-select{min-width:60px;padding:0 7px}.piece-more{width:38px}.pieces-header{padding-left:14px}}
@media(prefers-reduced-motion:reduce){#pieces-library-popover{transition:none}}