/* Public demo listening area */
.demo-section{padding:86px 0 28px;scroll-margin-top:20px}.demo-heading{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:30px}.demo-heading h2{margin-bottom:0}.demo-heading>p{font-size:16px;line-height:1.7;max-width:340px;color:var(--muted);margin:0 0 3px}.demo-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:24px}.demo-filter{border:1px solid #d9d5e0;background:#fff;border-radius:24px;padding:11px 18px;font-size:13px;min-height:43px}.demo-filter[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.demo-filter:hover{border-color:#716983}.demo-select-label{margin-left:auto;position:relative}.demo-select-label select{appearance:none;border:1px solid #d9d5e0;border-radius:24px;background:#fff;padding:11px 36px 11px 17px;font:inherit;font-size:13px;color:var(--ink);max-width:240px;min-height:43px;cursor:pointer}.demo-select-label:after{content:"";position:absolute;width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;right:17px;top:17px;transform:rotate(45deg);pointer-events:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.demo-panel{display:grid;grid-template-columns:340px 1fr;background:#f1eef6;border-radius:24px;padding:24px;gap:40px;align-items:stretch}.demo-art{position:relative;background:#d5efe5;min-height:360px;border-radius:14px;overflow:hidden;color:#fff}.demo-art>img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.demo-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#14111e10 30%,#14111ec4)}.demo-art-brand{position:absolute;top:24px;left:24px;z-index:1;display:flex;align-items:center;gap:7px;font-size:15px;letter-spacing:2px;font-weight:600}.demo-art-brand svg{width:24px;height:24px}.demo-art-title{position:absolute;left:25px;right:25px;bottom:26px;z-index:1}.demo-art-title h3{font-size:32px;letter-spacing:-1.1px;line-height:1.15;font-weight:500;margin:0 0 12px}.demo-art-title p{font-size:12px;margin:0;color:#efebf3}.demo-eq{position:absolute;right:24px;top:27px;z-index:1;display:flex;align-items:end;height:18px;gap:3px}.demo-eq i{display:block;background:var(--mint);width:3px;height:5px;border-radius:3px}.demo-eq i:nth-child(2){height:14px}.demo-eq i:nth-child(3){height:9px}.demo-eq i:nth-child(4){height:18px}.is-playing .demo-eq i{animation:demo-level .7s ease-in-out infinite alternate}.is-playing .demo-eq i:nth-child(2){animation-delay:-.3s}.is-playing .demo-eq i:nth-child(3){animation-delay:-.6s}.is-playing .demo-eq i:nth-child(4){animation-delay:-.15s}@keyframes demo-level{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.demo-main{padding:12px 18px 10px 0;min-width:0}.demo-title-row{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:22px}.demo-title-row h3{font-size:28px;font-weight:500;letter-spacing:-1px;margin:0 0 8px}.demo-subtitle{font-size:13px;color:var(--muted);margin:0;line-height:1.6}.demo-no-signup{font-size:11px;color:#70677b;border:1px solid #d8d2e1;border-radius:7px;padding:6px 9px;white-space:nowrap;margin-top:4px}.demo-control-row{display:flex;align-items:center;gap:15px;margin:22px 0 18px}.audio-icon-button{border:0;border-radius:50%;background:transparent;display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;padding:10px;color:var(--ink)}.audio-icon-button:hover{background:#dfd9e9}.audio-icon-button svg{width:20px;height:20px}.demo-play{width:59px;height:59px;background:var(--mint);padding:18px}.demo-play:hover{background:#77e8d4}.demo-play svg{width:25px;height:25px}.demo-volume{margin-left:auto;display:flex;align-items:center;gap:8px}.demo-volume input{width:85px;accent-color:#655976;height:4px}.demo-timeline{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:12px;font-size:11px;color:#6e657b;margin-bottom:20px}.demo-timeline time:last-child{text-align:right}.demo-seek{appearance:none;height:4px;width:100%;background:linear-gradient(to right,#7966a1 0 var(--progress,0%),#d6cfe0 var(--progress,0%) 100%);border-radius:4px;cursor:pointer;margin:0}.demo-seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#625277;border-radius:50%}.demo-seek::-moz-range-thumb{width:12px;height:12px;background:#625277;border:0;border-radius:50%}.demo-track-list{list-style:none;padding:0;margin:0}.demo-track{display:flex;align-items:center;gap:13px;border:0;background:transparent;width:100%;border-radius:9px;padding:11px 12px;min-height:43px;text-align:left;font-size:13px}.demo-track:hover{background:#e7e1ef}.demo-track[aria-current=true]{background:#e4ddec}.demo-track-number{width:18px;color:#877b92;font-size:11px;flex-shrink:0;text-align:center}.demo-track[aria-current=true] .demo-track-number{color:#453257}.demo-track-name{flex:1}.demo-track time{color:#7b7087;font-size:11px}.demo-track-indicator{width:13px;height:13px}.demo-status{font-size:11px;color:#746b7d;margin:15px 0 0;min-height:17px;line-height:1.55}.demo-status.is-error{color:#9b3b3b}.demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.demo-bottom p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.demo-bottom a{font-size:13px;border-bottom:1px solid;text-underline-offset:4px;white-space:nowrap}
.demo-empty{padding:20px 0}.demo-empty p{font-size:14px;line-height:1.7;color:#766b82;max-width:470px;margin:0 0 22px}.demo-empty .btn{font-size:13px;min-height:46px;padding:11px 18px}.demo-panel [hidden]{display:none!important}.demo-panel button:disabled{opacity:.4;cursor:default}.demo-art.no-cover{background:linear-gradient(145deg,#919ab2,#61527e)}.demo-art.no-cover>img{display:none}
.mini-player{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 40px));padding:10px 16px 10px 10px;border:1px solid #dcd6e5;border-radius:20px;background:#fffefefa;box-shadow:0 12px 60px #17151d30;z-index:40;display:flex;align-items:center;gap:14px;backdrop-filter:blur(15px)}.mini-player[hidden]{display:none}.mini-art{width:45px;height:45px;border-radius:10px;object-fit:cover;background:#eae5f5}.mini-title{border:0;background:none;flex:1;text-align:left;padding:0;min-width:0}.mini-title strong{display:block;font-size:13px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mini-title span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.mini-player .demo-play{width:43px;height:43px;padding:11px}.mini-player .demo-play svg{width:20px;height:20px}.mini-player .audio-icon-button{width:36px;height:36px}.mini-player .demo-play{width:43px;height:43px}.mini-close{border:0;background:none;min-width:28px;min-height:36px;font-size:21px;color:#766d83}
button.orb{padding:0;cursor:pointer;font-family:inherit;color:var(--mint)}button.orb:hover{filter:brightness(1.12)}button.orb:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.orb .pause-icon{margin-left:0}.device-stage .screen-reactions{pointer-events:none}
@media(max-width:1150px){.demo-panel{grid-template-columns:290px 1fr;gap:30px}.demo-main{padding-right:4px}.demo-art{min-height:350px}.demo-title-row h3{font-size:25px}.demo-art-title h3{font-size:28px}.demo-filter{padding:10px 14px}.demo-filters{gap:7px}.demo-select-label{margin-left:0}}
@media(max-width:900px){.demo-heading{display:block}.demo-heading>p{margin-top:20px;max-width:480px;font-size:14px}.demo-panel{grid-template-columns:230px 1fr;gap:25px;padding:19px}.demo-no-signup{display:none}.demo-main{padding:9px 0}.demo-title-row h3{font-size:22px}.demo-art-title{left:20px;right:20px}.demo-art-title h3{font-size:25px}.demo-art-brand{left:20px;font-size:13px}.demo-eq{right:20px}.demo-control-row{gap:9px}.demo-volume input{width:60px}.demo-seek{min-width:0}.demo-timeline{gap:7px;grid-template-columns:30px 1fr 30px}.demo-filter{font-size:12px;padding:10px 13px}.demo-select-label select{font-size:12px;max-width:215px}.demo-bottom p{max-width:410px}}
@media(max-width:650px){.demo-section{padding-top:58px;padding-bottom:6px}.demo-heading{margin-bottom:25px}.demo-heading h2{font-size:37px;letter-spacing:-1.9px}.demo-heading>p{font-size:13px;line-height:1.65;max-width:320px;margin-top:17px}.demo-filters{gap:7px;margin-bottom:18px}.demo-filter{padding:9px 12px;min-height:38px;font-size:11px}.demo-select-label select{min-height:38px;font-size:11px;padding:9px 30px 9px 13px;max-width:200px}.demo-select-label:after{top:14px;right:14px}.demo-panel{display:block;padding:18px;border-radius:18px}.demo-art{min-height:150px;height:150px;border-radius:11px}.demo-art>img{object-position:center 44%}.demo-art-title{bottom:19px}.demo-art-title h3{font-size:25px;margin-bottom:5px}.demo-art-title p{font-size:10px}.demo-art-brand{top:18px;left:20px;font-size:10px}.demo-art-brand svg{width:19px;height:19px}.demo-eq{top:20px;right:20px}.demo-main{padding:22px 0 0}.demo-title-row{margin-bottom:16px}.demo-title-row h3{font-size:21px;letter-spacing:-.7px;margin-bottom:6px}.demo-subtitle{font-size:11px}.demo-control-row{gap:12px;margin:19px 0 18px}.demo-play{width:55px;height:55px;padding:15px}.demo-volume{gap:3px}.demo-volume input{width:58px}.audio-icon-button{width:33px;height:33px;padding:8px}.demo-play{width:55px;height:55px}.demo-volume .audio-icon-button{width:27px;height:27px;padding:5px}.demo-track{font-size:12px;padding:11px 9px;gap:9px}.demo-track time{font-size:10px}.demo-timeline{font-size:10px;margin-bottom:15px}.demo-status{font-size:10px;margin-top:13px}.demo-bottom{display:block;margin-top:17px}.demo-bottom p{font-size:10px;max-width:320px;line-height:1.65;margin-bottom:11px}.demo-bottom a{font-size:12px}.demo-empty{padding:8px 0 2px}.demo-empty p{font-size:12px}.demo-empty .btn{font-size:11px}.mini-player{bottom:12px;width:calc(100% - 24px);padding:9px 10px 9px 9px;gap:10px;border-radius:16px}.mini-art{width:40px;height:40px;border-radius:8px}.mini-title strong{font-size:11px}.mini-title span{font-size:9px}.mini-player>.audio-icon-button[data-demo-next]{display:none}.mini-close{min-width:23px;padding:0}.mini-player .demo-play{width:39px;height:39px}}
@media(max-width:365px){.demo-filter{padding:8px 10px;font-size:10px}.demo-panel{padding:15px}.demo-control-row{gap:7px}.demo-volume input{width:47px}.demo-volume .audio-icon-button{width:24px;height:24px}.demo-play{width:51px;height:51px}.demo-art-title h3{font-size:23px}.demo-art-title{left:16px;right:16px}.demo-title-row h3{font-size:20px}.demo-heading h2{font-size:34px}}