/* Stem splitter: the players across the tool, then what it does beside the button and the downloads */
.st-work { grid-template-columns: minmax(0, 1fr); }
.st-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.st-player { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.st-stems { display: grid; gap: 8px; }
.st-stem { display: grid; grid-template-columns: 26px 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.st-stem.is-picked { border-color: rgba(14, 8, 7, 0.45); background: #fffdf8; }
.st-stem-name { font: 600 14px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the play bar of one stem: play, position, time, then the volume */
.st-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-play, .st-speaker { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.st-play:hover, .st-speaker:hover { border-color: var(--ink); }
.st-stem.is-playing .st-play { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-speaker { width: 28px; height: 28px; border-color: transparent; }
.st-speaker .st-cross { display: none; }
.st-stem.is-muted .st-speaker .st-wave { display: none; }
.st-stem.is-muted .st-speaker .st-cross { display: block; }
.st-stem.is-muted .st-speaker { color: #b34a3a; }
.st-seek { flex: 1 1 auto; min-width: 60px; height: 4px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.st-time { flex: none; min-width: 84px; font: 500 12px/1 var(--mono, ui-monospace, monospace); color: var(--muted, #6b6260); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.st-vol { display: flex; align-items: center; gap: 2px; flex: none; }
.st-gain { width: 76px; height: 4px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.st-stem.is-muted .st-gain { accent-color: #b34a3a; }
.st-dl { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
.st-dl:hover { border-color: var(--ink); }
.st-dl[disabled] { opacity: 0.5; cursor: wait; }
/* the tick that puts a stem in Download selected */
.st-pick { position: relative; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.st-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.st-pick span { display: block; width: 20px; height: 20px; border: 2px solid rgba(14, 8, 7, 0.45); border-radius: 6px; background: #fff; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.st-pick input:checked + span { background: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 14px 14px; background-repeat: no-repeat; background-position: center; }
.st-pick input:focus-visible + span { outline: var(--ring); }
.st-pick-none, .st-dl-none { display: block; }
.st-main .tool-stats { margin: 0; }
#st-stats:empty { display: none; }

/* the side panel, in blocks */
.st-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.st-block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.st-block h3 { margin: 0; font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.st-block > .btn { width: 100%; }
.st-block .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.st-hint { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.st-engine { display: grid; grid-template-columns: 1fr 1fr; }
.st-link { padding: 0; border: 0; background: none; font: 600 12.5px/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-download { display: grid; gap: 10px; }
.st-download .btn { width: 100%; }
.st.is-busy .st-player { opacity: 0.85; }

/* the Pro card: live in the app, a blurred preview behind a sign-in card on the site */
.st-pro-block { position: relative; overflow: hidden; }
.st-pro-inner { display: grid; gap: 8px; }
.st-pro-lede { margin: 0; font: 500 13.5px/1.4 var(--sans); }
.st-pro-list { margin: 0; padding-left: 18px; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.st-pro-list li + li { margin-top: 4px; }
.st-pro-block.is-locked .st-pro-inner { filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; -webkit-user-select: none; }
.st-pro-block.is-locked { min-height: 200px; }
.st-lock { display: none; }
.st-pro-block.is-locked .st-lock { position: absolute; inset: 0; display: grid; gap: 8px; align-content: center; padding: 14px; text-align: center; background: rgba(255, 255, 255, 0.6); }
.st-lock b { font: 600 14.5px/1.25 var(--sans); }
.st-lock p { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.st-lock .btn { width: 100%; text-align: center; }
.st-lock .st-link { justify-self: center; }

/* signed out, past the day's downloads: a free account */
.st-gate { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #fff7e8; }
.st-gate b { font: 600 15px/1.2 var(--sans); }
.st-gate p { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--muted); }
.st-gate .btn { width: 100%; text-align: center; }
.st-gate .st-link { justify-self: center; }

@media (max-width: 860px) {
  .st-panel { grid-template-columns: minmax(0, 1fr); }
  .st-stem { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .st-stem .st-bar { grid-column: 1 / -1; flex-wrap: wrap; }
  .st-stem .st-dl { grid-column: 2 / -1; justify-self: start; }
  .st-stem .st-seek { flex-basis: 100%; order: 3; }
  .st-stem .st-time { order: 2; margin-left: auto; }
  .st-stem .st-vol { order: 1; margin-left: 4px; }
  .st-stem .st-gain { width: 64px; }
}

/* Pro only: what the panel promises, and the small wait line under the button */
.st-about h3 { margin: 0 0 6px; }
.st-about .st-pro-list { margin: 0 0 8px; }
.st-wait-hint { margin: 8px 0 0; }
.st-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#st-wav-line { margin: 8px 0 0; }
.st-block .turnstile-slot:empty { display: none; }