.hero-demo{align-self:center;--phone-width:360px}
.demo-instruction{position:relative;margin:14px 0 8px;text-align:center;font-size:13px;line-height:1.7;color:#bdb6ac;z-index:2}
.demo-instruction strong{color:#ffd59a;font-size:12px;letter-spacing:1px;font-weight:550}
.demo-stage.soundcloud-demo-stage{height:620px;margin-top:5px;transform:none}
.soundcloud-demo-stage .stage-glow{width:100%;max-width:620px;height:680px;top:46%;background:radial-gradient(ellipse at center,#ffce8b25 0%,#f68c571c 28%,#f68c5707 48%,transparent 68%)}
.sc-phone{position:absolute;top:14px;left:50%;width:280px;padding:7px;border:1px solid #62584c;border-radius:32px;background:linear-gradient(130deg,#3b3732,#181818 45%,#3b332b);box-shadow:0 36px 90px #0009,0 0 0 1px #0008,0 1px 0 #ffffff38 inset;transform:translateX(-50%);isolation:isolate}
.sc-viewport{position:relative;width:100%;aspect-ratio:591/1280;overflow:hidden;border-radius:25px;background:#111;container-type:inline-size;font-family:Arial,Helvetica,sans-serif}
.hero-demo .demo-stage.soundcloud-demo-stage{height:auto;display:flex;justify-content:center;padding:14px 0 32px}
.hero-demo .sc-phone{position:relative;inset:auto;width:min(var(--phone-width),calc(100% - 8px));padding:9px;border-radius:45px;border-color:#9d999080;background:linear-gradient(115deg,#b8b3a9 0%,#565451 3%,#242424 12%,#111 48%,#353431 87%,#86827a 97%,#c1baad 100%);box-shadow:0 36px 80px #0009,0 8px 24px #0005,0 0 0 1px #000c,0 0 0 2px #181818 inset,0 1px 0 2px #ffffff30 inset;transform:none}
.hero-demo .sc-phone::before,.hero-demo .sc-phone::after{content:"";position:absolute;width:3px;border-radius:3px;background:linear-gradient(90deg,#5d5b57,#a39e93,#45433f);box-shadow:0 1px 2px #0007;pointer-events:none}
.hero-demo .sc-phone::before{left:-4px;top:19%;height:40px;box-shadow:0 53px 0 #5d5a54,0 1px 2px #0007}
.hero-demo .sc-phone::after{right:-4px;top:27%;height:66px}
.hero-demo .sc-viewport{border-radius:35px;box-shadow:0 0 0 1px #000,0 0 0 2px #ffffff08}
.hero-demo .sc-viewport::after{content:"";position:absolute;z-index:8;bottom:1.1%;left:36%;width:28%;height:4px;border-radius:4px;background:#f4f4f4;opacity:.8;pointer-events:none}
.sc-scene{position:absolute;inset:0;overflow:hidden;transition:transform .75s cubic-bezier(.22,.8,.25,1),opacity .5s}
.sc-screen-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.sc-player{z-index:1;transform:translateX(0);opacity:1}
.sc-messages{z-index:2;transform:translateX(101%);opacity:0;background:#111}
.soundcloud-demo-stage[data-step="2"] .sc-player{transform:translateX(-25%);opacity:.25}
.soundcloud-demo-stage[data-step="2"] .sc-messages{transform:translateX(0);opacity:1}
.sc-statusbar{position:absolute;z-index:5;inset:0 0 auto;height:5.1%;background:#111;display:flex;align-items:center;justify-content:space-between;padding:0 8.4% 0 9.1%;color:#f4f4f4;font-size:4.2cqi;line-height:1}
.sc-statusbar>strong{font-weight:600;letter-spacing:-.15cqi}
.sc-status-icons{display:flex;align-items:center;gap:1.8cqi}
.sc-status-icons svg{width:11.8cqi;height:3.4cqi}
.sc-battery{position:relative;background:#e6c63e;border-radius:1.05cqi;color:#151515;font-size:2.9cqi;font-weight:600;width:6.6cqi;height:3.3cqi;display:grid;place-items:center;box-shadow:1.1cqi 0 0 -.65cqi #777}
.sc-comment-input{position:absolute;top:78.35%;left:3.72%;width:92.38%;height:5.2%;border:1px solid #5a5b5a;border-radius:8cqi;background:linear-gradient(100deg,#292b2d,#33373a);display:flex;align-items:center;justify-content:space-between;padding:0 3.5cqi;color:#d5d5d5;font-size:2.9cqi;box-shadow:0 0 0 0 #ff854f00;transition:box-shadow .35s,border-color .35s}
.soundcloud-demo-stage[data-phase="typing"] .sc-comment-input{border-color:#d2a375;box-shadow:0 0 0 3px #ff854f18}
.sc-input-text{display:flex;align-items:center;min-width:0}
.sc-input-placeholder{color:#b5b7b8;display:none}
.sc-input-text:has(.typed-comment:empty) .sc-input-placeholder{display:inline}
.sc-comment-input .typed-comment{font:inherit;letter-spacing:.04em;line-height:1;min-height:0;color:#fff}
.sc-caret{display:none;width:1px;height:3.5cqi;background:#ff854f;margin-left:.5cqi}
.soundcloud-demo-stage[data-phase="typing"] .sc-caret{display:block;animation:sc-caret-blink .8s steps(2) infinite}
.sc-reactions{font-size:5.3cqi;letter-spacing:1.1cqi;white-space:nowrap}
.sc-send{display:none;align-items:center;justify-content:center;height:6.9cqi;width:6.9cqi;background:#ff7946;color:#fff;border-radius:50%;font-size:5.2cqi;line-height:1}
.soundcloud-demo-stage[data-phase="typing"] .sc-reactions{display:none}
.soundcloud-demo-stage[data-phase="typing"] .sc-send{display:flex}
.sc-comment-sheet{position:absolute;z-index:3;inset:auto 0 0;height:33.4%;border-radius:4cqi 4cqi 0 0;background:#111;border-top:1px solid #3b3b3b;padding:1.6cqi 3.7cqi;transform:translateY(103%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s;box-shadow:0 -10px 30px #0004}
.soundcloud-demo-stage:is([data-phase="posted"],[data-phase="reply"]) .sc-comment-sheet{transform:translateY(0);opacity:1}
.sc-sheet-handle{height:.6cqi;width:8cqi;margin:0 auto 4cqi;border-radius:5px;background:#606060}
.sc-sheet-title{display:flex;align-items:center;gap:1.5cqi;font-size:3.6cqi;font-weight:600;padding-bottom:4cqi;border-bottom:1px solid #282828;color:#eee}
.sc-sheet-title>span:first-child{font-weight:400;color:#858585;font-size:2.9cqi}
.sc-sheet-close{margin-left:auto;font-size:5cqi;color:#999;font-weight:400}
.sc-posted-comment,.sc-artist-reply{display:flex;align-items:flex-start;gap:2cqi;padding-top:4cqi;font-size:3.1cqi;color:#eee}
.sc-avatar{width:7cqi;height:7cqi;display:grid;place-items:center;border-radius:50%;background:#414942;font-size:3cqi;color:#eee9d1;flex-shrink:0}
.sc-posted-comment strong,.sc-artist-reply strong{font-weight:600;font-size:2.9cqi;display:block}
.sc-posted-comment strong>span,.sc-artist-reply strong>span{color:#858585;font-weight:400;font-size:2.4cqi;margin-left:1cqi}
.sc-posted-comment p,.sc-artist-reply p{font:inherit;line-height:1.7;margin-top:.7cqi}
.sc-comment-heart{margin-left:auto;font-size:4cqi;color:#bbb;line-height:1}
.sc-artist-reply{padding-left:9cqi;padding-top:4cqi;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.sc-malesh{background:#65442e;color:#ffd3a7}
.soundcloud-demo-stage[data-phase="reply"] .sc-artist-reply{opacity:1;transform:none}
.sc-dm-identity{position:absolute;top:5.3%;left:12.4%;right:5%;height:4.9%;background:#111;display:flex;align-items:center;gap:2.7cqi;color:#fff;font-size:3.9cqi;padding-left:1.5cqi}
.sc-dm-identity>strong{font-weight:600}
.sc-dm-avatar{display:grid;place-items:center;border-radius:50%;width:7.7cqi;height:7.7cqi;background:linear-gradient(145deg,#a27652,#382b24);font-size:3.8cqi;color:#ffe0b1}
.sc-dm-content{position:absolute;inset:10.2% 0 15.85%;background:#111;color:#eee;padding:1.4cqi 3.72cqi;font-size:3.55cqi;line-height:1.5}
.sc-dm-date{display:block;text-align:center;font-size:3.1cqi;color:#bbb;margin-bottom:5cqi}
.sc-native-message{display:table;border:1px solid #3d3d3d;border-radius:1.7cqi;padding:1.8cqi 1.7cqi;max-width:93%;font-size:3.55cqi;line-height:1.55;background:#111;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;overflow-wrap:anywhere}
.sc-native-time{display:block;margin-top:1.2cqi;margin-bottom:4cqi;font-size:2.8cqi;color:#a4a4a4;opacity:0;transition:opacity .4s}
.sc-reward-text{margin-top:3cqi}
.sc-reward-link{margin-top:3cqi}
.sc-example-url{color:#d5eaff;text-decoration:underline;text-underline-offset:.5cqi}
.soundcloud-demo-stage:is([data-phase="greeting"],[data-phase="reward"],[data-phase="delivered"]) .sc-greeting{opacity:1;transform:none}
.soundcloud-demo-stage:is([data-phase="reward"],[data-phase="delivered"]) :is(.sc-reward-text,.sc-reward-link,.sc-reward-time){opacity:1;transform:none}
.sc-delivery-badge{position:absolute;z-index:6;left:50%;bottom:10px;transform:translate(-50%,12px);width:236px;display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid #a97a484a;border-radius:12px;background:#29231fee;box-shadow:0 10px 25px #0005;backdrop-filter:blur(14px);opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}
.sc-delivery-badge strong{display:block;font-size:12px;font-weight:500;color:#f0d5b4}
.sc-delivery-badge div>span{display:block;font-size:9px;margin-top:4px;color:#aa947d}
.sc-check{margin-left:auto;border-radius:50%;background:#ffbc771a;color:#f1c99a;border:1px solid #bd94624d;width:24px;height:24px;display:grid;place-items:center;font-size:12px}
.soundcloud-demo-stage[data-phase="delivered"] .sc-delivery-badge{opacity:1;transform:translate(-50%,0)}
.demo-bottomline{gap:10px}
.demo-bottomline .concept-label{font-size:9px;max-width:175px;line-height:1.5}
.demo-steps button{color:#777168;font-size:10px;background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:6px 0;font-family:inherit;white-space:nowrap;transition:color .3s,border-color .3s}
.demo-steps button.active{color:#ffd59a;border-color:#b17f51}
.demo-steps button:hover{color:#f4d5af}
@keyframes sc-caret-blink{50%{opacity:0}}
@media(min-width:1500px){.demo-stage.soundcloud-demo-stage{transform:none}}
@media(max-width:1150px){.sc-phone{width:266px}.demo-stage.soundcloud-demo-stage{height:590px}.demo-instruction{font-size:12px}.demo-bottomline .concept-label{font-size:8px;max-width:125px}.demo-steps button{font-size:9px}.sc-delivery-badge{bottom:5px;width:224px}}
@media(max-width:900px){.sc-phone{width:280px}.demo-stage.soundcloud-demo-stage{height:620px}.demo-instruction{font-size:13px}.demo-bottomline .concept-label{font-size:9px;max-width:none}.demo-steps button{font-size:10px}}
@media(max-width:600px){.hero-demo{max-width:375px}.demo-instruction{font-size:12px;margin-top:10px}.demo-instruction strong{font-size:11px}.sc-phone{width:270px;padding:6px;border-radius:29px}.sc-viewport{border-radius:23px}.demo-stage.soundcloud-demo-stage{height:600px}.sc-delivery-badge{bottom:9px}.demo-bottomline{margin-top:8px}.demo-bottomline .concept-label{font-size:8px;max-width:140px}.demo-steps{gap:10px}.demo-steps button{font-size:8px}.sc-delivery-badge strong{font-size:11px}.sc-delivery-badge div>span{font-size:9px}}
@media(max-width:380px){.sc-phone{width:min(244px,calc(100% - 8px))}.demo-stage.soundcloud-demo-stage{height:548px}.sc-delivery-badge{bottom:5px;width:206px;padding:10px 12px}.demo-bottomline{flex-direction:column;align-items:center;gap:7px}.demo-bottomline .concept-label{max-width:none}.demo-steps{gap:18px}.demo-steps button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.sc-scene,.sc-native-message,.sc-native-time,.sc-artist-reply,.sc-delivery-badge,.sc-comment-sheet{transition:none!important}.sc-caret{animation:none!important}}
@media(min-width:901px){.hero{padding-top:52px;padding-bottom:64px}}
@media(max-width:1150px){.hero-demo{--phone-width:340px}}
@media(max-width:900px){.hero-demo{--phone-width:380px}}
@media(max-width:600px){.hero-demo{--phone-width:340px}.hero-demo .sc-phone{border-radius:41px}.hero-demo .sc-viewport{border-radius:31px}}
@media(max-width:380px){.hero-demo .sc-phone{padding:7px;border-radius:36px}.hero-demo .sc-viewport{border-radius:28px}.hero-demo .sc-viewport::after{height:3px}}