.music-examples{padding:110px max(6vw,28px);display:grid;grid-template-columns:minmax(280px,.75fr) minmax(420px,1.25fr);gap:clamp(35px,7vw,110px);align-items:center;background:radial-gradient(circle at 85% 30%,#6d2cff25,transparent 36%),#0d0d11;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16}
.example-intro h2{margin:22px 0 24px;font-size:clamp(2.5rem,5vw,5.8rem);line-height:.88;text-transform:uppercase}.example-intro h2 i{color:transparent;-webkit-text-stroke:1px #f3efe8;font-style:normal}.example-intro p{max-width:590px;color:#aaa6b0;font-size:1.02rem;line-height:1.65}
.example-list{display:grid;gap:24px}.example-card{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:390px;border:1px solid #3b3744;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#201d27,#111116);box-shadow:0 30px 90px #0008}.example-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(circle at 30% 20%,#c8ff3d66,transparent 35%),linear-gradient(155deg,#6519e5,#ff3cac);position:relative;overflow:hidden}.example-cover-pop{background:radial-gradient(circle at 30% 20%,#c8ff3d66,transparent 35%),linear-gradient(155deg,#ff3c96,#6b38ff 58%,#14c9c9)}.example-cover-pop-rock{background:radial-gradient(circle at 30% 20%,#ffda3d66,transparent 35%),linear-gradient(155deg,#ff3b30,#8b1fca 60%,#191b3b)}.example-cover-ballad{background:radial-gradient(circle at 30% 20%,#ffd8f566,transparent 35%),linear-gradient(155deg,#814fc8,#d76ba8 58%,#493878)}.example-cover:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #ffffff3c;border-radius:50%;transform:translate(55px,120px)}.example-cover span{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:#c9ff3d;color:#09090c;font-size:44px;box-shadow:0 15px 45px #0005}.example-cover small{font-weight:900;letter-spacing:.17em;font-size:.65rem}
.example-content{padding:34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.example-number{color:#c9ff3d;font-size:.65rem;font-weight:900;letter-spacing:.16em}.example-content h3{margin:12px 0 10px;font-size:clamp(1.65rem,3vw,2.65rem);line-height:1.05}.example-content p{margin:0 0 22px;color:#aaa6b0;line-height:1.55}.example-content audio{width:100%;height:42px;margin-bottom:18px;accent-color:#c9ff3d}.example-start{border:0;border-radius:10px;background:#c9ff3d;color:#09090c;padding:13px 18px;font-weight:900;cursor:pointer}.example-disclaimer{display:block;margin-top:14px;color:#77727f;line-height:1.45}
.chat-samples-group{margin:6px 0 10px;border:1px solid #b9ff27;border-radius:999px;background:#19181e;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(185,255,39,.15);transition:border-radius .2s}.chat-samples-group.expanded{border-radius:19px}.samples-group-toggle{display:flex;width:100%;align-items:center;gap:8px;margin:0;padding:9px 11px;border:0;border-radius:999px;background:transparent;color:#f5f1eb;cursor:pointer;text-align:left}.samples-group-toggle strong{font-size:.8rem;line-height:1.2}.chat-samples-group.expanded>.samples-group-toggle .sample-chevron{transform:rotate(180deg)}.samples-group-panel{padding:0 8px 8px}.samples-group-panel[hidden]{display:none}.chat-style-sample{margin:5px 0;border:1px solid #514b5a;border-radius:999px;background:#121217;overflow:hidden;transition:border-color .2s,border-radius .2s,box-shadow .2s}.chat-style-sample.expanded{border-color:#b9ff27;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(185,255,39,.16)}.chat-style-sample .sample-toggle{display:flex;width:100%;align-items:center;gap:8px;margin:0;padding:8px 11px;border:0;border-radius:999px;background:transparent;color:#f5f1eb;cursor:pointer;text-align:left}.sample-play-icon{display:grid;width:24px;aspect-ratio:1;place-items:center;border-radius:50%;background:#c9ff3d;color:#09090c;font-size:.62rem;padding-left:1px;flex:0 0 auto}.chat-style-sample .sample-toggle strong{font-size:.79rem;line-height:1.2}.sample-chevron{margin-left:auto;color:#b9ff27;font-size:1rem;line-height:1;transition:transform .2s}.chat-style-sample.expanded .sample-chevron{transform:rotate(180deg)}.sample-panel{padding:0 10px 9px}.sample-panel[hidden]{display:none}.chat-style-sample audio{display:block;width:100%;height:28px;accent-color:#c9ff3d}.chat-style-sample .sample-select{width:100%;margin-top:6px;padding:7px 10px;border:0;border-radius:999px;background:#c9ff3d;color:#09090c;font-size:.72rem;font-weight:900;cursor:pointer}
@media(max-width:900px){.music-examples{grid-template-columns:1fr;padding:78px 18px}.example-card{grid-template-columns:155px minmax(0,1fr)}}@media(max-width:600px){.music-examples{padding:64px 14px;gap:28px}.example-card{grid-template-columns:1fr}.example-cover{min-height:155px;flex-direction:row}.example-cover span{width:70px;height:70px;font-size:33px}.example-content{padding:22px}.example-content h3{font-size:1.65rem}}
@media(max-width:480px){.chat-samples-group{width:100%;max-width:100%;margin:5px 0 9px}.samples-group-toggle{min-height:40px;padding:8px 10px}.samples-group-toggle strong{font-size:.76rem}.samples-group-panel{padding:0 6px 6px}.chat-style-sample{margin:4px 0}.chat-style-sample .sample-toggle{min-height:38px;padding:7px 9px}.chat-style-sample .sample-toggle strong{font-size:.75rem}.sample-play-icon{width:22px}.sample-panel{min-width:0;padding:0 7px 7px}.chat-style-sample audio{max-width:100%;min-width:0;height:27px}.chat-style-sample .sample-select{margin-top:5px;padding:7px 8px;font-size:.69rem}}
.demo-limit-warning{display:grid;gap:5px;margin:12px 0;padding:13px 14px;border:1px solid #ffcf5966;border-radius:13px;background:#ffcf5914;color:#f7f2e9;line-height:1.4}.demo-limit-warning[hidden]{display:none}.demo-limit-warning strong{color:#ffda72;font-size:.86rem}.demo-limit-warning span{color:#bdb7c4;font-size:.76rem}