.listen-article{z-index:101;color:#fff;background-color:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.listen-article-bg{z-index:-1;filter:brightness(1.2);pointer-events:none;background-position:0%;background-size:25%;position:absolute;inset:0}.listen-article-bg-fade{z-index:-1;-webkit-backdrop-filter:blur(36.495px);backdrop-filter:blur(36.495px);background:linear-gradient(#0000001a,#0000001a),linear-gradient(164.03deg,#69696966 40.77%,#c3c3c300 148.75%);position:absolute;inset:0}.listen-article .content .top{max-width:calc(340/var(--size-unit)*1em);text-align:center;align-items:center;gap:calc(16/var(--size-unit)*1em);flex-direction:column;display:flex}.listen-article .content .top .tag{padding:calc(4/var(--size-unit)*1em) calc(8/var(--size-unit)*1em);background:#fff3;border-radius:100px}.listen-article .sound-player{margin-top:calc(64/var(--size-unit)*1em);width:fit-content}.listen-article .sound-player .top{justify-content:center;align-items:center;gap:calc(16/var(--size-unit)*1em);display:flex}.listen-article .sound-player .small-text{opacity:.4}.listen-article .sound-player .sound-track{width:calc(225/var(--size-unit)*1em);height:calc(122/var(--size-unit)*1em);cursor:pointer;touch-action:none;position:relative}.listen-article .sound-player .sound-track svg{opacity:.4;width:100%;height:100%;display:block}.listen-article .sound-player .sound-track .slider{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;translate:-50%}.listen-article .controls{margin-top:calc(64/var(--size-unit)*1em);justify-content:center;align-items:center;gap:calc(36/var(--size-unit)*1em);display:flex}.listen-article .controls .play-button{width:calc(64/var(--size-unit)*1em);height:calc(64/var(--size-unit)*1em);-webkit-backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));background:#ffffff26;border-radius:100px;justify-content:center;align-items:center;display:flex}.listen-article .close-button{top:calc(16/var(--size-unit)*1em);right:calc(16/var(--size-unit)*1em);width:calc(60/var(--size-unit)*1em);height:calc(60/var(--size-unit)*1em);z-index:100;-webkit-backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));cursor:pointer;background-color:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.listen-article .close-button-icon{width:100%;height:100%}.listen-article-desktop{top:calc(24/var(--size-unit)*1em);right:calc((100vw - var(--size-container))/2 + calc(24 / var(--size-unit) * 1em));z-index:90;width:calc(252/var(--size-unit)*1em);height:calc(252/var(--size-unit)*1em);padding:calc(30/var(--size-unit)*1em) calc(20/var(--size-unit)*1em);border-radius:calc(12/var(--size-unit)*1em);color:#fff;justify-content:space-between;gap:calc(32/var(--size-unit)*1em);flex-direction:column;display:flex;position:fixed;overflow:hidden}.listen-article-desktop-bg{z-index:-1;filter:brightness(1.2);pointer-events:none;background-position:0%;background-size:25%;position:absolute;inset:0}.listen-article-desktop-bg-fade{z-index:-1;-webkit-backdrop-filter:blur(36.495px);backdrop-filter:blur(36.495px);background:linear-gradient(#0000001a,#0000001a),linear-gradient(164.03deg,#69696966 40.77%,#c3c3c300 148.75%);position:absolute;inset:0}.listen-article-desktop__title{font-family:Arial,sans-serif;font-style:normal;font-weight:400;font-size:calc(16/var(--size-unit)*1em);letter-spacing:-.01em;color:#fff;text-align:center;line-height:1}.listen-article-desktop__player{justify-content:center;align-items:center;gap:calc(12/var(--size-unit)*1em);color:#fff;display:flex}.listen-article-desktop__player .small-text{opacity:.4}.listen-article-desktop__player .sound-track{min-width:0;height:calc(72/var(--size-unit)*1em);cursor:pointer;touch-action:none;flex:1;position:relative}.listen-article-desktop__player .sound-track svg{opacity:.4;width:100%;height:100%;display:block}.listen-article-desktop__player .sound-track .slider{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;translate:-50%}.listen-article-desktop .controls{justify-content:center;align-items:center;gap:calc(24/var(--size-unit)*1em);display:flex}.listen-article-desktop .controls .skip-button svg{width:calc(24/var(--size-unit)*1em);height:calc(24/var(--size-unit)*1em)}.listen-article-desktop .controls .play-button{width:calc(48/var(--size-unit)*1em);height:calc(48/var(--size-unit)*1em);-webkit-backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));backdrop-filter:blur(calc(40 / var(--size-unit) * 1em));background:#ffffff26;border-radius:100px;justify-content:center;align-items:center;display:flex}.listen-article-desktop .controls .play-button svg{width:calc(18/var(--size-unit)*1em);height:calc(18/var(--size-unit)*1em)}.listen-button{padding:calc(12/var(--size-unit)*1em);margin-top:calc(8/var(--size-unit)*1em);border-radius:calc(12/var(--size-unit)*1em);color:#fff;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.listen-button-content{align-items:center;gap:calc(12/var(--size-unit)*1em);display:flex}.listen-button-duration{opacity:.4}.listen-button-bg{z-index:-1;filter:brightness(1.2);background-position:0%;background-size:25%;position:absolute;inset:0}:where(.body--light) .listen-button-bg{opacity:.8}.listen-button-bg-fade{z-index:-1;-webkit-backdrop-filter:blur(36.495px);backdrop-filter:blur(36.495px);background:linear-gradient(#0000001a,#0000001a),linear-gradient(164.03deg,#69696966 40.77%,#c3c3c300 148.75%);position:absolute;inset:0}