.icon-button {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #1f2937;
    border: 1px solid #374151;
    color: #f9fafb;
}

.icon-button:hover {
    background: #374151;
}

.icon-button::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.icon-back::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 5.5 L9 12 L15.5 18.5' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 5.5 L9 12 L15.5 18.5' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-pause::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='5' width='3.5' height='14' rx='1' fill='black'/%3E%3Crect x='13.5' y='5' width='3.5' height='14' rx='1' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='5' width='3.5' height='14' rx='1' fill='black'/%3E%3Crect x='13.5' y='5' width='3.5' height='14' rx='1' fill='black'/%3E%3C/svg%3E");
}

.icon-volume-on::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10 H8.5 L14 5.8 V18.2 L8.5 14 H4.5 Z' fill='black'/%3E%3Cpath d='M16.2 8.5 C18 10.3 18 13.7 16.2 15.5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10 H8.5 L14 5.8 V18.2 L8.5 14 H4.5 Z' fill='black'/%3E%3Cpath d='M16.2 8.5 C18 10.3 18 13.7 16.2 15.5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-volume-off::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10 H8.5 L14 5.8 V18.2 L8.5 14 H4.5 Z' fill='black'/%3E%3Cpath d='M17 9 L21 15 M21 9 L17 15' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 10 H8.5 L14 5.8 V18.2 L8.5 14 H4.5 Z' fill='black'/%3E%3Cpath d='M17 9 L21 15 M21 9 L17 15' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.card {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    min-height: 160px;
}

.pause-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .78);
    cursor: pointer;
}

.pause-overlay-content {
    font-size: clamp(56px, 12vw, 150px);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}