body.style-story {
    font-family: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --widget-width: 1080px;
    --widget-height: 1920px;

    --widget-border: transparent;
    --widget-shadow: none;
    --widget-gradient: none;

    --artwork-border: transparent;
    --artwork-border-radius: 45px;

    --glow-color: transparent;
}

body.style-story.theme-dynamic,
body.style-story.theme-dynamic-advanced {
    --title-color: var(--dynamic-primary, #ff4d9d);
    --artist-color: var(--dynamic-secondary, #b0b8d8);
    --time-color: var(--dynamic-primary, #ff4d9d);

    --progress-bg: rgba(176, 184, 216, 0.45);
    --progress-fill: var(--dynamic-primary, #ff4d9d);

    --dynamic-card: #1a1e3d;
}

body.style-story .widget {
    width: var(--widget-width, 1080px);
    height: var(--widget-height, 1920px);
    flex: none;
    flex-direction: column;
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    padding: 16px 16px 154px;
    gap: 0;
}

body.style-story .widget::after {
    display: none;
}

body.style-story .widget-background {
    display: none;
}

body.style-story .widget-artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 105;
    flex-shrink: 0;
    align-self: center;
}

body.style-story .widget-artwork img {
    border: none;
    border-radius: 45px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.style-story .widget:hover .widget-artwork img {
    transform: none;
}

body.style-story .widget-status-area,
body.style-story .play-status,
body.style-story .source-icon {
    display: none;
}

body.style-story .widget-info {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 36px;
    margin-top: 36px;
}

body.style-story .widget-info-top {
    flex: none;
    height: 384px;
}

body.style-story .widget-info-text {
    background: var(--dynamic-card, var(--progress-bg, #1a1e3d));
    border-radius: 48px;
    height: 100%;
    padding: 88px 60px 88px 75px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 28px;
}

body.style-story .widget-title {
    font-family: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 110px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: none;
    max-width: 100%;
}

body.style-story .widget-title.is-overflowing {
    width: max-content;
    max-width: none;
}

body.style-story .widget-artist {
    font-family: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 70px;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.85;
    max-width: 100%;
}

body.style-story .progress-time {
    display: contents;
    margin: 0;
    font-weight: 700;
    font-size: 64px;
    position: static;
}

body.style-story .progress-time #current-time {
    order: 1;
    flex: 0 0 auto;
}

body.style-story .progress-time #total-time {
    order: 3;
    flex: 0 0 auto;
}

body.style-story .wave-row {
    display: none;
}

body.style-story .widget-progress {
    flex: 0 0 154px;
    height: 154px;
    margin-top: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: var(--dynamic-card, var(--progress-bg, #1a1e3d));
    border-radius: 40px;
    padding: 0 36px;
}

body.style-story .progress-bar {
    position: relative;
    order: 2;
    flex: 0 0 560px;
    width: 560px;
    min-width: 0;
    height: 44px;
    background: var(--progress-bg);
    border-radius: 22px;
    overflow: hidden;
    margin-top: 0;
}

body.style-story .progress-fill {
    height: 100%;
    background: var(--progress-fill);
    border-radius: 22px;
}

/* Dynamic+: blurred album art lives inside the panels at 20% opacity,
   mirroring the waveform style (shell stays background-free). */
body.style-story.theme-dynamic-advanced .widget-info-text,
body.style-story.theme-dynamic-advanced .widget-progress {
    position: relative;
    overflow: hidden;
}

body.style-story.theme-dynamic-advanced .widget-info-text::before,
body.style-story.theme-dynamic-advanced .widget-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--dynamic-artwork-url, none);
    background-size: cover;
    background-position: center;
    filter: blur(24px) saturate(1.2);
    opacity: 0.2;
    pointer-events: none;
}

body.style-story.theme-dynamic-advanced .widget-info-text > *,
body.style-story.theme-dynamic-advanced .widget-progress #current-time,
body.style-story.theme-dynamic-advanced .widget-progress #total-time,
body.style-story.theme-dynamic-advanced .widget-progress .progress-bar {
    position: relative;
    z-index: 1;
}