*{
margin:0;
padding:0;
box-sizing:border-box
}

:root{
--g:#1db954;
--w:#fff;
--w1:#ffffff10;
--w2:#ffffff18;
--w3:#ffffff60;
--bg:#06060a;
--m:'DM Mono',monospace;
--s:'Cormorant Garamond',serif
}

html,body{
width:100%;
min-height:100%;
background:var(--bg)
}

body{
color:var(--w);
font-family:var(--s);
overflow-x:hidden;
overflow-y:auto;
-webkit-font-smoothing:antialiased
}

.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,#1db95415,transparent 30%),
radial-gradient(circle at 80% 80%,#ffffff08,transparent 35%),
#06060a;
z-index:0
}

.scene{
position:relative;
z-index:1;
min-height:100vh;
display:grid;
place-items:center;
padding:24px
}

.card{
width:min(720px,100%);
display:flex;
align-items:center;
background:#ffffff08;
border:1px solid var(--w1);
border-radius:28px;
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
overflow:hidden;
position:relative;
box-shadow:
0 30px 100px #0008,
inset 0 1px 0 #ffffff10;
transition:.4s
}

.left{
padding:30px 0 30px 30px;
display:flex;
flex-direction:column;
gap:16px;
align-items:center;
flex-shrink:0
}

.frame{
width:210px;
height:210px;
aspect-ratio:1/1;
border-radius:18px;
overflow:hidden;
background:#111;
position:relative;
flex-shrink:0;
box-shadow:0 20px 60px #0008
}

.frame img{
width:100%;
height:100%;
object-fit:cover;
display:none
}

.shine{
position:absolute;
inset:0;
background:linear-gradient(135deg,#ffffff18,transparent 50%);
pointer-events:none
}

.live{
display:none;
align-items:center;
gap:8px;
padding:7px 14px;
border-radius:999px;
border:1px solid #1db95430;
background:#1db95410;
font:300 10px var(--m);
letter-spacing:.18em;
color:var(--g);
text-transform:uppercase
}

.live span{
width:6px;
height:6px;
border-radius:50%;
background:var(--g);
animation:p 1.2s infinite
}

.topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}

.right{
flex:1;
padding:34px 34px 34px 26px;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0
}

.right small{
font:300 10px var(--m);
letter-spacing:.3em;
color:#ffffff50;
text-transform:uppercase;
margin-bottom:18px
}

.right h1{
font-size:clamp(28px,4vw,44px);
font-weight:300;
font-style:italic;
line-height:1.05;
margin-bottom:10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.right p{
font:300 12px var(--m);
letter-spacing:.12em;
color:var(--w3);
margin-bottom:18px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

.progress{
width:100%;
height:4px;
background:#ffffff10;
border-radius:999px;
overflow:hidden;
margin-bottom:12px
}

.progress div{
width:0;
height:100%;
background:var(--g);
border-radius:999px;
transition:width 1s linear
}

.times{
display:flex;
justify-content:space-between;
font:300 10px var(--m);
letter-spacing:.12em;
color:#ffffff45;
margin-bottom:28px
}

.right a{
width:max-content;
padding:12px 22px;
border-radius:999px;
border:1px solid var(--w2);
font:300 11px var(--m);
letter-spacing:.15em;
color:var(--w);
text-decoration:none;
transition:.25s;
display:flex;
align-items:center;
justify-content:center
}

.right a:hover{
border-color:var(--g);
background:#1db95410;
color:var(--g)
}

.empty{
display:none;
font:300 11px var(--m);
letter-spacing:.25em;
color:#ffffff35;
text-transform:uppercase;
text-align:center
}

@keyframes p{
50%{
opacity:.35;
transform:scale(.6)
}
}

@media(max-width:680px){

.scene{
padding:16px
}

.card{
flex-direction:column;
border-radius:22px
}

.left{
width:100%;
padding:20px 20px 0
}

.frame{
width:100%;
height:auto;
max-width:none;
aspect-ratio:1/1
}

.right{
width:100%;
padding:20px 20px 24px
}

.right h1{
font-size:34px;
white-space:normal
}

.right a{
width:100%
}

}

@media(min-width:681px){

.card{
flex-direction:row
}

.frame{
width:210px;
height:210px
}

}