Embed

<style>
  .s55pl[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}
  .s55pl-mini[data-theme="dark"]{--bg:#16181d;--panel:#1a1e25;--panel-2:#1c2027;--border:#262a31;--text:#e9edf1;--muted:#aab2bd;--chip:#c8ced8;--surface:#0b0d11;--bar:#394150;--green:#44d17a;--accent:#ff2d55}
  .s55pl-mini[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel-2:#f5f7fb;--border:#dbe0e8;--text:#0b1220;--muted:#536072;--chip:#3c4756;--surface:#eef2f8;--bar:#c6d0df;--green:#1fa971;--accent:#ff2d55}

  .s55pl{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:14px;width:min(100%,900px);margin:0 auto;box-sizing:border-box}
  .s55pl h2{margin:0 0 10px;color:var(--text);font:600 18px/1.2 system-ui}
  .s55pl-cover{width:100%;height:300px;border-radius:12px;object-fit:cover;display:block;margin-bottom:10px}
  .s55pl-controls{display:grid;grid-template-columns:176px minmax(0,1fr) 300px;gap:12px;align-items:center;margin-bottom:8px}
  .s55pl-btns{display:flex;gap:8px}
  .s55pl-btn{height:40px;width:40px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:18px;cursor:pointer}
  .s55pl-btn.secondary{background:var(--panel-2);border:1px solid var(--border);color:var(--text)}
  .s55pl-title{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s55pl-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .s55pl-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;min-width:90px;text-align:right}
  .s55pl-mute{height:28px;width:28px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}
  .s55pl-vol{accent-color:var(--green);width:120px;max-width:160px}
  .s55pl-theme{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}

  .s55pl-wavebox{position:relative;height:64px;border-radius:10px;background:var(--surface);overflow:hidden;margin:8px 0 12px}
  .s55pl-bars,.s55pl-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-bars--prog i{background:var(--green)}
  .s55pl-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-wavebox[data-seekable="1"]{cursor:pointer}

  .s55pl-err{color:#ff3b57;font-size:12px;margin:4px 0;min-height:16px}
  .s55pl-list{display:flex;flex-direction:column;gap:6px}
  .s55pl-item{display:grid;grid-template-columns:28px 1fr 280px 90px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);cursor:pointer}
  .s55pl-item:hover{background:color-mix(in oklab,var(--panel) 90%, var(--text) 10%)}
  .s55pl-item.active{box-shadow:inset 0 0 0 2px var(--accent)}
  .s55pl-idx{color:var(--muted);text-align:center}
  .s55pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s55pl-rowwave{position:relative;height:28px;border-radius:6px;background:var(--surface);overflow:hidden}
  .s55pl-rowbars,.s55pl-rowbars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-rowbars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-rowbars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-rowcursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-badge{justify-self:end;color:var(--chip);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;font-size:11px;padding:3px 8px}
  @media (max-width:760px){.s55pl-item{grid-template-columns:28px 1fr 60px}.s55pl-rowwave{display:none}}
  @media (max-width:600px){.s55pl-controls{grid-template-columns:160px minmax(0,1fr) 200px}.s55pl-vol{width:90px}.s55pl-cover{height:200px}}

  .s55pl-mini[hidden]{display:none!important}
  .s55pl-mini{position:fixed;left:env(safe-area-inset-left,0);right:env(safe-area-inset-right,0);bottom:0;z-index:99999;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));background:var(--panel);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  .s55pl-mini .s55pl-btn{height:36px;width:36px}
  .s55pl-mini-wave{position:relative;height:36px;flex:1;border-radius:8px;background:var(--surface);overflow:hidden}
  .s55pl-mini-bars,.s55pl-mini-bars--prog{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:0;box-sizing:border-box;pointer-events:none}
  .s55pl-mini-bars i{display:block;width:2px;background:var(--bar);border-radius:1px}
  .s55pl-mini-bars--prog{transform-origin:left center;transform:scaleX(0);will-change:transform;z-index:2}
  .s55pl-mini-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--green);opacity:.9;pointer-events:none;z-index:3}
  .s55pl-mini-title{color:var(--text);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  body.s55pl--mini-open{padding-bottom:calc(76px + env(safe-area-inset-bottom,0))}
</style>

<div class="s55pl" id="s55pl-ambient" tabindex="0" data-theme="dark">
  <h2>AMBIENT BACKGROUND — Studio 55</h2>
  <img class="s55pl-cover"
       src="https://cdn.commoninja.com/asset/30835809-6362-410a-979e-8beacbf5c096.png"
       alt="Ambient Background cover" loading="lazy"/>

  <div class="s55pl-controls">
    <div class="s55pl-btns">
      <button class="s55pl-btn secondary" data-action="prev" aria-label="Previous">⏮</button>
      <button class="s55pl-btn" data-action="play" aria-label="Play/Pause">▶</button>
      <button class="s55pl-btn secondary" data-action="next" aria-label="Next">⏭</button>
    </div>
    <div class="s55pl-title" data-role="title">Loading…</div>
    <div class="s55pl-right">
      <div class="s55pl-time" data-role="time">00:00 / 00:00</div>
      <button class="s55pl-mute" data-action="mute" aria-label="Mute/Unmute">🔇</button>
      <input class="s55pl-vol" type="range" min="0" max="1" step="0.01" value="0.8" aria-label="Volume"/>
      <button class="s55pl-theme" id="s55pl-theme-ambient" aria-label="Toggle theme">🌙 Dark</button>
    </div>
  </div>

  <div class="s55pl-wavebox" id="s55pl-wavebox-ambient" data-seekable="1" title="Click to seek">
    <div class="s55pl-bars" id="s55pl-bars-ambient"></div>
    <div class="s55pl-bars s55pl-bars--prog" id="s55pl-bars-prog-ambient"></div>
    <i class="s55pl-cursor" id="s55pl-cursor-ambient"></i>
  </div>

  <div class="s55pl-err" id="s55pl-err-ambient"></div>
  <div class="s55pl-list" id="s55pl-list-ambient"></div>
</div>

<div class="s55pl-mini" id="s55pl-mini-ambient" hidden data-theme="dark">
  <button class="s55pl-btn" id="mini-play-ambient" aria-label="Play/Pause">▶</button>
  <div class="s55pl-mini-wave" id="mini-wave-ambient" title="Tap to seek">
    <div class="s55pl-mini-bars" id="mini-bg-ambient"></div>
    <div class="s55pl-mini-bars s55pl-mini-bars--prog" id="mini-fg-ambient"></div>
    <i class="s55pl-mini-cursor" id="mini-cur-ambient"></i>
  </div>
  <div class="s55pl-mini-title" id="mini-title-ambient">—</div>
</div>

<script>
(function(){
  const PLAYLIST = [
    { title:'This Fire',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3' },
    { title:'Final hour',        artist:'Studio 55', file:'https://cdn.commoninja.com/asset/ba1f6003-ec2e-4a3f-9143-c63d75912acd.mp3' },
    { title:'Smoky Woods',       artist:'Studio 55', file:'https://cdn.commoninja.com/asset/ecd65198-c98b-4082-bb84-13dc02071b0d.mp3' },
    { title:'Putting Out',       artist:'Studio 55', file:'https://cdn.commoninja.com/asset/c96e81ee-e866-4ab0-9052-8900110d7481.mp3' },
    { title:'Fire in My Soul',   artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e695c595-fef1-4898-8e72-b3434e4ecb64.mp3' },
    { title:'Water Ways',        artist:'Studio 55', file:'https://cdn.commoninja.com/asset/433bc128-52ab-4aa0-a218-64208410d6d4.mp3' },
    { title:'Sounding Off',      artist:'Studio 55', file:'https://cdn.commoninja.com/asset/e915a1fd-5ebb-4e5c-802c-dcb37a8928e9.mp3' },
    { title:'Time Is Endless',   artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Sometimes',         artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'We Are One',        artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Way Up',            artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:'Making Way',        artist:'Studio 55', file:'https://cdn.commoninja.com/asset/70448994-9737-4f70-a9af-9ca1c0ce95b4.mp3' },
    { title:"Kick Sound",        artist:"Studio 55", file:"https://cdn.commoninja.com/asset/b1e3accd-f1a5-4151-9615-0c401a300c62.mp3" },
    { title:"Lover's Way",       artist:"Studio 55", file:"https://cdn.commoninja.com/asset/b1e3accd-f1a5-4151-9615-0c401a300c62.mp3" },
    { title:"Won't Go",          artist:"Studio 55", file:"https://cdn.commoninja.com/asset/b1e3accd-f1a5-4151-9615-0c401a300c62.mp3" },
    { title:"From The Heart",    artist:"Studio 55", file:"https://cdn.commoninja.com/asset/b1e3accd-f1a5-4151-9615-0c401a300c62.mp3" },
  ];

  const fmt=s=>(!isFinite(s)||s<0)?'00:00':String(Math.floor(s/60)).padStart(2,'0')+':'+String(Math.floor(s%60)).padStart(2,'0');
  const clamp=(v,min,max)=>Math.min(max,Math.max(min,v));

  const root=document.getElementById('s55pl-ambient');
  const listEl=document.getElementById('s55pl-list-ambient');
  const errEl=document.getElementById('s55pl-err-ambient');
  const titleEl=root.querySelector('[data-role="title"]');
  const timeEl=root.querySelector('[data-role="time"]');
  const playBtn=root.querySelector('[data-action="play"]');
  const prevBtn=root.querySelector('[data-action="prev"]');
  const nextBtn=root.querySelector('[data-action="next"]');
  const muteBtn=root.querySelector('[data-action="mute"]');
  const volEl=root.querySelector('.s55pl-vol');
  const themeBtn=document.getElementById('s55pl-theme-ambient');

  const waveBox=document.getElementById('s55pl-wavebox-ambient');
  const barsBG=document.getElementById('s55pl-bars-ambient');
  const barsFG=document.getElementById('s55pl-bars-prog-ambient');
  const bigCur=document.getElementById('s55pl-cursor-ambient');

  const mini=document.getElementById('s55pl-mini-ambient');
  const miniPlay=document.getElementById('mini-play-ambient');
  const miniWave=document.getElementById('mini-wave-ambient');
  const miniBg=document.getElementById('mini-bg-ambient');
  const miniFg=document.getElementById('mini-fg-ambient');
  const miniCur=document.getElementById('mini-cur-ambient');
  const miniTitle=document.getElementById('mini-title-ambient');
  if (mini && mini.parentElement!==document.body) document.body.appendChild(mini);

  const media=new Audio(); media.preload='metadata'; media.volume=parseFloat(volEl.value||'0.8');

  function seedInt(str){let h=0; for(let i=0;i<str.length;i++){h=(h<<5)-h+str.charCodeAt(i);h|=0;} return Math.abs(h);}
  function prng(n){return()=>{n=(n*16807)%2147483647;return(n-1)/2147483646;};}
  const BAR_W=2,BAR_G=2;
  function barCount(el){return Math.max(40,Math.floor((el.clientWidth||0)/(BAR_W+BAR_G)));}
  function buildBars(container,count,seed){container.innerHTML='';container.style.gap=BAR_G+'px';const r=prng(seed);for(let i=0;i<count;i++){const v=Math.pow(r(),0.6);const h=Math.max(.12,Math.min(.98,v))*100;const b=document.createElement('i');b.style.height=h+'%';b.style.width=BAR_W+'px';container.appendChild(b);}}

  function isMobile(){return window.matchMedia('(max-width: 760px)').matches||/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);}
  function showMini(){if(!isMobile())return;if(mini.hidden){mini.hidden=false;document.body.classList.add('s55pl--mini-open');requestAnimationFrame(()=>{renderMini(idx);paintMini(PROG[idx]||0);});}}

  let idx=0,duration=0; const PROG=new Array(PLAYLIST.length).fill(0);
  const rowBox=[],rowBG=[],rowFG=[],rowCur=[];
  listEl.innerHTML='';
  PLAYLIST.forEach((t,i)=>{
    const row=document.createElement('div'); row.className='s55pl-item'; row.dataset.idx=i;
    row.innerHTML=`<div class="s55pl-idx">${i+1}</div>
      <div class="s55pl-name">${t.title}</div>
      <div class="s55pl-rowwave" title="Click to play/seek">
        <div class="s55pl-rowbars"></div>
        <div class="s55pl-rowbars s55pl-rowbars--prog"></div>
        <i class="s55pl-rowcursor"></i>
      </div>
      <div class="s55pl-badge">Ambient</div>`;
    listEl.appendChild(row);
    rowBox[i]=row.querySelector('.s55pl-rowwave'); rowBG[i]=row.querySelector('.s55pl-rowbars'); rowFG[i]=row.querySelector('.s55pl-rowbars--prog'); rowCur[i]=row.querySelector('.s55pl-rowcursor');

    row.addEventListener('click',e=>{ if(e.target.closest('.s55pl-rowwave'))return; const k=Number(row.dataset.idx); if(k===idx){media.paused?media.play().catch(()=>{}):media.pause();} else {setActive(k,true);} });
    rowBox[i].addEventListener('click',e=>{ const r=rowBox[i].getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); if(i!==idx){setActive(i,true);} if(isFinite(duration)&&duration>0){media.currentTime=duration*p;} else {PROG[i]=p; paintRow(i,p);} e.stopPropagation(); });
  });

  function renderBig(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(barsBG,barCount(waveBox),seed); buildBars(barsFG,barsBG.childElementCount,seed);}
  function renderRow(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(rowBG[i],barCount(rowBox[i]),seed); buildBars(rowFG[i],rowBG[i].childElementCount,seed);}
  function renderAllRows(){for(let i=0;i<PLAYLIST.length;i++){renderRow(i);paintRow(i,PROG[i]||0);}}
  function renderMini(i){const key=PLAYLIST[i].title+PLAYLIST[i].file,seed=seedInt(key); buildBars(miniBg,barCount(miniWave),seed); buildBars(miniFg,miniBg.childElementCount,seed);}

  function paintBig(p){const pp=clamp(p,0,1); barsFG.style.transform=`scaleX(${pp})`; bigCur.style.left=(pp*100)+'%';}
  function paintRow(i,p){const pp=clamp(p,0,1); if(!rowFG[i]||!rowCur[i])return; rowFG[i].style.transform=`scaleX(${pp})`; rowCur[i].style.left=(pp*100)+'%';}
  function paintMini(p){const pp=clamp(p,0,1); miniFg.style.transform=`scaleX(${pp})`; miniCur.style.left=(pp*100)+'%';}
  function paintActive(p){paintBig(p);paintRow(idx,p);paintMini(p);}

  function setActive(i,playNow=false){
    if(isFinite(duration)&&duration>0) PROG[idx]=(media.currentTime||0)/duration;
    idx=(i+PLAYLIST.length)%PLAYLIST.length; const tr=PLAYLIST[idx]; errEl.textContent='';
    titleEl.textContent=tr.title+(tr.artist?(' — '+tr.artist):''); miniTitle.textContent=tr.title;
    [...listEl.children].forEach(el=>el.classList.toggle('active',Number(el.dataset.idx)===idx));
    media.src=tr.file; media.load();
    renderBig(idx); renderRow(idx); renderMini(idx); paintActive(PROG[idx]||0);
    if(playNow){ const p=media.play(); if(p&&p.catch)p.catch(()=>{}); showMini(); }
  }

  playBtn.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  prevBtn.addEventListener('click',()=>setActive(idx-1,false));
  nextBtn.addEventListener('click',()=>setActive(idx+1,true));
  muteBtn.addEventListener('click',()=>{media.muted=!media.muted; muteBtn.textContent=media.muted?'🔈':'🔇';});
  volEl.addEventListener('input',e=>media.volume=parseFloat(e.target.value||'0.8'));

  waveBox.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=waveBox.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});
  miniPlay.addEventListener('click',()=>{media.paused?media.play():media.pause();});
  miniWave.addEventListener('click',e=>{if(!isFinite(duration)||duration<=0)return; const r=miniWave.getBoundingClientRect(); const p=clamp((e.clientX-r.left)/r.width,0,1); media.currentTime=duration*p;});

  document.addEventListener('keydown',e=>{
    const tag=(e.target&&e.target.tagName||'').toLowerCase(); const editing=e.target?.isContentEditable||tag==='input'||tag==='textarea'||tag==='select';
    if(editing||e.metaKey||e.ctrlKey||e.altKey) return;
    if(e.code==='Space'){e.preventDefault(); media.paused?media.play().catch(()=>{}):media.pause();}
    else if(e.key==='ArrowRight'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)+5,0,duration);}
    else if(e.key==='ArrowLeft'){e.preventDefault(); if(isFinite(duration)&&duration>0) media.currentTime=clamp((media.currentTime||0)-5,0,duration);}
    else if(e.key==='ArrowUp'){e.preventDefault(); media.volume=clamp((media.volume||0)+.05,0,1); volEl.value=String(media.volume);}
    else if(e.key==='ArrowDown'){e.preventDefault(); media.volume=clamp((media.volume||0)-.05,0,1); volEl.value=String(media.volume);}
  });

  let raf=null; function loop(){ if(isFinite(duration)&&duration>0){const p=(media.currentTime||0)/duration; PROG[idx]=p; paintActive(p); timeEl.textContent=fmt(media.currentTime)+' / '+fmt(duration);} raf=requestAnimationFrame(loop);}
  function startLoop(){cancelAnimationFrame(raf); raf=requestAnimationFrame(loop);}
  function stopLoop(){cancelAnimationFrame(raf); raf=null;}

  media.addEventListener('play',()=>{playBtn.textContent='⏸'; miniPlay.textContent='⏸'; showMini(); startLoop();});
  media.addEventListener('pause',()=>{playBtn.textContent='▶'; miniPlay.textContent='▶'; stopLoop(); PROG[idx]=(isFinite(duration)&&duration>0)?(media.currentTime||0)/duration:PROG[idx];});
  media.addEventListener('loadedmetadata',()=>{duration=Number.isFinite(media.duration)?media.duration:0; timeEl.textContent='00:00 / '+fmt(duration); waveBox.dataset.seekable=(isFinite(duration)&&duration>0)?'1':'0'; paintActive(PROG[idx]||0);});
  media.addEventListener('ended',()=>{PROG[idx]=0; setActive(idx+1,true);});
  media.addEventListener('error',()=>{const m=media.error; const map={1:'Playback aborted.',2:'Network error.',3:'Decoding error.',4:'Source not supported/blocked.'}; errEl.textContent='Audio error: '+(map[m&&m.code]||'Unknown.');});

  const THEME_KEY='s55pl_theme_ambient';
  function applyTheme(t){root.setAttribute('data-theme',t); mini.setAttribute('data-theme',t); themeBtn.textContent=(t==='dark'?'🌙 Dark':'☀️ Light');}
  const savedTheme=localStorage.getItem(THEME_KEY)||'dark'; applyTheme(savedTheme);
  themeBtn.addEventListener('click',()=>{const t=root.getAttribute('data-theme')==='dark'?'light':'dark'; localStorage.setItem(THEME_KEY,t); applyTheme(t);});

  let rAF=null; function reflowAll(){renderBig(idx); renderAllRows(); renderMini(idx); paintActive(PROG[idx]||0);}
  window.addEventListener('resize',()=>{if(rAF)cancelAnimationFrame(rAF); rAF=requestAnimationFrame(reflowAll);});
  window.addEventListener('orientationchange',()=>setTimeout(reflowAll,150));

  for(let i=0;i<PLAYLIST.length;i++){renderRow(i);} setActive(0,false);
})();
</script>

