/* Rosan Music — session stem player */
.sp{
  --sp-bg:#2a1f17;--sp-bg-2:#3d2e22;--sp-line:rgba(255,236,214,.13);--sp-dim:rgba(255,236,214,.16);
  --sp-text:#f7eee3;--sp-soft:#e2d3c1;--sp-faint:#b8a48f;--sp-aqua:#e8a25a;--sp-warm:#c28a5b;
  --p:0;
  position:relative;margin-top:28px;border-radius:30px;padding:clamp(20px,3.2vw,34px);
  background:radial-gradient(ellipse 50% 70% at 92% 0%,rgba(232,162,90,.2),transparent 60%),linear-gradient(150deg,var(--sp-bg-2),var(--sp-bg));
  color:var(--sp-text);border:1px solid var(--sp-line);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,236,214,.08);
}
.sp *{box-sizing:border-box}
.sp-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:22px}
.sp-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--sp-aqua)}
.sp h3{color:var(--sp-text)!important;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;letter-spacing:-.045em;margin:8px 0 10px}
.sp-head p{margin:0;color:var(--sp-soft);max-width:660px;font-size:1.04rem;line-height:1.6}
.sp-badge{font-size:.72rem;letter-spacing:.08em;color:var(--sp-faint);border:1px solid var(--sp-line);border-radius:999px;padding:7px 11px;white-space:nowrap}

/* Transport */
.sp-transport{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sp-play{flex:none;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:var(--sp-text);color:var(--sp-bg);box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .15s ease}
.sp-play:hover{transform:scale(1.05)}
.sp-play svg{width:22px;height:22px}
.sp-play[data-state="loading"]{background:conic-gradient(var(--sp-aqua) calc(var(--load,0)*1turn),rgba(255,255,255,.25) 0)}
.sp-play[data-state="loading"] svg{opacity:.35}
.sp-now{flex:1;min-width:0}
.sp-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.02rem}
.sp-time span{color:var(--sp-faint);font-weight:600}
.sp-note{font-size:.95rem;color:var(--sp-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-note b{color:var(--sp-aqua);font-weight:800}
.sp-loop{flex:none;border:1px solid var(--sp-line);background:transparent;color:var(--sp-faint);border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:800;cursor:pointer}
.sp-loop[aria-pressed="true"]{color:var(--sp-text);border-color:rgba(130,207,213,.5);background:rgba(130,207,213,.12)}

/* Overview waveform */
.sp-overview{position:relative;height:74px;border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer;touch-action:none;margin-bottom:6px}
.sp-overview canvas{position:absolute;inset:0;width:100%;height:100%}
.sp-progress{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)*100%) 0 0)}
.sp-overview::after,.sp-lane::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--p)*100%);width:2px;margin-left:-1px;background:var(--sp-text);border-radius:2px;pointer-events:none}
.sp-overview::after{box-shadow:0 0 12px rgba(232,162,90,.85)}
.sp-markers{position:relative;height:22px;margin-bottom:16px}
.sp-marker{position:absolute;top:0;transform:translateX(-1px);font-size:.76rem;color:var(--sp-faint);white-space:nowrap;padding-left:6px;border-left:1px solid rgba(255,255,255,.25);background:none;border-top:0;border-right:0;border-bottom:0;cursor:pointer;font-family:inherit}
.sp-marker:hover,.sp-marker.on{color:var(--sp-text)}
.sp-marker.right{transform:translateX(-100%);padding:0 6px 0 0;border-left:0;border-right:1px solid rgba(255,255,255,.25)}

/* Presets */
.sp-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sp-preset{border:1px solid var(--sp-line);background:rgba(255,236,214,.05);color:var(--sp-soft);border-radius:999px;padding:9px 14px;font-size:.88rem;font-weight:750;cursor:pointer;font-family:inherit}
.sp-preset:hover{color:var(--sp-text);border-color:rgba(255,255,255,.28)}
.sp-preset[aria-pressed="true"]{background:var(--sp-text);color:var(--sp-bg);border-color:var(--sp-text)}

