.song-preview{--side: 520px;--edge: calc((630px - var(--side)) / 2);position:relative;width:1200px;height:630px;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);font-family:Inter,-apple-system,BlinkMacSystemFont,Helvetica Neue,system-ui,sans-serif}.song-preview .field{position:absolute;inset:0}.song-preview .field .grain{position:absolute;inset:0;background-image:var(--song-grain);background-repeat:repeat;mix-blend-mode:overlay}.song-preview .field .dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#00000040,#0000008c 60%,#000c)}.song-preview,.song-preview *{pointer-events:none}.song-preview .tile{position:relative;flex:none;cursor:default}.song-preview .tile .face,.song-preview .tile:hover .face{border-radius:calc(var(--side) * .12);box-shadow:0 0 0 2px #ffffff29 inset,0 24px 60px #0000008c;transform:none;transition:none}.song-preview .play{--play: calc(var(--side) * .19);position:absolute;top:calc(var(--side) * .07);right:calc(var(--side) * .07);z-index:2;width:var(--play);height:var(--play);display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#14141473;backdrop-filter:blur(16px);color:#fff}.song-preview .play svg{width:42%;height:42%;margin-left:8%}.song-preview .brand{position:relative;flex:none;height:var(--side);width:calc(var(--side) * 568 / 1627)}.song-preview .brand img{position:absolute;width:calc(var(--side) * 1672 / 1627);height:auto;left:calc(50% - var(--side) * 9.5 / 1627);top:calc(50% - var(--side) * 3.5 / 1627);transform:translate(-50%,-50%) rotate(90deg)}