/* darker chamber */

body.bestill {
background:
radial-gradient(circle at 50% 0%, rgba(255,214,102,0.08), transparent 40%),
linear-gradient(180deg,#06080f,#03050a);
}

/* frame spacing */

.meditation-frame {
padding:40px 20px 50px 20px;
position:relative;
}

/* back link */

.back-link{
position:absolute;
left:14px;
top:12px;
font-size:12px;
opacity:.6;
text-decoration:none;
}

.back-link:hover{
opacity:1;
}

/* chamber */

.meditation-chamber{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin-top:20px;
}

/* visualization */

.visualization-container{
position:relative;
width:420px;
height:260px;
margin-bottom:30px;
}

#meditationCanvas{
width:100%;
height:100%;
}

/* play button */

#playButton{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:60px;
height:60px;
border-radius:50%;
border:1px solid rgba(255,214,102,.6);
background:rgba(0,0,0,.3);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
animation:pulse 3s infinite;
}

.play-symbol{
width:0;
height:0;
border-left:14px solid #ffd666;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
margin-left:4px;
}

@keyframes pulse{
0%{box-shadow:0 0 4px rgba(255,214,102,.3);}
50%{box-shadow:0 0 12px rgba(255,214,102,.7);}
100%{box-shadow:0 0 4px rgba(255,214,102,.3);}
}

/* progress bar */

.progress-container{
width:360px;
margin-top:5px;
}

.progress-track{
height:3px;
border:1px solid rgba(255,214,102,.4);
position:relative;
}

.progress-fill{
height:100%;
width:0%;
background:#ffd666;
}

/* info */

.meditation-info{
font-size:11px;
opacity:.6;
margin-top:10px;
letter-spacing:.5px;
text-align:center;
}

body.bestill {
    min-height: 100vh;
}

.volume-container {

    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    opacity: 0.45;
    transition: opacity 0.4s ease;

}

.volume-container:hover {

    opacity: 0.9;

}

.volume-icon {

    font-size: 12px;
    opacity: 0.6;

}


/* volume slider */

#volumeControl {

    width: 140px;
    height: 3px;

    appearance: none;
    background: rgba(255,214,102,0.25);

    border-radius: 3px;
    outline: none;

}


/* slider thumb */

#volumeControl::-webkit-slider-thumb {

    appearance: none;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255,214,102,0.85);

    cursor: pointer;

    transition: transform 0.2s ease;

}

#volumeControl::-webkit-slider-thumb:hover {

    transform: scale(1.25);

}