/* Tracks */
.sp-tracks{display:grid;gap:6px}
.sp-row{--lvl:0;display:grid;grid-template-columns:minmax(150px,200px) 1fr auto auto;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;transition:background .2s}
.sp-row:hover{background:rgba(255,255,255,.04)}
.sp-name{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;min-width:0}
.sp-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);opacity:calc(.45 + var(--lvl)*.55);box-shadow:0 0 calc(var(--lvl)*16px) var(--c);transform:scale(calc(.85 + var(--lvl)*.55))}
.sp-key{flex:none;font-size:.62rem;color:var(--sp-faint);border:1px solid var(--sp-line);border-radius:5px;padding:0 5px;line-height:1.5}
.sp-lane{position:relative;height:34px;cursor:pointer;touch-action:none}
.sp-lane canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s}
.sp-lane::after{opacity:.55}
.sp-ms{width:32px;height:30px;border-radius:9px;border:1px solid var(--sp-line);background:transparent;color:var(--sp-faint);font-weight:900;font-size:.74rem;cursor:pointer;font-family:inherit}
.sp-ms:hover{color:var(--sp-text);border-color:rgba(255,255,255,.3)}
.sp-ms.m[aria-pressed="true"]{background:#d9785f;border-color:#d9785f;color:var(--sp-bg)}
.sp-ms.s[aria-pressed="true"]{background:var(--sp-aqua);border-color:var(--sp-aqua);color:var(--sp-bg)}
.sp-row.silent .sp-lane canvas{opacity:.22}
.sp-row.silent .sp-name{color:var(--sp-faint)}

.sp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;margin-top:16px;font-size:.84rem;color:var(--sp-faint)}
.sp-foot kbd{font:inherit;border:1px solid var(--sp-line);border-radius:5px;padding:0 5px}
.sp-status{min-height:1em}
.sp :focus-visible{outline:2px solid var(--sp-aqua);outline-offset:2px}

@media(max-width:900px){.sp-marker span{display:none}}
@media(max-width:700px){
  .sp{border-radius:24px}
  .sp-head{grid-template-columns:1fr}.sp-badge{justify-self:start}
  .sp-row{grid-template-columns:1fr auto auto;grid-template-areas:"name m s" "lane lane lane";row-gap:4px;padding:6px 4px}
  .sp-name{grid-area:name}.sp-lane{grid-area:lane;height:26px}.sp-ms.m{grid-area:m}.sp-ms.s{grid-area:s}
  .sp-ms{width:40px;height:34px}
  .sp-key,.sp-keys,.sp-marker span{display:none}
  .sp-note{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.sp-play,.sp-row,.sp-lane canvas{transition:none}.sp-dot{box-shadow:none}}
.sp-disclaimer{margin:14px 0 0;font-size:.84rem;color:var(--sp-faint)}
.sp-nojs{margin:0;color:var(--sp-soft)}

/* Mini player (lives outside .sp, so colours are literal) */
.sp-mini{position:fixed;z-index:35;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;
  background:rgba(42,31,23,.95);color:#f7eee3;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(10,27,36,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transform:translateY(160%);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility 0s .3s}
.sp-mini.show{transform:none;opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.sp-mini-play{width:40px;height:40px;border-radius:50%;border:0;background:#e8a25a;color:#16110d;display:grid;place-items:center;cursor:pointer}
.sp-mini-play svg{width:16px;height:16px}
.sp-mini-title{background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit;padding:0;line-height:1.25}
.sp-mini-title b{display:block;font-size:.84rem}
.sp-mini-title span{font-size:.76rem;color:#b8a48f}
.sp-mini-title i{font-style:normal;font-variant-numeric:tabular-nums}
.sp-mini :focus-visible{outline:2px solid #e8a25a;outline-offset:2px}
@media(max-width:620px){.sp-mini{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));border-radius:18px}}
@media(prefers-reduced-motion:reduce){.sp-mini{transition:none}}