.music-timeline{margin:28px 0;border:1px solid #59446f;border-radius:14px;overflow:hidden;background:#1c1826}.music-timeline>summary{padding:19px 23px;cursor:pointer;display:flex;gap:15px;align-items:center;list-style:none;font-size:16px;font-weight:550}.music-timeline>summary::-webkit-details-marker{display:none}.music-timeline>summary:before{content:'▸';color:#b799df;font-size:12px}.music-timeline[open]>summary:before{content:'▾'}.music-timeline>summary>span{font-size:10px;color:#ab91c1;font-weight:400;margin-left:auto}.timeline-body{padding:0 23px 23px}.timeline-intro{font-size:11px;line-height:1.8;color:#ae98c3;margin-bottom:17px;max-width:850px}.timeline-picker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid #3c304d;padding-top:17px}.timeline-picker>label:first-child{font-size:9px;color:#ad94c3;flex:1;min-width:160px;display:flex;gap:9px;align-items:center}.timeline-picker select{max-width:520px;min-width:140px;width:100%;font-size:11px;height:37px;padding:7px 9px}.timeline-picker>.button{min-height:37px;font-size:11px}.timeline-compatible{display:flex;gap:7px;align-items:center;color:#b9a2ce;font-size:10px}.timeline-reference{font-size:9px;color:#8e75a6;margin-top:8px}.timeline-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:17px 0 14px}.timeline-toolbar>.button{font-size:10px;min-height:34px;padding:7px 11px}.timeline-toolbar>label{font-size:9px;color:#9d84b5;display:flex;gap:8px;align-items:center;margin-left:auto}.timeline-toolbar input[type=range]{width:85px;accent-color:#ba9de4}.timeline-time{color:#bca3d2;font-size:10px;font-variant-numeric:tabular-nums}.timeline-empty{border:1px dashed #514060;border-radius:8px;text-align:center;padding:35px 20px;color:#af96c3}.timeline-empty strong{font-size:13px;display:block;font-weight:500}.timeline-empty p{font-size:10px;margin-top:8px;line-height:1.8}.timeline-scroll{overflow-x:auto;overscroll-behavior-x:contain;background:#14111c;border:1px solid #41304f;border-radius:8px;scrollbar-color:#5a406b #1e1627;padding:0 12px 10px}.timeline-surface{min-width:620px;position:relative;height:242px}.timeline-ruler{position:relative;height:30px;border-bottom:1px solid #3d2c4d;cursor:crosshair}.timeline-ruler>span{position:absolute;top:5px;color:#91759f;font-size:8px;border-left:1px solid #664877;padding-left:5px;height:24px;pointer-events:none}.timeline-clips{position:absolute;top:40px;left:0;right:0;height:190px;background:repeating-linear-gradient(90deg,transparent 0 39px,#a47abe09 39px 40px)}.timeline-clip{position:absolute;top:calc(var(--clip-lane)*100px);height:88px;min-width:4px;border:1px solid #705083;border-radius:6px;background:linear-gradient(140deg,#3a2949,#2b2037);color:#dfc5f4;padding:8px 11px;overflow:hidden;user-select:none;cursor:grab}.timeline-clip:nth-child(even){background:linear-gradient(140deg,#2b3d35,#202e29);border-color:#557866;color:#c2e3d3}.timeline-clip.selected{outline:2px solid #c5adff;outline-offset:-1px}.timeline-clip.missing{opacity:.55;border-style:dashed}.timeline-clip.dragging{opacity:.45}.timeline-clip.drop-target{outline:2px dashed #f2c615}.clip-heading{display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:80px}.clip-heading strong{overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:500;flex:1}.clip-heading code{font-size:9px;color:var(--clip-color);margin-left:auto}.clip-handle{font-size:13px;color:var(--clip-color);line-height:1}.clip-wave{width:100%;height:33px;margin:3px 0}.clip-wave rect{fill:var(--clip-color);opacity:.65}.clip-bottom{display:flex;justify-content:space-between;font-size:7px;color:var(--clip-color);white-space:nowrap;gap:5px}.clip-overlap{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(110deg,#d5b4ff24,transparent);border-right:1px dashed #c6a4df77;pointer-events:none;min-width:1px}.trim-handle{position:absolute;top:0;bottom:0;width:7px;border:0;border-radius:0;background:#c4a0e219;padding:0;cursor:ew-resize;touch-action:none}.trim-handle:hover,.trim-handle:focus{background:#c8a6ef70}.trim-start{left:0}.trim-end{right:0}.timeline-playhead{position:absolute;top:23px;bottom:0;width:1px;background:#f2c615;pointer-events:none;z-index:3}.timeline-playhead:before{content:'';position:absolute;top:-3px;left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid #f2c615}.timeline-seek-wrap{display:flex;gap:12px;align-items:center;margin-top:12px}.timeline-seek-wrap>label{font-size:9px;color:#a78abb;flex-shrink:0}.timeline-seek-wrap input{flex:1;min-width:80px;accent-color:#c5adff}.timeline-clip-editor{margin-top:16px;background:#251c30;border:1px solid #4e375f;border-radius:8px;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px}.timeline-clip-editor>div:first-child{min-width:0}.timeline-clip-editor strong{font-size:11px;font-weight:500;display:block;overflow-wrap:anywhere}.timeline-fields{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:flex-end}.timeline-fields label{font-size:9px;color:#b399c7;display:flex;flex-direction:column;gap:5px}.timeline-fields input{width:95px;height:32px;background:#1b1423;border:1px solid #5a3f6a;border-radius:5px;color:#dac1ee;font-size:10px;padding:5px 8px}.timeline-fields label:last-child input{width:110px}.timeline-clip-actions{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;max-width:260px;justify-content:flex-end}.timeline-clip-actions .button{font-size:9px;min-height:30px;padding:5px 8px}.timeline-transition{grid-column:1/-1;font-size:9px;color:#a487b8;line-height:1.8}.timeline-guide{font-size:9px;color:#9d83b1;line-height:1.8;margin-top:13px;display:flex;justify-content:space-between;gap:20px;align-items:baseline}.timeline-guide span{max-width:800px}.timeline-guide a{color:#c4a6e0;flex-shrink:0}.timeline-missing{font-size:10px;padding:11px 13px;background:#3b3020;color:#d5b97a;border:1px solid #675030;border-radius:6px;margin-top:14px}.demo-mode-banner{border:1px solid #66527f;background:#292037;color:#cdb5e6;font-size:11px;padding:13px 17px;border-radius:8px;margin-top:20px}.demo-mode-banner a{color:#f0e3ff;text-decoration:underline;margin-left:10px}
@media(max-width:700px){.music-timeline{margin-top:20px}.music-timeline>summary{padding:17px;font-size:14px;gap:10px;flex-wrap:wrap}.music-timeline>summary>span{font-size:9px}.timeline-body{padding:0 16px 18px}.timeline-intro{font-size:10px;line-height:1.8}.timeline-picker{gap:10px}.timeline-picker>label:first-child{flex:1;min-width:0;display:block;font-size:9px}.timeline-picker select{height:36px;max-width:none;display:block;font-size:10px;margin-top:5px}.timeline-picker>.button{align-self:flex-end;min-height:36px;font-size:10px;padding:7px 11px}.timeline-compatible{font-size:9px}.timeline-toolbar{gap:8px}.timeline-toolbar>.button{font-size:9px;padding:6px 9px;min-height:33px}.timeline-toolbar>label{font-size:8px;gap:6px}.timeline-toolbar input[type=range]{width:65px}.timeline-time{font-size:9px}.timeline-toolbar>#timelineClear{margin-left:auto}.timeline-scroll{padding-inline:9px}.timeline-clip-editor{grid-template-columns:1fr;gap:13px;padding:13px}.timeline-fields{gap:9px}.timeline-fields label{font-size:8px}.timeline-fields input{width:78px;font-size:10px}.timeline-fields label:last-child input{width:99px}.timeline-clip-actions{justify-content:flex-start;max-width:none;gap:7px}.timeline-clip-actions .button{font-size:9px;min-height:32px}.timeline-transition{font-size:8px}.timeline-guide{font-size:8px;flex-wrap:wrap;gap:8px}.timeline-guide a{font-size:9px}.timeline-empty{padding:28px 15px}.timeline-empty strong{font-size:12px}.timeline-empty p{font-size:9px}.timeline-missing{font-size:9px}.timeline-seek-wrap>label{font-size:8px}.demo-mode-banner{font-size:10px;line-height:1.8}.demo-mode-banner a{margin-left:0;display:block}}
@media(max-width:380px){.music-timeline>summary>span{margin-left:22px;width:100%}.timeline-fields input{width:72px}.timeline-fields label:last-child input{width:92px}.timeline-clip-editor{padding:11px}.timeline-fields{gap:7px}.timeline-body{padding-inline:13px}.timeline-toolbar>label{margin-left:0}.timeline-toolbar>#timelineClear{margin-left:0}.timeline-time{margin-left:auto}}

footer>div{flex-wrap:wrap;row-gap:10px}
.demo-mode-banner .button{margin:9px 10px 0 0;min-height:32px;font-size:10px;white-space:normal;text-align:left}