Text

<h3 style="white-space:pre-line">Background &amp; Ambient Music – The Perfect Atmosphere for Any Setting 🧘🏻‍♀️</h3>
<p class="large" style="white-space:pre-line">Enhance your videos, events, or projects with immersive background and ambient music. From serene, calming textures to modern lounge vibes, our compositions set the mood without distracting from your main message.</p>

<style>
  .s55-links{background:#0f1118;color:#e7ecf2;padding:48px 16px;border-radius:16px}
  .s55-links h2{font-size:clamp(22px,2.6vw,32px);text-align:center;margin:0 0 24px}
  .s55-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:980px;margin:0 auto}
  @media(min-width:720px){.s55-grid{grid-template-columns:1fr 1fr}}
  .s55-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;border:1px solid #262a31;border-radius:14px;background:#121521;
    text-decoration:none;color:#e7ecf2;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
  .s55-card:hover{transform:translateY(-3px);border-color:#3c77ff;box-shadow:0 8px 24px rgba(60,119,255,.15)}
  .s55-card span{font-size:clamp(16px,1.8vw,20px);font-weight:600;letter-spacing:.2px}
  .s55-arrow{width:22px;height:22px;flex:0 0 22px;border:1px solid #3c77ff;border-radius:50%;
    display:grid;place-items:center;}
  .s55-arrow svg{width:14px;height:14px}
  /* Optional subtitle style (if you want a one‑liner under the title later) */
  .s55-sub{display:block;opacity:.75;font-weight:400;font-size:clamp(13px,1.3vw,14px)}
</style>

<section class="s55-links" aria-label="Studio 55 Music Services">
  <h2>Pick your sound. We’ll make it sing.</h2>
  <div class="s55-grid">
    
    <a class="s55-card" href="/music/custom-jingles">
      <span>Custom Jingles</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/podcast-youtube">
      <span>Podcast &amp; YouTube</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/cinematic-music">
      <span>Cinematic Music</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/social-media-audio">
      <span>Social Media Audio</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/custom-songs">
      <span>Custom Songs</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>

    <a class="s55-card" href="/music/ambient-background">
      <span>Ambient &amp; Background</span>
      <div class="s55-arrow" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </div>
    </a>
  </div>
</section>


<script>
  (function(){
    var topLevelFix = [
      'custom-jingles','podcast-youtube','cinematic-music',
      'social-media-audio','custom-songs','ambient-background'
    ];
    var p = location.pathname.replace(/^\/+|\/+$/g,'');
    if(topLevelFix.includes(p)){
      location.replace('/music/' + p);
    }
  })();
</script>

Banner

Ambient Music & Background

asian music producer arranging a song on midi keyboard and desktop computer in home studio. music production technology concept

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-5178cb34-e179-43f5-9ac7-526e6f5df995" data-elfsight-app-lazy></div>