/* Sound Lab explainer inside Features → Creator.
   This is a product illustration, not a fake audio player. It mirrors the real BloxMind flow:
   prompt → generate → preview → regenerate/download MP3. */
.sound-showcase-demo.sound-feature-demo{padding:14px 18px;background:radial-gradient(circle at 48% 22%,rgba(232,168,56,.08),transparent 42%),linear-gradient(155deg,#11151c,#080a0e)}
.sound-feature-demo .feature-shell-media{filter:saturate(.65) contrast(1.02) brightness(.35);opacity:.42}
.sound-feature-demo::after{background:linear-gradient(180deg,rgba(7,9,13,.38),rgba(7,9,13,.82) 58%,rgba(7,9,13,.98) 100%)}
.sound-feature-prompt{margin:1px 0 12px;padding:12px 13px;border:1px solid rgba(232,168,56,.2);border-radius:12px;background:rgba(9,11,15,.88);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.sound-feature-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sound-feature-prompt-head small{color:var(--accent);font-size:.49rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.sound-feature-prompt-head span{padding:4px 7px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#858d99;font-size:.44rem;font-weight:700}
.sound-feature-prompt p{margin-top:7px;color:#d7dbe2;font-size:.61rem;line-height:1.46}
.sound-feature-output{padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(7,9,13,.92);backdrop-filter:blur(13px);box-shadow:0 16px 38px rgba(0,0,0,.26)}
.sound-feature-output-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sound-feature-output-head small,.sound-feature-output-head strong{display:block}
.sound-feature-output-head small{color:#7f8794;font-size:.44rem;text-transform:uppercase;letter-spacing:.08em}
.sound-feature-output-head strong{margin-top:3px;color:#edf0f5;font-size:.65rem;line-height:1.2}
.sound-feature-output-head>span{padding:4px 7px;border-radius:999px;border:1px solid rgba(232,168,56,.2);background:rgba(232,168,56,.06);color:#f1bd53;font-size:.43rem;font-weight:800}
.sound-feature-player{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;margin:13px 0 8px}
.sound-feature-play{width:42px;height:42px;border:1px solid rgba(232,168,56,.36);border-radius:50%;background:linear-gradient(145deg,#ffd36a,#d99122);color:#171109;display:grid;place-items:center;box-shadow:0 6px 20px rgba(232,168,56,.14)}
.sound-feature-play svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-left:2px}
.sound-feature-wave{height:50px;display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden}
.sound-feature-wave i{flex:1 1 0;max-width:5px;min-width:2px;height:var(--h);border-radius:999px;background:linear-gradient(180deg,#ffe3a2,#e8a838 55%,#6f4b1b);opacity:.86}
.sound-feature-time{color:#7f8794;font:600 .46rem ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.sound-feature-progress{height:3px;margin-left:52px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.sound-feature-progress span{display:block;width:43%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d89121,#ffd46b)}
.sound-feature-meta{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055);color:#858d99;font-size:.45rem}
.sound-feature-meta span,.sound-feature-meta b{padding:5px 7px;border-radius:7px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.018)}
.sound-feature-meta b{margin-left:auto;color:#e8bc62;border-color:rgba(232,168,56,.18);font-weight:800}
@media(max-width:600px){
  .sound-showcase-demo.sound-feature-demo{padding:10px}
  .sound-feature-prompt{padding:10px 11px;margin-bottom:8px}
  .sound-feature-prompt p{font-size:.56rem;line-height:1.38}
  .sound-feature-output{padding:10px}
  .sound-feature-player{grid-template-columns:38px minmax(0,1fr);gap:8px;margin:10px 0 7px}
  .sound-feature-play{width:38px;height:38px}
  .sound-feature-time{grid-column:2;text-align:right;margin-top:-5px}
  .sound-feature-wave{height:38px}
  .sound-feature-progress{margin-left:46px}
  .sound-feature-meta{gap:5px;flex-wrap:wrap;font-size:.4rem}
  .sound-feature-meta b{margin-left:0}
}
@media(max-width:380px){
  .sound-feature-prompt-head span{display:none}
  .sound-feature-output-head strong{font-size:.59rem}
  .sound-feature-wave i:nth-child(even){display:none}
  .sound-feature-meta span:first-child{display:none}
}