html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Keep the centered header stable even when the next page has a scrollbar. */
html {
    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    background-color: #111;
    color: var(--text-color, white);
    font-family: Arial, sans-serif;

    --sky-edge-gap: clamp(36px, 8vw, 110px);
    --sun-half-size: 75px;
    --moon-half-size: 65px;
}

/* HEADER */

/* BRAND */

.brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.prayer-schedule {
    position: relative;
    width: 214px;
    margin-top: 19px;
    padding: 11px 13px 10px;

    color: rgba(255, 255, 255, 0.92);
    font-family: "Cinzel", serif;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;

    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;

    backdrop-filter:
        blur(0.7px)
        saturate(108%);

    -webkit-backdrop-filter:
        blur(0.7px)
        saturate(108%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(150, 205, 255, 0.07),
        inset 1px 0 0 rgba(255, 185, 226, 0.045),
        0 8px 22px rgba(0, 0, 0, 0.025);

    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.prayer-schedule::before {
    content: none;
}

.prayer-schedule::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(16px - 1px);
    pointer-events: none;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);

    box-shadow:
        inset 8px 0 16px rgba(255, 181, 224, 0.018),
        inset -8px 0 16px rgba(146, 207, 255, 0.018);
}

.prayer-schedule > * {
    position: relative;
    z-index: 1;
}

.prayer-schedule-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 7px;
}

.prayer-schedule-label {
    font-family: "Cinzel", serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;

    opacity: 0.68;
}

.prayer-panel-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aster {
    position: relative;
    width: 16px;
    height: 16px;
    padding: 0;
    flex: 0 0 16px;

    border: 0;
    outline: none;
    background: transparent;

    cursor: pointer;
    opacity: 0.72;

    transition:
        opacity 0.35s ease,
        transform 0.55s cubic-bezier(0.22, 0.72, 0.24, 1),
        filter 0.35s ease;
}

.aster-core {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 2.4px;
    height: 2.4px;

    border-radius: 50%;
    background: #ffffff;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 3px rgba(255, 255, 255, 0.95),
        0 0 7px rgba(190, 220, 255, 0.72);

    transition: box-shadow 0.55s ease;
}

.aster::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle,
        rgba(220, 235, 255, 0.20) 0%,
        rgba(190, 215, 255, 0.055) 26%,
        transparent 66%
    );

    opacity: 0.55;
    transform: scale(0.82);

    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

.aster::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.92) 50%,
            transparent
        ) center / 1px 11px no-repeat,
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.92) 50%,
            transparent
        ) center / 11px 1px no-repeat;

    opacity: 0.62;

    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

.aster:hover,
.aster:focus-visible {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(210, 230, 255, 0.72));
}

.aster.is-active {
    opacity: 1;
    transform: rotate(90deg);
}

.aster.is-glimmering::before {
    opacity: 1;
    transform: scale(1.65);
}

.aster.is-glimmering::after {
    opacity: 1;
    transform: scale(1.35);
}

.aster.is-glimmering .aster-core {
    box-shadow:
        0 0 5px rgba(255, 255, 255, 1),
        0 0 12px rgba(190, 220, 255, 0.92),
        0 0 18px rgba(120, 175, 255, 0.48);
}

.prayer-settings-panel {
    position: relative;
    width: 238px;
    padding: 13px 14px 12px;

    color: rgba(255, 255, 255, 0.90);
    font-family: "Cinzel", serif;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;

    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;

    backdrop-filter:
        blur(0.7px)
        saturate(108%);

    -webkit-backdrop-filter:
        blur(0.7px)
        saturate(108%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(150, 205, 255, 0.07),
        inset 1px 0 0 rgba(255, 185, 226, 0.045),
        0 8px 22px rgba(0, 0, 0, 0.025);

    opacity: 0;
    transform: translateX(-16px) scale(0.965);
    transform-origin: left center;
    pointer-events: none;
    visibility: hidden;

    transition:
        opacity 0.32s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.5s;
}

.prayer-settings-panel::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(16px - 1px);
    pointer-events: none;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);

    box-shadow:
        inset 8px 0 16px rgba(255, 181, 224, 0.018),
        inset -8px 0 16px rgba(146, 207, 255, 0.018);
}

.prayer-settings-panel > * {
    position: relative;
    z-index: 1;
}

.prayer-settings-panel.is-open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    visibility: visible;

    transition:
        opacity 0.32s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

.settings-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 9px;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.settings-panel-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}

.settings-panel-subtitle {
    font-size: 7px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.42;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 104px;
    align-items: center;
    gap: 10px;

    min-height: 28px;

    font-size: 9px;
    letter-spacing: 0.45px;
}

.settings-row label,
.settings-row > span {
    opacity: 0.68;
}

.settings-row select,
.settings-row button {
    width: 104px;
    height: 23px;
    padding: 0 7px;

    color: rgba(255, 255, 255, 0.92);
    font-family: "Cinzel", serif;
    font-size: 8px;
    letter-spacing: 0.25px;

    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 7px;
    outline: none;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.settings-row select:hover,
.settings-row select:focus,
.settings-row button:hover,
.settings-row button:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 12px rgba(190, 220, 255, 0.07);
}

.settings-location-row {
    margin-top: 2px;
}

.settings-location-status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 104px;
    height: 23px;
    padding: 0 9px;

    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.028);

    color: rgba(255, 255, 255, 0.82);
    font-size: 8px;
    letter-spacing: 0.45px;
    text-align: center;
    opacity: 1;
}

.settings-location-status::before {
    content: none;
    display: none;
}

.prayer-times {
    display: grid;
    gap: 2px;
}

.prayer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 18px;

    font-size: 10px;
    letter-spacing: 0.5px;

    opacity: 0.62;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        text-shadow 0.5s ease;
}

.prayer-row time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

.prayer-row.is-current {
    opacity: 1;
    transform: translateX(2px);

    text-shadow:
        0 0 10px rgba(220, 235, 255, 0.22);
}

.prayer-next {
    margin-top: 7px;
    padding-top: 7px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);

    font-size: 8px;
    letter-spacing: 0.65px;

    opacity: 0.42;
}

h1 {
    margin: 0;
    font-family: "Cinzel", serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 5px;
    white-space: nowrap;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 30px 40px;

    z-index: 100;
}

nav {
    display: flex;
    gap: 30px;
    flex-shrink: 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-family: "Cinzel", serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

nav a:hover {
    opacity: 0.6;
}

/* FIXED SCENE */

.scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* SKY */

@property --sky-top {
    syntax: "<color>";
    inherits: true;
    initial-value: #17213a;
}

@property --sky-upper-middle {
    syntax: "<color>";
    inherits: true;
    initial-value: #3f4665;
}

@property --sky-lower-middle {
    syntax: "<color>";
    inherits: true;
    initial-value: #8e6674;
}

@property --sky-bottom {
    syntax: "<color>";
    inherits: true;
    initial-value: #d79a7b;
}

.sky {
    --sky-top: #17213a;
    --sky-upper-middle: #3f4665;
    --sky-lower-middle: #8e6674;
    --sky-bottom: #d79a7b;

    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        to bottom,
        var(--sky-top) 0%,
        var(--sky-upper-middle) 43%,
        var(--sky-lower-middle) 72%,
        var(--sky-bottom) 100%
    );

    transition:
        --sky-top 4s linear,
        --sky-upper-middle 4s linear,
        --sky-lower-middle 4s linear,
        --sky-bottom 4s linear;
}

body[data-orbit-mode="manual"] .sky {
    transition: none;
}


.sky::before,
.sky::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: none;
}

.sky::before {
    background:
        radial-gradient(
            ellipse 164% 126% at var(--sun-light-x, 50%) var(--sun-light-y, 55%),
            rgba(255, 235, 190, calc(var(--sun-light-alpha, 0) * 0.32)) 0%,
            rgba(255, 205, 142, calc(var(--sun-light-alpha, 0) * 0.18)) 24%,
            rgba(255, 173, 112, calc(var(--sun-light-alpha, 0) * 0.08)) 50%,
            rgba(255, 144, 94, calc(var(--sun-light-alpha, 0) * 0.03)) 68%,
            transparent 92%
        ),
        radial-gradient(
            ellipse 178% 132% at var(--moon-light-x, 50%) var(--moon-light-y, 52%),
            rgba(225, 235, 255, calc(var(--moon-light-alpha, 0) * 0.24)) 0%,
            rgba(186, 206, 247, calc(var(--moon-light-alpha, 0) * 0.12)) 26%,
            rgba(142, 170, 226, calc(var(--moon-light-alpha, 0) * 0.05)) 56%,
            transparent 94%
        );

    mix-blend-mode: screen;
}

.sky::after {
    background:
        radial-gradient(
            ellipse 126% 34% at var(--sun-light-x, 50%) 100%,
            rgba(255, 189, 124, calc(var(--sun-horizon-alpha, 0) * 0.68)) 0%,
            rgba(255, 154, 97, calc(var(--sun-horizon-alpha, 0) * 0.24)) 42%,
            rgba(255, 138, 90, calc(var(--sun-horizon-alpha, 0) * 0.08)) 66%,
            transparent 92%
        ),
        radial-gradient(
            ellipse 136% 36% at var(--moon-light-x, 50%) 100%,
            rgba(204, 222, 255, calc(var(--moon-horizon-alpha, 0) * 0.48)) 0%,
            rgba(152, 182, 238, calc(var(--moon-horizon-alpha, 0) * 0.14)) 46%,
            transparent 92%
        );

    mix-blend-mode: screen;
}

.sky-state {
    display: none;
}

body.state-fajr .sky {
    --sky-top: #17213a;
    --sky-upper-middle: #3f4665;
    --sky-lower-middle: #8e6674;
    --sky-bottom: #d79a7b;
}

body.state-dhuhr .sky {
    --sky-top: #559fdf;
    --sky-upper-middle: #78bced;
    --sky-lower-middle: #a8d8f7;
    --sky-bottom: #d8efff;
}

body.state-asr .sky {
    --sky-top: #6f9bbb;
    --sky-upper-middle: #a8a296;
    --sky-lower-middle: #d9af7e;
    --sky-bottom: #f2ca96;
}

body.state-maghrib .sky {
    --sky-top: #222142;
    --sky-upper-middle: #56364f;
    --sky-lower-middle: #a95159;
    --sky-bottom: #e18458;
}

body.state-isha .sky {
    --sky-top: #070a18;
    --sky-upper-middle: #0c1225;
    --sky-lower-middle: #12192b;
    --sky-bottom: #191c2a;
}


/* STARS */

/* STARS */

.stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.stars canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: brightness(0.85);
    transition: none;
}

/* Star opacity and brightness are driven continuously by JavaScript. */

/* SHOOTING STARS */

body.state-fajr #shooting-stars {
    opacity: 0.65;
}

body.state-maghrib #shooting-stars {
    opacity: 0.5;
}

body.state-isha #shooting-stars {
    opacity: 1;
}

/* POLARIS */

.polaris {
    position: relative;
    flex-shrink: 0;

    width: 32px;
    height: 32px;

    z-index: 2;
    pointer-events: auto;

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    opacity: 0;
    outline: none;
    filter: drop-shadow(0 0 5px rgba(205, 225, 255, 0.22));
    transition:
        opacity 4s ease,
        filter 0.5s ease;
}

.polaris-core {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: #ffffff;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 4px rgba(255, 255, 255, 1),
        0 0 12px rgba(190, 220, 255, 0.82),
        0 0 20px rgba(130, 180, 255, 0.28);

    transition: box-shadow 0.8s ease;
}

/* ORBIT MODE CONTROL */

.polaris:focus-visible {
    filter:
        drop-shadow(0 0 6px rgba(220, 235, 255, 0.9));
}

.polaris.is-orbit-toggle-clockwise {
    animation:
        polaris-orbit-toggle-clockwise 0.7s
        cubic-bezier(0.22, 0.72, 0.24, 1);
}

.polaris.is-orbit-toggle-counterclockwise {
    animation:
        polaris-orbit-toggle-counterclockwise 0.7s
        cubic-bezier(0.22, 0.72, 0.24, 1);
}

@keyframes polaris-orbit-toggle-clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes polaris-orbit-toggle-counterclockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}


/* SOFT HALO */

.polaris::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle,
        rgba(220, 235, 255, 0.24) 0%,
        rgba(190, 215, 255, 0.08) 24%,
        transparent 65%
    );

    opacity: 0.55;
    transform: scale(0.9);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* SHARP FOUR-POINT RAYS */

.polaris::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.9) 50%,
            transparent
        ) center / 1px 20px no-repeat,

        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.9) 50%,
            transparent
        ) center / 20px 1px no-repeat;

    opacity: 0.78;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* RANDOM GLIMMER STATE */

.polaris.is-glimmering::before {
    opacity: 1;
    transform: scale(1.8);
}

.polaris.is-glimmering::after {
    opacity: 1;
    transform: scale(1.45);
}

.polaris.is-glimmering .polaris-core {
    box-shadow:
        0 0 7px rgba(255, 255, 255, 1),
        0 0 19px rgba(190, 220, 255, 1),
        0 0 28px rgba(120, 175, 255, 0.7);
}

/* PRAYER VISIBILITY */

body.state-fajr .polaris {
    opacity: 0.82;
}

body.state-maghrib .polaris {
    opacity: 0.78;
}

body.state-dhuhr .polaris,
body.state-asr .polaris,
body.state-isha .polaris {
    opacity: 1;
}

body[data-orbit-mode="manual"] .polaris {
    filter:
        drop-shadow(0 0 7px rgba(220, 235, 255, 0.62))
        drop-shadow(0 0 14px rgba(135, 185, 255, 0.22));
}

body[data-orbit-mode="manual"] .polaris-core {
    box-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 17px rgba(190, 220, 255, 0.96),
        0 0 28px rgba(120, 175, 255, 0.46);
}

@media (prefers-reduced-motion: reduce) {

    .polaris,
    .polaris::before,
    .polaris::after,
    .polaris-core {
        transition: none;
    }

    .polaris.is-orbit-toggle-clockwise,
    .polaris.is-orbit-toggle-counterclockwise {
        animation: none;
    }
}

/* SUN + MOON */

.sun,
.moon {
    position: absolute;
    z-index: 2;
}


/* SUN */

.sun {
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;
    opacity: 0;

    transform:
        translate3d(0, 0, 0)
        translate(-50%, -50%);

    transition: none;

    will-change: transform, opacity, filter;

    background-image: url("assets/sun-texture-custom.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter:
        brightness(var(--body-intensity, 1))
        saturate(1.03)
        contrast(1.02)
        drop-shadow(0 0 4px rgba(255, 242, 198, 0.72))
        drop-shadow(0 0 11px rgba(255, 203, 124, 0.38))
        drop-shadow(0 0 20px rgba(255, 166, 92, 0.16));
}

/* MOON IMAGE */

.moon {
    width: 130px;
    height: 130px;

    left: 0;
    top: 0;
    opacity: 0;

    transform:
        translate3d(0, 0, 0)
        translate(-50%, -50%);

    background-image: url("assets/moon-crescent.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter:
        brightness(var(--body-intensity, 1))
        saturate(1.02)
        contrast(1.03)
        drop-shadow(0 0 4px rgba(239, 246, 255, 0.66))
        drop-shadow(0 0 10px rgba(194, 214, 255, 0.32))
        drop-shadow(0 0 18px rgba(139, 170, 235, 0.14));

    transition: none;

    will-change: transform, opacity, filter;
}

/* CELESTIAL ORBIT GLIMMERS */

.sun::after,
.moon::after {
    content: none;
    display: none;
}

.sun-shimmer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 22% 32%,
            rgba(255, 255, 220, 0.9) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 63% 24%,
            rgba(255, 240, 170, 0.85) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 77% 48%,
            rgba(255, 255, 210, 0.75) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 42% 58%,
            rgba(255, 245, 180, 0.8) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 31% 74%,
            rgba(255, 255, 220, 0.7) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 68% 71%,
            rgba(255, 235, 150, 0.8) 0 1px,
            transparent 2px
        );

    opacity: 0.22;

    animation: sun-shimmer 4s ease-in-out infinite;
}

@keyframes sun-shimmer {
    0% {
        opacity: 0.16;
        filter: brightness(1);
    }

    25% {
        opacity: 0.42;
        filter: brightness(1.2);
    }

    50% {
        opacity: 0.2;
        filter: brightness(1.05);
    }

    75% {
        opacity: 0.38;
        filter: brightness(1.3);
    }

    100% {
        opacity: 0.16;
        filter: brightness(1);
    }
}

/* SUN PARTICLES */

.sun-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}

/* INDIVIDUAL SUN DROP */

.sun-drop {
    position: absolute;

    width: 5px;
    height: 6px;

    border-radius: 50%;

    background: radial-gradient(
        circle at 35% 30%,
        #fffbd5 0%,
        #ffe477 28%,
        #e9a321 65%,
        #a95d08 100%
    );

    box-shadow:
        0 0 4px rgba(255, 240, 160, 0.95),
        0 0 9px rgba(255, 180, 40, 0.6);

    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0;

    animation:
        sun-drop-fall var(--drop-duration) ease-in forwards;
}


/* LIGHT TRAIL BEHIND DROP */

.sun-drop::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 45%;

    width: 1px;
    height: var(--trail-peak-height, 36px);

    transform: translateX(-50%);

    border-radius: 999px;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 190, 55, 0.45) 35%,
        rgba(255, 225, 125, 0.85) 70%,
        rgba(255, 250, 210, 1) 100%
    );

    box-shadow:
        0 0 3px rgba(255, 215, 100, 0.6);

    opacity: 0;

    animation:
        sun-drop-trail var(--drop-duration) ease-in forwards;
}


/* FINAL GLIMMER */

.sun-drop::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--glimmer-box-size, 24px);
    height: var(--glimmer-box-size, 24px);

    transform:
        translate(-50%, -50%)
        rotate(0deg)
        scale(0);

    transform-origin: center;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255, 252, 236, 1) 0 18%,
            rgba(255, 236, 160, 0.95) 19% 28%,
            transparent 29%
        ) center / var(--glimmer-core-size, 6px) var(--glimmer-core-size, 6px) no-repeat,

        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 235, 165, 0.95) 24%,
            rgba(255, 248, 220, 1) 50%,
            rgba(255, 235, 165, 0.95) 76%,
            transparent 100%
        ) center / var(--glimmer-line-thickness, 1px) var(--glimmer-vertical-size, 14px) no-repeat,

        linear-gradient(
            to right,
            transparent 0%,
            rgba(255, 235, 165, 0.95) 24%,
            rgba(255, 248, 220, 1) 50%,
            rgba(255, 235, 165, 0.95) 76%,
            transparent 100%
        ) center / var(--glimmer-horizontal-size, 14px) var(--glimmer-line-thickness, 1px) no-repeat,

        linear-gradient(
            45deg,
            transparent 46%,
            var(--glimmer-diagonal-color, transparent) 49%,
            var(--glimmer-diagonal-color, transparent) 51%,
            transparent 54%
        ) center / var(--glimmer-diagonal-size, 0px) var(--glimmer-diagonal-size, 0px) no-repeat,

        linear-gradient(
            -45deg,
            transparent 46%,
            var(--glimmer-diagonal-color, transparent) 49%,
            var(--glimmer-diagonal-color, transparent) 51%,
            transparent 54%
        ) center / var(--glimmer-diagonal-size, 0px) var(--glimmer-diagonal-size, 0px) no-repeat;

    filter: drop-shadow(0 0 2px rgba(255, 236, 165, 0.75));

    animation:
        sun-drop-glimmer var(--drop-duration) linear forwards;
}

/* GLIMMER VARIATIONS */

/* LOW = tiny distant twinkle */

.sun-drop.glimmer-low {
    width: 2.5px;
    height: 3px;

    box-shadow:
        0 0 2px rgba(255, 230, 145, 0.65),
        0 0 5px rgba(255, 180, 40, 0.3);

    --trail-early-height: 12px;
    --trail-peak-height: 20px;
    --trail-late-height: 18px;
    --trail-fade-height: 7px;

    --trail-early-opacity: 0.5;
    --trail-peak-opacity: 0.58;
    --trail-late-opacity: 0.48;
    --trail-fade-opacity: 0.14;

    --glimmer-opacity: 0.55;

    --glimmer-box-size: 14px;
    --glimmer-core-size: 3px;

    --glimmer-line-thickness: 1px;
    --glimmer-vertical-size: 8px;
    --glimmer-horizontal-size: 8px;

    --glimmer-diagonal-size: 0px;
    --glimmer-diagonal-color: transparent;

    --glimmer-start-rotate: -8deg;
    --glimmer-peak-rotate: 0deg;
    --glimmer-end-rotate: 7deg;

    --glimmer-early-scale: 0.7;
    --glimmer-peak-scale: 1.05;
    --glimmer-end-scale: 1.3;
}

/* MEDIUM = clear 4-point star */

.sun-drop.glimmer-medium {
    width: 3.5px;
    height: 4.5px;

    box-shadow:
        0 0 3px rgba(255, 240, 160, 0.85),
        0 0 7px rgba(255, 180, 40, 0.45);

    --trail-early-height: 16px;
    --trail-peak-height: 28px;
    --trail-late-height: 25px;
    --trail-fade-height: 9px;

    --trail-early-opacity: 0.7;
    --trail-peak-opacity: 0.82;
    --trail-late-opacity: 0.7;
    --trail-fade-opacity: 0.18;

    --glimmer-opacity: 1;

    --glimmer-box-size: 24px;
    --glimmer-core-size: 5px;

    --glimmer-line-thickness: 1px;
    --glimmer-vertical-size: 15px;
    --glimmer-horizontal-size: 15px;

    --glimmer-diagonal-size: 0px;
    --glimmer-diagonal-color: transparent;

    --glimmer-start-rotate: 8deg;
    --glimmer-peak-rotate: 0deg;
    --glimmer-end-rotate: -8deg;

    --glimmer-early-scale: 1;
    --glimmer-peak-scale: 1.7;
    --glimmer-end-scale: 2.15;
}

/* HIGH = larger sparkle with diagonal rays */

.sun-drop.glimmer-high {
    width: 5px;
    height: 6px;

    --glimmer-opacity: 1;
    --glimmer-box-size: 24px;

    --glimmer-start-rotate: -11deg;
    --glimmer-peak-rotate: 0deg;
    --glimmer-end-rotate: 10deg;

    --glimmer-early-scale: 0.9;
    --glimmer-peak-scale: 1.3;
    --glimmer-end-scale: 1.45;
}

.sun-drop.glimmer-high::after {
    /* Eight slender rays with sharp tips and a tiny center. */
    background: radial-gradient(
        circle,
        #fffdf4 0%,
        #fff1c5 18%,
        #ffda79 100%
    );

    clip-path: polygon(
        50% 6%, 50.8% 47.5%,
        70% 30%, 52.5% 48.5%,
        94% 50%, 52.5% 51.5%,
        70% 70%, 50.8% 52.5%,
        50% 94%, 49.2% 52.5%,
        30% 70%, 47.5% 51.5%,
        6% 50%, 47.5% 48.5%,
        30% 30%, 49.2% 47.5%
    );

    filter:
        drop-shadow(0 0 1px rgba(255, 244, 190, 0.8))
        drop-shadow(0 0 3px rgba(255, 214, 105, 0.4));
}

/* DROP MOTION */

@keyframes sun-drop-fall {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translateY(-2px)
            scale(0.25);
    }

    10% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(0)
            scale(0.9);
    }

    18% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(3px)
            scale(1);
    }

    80% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(var(--drop-distance))
            scale(0.9);
    }

    93% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translateY(var(--drop-distance))
            scale(0.9);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translateY(var(--drop-distance))
            scale(0.9);
    }
}


/* TRAIL MOTION */

@keyframes sun-drop-trail {

    0%,
    10% {
        opacity: 0;
        height: 2px;
    }

    25% {
        opacity: var(--trail-early-opacity, 0.85);
        height: var(--trail-early-height, 20px);
    }

    55% {
        opacity: var(--trail-peak-opacity, 1);
        height: var(--trail-peak-height, 36px);
    }

    80% {
        opacity: var(--trail-late-opacity, 0.85);
        height: var(--trail-late-height, 32px);
    }

    90% {
        opacity: var(--trail-fade-opacity, 0.25);
        height: var(--trail-fade-height, 12px);
    }

    100% {
        opacity: 0;
        height: 0;
    }
}


/* BOTTOM GLIMMER */

@keyframes sun-drop-glimmer {

    0%,
    80% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(0);
    }

    86% {
        opacity: var(--glimmer-opacity, 1);

        transform:
            translate(-50%, -50%)
            rotate(var(--glimmer-start-rotate, -8deg))
            scale(var(--glimmer-early-scale, 1));
    }

    91% {
        opacity: var(--glimmer-opacity, 1);

        transform:
            translate(-50%, -50%)
            rotate(var(--glimmer-peak-rotate, 0deg))
            scale(var(--glimmer-peak-scale, 1.7));
    }

    96% {
        opacity: calc(var(--glimmer-opacity, 1) * 0.4);

        transform:
            translate(-50%, -50%)
            rotate(var(--glimmer-end-rotate, 8deg))
            scale(var(--glimmer-end-scale, 2.15));
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotate(var(--glimmer-end-rotate, 8deg))
            scale(var(--glimmer-end-scale, 2.15));
    }
}


/* MOUNTAINS */

.mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 68vh;
    z-index: 3;

    background-image: none;
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* PERMANENT TERRAIN OCCLUSION */

.mountains::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-color: var(--mountain-front, #080808);

    -webkit-mask-image: url("assets/mountain-landscape-v5.png");
    mask-image: url("assets/mountain-landscape-v5.png");

    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    transition: none;
}


/* CELESTIAL LIGHT RECEIVED BY THE LANDSCAPE */

.mountains::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    /*
        Keep the baked asset lighting intact.
        Only apply a very soft global color harmonization so the
        landscape matches the sky family without creating a spotlight.
    */
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--mountain-back, #514354) 22%, transparent) 0%,
            color-mix(in srgb, var(--mountain-middle, #2b2633) 16%, transparent) 56%,
            color-mix(in srgb, var(--mountain-front, #101017) 22%, transparent) 100%
        );

    -webkit-mask-image: url("assets/mountain-landscape-v5.png");
    mask-image: url("assets/mountain-landscape-v5.png");

    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mix-blend-mode: multiply;
    opacity: 0.88;
}

/* PRAYER LANDSCAPE LAYERS */

.landscape-layer {
    position: absolute;
    inset: 0;
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.25s ease;
}

.landscape-layer.is-landscape-active {
    opacity: 1;
}

.landscape-layer.is-landscape-outgoing {
    opacity: 0;
}

.landscape-fajr {
    background-image: url("assets/mountain-landscape-fajr-v1.png");
}

.landscape-dhuhr {
    background-image: url("assets/mountain-landscape-v5.png");
}

.landscape-asr {
    background-image: url("assets/mountain-landscape-asr-v1.png");
}

.landscape-maghrib {
    background-image: url("assets/mountain-landscape-maghrib-v1.png");
}

.landscape-isha {
    background-image: url("assets/mountain-landscape-isha-v1.png");
}

.mountains::after {
    transition: none;
}



@media (min-width: 769px) {
    .mountains {
        transform: translateY(0);
    }
}

.mountain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
}

.mountain-back {
    height: 78%;
    background-color: var(--mountain-back, #2a2a2a);
    opacity: 0.55;

    clip-path: polygon(
        0% 100%,
        0% 68%,
        7% 52%,
        13% 30%,
        19% 48%,
        27% 22%,
        34% 42%,
        41% 18%,
        49% 50%,
        57% 28%,
        64% 44%,
        72% 20%,
        79% 40%,
        87% 24%,
        94% 50%,
        100% 36%,
        100% 100%
    );
}

.mountain-middle {
    height: 62%;
    background-color: var(--mountain-middle, #171717);
    opacity: 0.8;

    clip-path: polygon(
        0% 100%,
        0% 62%,
        8% 46%,
        16% 18%,
        24% 55%,
        32% 30%,
        40% 62%,
        48% 25%,
        56% 48%,
        65% 20%,
        73% 58%,
        82% 32%,
        90% 60%,
        100% 42%,
        100% 100%
    );
}

.mountain-front {
    height: 48%;
    background-color: var(--mountain-front, #080808);

    clip-path: polygon(
        0% 100%,
        0% 58%,
        10% 36%,
        18% 16%,
        26% 52%,
        35% 28%,
        44% 64%,
        54% 22%,
        63% 50%,
        72% 18%,
        82% 54%,
        91% 30%,
        100% 52%,
        100% 100%
    );
}


/* FAJR */

body.state-fajr {
    --text-color: #f4eee9;
    --mountain-back: #514354;
    --mountain-middle: #2b2633;
    --mountain-front: #101017;

    --sun-glow-inner: rgba(255, 226, 145, 0.62);
    --sun-glow-middle: rgba(255, 172, 92, 0.42);
    --sun-glow-outer: rgba(235, 120, 76, 0.18);

    --moon-glow-inner: rgba(230, 235, 255, 0.28);
    --moon-glow-middle: rgba(195, 205, 240, 0.14);
    --moon-glow-outer: rgba(160, 175, 220, 0.06);
}

/* DHUHR */

body.state-dhuhr {
    --text-color: #ffffff;
    --mountain-back: #8194a5;
    --mountain-middle: #4c5d69;
    --mountain-front: #202a31;

    --sun-glow-inner: rgba(255, 245, 188, 0.72);
    --sun-glow-middle: rgba(255, 211, 106, 0.48);
    --sun-glow-outer: rgba(255, 190, 70, 0.2);
}


/* ASR */

body.state-asr {
    --text-color: #fff6eb;
    --mountain-back: #8d7765;
    --mountain-middle: #58493e;
    --mountain-front: #29211d;

    --sun-glow-inner: rgba(255, 224, 152, 0.7);
    --sun-glow-middle: rgba(244, 167, 83, 0.46);
    --sun-glow-outer: rgba(219, 116, 58, 0.2);
}


/* MAGHRIB */

body.state-maghrib {
    --text-color: #fff0e6;
    --mountain-back: #76505d;
    --mountain-middle: #46313a;
    --mountain-front: #1b1219;

    --sun-glow-inner: rgba(255, 205, 132, 0.68);
    --sun-glow-middle: rgba(235, 124, 75, 0.5);
    --sun-glow-outer: rgba(188, 67, 64, 0.24);
    
    --moon-glow-inner: rgba(255, 228, 215, 0.36);
    --moon-glow-middle: rgba(225, 195, 220, 0.18);
    --moon-glow-outer: rgba(190, 155, 210, 0.08);
}


/* ISHA */

body.state-isha {
    --text-color: #eef2ff;
    --mountain-back: #222a3d;
    --mountain-middle: #151c2a;
    --mountain-front: #090c13;

    --moon-glow-inner: rgba(230, 242, 255, 0.7);
    --moon-glow-middle: rgba(175, 210, 255, 0.38);
    --moon-glow-outer: rgba(115, 160, 255, 0.18);
}

@media (max-width: 768px) {

    body {
        --sky-edge-gap: 24px;
        --sun-half-size: 45px;
        --moon-half-size: 45px;
    }

    .sun,
    .moon {
        width: 90px;
        height: 90px;
    }

    .prayer-settings-panel {
        position: absolute;
        top: 0;
        left: calc(100% + 8px);
        width: min(226px, calc(100vw - 270px));
    }

}


/* MANUAL SKY SCRUB */

body[data-orbit-mode="manual"] .sky {
    transition: none;
}

/* --------------------------------------------------
   AWAKENING INTRO
   -------------------------------------------------- */

body.intro-mode .scene {
    filter:
        blur(6px)
        brightness(0.26)
        saturate(0.56);

    transform:
        scale3d(
            1.035,
            1.035,
            1
        );

    transform-origin:
        center center;
}

.scene {
    transition:
        filter 360ms
            cubic-bezier(
                0.16,
                0.84,
                0.22,
                1
            ),
        transform 1200ms
            cubic-bezier(
                0.16,
                0.84,
                0.22,
                1
            );

    backface-visibility:
        hidden;
}

body.site-awakened .scene {
    filter:
        blur(0)
        brightness(1)
        saturate(1);
    transform: scale(1);
}

/* Intro concealment lives mostly in this compositor-friendly opacity veil. */

body::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 176;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(4, 6, 13, 0.58) 0%,
            rgba(4, 6, 13, 0.78) 48%,
            rgba(3, 4, 9, 0.90) 100%
        );

    opacity: 0;

    transition:
        opacity 1550ms
            cubic-bezier(
                0.16,
                0.84,
                0.22,
                1
            );
}

body.intro-mode::after {
    opacity: 1;
}

body.site-awakened::after {
    opacity: 0;
}

.awakening-star:disabled {
    cursor: wait;
}

.awakening-star:disabled
.awakening-star-label {
    opacity: 0.30;
}

.awakening-star.is-ready
.awakening-star-label {
    opacity: 1;
}



body.intro-mode header,
body.intro-mode .music-player {
    opacity: 0.02;
    pointer-events: none;
}

header,
.music-player {
    transition:
        opacity 1400ms
            cubic-bezier(
                0.16,
                0.84,
                0.22,
                1
            );
}

body.site-awakened header,
body.site-awakened .music-player {
    opacity: 1;
}

/*
    Important: keep the player anchor untransformed.
    A transformed ancestor becomes the containing block for fixed descendants,
    which breaks the viewport-based connector-dot coordinates calculated by JS.
*/
body:not(.intro-mode) .music-player {
    transform: none;
}

body.intro-charging .awakening-star-aura {
    animation:
        awakening-aura-charge
        3.2s
        cubic-bezier(0.16, 0.84, 0.22, 1)
        forwards;
}

body.intro-charging .awakening-star-diamond {
    animation:
        awakening-diamond-charge
        3.2s
        cubic-bezier(0.16, 0.84, 0.22, 1)
        forwards;
}

body.intro-charging .awakening-star-core {
    animation:
        awakening-core-charge
        3.2s
        cubic-bezier(0.16, 0.84, 0.22, 1)
        forwards;
}

body.intro-charging .awakening-star-label {
    opacity: 0;
    transition: opacity 0.35s ease;
}

@keyframes awakening-aura-charge {
    0% {
        opacity: 0.55;
        transform:
            translate(-50%, -50%)
            scale(0.95);
    }

    58% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.75);
    }

    88% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(2.35);
    }

    100% {
        opacity: 0.15;
        transform:
            translate(-50%, -50%)
            scale(3.15);
    }
}

@keyframes awakening-diamond-charge {
    0% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            scale(1);
        filter: brightness(1);
    }

    72% {
        transform:
            translate(-50%, -50%)
            rotate(225deg)
            scale(1.22);
        filter:
            brightness(1.65)
            saturate(1.2);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(405deg)
            scale(0.72);
        filter:
            brightness(2.4)
            saturate(1.35);
    }
}

@keyframes awakening-core-charge {
    0% {
        transform:
            translate(-50%, -50%)
            scale(1);
        box-shadow:
            0 0 5px rgba(255, 255, 255, 1),
            0 0 12px rgba(255, 255, 255, 0.94);
    }

    76% {
        transform:
            translate(-50%, -50%)
            scale(2.1);
        box-shadow:
            0 0 8px rgba(255, 255, 255, 1),
            0 0 24px rgba(190, 225, 255, 1),
            0 0 42px rgba(211, 145, 255, 0.78);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(0.35);
        box-shadow:
            0 0 18px rgba(255, 255, 255, 1),
            0 0 42px rgba(170, 220, 255, 1),
            0 0 68px rgba(255, 150, 220, 0.72);
    }
}

.awakening-star {
    position: fixed;
    top: 47%;
    left: 50%;
    width: 104px;
    height: 122px;
    padding: 0;
    z-index: 180;

    border: 0;
    outline: none;
    background: transparent;

    transform: translate(-50%, -50%);
    cursor: pointer;

    opacity: 1;
    pointer-events: auto;

    transition:
        opacity 0.85s ease,
        transform 1.2s cubic-bezier(0.20, 0.72, 0.20, 1),
        filter 0.6s ease;
}

.awakening-star:hover,
.awakening-star:focus-visible {
    filter:
        brightness(1.12)
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.26));
}

.awakening-star-aura,
.awakening-star-diamond,
.awakening-star-core {
    position: absolute;
    top: 44px;
    left: 52px;
    pointer-events: none;
}

.awakening-star-aura {
    width: 76px;
    height: 76px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(200, 220, 255, 0.13) 24%,
            rgba(173, 137, 255, 0.08) 45%,
            transparent 72%
        );

    transform: translate(-50%, -50%) scale(0.82);

    animation:
        awakening-aura 2.8s ease-in-out infinite;
}

.awakening-star-diamond {
    width: 24px;
    height: 24px;

    border-radius: 4px;

    background:
        conic-gradient(
            from 20deg,
            #f9ffff,
            #8ee7ff,
            #c79cff,
            #ff9ac4,
            #ffd981,
            #95f0cb,
            #f9ffff
        );

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.98),
        0 0 12px rgba(153, 220, 255, 0.74),
        0 0 22px rgba(183, 134, 255, 0.46),
        0 0 34px rgba(255, 168, 211, 0.18);

    animation:
        awakening-diamond 2.4s ease-in-out infinite;
}

.awakening-star-diamond::before,
.awakening-star-diamond::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.95),
        transparent
    );

    transform: translate(-50%, -50%);
}

.awakening-star-diamond::before {
    width: 56px;
    height: 1px;
}

.awakening-star-diamond::after {
    width: 1px;
    height: 56px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.95),
        transparent
    );
}

.awakening-star-core {
    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #ffffff;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 5px rgba(255, 255, 255, 1),
        0 0 12px rgba(255, 255, 255, 0.94);
}

.awakening-star-label {
    position: absolute;
    top: 86px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(255, 255, 255, 0.82);
    font-family: "Cinzel", serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;

    text-shadow:
        0 0 10px rgba(190, 220, 255, 0.34);

    animation:
        awakening-label 2.8s ease-in-out infinite;
}

.awakening-star.is-awakening {
    pointer-events: none;
}

body.site-awakened:not(.intro-charging)
.awakening-star {
    opacity: 0;
    pointer-events: none;
}

@keyframes awakening-aura {
    0%,
    100% {
        opacity: 0.50;
        transform:
            translate(-50%, -50%)
            scale(0.82);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.16);
    }
}

@keyframes awakening-diamond {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            scale(0.92);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotate(45deg)
            scale(1.08);
    }
}

@keyframes awakening-label {
    0%,
    100% {
        opacity: 0.50;
    }

    50% {
        opacity: 0.92;
    }
}

@keyframes awakening-release {
    0% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
        filter: brightness(1);
    }

    42% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.55);
        filter:
            brightness(1.55)
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.74));
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.62);
        filter: brightness(2);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.intro-mode .scene {
        filter:
            blur(2px)
            brightness(0.82)
            saturate(0.94);
        transform: scale(1.012);
    }

    .scene,
    .awakening-star {
        transition-duration: 0.6s;
    }

    .awakening-star-aura,
    .awakening-star-diamond,
    .awakening-star-label {
        animation: none;
    }
}

/* --------------------------------------------------
   MUSIC PLAYER — FLUID GLASS BUBBLE SYSTEM
   -------------------------------------------------- */

.music-player {
    position: fixed;
    right: 18px;
    bottom: 16px;
    z-index: 190;

    width: 60px;
    height: 60px;

    font-family: "Cinzel", serif;
    pointer-events: none;
}

.music-player-toggle,
.music-mute-bubble,
.music-thought-dot,
.music-player-panel {
    -webkit-tap-highlight-color: transparent;
}

/* Main launcher bubble */

.music-player-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 6;

    width: 60px;
    height: 60px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;

    color: rgba(255, 255, 255, 0.96);
    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 1px 0 0 rgba(255, 181, 225, 0.07),
        inset -1px 0 0 rgba(145, 208, 255, 0.08),
        inset 0 -1px 0 rgba(166, 211, 255, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.08),
        0 0 14px rgba(192, 220, 255, 0.04);

    cursor: pointer;
    pointer-events: auto;

    animation:
        music-bubble-float
        5.8s
        ease-in-out
        infinite;

    transition:
        border-color 0.30s ease,
        box-shadow 0.30s ease,
        opacity 0.30s ease;
}

.music-player-toggle:hover,
.music-player-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.54);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 1px 0 0 rgba(255, 181, 225, 0.10),
        inset -1px 0 0 rgba(145, 208, 255, 0.11),
        inset 0 -1px 0 rgba(166, 211, 255, 0.09),
        0 9px 20px rgba(0, 0, 0, 0.10),
        0 0 18px rgba(192, 220, 255, 0.05);
}

.music-toggle-icon {
    position: relative;
    z-index: 2;

    display: inline-block;

    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1;

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.28);
}

/* Micro mute bubble */

.music-mute-bubble {
    position: absolute;
    right: -1px;
    bottom: 68px;
    z-index: 8;

    width: 28px;
    height: 28px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;

    color: rgba(255, 255, 255, 0.92);
    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 1px 0 0 rgba(255, 176, 224, 0.07),
        inset -1px 0 0 rgba(135, 205, 255, 0.08),
        0 5px 12px rgba(0, 0, 0, 0.07);

    cursor: pointer;
    pointer-events: auto;

    animation:
        music-mute-float
        4.8s
        ease-in-out
        infinite;

    transition:
        border-color 0.25s ease,
        opacity 0.25s ease;
}

.music-mute-bubble:hover,
.music-mute-bubble:focus-visible {
    border-color: rgba(255, 255, 255, 0.52);
}

.music-mute-note {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    font-family:
        "Times New Roman",
        serif;
    font-size: 16px;
    line-height: 1;

    transition:
        opacity 0.22s ease,
        transform 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}

.music-mute-slash {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 17px;
    height: 1.3px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.94);

    opacity: 0;

    transform:
        translate(-50%, -50%)
        rotate(-46deg)
        scaleX(0.35);

    transform-origin: center;

    transition:
        opacity 0.20s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.music-mute-bubble.is-muted .music-mute-note {
    opacity: 0.62;
    transform: scale(0.90);
}

.music-mute-bubble.is-muted .music-mute-slash {
    opacity: 0.96;

    transform:
        translate(-50%, -50%)
        rotate(-46deg)
        scaleX(1);
}

/* Connector bubbles */

.music-thought-dot {
    position: fixed;
    z-index: 191;

    display: block;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;

    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 1px 0 0 rgba(255, 188, 228, 0.05),
        inset -1px 0 0 rgba(149, 211, 255, 0.06);

    opacity: 0;
    transform: scale3d(0.25, 0.25, 1);

    pointer-events: none;
    will-change: transform, opacity, translate;
}

.music-thought-dot-small {
    width: 10px;
    height: 10px;

    right: 79px;
    bottom: 77px;

    animation:
        music-connector-drift-a
        4.3s
        ease-in-out
        infinite;
}

.music-thought-dot-large {
    width: 18px;
    height: 18px;

    right: 96px;
    bottom: 94px;

    animation:
        music-connector-drift-b
        5.1s
        ease-in-out
        infinite;
}

/* Large bubble */

.music-player-panel {
    position: fixed;
    right: 86px;
    bottom: 82px;
    z-index: 190;

    width: 324px;
    height: 324px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;

    color: rgba(255, 255, 255, 0.96);
    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 1px 0 0 rgba(255, 181, 225, 0.055),
        inset -1px 0 0 rgba(145, 208, 255, 0.065),
        inset 0 -1px 0 rgba(155, 211, 255, 0.05),
        0 16px 34px rgba(0, 0, 0, 0.09),
        0 0 18px rgba(194, 221, 255, 0.025);

    opacity: 0;
    pointer-events: none;

    transform:
        translate3d(0, 0, 0)
        scale3d(1, 1, 1);

    backface-visibility: hidden;

    will-change:
        transform,
        opacity,
        translate;

    animation:
        music-panel-drift
        7.2s
        ease-in-out
        infinite;
}

.music-player.is-open .music-player-panel {
    pointer-events: auto;
}

.music-player.is-open .music-player-toggle,
.music-player.is-opening .music-player-toggle {
    opacity: 0.92;
}

.music-player-shell {
    position: absolute;
    inset: 0;

    padding: 58px 60px;

    box-sizing: border-box;

    border-radius: 50%;

    transform-origin: center;
    backface-visibility: hidden;
}

.music-player-main-view,
.music-player-lyrics-view {
    position: absolute;
    inset: 58px 60px;

    transition:
        opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 560ms cubic-bezier(0.16, 1, 0.3, 1);

    backface-visibility: hidden;
}

.music-player-main-view {
    display: grid;
    grid-template-rows:
        auto
        auto
        auto
        minmax(72px, 1fr);
    align-content: center;
    row-gap: 8px;

    opacity: 1;
    transform: scale3d(1, 1, 1);
}

.music-player-lyrics-view {
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: scale3d(0.94, 0.94, 1);

    pointer-events: none;
}

.music-player-panel.is-lyrics-mode .music-player-main-view {
    opacity: 0;
    transform: scale3d(0.94, 0.94, 1);
    pointer-events: none;
}

.music-player-panel.is-lyrics-mode .music-player-lyrics-view {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    pointer-events: auto;
}

/* Pop system */

.music-pop-ring {
    position: absolute;
    inset: -2px;
    z-index: 8;

    display: block;

    border:
        1px solid
        rgba(255, 255, 255, 0.46);

    border-radius: 50%;

    box-shadow:
        inset
        0 0 10px
        rgba(205, 235, 255, 0.08),
        0 0 10px
        rgba(215, 235, 255, 0.08);

    opacity: 0;
    pointer-events: none;

    transform:
        scale3d(
            1.035,
            1.035,
            1
        );

    will-change:
        transform,
        opacity;
}

.music-pop-arc {
    position: absolute;
    inset: -2px;
    z-index: 9;

    display: block;

    border-radius: 50%;

    opacity: 0;
    pointer-events: none;

    will-change:
        transform,
        opacity;
}

.music-pop-arc-a {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.46);
}

.music-pop-arc-b {
    border-right:
        1px solid
        rgba(208, 237, 255, 0.42);
}

.music-pop-arc-c {
    border-bottom:
        1px solid
        rgba(255, 218, 241, 0.34);
}

.music-pop-arc-d {
    border-left:
        1px solid
        rgba(229, 244, 255, 0.40);
}


.music-pop-droplet {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;

    width: 6px;
    height: 6px;

    margin:
        -3px
        0
        0
        -3px;

    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;

    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset -1px 0 0 rgba(140, 210, 255, 0.08),
        inset 1px 0 0 rgba(255, 174, 224, 0.08);

    opacity: 0;
    pointer-events: none;

    transform:
        translate3d(0, 0, 0)
        scale3d(0.4, 0.4, 1);

    will-change: transform, opacity;
}

/* Main player content */

.music-player-track,
.music-player-progress-row,
.music-player-controls,
.music-lyrics-preview {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.music-player-track {
    display: grid;
    grid-template-columns: 40px 1fr 24px;
    align-items: center;
    gap: 9px;
}

.music-player-art {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;

    background: transparent;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 1px 0 0 rgba(255, 181, 225, 0.05),
        inset -1px 0 0 rgba(145, 208, 255, 0.055);

    font-size: 9px;
    letter-spacing: 1px;
}

.music-player-meta {
    min-width: 0;
}

.music-player-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.35px;
}

.music-player-artist {
    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 8px;
    letter-spacing: 0.35px;

    opacity: 0.62;
}

.music-player-close,
.music-lyrics-back,
.music-lyrics-mode-button {
    padding: 0;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.68);

    cursor: pointer;

    transition:
        color 0.20s ease,
        transform 0.22s ease;
}

.music-player-close:hover,
.music-player-close:focus-visible,
.music-lyrics-back:hover,
.music-lyrics-back:focus-visible {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.07);
}

.music-player-close {
    width: 24px;
    height: 24px;

    font-size: 17px;
    line-height: 1;
}

.music-player-progress-row {
    display: grid;
    grid-template-columns: 29px 1fr 29px;
    align-items: center;
    gap: 6px;

    margin-top: 0;
}

.music-player-time {
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-variant-numeric: tabular-nums;
    text-align: center;

    opacity: 0.58;
}

.music-player-progress,
.music-volume {
    width: 100%;
    height: 3px;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;
    outline: none;

    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.95)
                0
                var(--range-progress, 0%),
            rgba(255, 255, 255, 0.18)
                var(--range-progress, 0%)
                100%
        );

    cursor: pointer;
}

.music-player-progress::-webkit-slider-thumb,
.music-volume::-webkit-slider-thumb {
    width: 9px;
    height: 9px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.28);
}

.music-player-progress::-moz-range-thumb,
.music-volume::-moz-range-thumb {
    width: 9px;
    height: 9px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.98);
}

.music-player-controls {
    display: grid;
    grid-template-columns: 28px 36px 28px 1fr;
    align-items: center;
    gap: 7px;

    margin-top: 0;
}

.music-control-button {
    width: 28px;
    height: 28px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    color: rgba(255, 255, 255, 0.86);
    background: transparent;

    font-size: 10px;

    cursor: pointer;

    transition:
        transform 0.20s ease,
        border-color 0.20s ease,
        color 0.20s ease;
}

.music-control-button:hover,
.music-control-button:focus-visible {
    transform: scale(1.06);
    color: white;
    border-color: rgba(255, 255, 255, 0.28);
}

.music-play-button {
    width: 36px;
    height: 36px;

    color: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.28);

    font-size: 12px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 10px rgba(255, 255, 255, 0.025);
}

.music-volume-group {
    display: grid;
    grid-template-columns: 15px 1fr;
    align-items: center;
    gap: 5px;

    min-width: 0;
}

.music-volume-icon {
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-align: center;

    opacity: 0.58;
}

.music-waveform {
    --wave-opacity: 0;

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;

    width: min(72%, 180px);
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    opacity:
        var(
            --wave-opacity
        );

    transform:
        translate3d(
            -50%,
            -50%,
            0
        )
        scale3d(
            0.96,
            0.96,
            1
        );

    pointer-events: none;

    transition:
        opacity 110ms ease,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1);

    filter:
        drop-shadow(
            0 0 8px
            rgba(
                128,
                212,
                255,
                0.16
            )
        );
}

.music-waveform.is-visible {
    --wave-opacity: 0.90;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        )
        scale3d(
            1.055,
            1.055,
            1
        );
}

.music-waveform.is-bell-hit {
    --wave-opacity: 1;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        )
        scale3d(
            1.09,
            1.09,
            1
        );

    filter:
        drop-shadow(
            0 0 13px
            rgba(
                226,
                247,
                255,
                0.52
            )
        )
        drop-shadow(
            0 0 26px
            rgba(
                157,
                207,
                255,
                0.26
            )
        );
}

.music-waveform.is-high-note {
    --wave-opacity: 0.48;

    filter:
        drop-shadow(
            0 0 12px
            rgba(
                196,
                232,
                255,
                0.34
            )
        )
        drop-shadow(
            0 0 24px
            rgba(
                187,
                163,
                255,
                0.16
            )
        );
}

.music-waveform-bar {
    --wave-height: 0.12;

    width: 2px;
    height:
        calc(
            5px +
            (
                31px *
                var(
                    --wave-height
                )
            )
        );

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(
                229,
                248,
                255,
                0.96
            ),
            rgba(
                126,
                211,
                255,
                0.78
            )
            48%,
            rgba(
                183,
                151,
                255,
                0.52
            )
        );

    box-shadow:
        0 0 5px
        rgba(
            160,
            222,
            255,
            0.20
        );

    transform-origin: center;

    transition:
        height 38ms linear,
        opacity 90ms ease;

    opacity:
        calc(
            0.34 +
            (
                var(
                    --wave-height
                ) *
                0.66
            )
        );

    will-change:
        height,
        opacity;
}

.music-lyrics-stage .music-waveform {
    width: min(78%, 230px);
    height: 66px;
}

.music-lyrics-stage .music-waveform-bar {
    width: 2.4px;
    height:
        calc(
            7px +
            (
                44px *
                var(
                    --wave-height
                )
            )
        );
}

/* Karaoke preview */

.music-lyrics-preview {
    position: relative;

    min-height: 78px;
    margin-top: 0;
    padding:
        8px
        18px
        6px;

    box-sizing: border-box;

    overflow: hidden;

    perspective: 520px;

    text-align: center;
}

.music-lyrics-preview .music-lyric-line,
.music-lyrics-stage .music-lyric-line {
    --carousel-x: 0px;
    --carousel-y: 0px;
    --carousel-scale: 1;
    --carousel-opacity: 0;
    --carousel-tilt: 0deg;

    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;

    min-height: 13px;
    padding:
        0
        8px;

    box-sizing: border-box;

    overflow: visible;

    font-family:
        "Cinzel",
        serif;

    line-height: 1.42;
    text-align: center;

    opacity:
        var(
            --carousel-opacity
        );

    transform:
        translate3d(
            var(
                --carousel-x
            ),
            calc(
                -50% +
                var(
                    --carousel-y
                )
            ),
            0
        )
        rotateX(
            var(
                --carousel-tilt
            )
        )
        scale(
            var(
                --carousel-scale
            )
        );

    transform-origin:
        center;

    will-change:
        transform,
        opacity;

    backface-visibility:
        hidden;
}

.music-lyrics-preview .music-lyric-prev,
.music-lyrics-preview .music-lyric-current,
.music-lyrics-preview .music-lyric-next {
    font-weight: 600;
    line-height: 1.46;
    letter-spacing: 0.15px;
}

.music-lyrics-preview .music-lyric-prev,
.music-lyrics-preview .music-lyric-next {
    font-size: 7.2px;
}

.music-lyrics-preview .music-lyric-current {
    font-size: 9.4px;
}

.music-lyrics-stage .music-lyric-line {
    padding:
        0
        16px;
}

.music-lyrics-stage .music-lyric-prev,
.music-lyrics-stage .music-lyric-current,
.music-lyrics-stage .music-lyric-next {
    max-width: none;
    line-height: 1.52;
    letter-spacing: 0.16px;
    font-weight: 600;
}

.music-lyrics-stage .music-lyric-prev,
.music-lyrics-stage .music-lyric-next {
    font-size: 11px;
}

.music-lyrics-stage .music-lyric-current {
    font-size: 16px;
}

.music-lyric-line[data-render-mode="plain"] {
    color:
        rgba(
            226,
            238,
            249,
            0.26
        );

    text-shadow: none;
}

.music-lyric-current[data-render-mode="highlight"] {
    color:
        rgba(
            232,
            242,
            255,
            0.34
        );
}

.music-lyric-base {
    display: inline;

    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.music-lyric-word {
    --karaoke-word-fill: 0;
    --karaoke-word-scale: 1;
    --karaoke-word-lift: 0px;
    --karaoke-word-glow: 0;

    display: inline-block;

    color: transparent;

    background:
        linear-gradient(
            to right,
            rgba(
                198,
                235,
                255,
                1
            )
            0%,
            rgba(
                198,
                235,
                255,
                1
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                226,
                238,
                249,
                0.30
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                226,
                238,
                249,
                0.30
            )
            100%
        );

    -webkit-background-clip:
        text;
    background-clip:
        text;

    transform:
        translateY(
            var(
                --karaoke-word-lift
            )
        )
        scale(
            var(
                --karaoke-word-scale
            )
        );

    transform-origin:
        center 72%;

    text-shadow:
        0 0
            calc(
                2px +
                (
                    5px *
                    var(
                        --karaoke-word-glow
                    )
                )
            )
            rgba(
                190,
                234,
                255,
                calc(
                    0.10 +
                    (
                        0.46 *
                        var(
                            --karaoke-word-glow
                        )
                    )
                )
            );

    transition:
        transform 55ms linear;

    will-change:
        transform;
}

body.state-dhuhr .music-lyric-line[data-render-mode="plain"],
body.state-asr .music-lyric-line[data-render-mode="plain"] {
    color:
        rgba(
            244,
            249,
            255,
            0.42
        );

    text-shadow:
        0 1px 2px
            rgba(
                14,
                32,
                46,
                0.18
            );
}

body.state-dhuhr .music-lyric-word,
body.state-asr .music-lyric-word {
    background:
        linear-gradient(
            to right,
            rgba(
                235,
                251,
                255,
                1
            )
            0%,
            rgba(
                235,
                251,
                255,
                1
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                244,
                249,
                255,
                0.48
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                244,
                249,
                255,
                0.48
            )
            100%
        );

    -webkit-background-clip:
        text;
    background-clip:
        text;
}

.music-adlib-layer {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: visible;

    pointer-events: none;
}

.music-lyric-line {
    position: relative;
    z-index: 2;
}

.music-adlib {
    --adlib-progress: 0;

    position: absolute;

    max-width: 42%;

    font-family:
        "Cinzel",
        serif;

    font-size: 6.4px;
    line-height: 1.35;
    letter-spacing: 0.14px;

    text-align: center;

    opacity:
        calc(
            0.18 +
            (
                sin(
                    var(
                        --adlib-progress
                    )
                    *
                    3.14159
                )
                *
                0.40
            )
        );

    transform:
        translate3d(
            0,
            calc(
                -3px *
                var(
                    --adlib-progress
                )
            ),
            0
        )
        scale(
            calc(
                0.94 +
                (
                    var(
                        --adlib-progress
                    )
                    *
                    0.03
                )
            )
        );

    filter:
        blur(0.12px);

    text-shadow:
        0 0 8px
        currentColor;

    will-change:
        transform,
        opacity;
}

.music-adlib.is-upper-left {
    top: 4%;
    left: 3%;

    transform-origin:
        left
        center;
}

.music-adlib.is-upper-right {
    top: 6%;
    right: 3%;

    transform-origin:
        right
        center;
}

.music-adlib.is-rose {
    color:
        rgba(
            255,
            171,
            214,
            0.86
        );
}

.music-adlib.is-lavender {
    color:
        rgba(
            210,
            185,
            255,
            0.82
        );
}

.music-adlib.is-cyan {
    color:
        rgba(
            176,
            226,
            255,
            0.82
        );
}

.music-adlib.drift-a {
    margin-top: -2px;
}

.music-adlib.drift-b {
    margin-top: 2px;
}

.music-player-lyrics-view .music-adlib {
    max-width: 48%;

    font-size: 7.5px;
}

.music-player-lyrics-view .music-adlib.is-upper-left {
    top: 15%;
    left: 4%;
}

.music-player-lyrics-view .music-adlib.is-upper-right {
    top: 17%;
    right: 4%;
}

.music-lyrics-mode-button {
    position: absolute;
    right: 5px;
    bottom: 4px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.018);

    box-shadow:
        inset
        0 1px 0
        rgba(255, 255, 255, 0.10);

    font-family: Arial, sans-serif;
    line-height: 1;
}

.music-lyrics-icon {
    position: relative;

    width: 15px;
    height: 14px;

    display: block;
}

.music-lyrics-icon::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 2px;

    width: 12px;
    height: 1px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 4px 0
            rgba(255, 255, 255, 0.74),
        0 8px 0
            rgba(255, 255, 255, 0.58);

    transform:
        translateX(-50%);
}

.music-lyrics-icon::after {
    content: none;
}


/* Lyrics mode button — bottom-center of the main music bubble */

.music-player-main-view > .music-lyrics-mode-button {
    position: absolute;
    left: 50%;
    bottom: -32px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.018);

    color:
        rgba(211, 239, 255, 0.92);

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.11);

    transform:
        translateX(-50%);

    z-index: 4;
}

.music-player-main-view > .music-lyrics-mode-button:hover,
.music-player-main-view > .music-lyrics-mode-button:focus-visible {
    color:
        rgba(255, 255, 255, 1);

    border-color:
        rgba(255, 255, 255, 0.30);

    transform:
        translateX(-50%)
        scale(1.06);
}

.music-player-main-view > .music-lyrics-mode-button .music-lyrics-icon {
    position: relative;

    width: 15px;
    height: 14px;

    display: block;
}

/* Full lyric bubble mode */

.music-lyrics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 38px;
}

.music-lyrics-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.35px;
}

.music-lyrics-artist {
    margin-top: 2px;

    font-size: 7px;
    letter-spacing: 0.32px;

    opacity: 0.52;
}

.music-lyrics-back {
    width: 27px;
    height: 27px;

    font-size: 15px;
}

.music-lyrics-stage {
    position: relative;

    flex: 1;

    min-height: 176px;

    padding:
        18px
        20px
        20px;

    box-sizing: border-box;

    overflow: hidden;

    perspective: 620px;

    text-align: center;
}

.music-player-lyrics-view .music-lyric-line {
    width: 100%;
    max-width: none;
}

.music-player-lyrics-view .music-lyric-line[data-render-mode="plain"] {
    color:
        rgba(
            250,
            253,
            255,
            0.94
        );

    text-shadow:
        0 1px 4px
            rgba(
                4,
                14,
                24,
                0.48
            );
}

.music-player-lyrics-view .music-lyric-word {
    background:
        linear-gradient(
            to right,
            rgba(
                244,
                253,
                255,
                1
            )
            0%,
            rgba(
                244,
                253,
                255,
                1
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                248,
                252,
                255,
                0.76
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                248,
                252,
                255,
                0.76
            )
            100%
        );

    -webkit-background-clip:
        text;
    background-clip:
        text;
}
.music-player-lyrics-view .music-lyric-prev,
.music-player-lyrics-view .music-lyric-next {
    font-size: 8.8px;
    line-height: 1.55;
}

.music-player-lyrics-view .music-lyric-current {
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0.16px;
}

/* Floating motion */

@keyframes music-bubble-float {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    32% {
        transform:
            translate3d(
                -1px,
                -4px,
                0
            );
    }

    68% {
        transform:
            translate3d(
                1px,
                -1px,
                0
            );
    }
}

@keyframes music-mute-float {
    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(-1deg);
    }

    45% {
        transform:
            translate3d(
                2px,
                -3px,
                0
            )
            rotate(1deg);
    }

    75% {
        transform:
            translate3d(
                -1px,
                -1px,
                0
            )
            rotate(0deg);
    }
}

@keyframes music-panel-drift {
    0%,
    100% {
        translate:
            0
            0;
    }

    33% {
        translate:
            -1.5px
            -2.5px;
    }

    70% {
        translate:
            1px
            -1px;
    }
}

@keyframes music-connector-drift-a {
    0%,
    100% {
        translate:
            0
            0;
    }

    48% {
        translate:
            -1px
            -2px;
    }
}

@keyframes music-connector-drift-b {
    0%,
    100% {
        translate:
            0
            0;
    }

    52% {
        translate:
            1px
            -2px;
    }
}

@media (max-width: 640px) {

    .music-player {
        right: 12px;
        bottom: 12px;
    }

    .music-player-toggle {
        width: 56px;
        height: 56px;
    }

    .music-mute-bubble {
        right: 0;
        bottom: 64px;
    }

    .music-thought-dot-small {
        right: 72px;
        bottom: 70px;
    }

    .music-thought-dot-large {
        right: 88px;
        bottom: 87px;
    }

    .music-player-panel {
        right: 74px;
        bottom: 74px;

        width: 292px;
        height: 292px;
    }

    .music-player-shell {
        padding:
            46px
            46px;
    }

    .music-player-main-view,
    .music-player-lyrics-view {
        inset:
            46px
            46px;
    }

    .music-lyrics-preview {
        min-height: 66px;
        margin-top: 7px;
    }

    .music-player-lyrics-view .music-lyric-current {
        font-size: 13px;
    }
}

/* --------------------------------------------------
   WORD TIMING EDITOR — LOCAL DEVELOPMENT ONLY
   -------------------------------------------------- */

.word-timing-launcher,
.word-timing-panel {
    display: none;
}

body.word-timing-available
.word-timing-launcher {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 600;

    display: block;

    padding: 8px 12px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    color: rgba(255,255,255,0.88);
    background: rgba(7,13,26,0.56);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-family: "Cinzel", serif;
    font-size: 9px;

    cursor: pointer;
}

body.word-timing-available
.word-timing-panel.is-open {
    position: fixed;
    left: 16px;
    bottom: 58px;
    z-index: 601;

    width: min(430px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 84px));

    display: grid;
    gap: 11px;

    padding: 16px;

    box-sizing: border-box;

    overflow: auto;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 22px;

    color: rgba(255,255,255,0.94);
    background: rgba(7,13,26,0.82);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 18px 55px rgba(0,0,0,0.30);

    font-family: "Cinzel", serif;
}

.word-timing-header,
.word-timing-meta,
.word-timing-primary,
.word-timing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.word-timing-header {
    align-items: flex-start;
}

.word-timing-header strong {
    display: block;
    font-size: 12px;
}

.word-timing-header span {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    opacity: 0.52;
}

.word-timing-close {
    width: 28px;
    height: 28px;

    border: 0 !important;
    background: transparent !important;

    color: rgba(255,255,255,0.92);

    font-size: 18px;

    cursor: pointer;
}

.word-timing-meta {
    font-family: Arial, sans-serif;
    font-size: 10px;
    opacity: 0.72;
}

.word-timing-text {
    min-height: 36px;

    display: grid;
    place-items: center;

    padding: 10px 12px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;

    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

.word-timing-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
}

.word-timing-word {
    padding: 5px 7px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;

    color: rgba(255,255,255,0.42);
    background: rgba(255,255,255,0.025);

    font-family: Arial, sans-serif;
    font-size: 10px;

    transition:
        color 120ms ease,
        border-color 120ms ease,
        background 120ms ease,
        transform 120ms ease;
}

.word-timing-word.is-marked {
    color: rgba(210,241,255,0.96);
    border-color: rgba(155,220,255,0.28);
    background: rgba(134,208,255,0.08);
}

.word-timing-word.is-next {
    color: rgba(255,255,255,1);
    border-color: rgba(255,255,255,0.44);
    background: rgba(255,255,255,0.08);
    transform: scale(1.06);
}

.word-timing-word.is-complete {
    color: rgba(213,255,225,0.96);
    border-color: rgba(169,240,191,0.30);
}

.word-timing-instruction,
.word-timing-status {
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.word-timing-instruction {
    opacity: 0.62;
}

.word-timing-status {
    min-height: 14px;
    color: rgba(207,239,255,0.88);
    opacity: 0.88;
}

.word-timing-panel button {
    min-height: 32px;

    padding: 0 14px;

    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;

    color: rgba(255,255,255,0.90);
    background: rgba(255,255,255,0.035);

    font-family: Arial, sans-serif;
    font-size: 10px;

    cursor: pointer;
}

.word-timing-panel button:hover,
.word-timing-panel button:focus-visible {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
}

.word-timing-primary button,
.word-timing-nav button {
    flex: 1;
}

.word-timing-copy {
    width: 100%;
}

.word-waveform-shell {
    display: grid;
    gap: 7px;
}

.word-waveform-canvas {
    width: 100%;
    height: 180px;

    display: block;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        );

    cursor: crosshair;
    touch-action: none;
}

.word-waveform-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.word-waveform-toolbar button {
    min-width: 30px;
    padding: 0;
}

.word-waveform-toolbar span {
    min-width: 34px;

    font-family: Arial, sans-serif;
    font-size: 9px;
    text-align: center;

    opacity: 0.66;
}

.word-timing-primary {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
    gap: 8px;
}

.word-timing-word {
    cursor: pointer;
}

.word-timing-word.is-selected {
    color: rgba(255,255,255,1);
    border-color: rgba(173,228,255,0.58);
    background: rgba(133,208,255,0.14);

    box-shadow:
        0 0 0 1px rgba(155,221,255,0.10),
        0 0 14px rgba(119,200,255,0.12);
}

.word-timing-loop.is-active {
    color: rgba(213,255,225,0.96);
    border-color: rgba(169,240,191,0.30);
    background: rgba(125,225,160,0.08);
}



.word-waveform-canvas {
    height: 250px;
}

.word-waveform-scrubber {
    width: 100%;
    margin: 0;
}

.word-timing-transport {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );
    gap: 6px;
}

.word-timing-speed-row {
    display: grid;
    grid-template-columns:
        auto
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
    align-items: center;
    gap: 6px;

    font-family: Arial, sans-serif;
    font-size: 9px;
}

.word-timing-speed-row > span {
    opacity: 0.58;
}

.word-timing-speed-row button.is-active,
.word-timing-transport button.is-active {
    color: rgba(218,246,255,0.98);
    border-color: rgba(161,222,255,0.38);
    background: rgba(128,205,255,0.10);
}

.word-waveform-toolbar {
    justify-content: space-between;
}

.word-waveform-toolbar button {
    min-width: 72px;
}

.word-waveform-toolbar span {
    min-width: 58px;
}

@media (max-width: 520px) {
    .word-timing-transport {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .word-timing-speed-row {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .word-timing-speed-row > span {
        grid-column: 1 / -1;
    }
}


/* --------------------------------------------------
   WORD TIMING EDITOR — WORKSPACE MODE
   -------------------------------------------------- */

body.word-timing-available
.word-timing-panel.is-open {
    inset: 16px;
    left: 16px;
    bottom: 16px;

    width: auto;
    max-width: none;
    max-height: none;

    grid-template-rows:
        auto
        auto
        auto
        auto
        minmax(360px, 1fr)
        auto
        auto
        auto
        auto
        auto;

    gap: 14px;

    padding: 22px 24px 18px;

    border-radius: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(5,10,20,0.96),
            rgba(5,10,20,0.92)
        );

    box-shadow:
        0 24px 80px rgba(0,0,0,0.46);
}

.word-timing-header strong {
    font-size: 17px;
    letter-spacing: 0.3px;
}

.word-timing-header span {
    font-size: 10px;
}

.word-timing-close {
    width: 40px;
    height: 40px;
    font-size: 26px;
}

.word-timing-meta {
    font-size: 12px;
}

.word-timing-text {
    min-height: 48px;

    padding: 12px 16px;

    font-size: 16px;
    line-height: 1.45;
}

.word-timing-words {
    min-height: 44px;
    gap: 8px;
}

.word-timing-word {
    min-height: 34px;

    padding: 7px 10px;

    font-size: 12px;
}

.word-waveform-shell {
    min-height: 0;

    grid-template-rows:
        minmax(340px, 1fr)
        auto
        auto;

    gap: 10px;
}

.word-waveform-canvas {
    width: 100%;
    height: 100%;
    min-height: 340px;

    border-radius: 18px;

    cursor: default;
}

.word-waveform-scrubber {
    height: 18px;
}

.word-waveform-toolbar button {
    min-width: 110px;
}

.word-waveform-toolbar span {
    min-width: 80px;

    font-size: 11px;
}

.word-timing-instruction,
.word-timing-status {
    font-size: 11px;
}

.word-timing-panel button {
    min-height: 38px;

    padding: 0 14px;

    font-size: 11px;
}

.word-timing-transport {
    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}

.word-timing-speed-row {
    display: grid;
    grid-template-columns:
        auto
        minmax(
            220px,
            1fr
        )
        auto;

    align-items: center;

    gap: 12px;
}

.word-timing-speed-label {
    display: grid;
    gap: 2px;

    min-width: 116px;

    font-family: Arial, sans-serif;
}

.word-timing-speed-label span {
    font-size: 10px;
    opacity: 0.56;
}

.word-timing-speed-label strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#word-timing-speed {
    width: 100%;
}

.word-timing-speed-presets {
    display: flex;
    gap: 6px;
}

.word-timing-speed-presets button {
    min-width: 62px;
}

@media (max-width: 860px) {
    body.word-timing-available
    .word-timing-panel.is-open {
        inset: 8px;
        left: 8px;
        bottom: 8px;

        padding: 16px;

        overflow: auto;
    }

    .word-waveform-shell {
        min-height: 420px;
    }

    .word-timing-speed-row {
        grid-template-columns: 1fr;
    }

    .word-timing-speed-presets {
        flex-wrap: wrap;
    }

    .word-timing-transport {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


body.word-timing-editing {
    overflow: hidden;
}

body.word-timing-editing
.word-timing-launcher {
    opacity: 0;
    pointer-events: none;
}

body.word-timing-editing
.word-timing-panel.is-open {
    isolation: isolate;
}

.word-waveform-canvas:focus-visible,
.word-waveform-scrubber:focus-visible,
#word-timing-speed:focus-visible {
    outline: 2px solid rgba(191,232,255,0.72);
    outline-offset: 3px;
}


.word-timing-zoom-row {
    display: grid;
    grid-template-columns:
        auto
        44px
        minmax(
            220px,
            1fr
        )
        44px;

    align-items: center;

    gap: 10px;
}

.word-timing-zoom-label {
    display: grid;
    gap: 2px;

    min-width: 116px;

    font-family: Arial, sans-serif;
}

.word-timing-zoom-label span {
    font-size: 10px;
    opacity: 0.56;
}

.word-timing-zoom-label strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#word-waveform-zoom {
    width: 100%;
}

.word-timing-zoom-row > button {
    min-width: 44px;
    padding: 0;
}

@media (max-width: 860px) {
    .word-timing-zoom-row {
        grid-template-columns:
            1fr
            44px
            minmax(
                140px,
                1fr
            )
            44px;
    }

    .word-timing-zoom-label {
        grid-column: 1 / -1;
    }
}


.word-timing-source-row {
    display: grid;
    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 12px;
}

.word-timing-source-label {
    display: grid;
    gap: 2px;

    min-width: 116px;

    font-family: Arial, sans-serif;
}

.word-timing-source-label span {
    font-size: 10px;
    opacity: 0.56;
}

.word-timing-source-label strong {
    font-size: 15px;
}

.word-timing-source-options {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}

.word-timing-source-options button.is-active {
    color: rgba(255,245,184,0.98);
    border-color: rgba(255,219,72,0.42);
    background: rgba(255,214,64,0.10);
}

.word-timing-source-options button:disabled {
    cursor: not-allowed;
    opacity: 0.34;
}

@media (max-width: 860px) {
    .word-timing-source-row {
        grid-template-columns: 1fr;
    }
}


.word-timing-progress-card {
    display: grid;
    gap: 8px;

    padding: 12px 14px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;

    background: rgba(255,255,255,0.025);

    font-family: Arial, sans-serif;
}

.word-timing-progress-head,
.word-timing-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.word-timing-progress-head span,
.word-timing-progress-meta {
    font-size: 10px;
}

.word-timing-progress-head span,
.word-timing-progress-meta span:last-child {
    opacity: 0.58;
}

.word-timing-progress-head strong,
#word-timing-progress-percent {
    font-variant-numeric: tabular-nums;
}

.word-timing-progress-track {
    position: relative;

    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255,255,255,0.08);
}

.word-timing-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(255,210,48,0.70),
            rgba(255,231,121,0.98)
        );

    transition: width 180ms ease;
}

.word-timing-save-row {
    display: grid;
    grid-template-columns:
        1fr
        1fr;

    gap: 8px;
}

.word-timing-save {
    border-color: rgba(255,219,72,0.34) !important;
    background: rgba(255,214,64,0.08) !important;
}

.word-timing-save.has-unsaved {
    color: rgba(255,242,175,1);
    border-color: rgba(255,219,72,0.56) !important;
    background: rgba(255,214,64,0.14) !important;

    box-shadow:
        0 0 0 1px rgba(255,219,72,0.08),
        0 0 18px rgba(255,214,64,0.08);
}

@media (max-width: 860px) {
    .word-timing-save-row {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------
   LAPTOP / SHORT-VIEWPORT RESPONSIVENESS
   -------------------------------------------------- */

/* The editor should always be scrollable when its content exceeds the viewport. */
body.word-timing-available
.word-timing-panel.is-open {
    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    align-content: start;
}

/* Keep the editor header available while working through a long tool panel. */
body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    position: sticky;
    top: -1px;
    z-index: 4;

    padding-bottom: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(5,10,20,0.99) 0%,
            rgba(5,10,20,0.96) 78%,
            rgba(5,10,20,0) 100%
        );
}

/* Typical laptop viewport: preserve room for every editor control. */
@media (max-height: 900px) {

    body.word-timing-available
    .word-timing-panel.is-open {
        inset: 10px;
        left: 10px;
        bottom: 10px;

        padding:
            14px
            16px
            18px;

        gap: 10px;

        grid-template-rows:
            auto
            auto
            auto
            auto
            minmax(
                250px,
                38vh
            )
            auto
            auto
            auto
            auto
            auto
            auto
            auto
            auto;
    }

    .word-timing-header strong {
        font-size: 15px;
    }

    .word-timing-close {
        width: 34px;
        height: 34px;

        font-size: 22px;
    }

    .word-timing-text {
        min-height: 38px;

        padding:
            8px
            12px;

        font-size: 14px;
    }

    .word-timing-words {
        min-height: 34px;
        gap: 6px;
    }

    .word-timing-word {
        min-height: 30px;

        padding:
            5px
            8px;

        font-size: 11px;
    }

    .word-waveform-shell {
        min-height: 250px;

        grid-template-rows:
            minmax(
                210px,
                1fr
            )
            auto
            auto;
    }

    .word-waveform-canvas {
        min-height: 210px;
        height: 100%;
    }

    .word-timing-panel button {
        min-height: 34px;
    }

    .word-timing-progress-card {
        padding:
            9px
            12px;
    }
}

/* Very short laptop windows, including browser chrome taking a lot of height. */
@media (max-height: 760px) {

    body.word-timing-available
    .word-timing-panel.is-open {
        inset: 6px;
        left: 6px;
        bottom: 6px;

        padding:
            10px
            12px
            16px;

        gap: 8px;

        border-radius: 18px;
    }

    .word-waveform-shell {
        min-height: 210px;

        grid-template-rows:
            minmax(
                180px,
                34vh
            )
            auto
            auto;
    }

    .word-waveform-canvas {
        min-height: 180px;
    }

    .word-timing-instruction,
    .word-timing-status {
        font-size: 10px;
    }

    .word-timing-transport {
        gap: 5px;
    }

    .word-timing-speed-row,
    .word-timing-source-row,
    .word-timing-zoom-row {
        gap: 8px;
    }
}

/* General site spacing for common laptop-sized browser windows. */
@media (max-width: 1440px) and (max-height: 900px) {

    header {
        padding:
            22px
            28px;
    }

    h1 {
        font-size: 24px;
        letter-spacing: 4px;
    }

    nav {
        gap: 22px;
    }

    nav a {
        font-size: 12px;
    }

    .music-player {
        right: 14px;
        bottom: 12px;
    }

    .music-player-panel {
        right: 76px;
        bottom: 72px;

        width: 292px;
        height: 292px;
    }

    .music-player-shell {
        padding:
            48px
            50px;
    }

    .music-player-main-view,
    .music-player-lyrics-view {
        inset:
            48px
            50px;
    }

    .music-lyrics-stage {
        min-height: 150px;

        padding:
            14px
            16px
            16px;
    }
}


/* --------------------------------------------------
   WORD TIMING EDITOR — LIQUID GLASS REFINEMENT
   -------------------------------------------------- */

body.word-timing-available
.word-timing-panel.is-open {
    color: rgba(248,252,255,0.96);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.052) 0%,
            rgba(255,255,255,0.018) 30%,
            rgba(145,208,255,0.024) 62%,
            rgba(255,181,225,0.018) 100%
        ),
        rgba(7,13,26,0.05);

    border:
        1px solid
        rgba(255,255,255,0.20);

    backdrop-filter:
        blur(24px)
        saturate(145%)
        brightness(1.035);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%)
        brightness(1.035);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -1px 0 rgba(150,205,255,0.075),
        inset 1px 0 0 rgba(255,185,226,0.045),
        inset -1px 0 0 rgba(145,208,255,0.045),
        0 18px 60px rgba(0,0,0,0.16),
        0 0 42px rgba(165,210,255,0.035);
}

body.word-timing-available
.word-timing-panel.is-open::before {
    content: "";

    position: absolute;
    inset: 1px;
    z-index: 0;

    border-radius:
        calc(24px - 1px);

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.045);

    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(255,255,255,0.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(145,208,255,0.032),
            transparent 30%
        ),
        radial-gradient(
            circle at 7% 82%,
            rgba(255,181,225,0.024),
            transparent 26%
        );

    box-shadow:
        inset 18px 0 30px rgba(255,181,224,0.012),
        inset -18px 0 30px rgba(146,207,255,0.014);
}

body.word-timing-available
.word-timing-panel.is-open > * {
    position: relative;
    z-index: 1;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    background:
        linear-gradient(
            180deg,
            rgba(7,13,26,0.10) 0%,
            rgba(7,13,26,0.045) 72%,
            rgba(7,13,26,0) 100%
        );

    backdrop-filter:
        blur(14px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);
}

.word-timing-header strong {
    text-shadow:
        0 0 18px rgba(210,232,255,0.12);
}

.word-timing-text,
.word-timing-progress-card,
.word-timing-zoom-row {
    border:
        1px solid
        rgba(255,255,255,0.115);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.042),
            rgba(255,255,255,0.012)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        inset 0 -1px 0 rgba(120,185,255,0.028);
}

.word-timing-word,
.word-timing-panel button {
    border-color:
        rgba(255,255,255,0.14);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.022)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(130,195,255,0.025);

    backdrop-filter:
        blur(7px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(7px)
        saturate(120%);

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.word-timing-panel button:hover,
.word-timing-panel button:focus-visible {
    border-color:
        rgba(220,240,255,0.34);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.09),
            rgba(150,210,255,0.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 18px rgba(150,205,255,0.055);
}

.word-timing-word.is-selected,
.word-timing-source-options button.is-active,
.word-timing-save.has-unsaved {
    color:
        rgba(255,247,195,0.98);

    border-color:
        rgba(255,220,72,0.44);

    background:
        linear-gradient(
            180deg,
            rgba(255,224,84,0.105),
            rgba(255,207,38,0.038)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,244,183,0.16),
        0 0 18px rgba(255,214,64,0.07);
}

.word-waveform-canvas {
    border-color:
        rgba(255,255,255,0.15);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.04),
            rgba(135,195,255,0.016)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(120,185,255,0.028),
        0 10px 28px rgba(0,0,0,0.055);
}

/* Give zoom its own protected band so its label and hit targets never overlap. */
.word-waveform-shell {
    overflow: visible;
    gap: 14px;
    margin-bottom: 8px;
}

.word-timing-zoom-row {
    position: relative;
    z-index: 6;

    grid-template-columns:
        48px
        minmax(
            0,
            1fr
        )
        48px;

    grid-template-rows:
        auto
        42px;

    column-gap: 14px;
    row-gap: 8px;

    min-height: 74px;

    padding:
        9px
        12px
        11px;

    box-sizing: border-box;

    border-radius: 14px;
}

.word-timing-zoom-label {
    grid-column:
        1 / -1;

    display: flex;
    align-items: baseline;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    gap: 16px;
}

.word-timing-zoom-label span {
    font-size: 10px;
    letter-spacing: 0.25px;
}

.word-timing-zoom-label strong {
    font-size: 14px;
}

.word-timing-zoom-row > button {
    position: relative;
    z-index: 8;

    width: 48px;
    min-width: 48px;
    min-height: 42px;

    padding: 0;

    pointer-events: auto;
}

#word-waveform-zoom {
    position: relative;
    z-index: 7;

    grid-column: 2;

    width: 100%;
    min-width: 0;

    pointer-events: auto;
}

.word-timing-instruction {
    position: relative;
    z-index: 1;

    min-height: 16px;
    margin:
        4px
        0
        3px;

    padding:
        0
        12px;

    pointer-events: none;

    opacity: 0.56;
}

/* Replace browser-default blue sliders with the editor's glass controls. */
.word-timing-panel
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;

    height: 22px;

    margin: 0;

    background: transparent;

    cursor: pointer;
}

.word-timing-panel
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(205,232,255,0.12),
            rgba(255,255,255,0.075)
        );

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.055);
}

.word-timing-panel
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 17px;
    height: 17px;

    margin-top: -6.5px;

    border:
        1px solid
        rgba(255,255,255,0.46);

    border-radius: 50%;

    background:
        rgba(232,246,255,0.94);

    box-shadow:
        0 0 0 4px rgba(155,215,255,0.035),
        0 0 14px rgba(178,224,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.90);
}

.word-timing-panel
input[type="range"]::-moz-range-track {
    height: 6px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 999px;

    background:
        rgba(215,235,255,0.09);
}

.word-timing-panel
input[type="range"]::-moz-range-thumb {
    width: 17px;
    height: 17px;

    border:
        1px solid
        rgba(255,255,255,0.46);

    border-radius: 50%;

    background:
        rgba(232,246,255,0.94);

    box-shadow:
        0 0 14px rgba(178,224,255,0.14);
}

.word-waveform-scrubber {
    height: 24px;
}

.word-timing-progress-track {
    border:
        1px solid
        rgba(255,255,255,0.07);

    background:
        rgba(255,255,255,0.055);

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.12);
}

.word-timing-progress-fill {
    background:
        linear-gradient(
            90deg,
            rgba(255,208,45,0.72),
            rgba(255,236,143,0.98)
        );

    box-shadow:
        0 0 12px rgba(255,221,72,0.16);
}

/* Keep the glass editor usable on laptop-height layouts. */
@media (max-height: 900px) {

    .word-timing-zoom-row {
        min-height: 70px;

        grid-template-rows:
            auto
            40px;

        padding:
            8px
            10px
            10px;
    }

    .word-timing-zoom-row > button {
        min-height: 40px;
    }

    .word-timing-instruction {
        margin-top: 6px;
    }
}

@media (max-width: 860px) {

    .word-timing-zoom-row {
        grid-template-columns:
            44px
            minmax(
                0,
                1fr
            )
            44px;
    }

    .word-timing-zoom-label {
        grid-column:
            1 / -1;
    }

    .word-timing-zoom-row > button {
        width: 44px;
        min-width: 44px;
    }
}


/* --------------------------------------------------
   WORD TIMING EDITOR — FINAL LAYOUT GEOMETRY RESET
   -------------------------------------------------- */

/*
    The editor used to rely on an outer CSS grid with fixed/minmax tracks.
    As controls were added, child sections could become taller than the
    track assigned to them and visually spill into the next row.

    Use natural vertical flow instead. Every editor section now owns its
    full height, so overlap is structurally impossible.
*/
body.word-timing-available
.word-timing-panel.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 14px;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        18px
        20px
        22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.064) 0%,
            rgba(255,255,255,0.028) 32%,
            rgba(145,208,255,0.038) 66%,
            rgba(255,181,225,0.030) 100%
        ),
        rgba(7,13,26,0.11);

    scrollbar-gutter: stable;
}

/* Keep every direct section in normal flow. */
body.word-timing-available
.word-timing-panel.is-open > * {
    flex:
        0
        0
        auto;

    width: 100%;

    box-sizing: border-box;
}

/* Header can remain sticky without consuming neighboring geometry. */
body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    top: -18px;

    margin:
        -4px
        0
        0;

    padding:
        4px
        0
        10px;
}

/* Give the lyric title and word chips their own clean bands. */
.word-timing-text {
    margin: 0;
}

.word-timing-words {
    margin: 0;

    padding:
        0
        4px;

    align-content: flex-start;
}

/*
    Waveform owns exactly three vertical regions:
    1. waveform canvas
    2. scrubber
    3. zoom controls
*/
.word-waveform-shell {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        );

    grid-template-rows:
        auto
        auto
        auto;

    gap: 12px;

    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: visible;
}

.word-waveform-canvas {
    grid-row: 1;

    width: 100%;
    height:
        clamp(
            220px,
            31vh,
            340px
        );

    min-height: 0;
    max-height: none;

    display: block;
}

.word-waveform-scrubber {
    grid-row: 2;

    width: 100%;
    height: 26px;

    margin: 0;
}

.word-timing-zoom-row {
    grid-row: 3;

    display: grid;

    grid-template-columns:
        52px
        minmax(
            0,
            1fr
        )
        52px;

    grid-template-rows:
        auto
        44px;

    align-items: center;

    column-gap: 16px;
    row-gap: 10px;

    min-height: 82px;

    margin: 0;

    padding:
        10px
        14px
        12px;

    overflow: visible;
}

.word-timing-zoom-label {
    grid-column:
        1 / -1;

    grid-row: 1;
}

.word-timing-zoom-row
#word-waveform-zoom-out {
    grid-column: 1;
    grid-row: 2;
}

.word-timing-zoom-row
#word-waveform-zoom {
    grid-column: 2;
    grid-row: 2;
}

.word-timing-zoom-row
#word-waveform-zoom-in {
    grid-column: 3;
    grid-row: 2;
}

.word-timing-zoom-row > button {
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;

    margin: 0;
    padding: 0;
}

/* Instruction is now a standalone row below the complete waveform block. */
.word-timing-instruction {
    min-height: 18px;

    margin: 0;
    padding:
        2px
        12px
        4px;

    line-height: 1.45;

    text-align: center;
}

/* Every remaining control family receives its own isolated row. */
.word-timing-transport,
.word-timing-source-row,
.word-timing-speed-row,
.word-timing-primary,
.word-timing-nav,
.word-timing-progress-card,
.word-timing-save-row,
.word-timing-status {
    margin: 0;
}

.word-timing-transport {
    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}

.word-timing-source-row,
.word-timing-speed-row {
    min-height: 48px;
}

.word-timing-primary,
.word-timing-nav,
.word-timing-save-row {
    gap: 10px;
}

.word-timing-progress-card {
    gap: 10px;

    padding:
        12px
        14px;
}

/* Raise internal glass surfaces to roughly the requested 11% visual density. */
.word-timing-text,
.word-timing-progress-card,
.word-timing-zoom-row,
.word-timing-word,
.word-timing-panel button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.11),
            rgba(255,255,255,0.045)
        );
}

.word-waveform-canvas {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.085),
            rgba(130,190,255,0.032)
        );
}

/* Laptop heights: shrink the waveform itself, never the control rows around it. */
@media (max-height: 900px) {

    body.word-timing-available
    .word-timing-panel.is-open {
        gap: 11px;

        padding:
            14px
            16px
            18px;
    }

    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header {
        top: -14px;
    }

    .word-waveform-canvas {
        height:
            clamp(
                190px,
                27vh,
                260px
            );
    }

    .word-timing-zoom-row {
        min-height: 76px;

        grid-template-columns:
            48px
            minmax(
                0,
                1fr
            )
            48px;

        grid-template-rows:
            auto
            40px;

        column-gap: 14px;
        row-gap: 8px;

        padding:
            9px
            12px
            10px;
    }

    .word-timing-zoom-row > button {
        width: 48px;
        min-width: 48px;
        height: 40px;
        min-height: 40px;
    }

    .word-timing-transport {
        gap: 8px;
    }
}

/* Narrow screens can wrap controls, but they still remain in normal flow. */
@media (max-width: 980px) {

    .word-timing-transport {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .word-timing-speed-row {
        grid-template-columns:
            1fr;
    }

    .word-timing-speed-presets {
        justify-content: stretch;
    }

    .word-timing-speed-presets button {
        flex: 1;
    }
}

@media (max-width: 680px) {

    .word-timing-source-row {
        grid-template-columns:
            1fr;
    }

    .word-timing-primary,
    .word-timing-nav,
    .word-timing-save-row {
        grid-template-columns:
            1fr;
    }

    .word-timing-zoom-row {
        grid-template-columns:
            44px
            minmax(
                0,
                1fr
            )
            44px;
    }

    .word-timing-zoom-row > button {
        width: 44px;
        min-width: 44px;
    }
}


/* --------------------------------------------------
   WORD TIMING EDITOR — INSTRUMENTAL MODE
   -------------------------------------------------- */

.word-timing-mode-row {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;
}

.word-timing-mode-row button {
    min-height: 40px;
}

.word-timing-mode-row button.is-active {
    color: rgba(236,249,255,0.98);

    border-color:
        rgba(151,221,255,0.42);

    background:
        linear-gradient(
            180deg,
            rgba(147,220,255,0.14),
            rgba(120,194,255,0.045)
        );

    box-shadow:
        inset 0 1px 0 rgba(235,250,255,0.16),
        0 0 18px rgba(135,210,255,0.07);
}

.word-timing-instrumental-controls {
    display: grid;
    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}

.word-timing-instrumental-controls[hidden] {
    display: none;
}

body.word-timing-instrumental-mode
.word-timing-text {
    color: rgba(219,244,255,0.96);

    border-color:
        rgba(151,221,255,0.22);

    background:
        linear-gradient(
            180deg,
            rgba(132,211,255,0.10),
            rgba(111,185,255,0.035)
        );
}

body.word-timing-instrumental-mode
.word-timing-word.is-selected {
    color: rgba(221,247,255,1);

    border-color:
        rgba(140,222,255,0.50);

    background:
        linear-gradient(
            180deg,
            rgba(132,219,255,0.15),
            rgba(95,184,255,0.05)
        );

    box-shadow:
        inset 0 1px 0 rgba(235,251,255,0.18),
        0 0 18px rgba(118,205,255,0.09);
}

@media (max-width: 680px) {
    .word-timing-instrumental-controls {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------
   ASTER PRAYER INTERFACE
   -------------------------------------------------- */

.prayer-interface {
    position: relative;

    width: 214px;
    min-height: 38px;

    margin-top: 19px;

    overflow: visible;
}

.prayer-interface .prayer-panel-row {
    width: max-content;

    margin: 0;
}

.prayer-interface .prayer-schedule {
    display: none;

    margin-top: 0;
}

.prayer-interface.is-prayer-open
.prayer-schedule {
    display: block;
}

.prayer-interface
.prayer-settings-panel {
    display: none;
}

.prayer-interface
.prayer-settings-panel.is-open {
    display: block;
}

.prayer-interface .aster {
    position: absolute;
    top: 11px;
    left: 185px;
    z-index: 8;

    opacity: 0.72;
}

.prayer-interface.is-prayer-open
.aster {
    opacity: 1;

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(210,230,255,0.42)
        );
}

.prayer-interface.is-config-open
.aster {
    transform: rotate(90deg);

    filter:
        drop-shadow(
            0
            0
            7px
            rgba(210,230,255,0.72)
        );
}

.prayer-interface.is-prayer-open
.prayer-schedule {
    animation:
        aster-prayer-open
        280ms
        cubic-bezier(0.16,1,0.3,1)
        both;
}

.prayer-interface.is-config-open
.prayer-settings-panel {
    animation:
        aster-config-open
        300ms
        cubic-bezier(0.16,1,0.3,1)
        both;
}

@keyframes aster-prayer-open {
    from {
        opacity: 0;
        transform:
            translateY(-7px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes aster-config-open {
    from {
        opacity: 0;
        transform:
            translateX(-10px)
            scale(0.975);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}

@media (max-width: 768px) {

    .prayer-interface {
        width: 214px;
    }

    .prayer-interface
    .prayer-settings-panel {
        position: absolute;
        top: 0;
        left:
            calc(
                100% +
                8px
            );
    }
}


/* --------------------------------------------------
   MUSIC TIMING WORKSPACE + INTERACTIVE LYRIC CAROUSEL
   -------------------------------------------------- */

/*
    Leave the open music bubble visible while authoring lyrics.
    The editor still fills the available height, but stops before the
    player's right-side footprint instead of covering the full viewport.
*/
@media (min-width: 900px) {
    body.word-timing-available
    .word-timing-panel.is-open {
        left: 16px;
        right: auto;

        /*
            Keep the authoring workspace useful, but permanently reserve
            enough room for the fully-open music bubble on the right.
        */
        width:
            min(
                620px,
                calc(100vw - 470px)
            );

        max-width:
            calc(100vw - 32px);
    }
}

.music-lyrics-preview,
.music-lyrics-stage {
    cursor: default;

    overscroll-behavior: contain;
    touch-action: none;

    -webkit-user-select: none;
    user-select: none;
}

.music-lyrics-preview
.music-lyric-line,
.music-lyrics-stage
.music-lyric-line {
    cursor: pointer;

    transition:
        filter 150ms ease,
        text-shadow 150ms ease;
}

.music-lyrics-preview
.music-lyric-line:hover,
.music-lyrics-stage
.music-lyric-line:hover,
.music-lyrics-preview
.music-lyric-line:focus-visible,
.music-lyrics-stage
.music-lyric-line:focus-visible {
    filter:
        brightness(1.16);

    text-shadow:
        0 0 12px
        rgba(210,238,255,0.18);

    outline: none;
}

.music-lyrics-preview.is-manual-browsing,
.music-lyrics-stage.is-manual-browsing {
    cursor: default;
}

.music-lyrics-preview.is-manual-browsing
.music-waveform,
.music-lyrics-stage.is-manual-browsing
.music-waveform {
    opacity: 0.18;
}

/* Tiny floating controls for the immersive full-lyric view. */
.music-player-lyrics-view {
    overflow: visible;
}

.music-lyrics-floating-controls {
    position: absolute;
    left: -60px;
    top: -58px;
    z-index: 12;

    /*
        Match the control layer to the actual 324px music bubble so every
        control can sit on one shared circular radius.
    */
    width: 324px;
    height: 324px;

    display: block;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        scale(0.985);

    transform-origin:
        50%
        50%;

    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.16,1,0.3,1),
        visibility 0s linear 220ms;
}

.music-player-panel.is-lyrics-mode
.music-lyrics-floating-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: none;

    transform:
        scale(1);

    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.16,1,0.3,1),
        visibility 0s linear 0s;
}

/*
    All three transport bubbles share the same inner-rim radius.
    Play is fixed at 45 degrees, exactly on the radial line that runs
    from the music bubble center through the connector bubbles.
*/
#music-lyrics-backward,
#music-lyrics-play-pause,
#music-lyrics-forward {
    position: absolute;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: auto;
}

#music-lyrics-backward {
    left: 70.576%;
    top: 88.697%;
}

#music-lyrics-play-pause {
    left: 80.990%;
    top: 80.990%;
}

#music-lyrics-forward {
    left: 88.697%;
    top: 70.576%;
}

.music-lyrics-float-button {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius: 50%;

    color:
        rgba(242,250,255,0.92);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.022)
        ),
        rgba(9,17,30,0.08);

    backdrop-filter:
        blur(12px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.13),
        0 4px 14px
        rgba(0,0,0,0.08);

    font-size: 10px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.music-lyrics-float-button:hover,
.music-lyrics-float-button:focus-visible {
    transform:
        translate(
            -50%,
            calc(-50% - 1px)
        )
        scale(1.06);

    border-color:
        rgba(230,246,255,0.34);

    background:
        rgba(255,255,255,0.10);

    outline: none;
}

.music-lyrics-float-play {
    width: 31px;
    height: 31px;

    font-size: 9px;
}

.music-transport-icon {
    width: 10px;
    height: 10px;

    display: block;

    overflow: visible;
}

#music-lyrics-backward
.music-transport-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#music-lyrics-forward
.music-transport-icon path:first-child {
    fill: currentColor;
    stroke: none;
}

#music-lyrics-forward
.music-transport-icon path:last-child {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.music-play-icon,
.music-pause-icon {
    width: 12px;
    height: 12px;

    display: block;
}

.music-play-icon path,
.music-pause-icon rect {
    fill: currentColor;
}

.music-pause-icon {
    display: none;
}

#music-lyrics-play-pause.is-playing
.music-play-icon {
    display: none;
}

#music-lyrics-play-pause.is-playing
.music-pause-icon {
    display: block;
}

/*
    Curved song-position scrubber on the lower-left rim. It mirrors the
    volume control visually while staying much longer so progress is readable
    at a glance and easy to drag.
*/
.music-lyrics-progress-control {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.music-lyrics-progress-arc {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    outline: none;
    pointer-events: none;
}

.music-lyrics-progress-track,
.music-lyrics-progress-fill,
.music-lyrics-progress-hit {
    fill: none;
    stroke-linecap: round;
}

.music-lyrics-progress-track {
    stroke:
        rgba(255,255,255,0.12);

    stroke-width: 3;
}

.music-lyrics-progress-fill {
    stroke:
        rgba(238,249,255,0.88);

    stroke-width: 3.4;

    stroke-dasharray:
        0
        100;

    filter:
        drop-shadow(
            0
            0
            4px
            rgba(190,230,255,0.16)
        );
}

.music-lyrics-progress-hit {
    stroke:
        rgba(255,255,255,0);

    stroke-width: 24;

    pointer-events: stroke;
    cursor: pointer;
    touch-action: none;
}

.music-lyrics-progress-thumb {
    fill:
        rgba(246,252,255,0.98);

    stroke:
        rgba(255,255,255,0.28);

    stroke-width: 1;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(190,230,255,0.22)
        );
}

.music-lyrics-progress-arc:focus-visible
.music-lyrics-progress-track {
    stroke:
        rgba(220,242,255,0.30);
}

/*
    Real curved volume control. The SVG path uses the same 148px radius as
    the transport-button centers, so its track is literally part of the same
    circle instead of a straight slider rotated to look vertical.
*/
.music-lyrics-float-volume {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.music-lyrics-volume-arc {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    outline: none;
    pointer-events: none;
}

.music-lyrics-volume-track,
.music-lyrics-volume-fill,
.music-lyrics-volume-hit {
    fill: none;

    stroke-linecap: round;
}

.music-lyrics-volume-track {
    stroke:
        rgba(255,255,255,0.14);

    stroke-width: 3.4;
}

.music-lyrics-volume-fill {
    stroke:
        rgba(235,249,255,0.90);

    stroke-width: 3.8;

    stroke-dasharray:
        65
        35;

    filter:
        drop-shadow(
            0
            0
            4px
            rgba(190,230,255,0.18)
        );
}

.music-lyrics-volume-hit {
    stroke:
        rgba(255,255,255,0);

    stroke-width: 26;

    pointer-events: stroke;
    cursor: pointer;
    touch-action: none;
}

.music-lyrics-volume-thumb {
    fill:
        rgba(246,252,255,0.98);

    stroke:
        rgba(255,255,255,0.30);

    stroke-width: 1;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(190,230,255,0.26)
        );
}

.music-lyrics-volume-icon {
    fill:
        rgba(226,242,252,0.66);

    font-family: Arial, sans-serif;
    font-size: 9px;

    pointer-events: none;
}

.music-lyrics-volume-arc:focus-visible
.music-lyrics-volume-track {
    stroke:
        rgba(220,242,255,0.30);
}

.music-lyrics-volume-native {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

/*
    The smaller player variants keep identical normalized geometry.
    Only the control canvas is resized/re-aligned to the smaller circle.
*/
@media (max-width: 1180px) {
    .music-lyrics-floating-controls {
        left: -46px;
        top: -46px;

        width: 292px;
        height: 292px;
    }
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-lyrics-floating-controls {
        left: -50px;
        top: -48px;

        width: 292px;
        height: 292px;
    }
}


.music-lyrics-preview.is-manual-browsing
.music-lyric-line,
.music-lyrics-stage.is-manual-browsing
.music-lyric-line {
    transition:
        transform
        105ms
        cubic-bezier(0.22,0.72,0.28,1),
        opacity
        95ms
        ease-out,
        font-size
        105ms
        cubic-bezier(0.22,0.72,0.28,1),
        filter
        120ms
        ease,
        text-shadow
        120ms
        ease;
}


/* --------------------------------------------------
   MUSIC BUBBLE — SINGLE LYRIC MODE
   -------------------------------------------------- */

.music-player-panel
.music-player-main-view {
    display: none;
}

.music-player-panel
.music-player-lyrics-view {
    opacity: 1;
    transform: scale3d(1,1,1);
    pointer-events: auto;
}

.music-lyrics-close {
    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius: 50%;

    color:
        rgba(244,250,255,0.86);

    background:
        rgba(255,255,255,0.025);

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1;

    cursor: pointer;
}

.music-lyrics-close:hover,
.music-lyrics-close:focus-visible {
    border-color:
        rgba(255,255,255,0.28);

    background:
        rgba(255,255,255,0.07);

    outline: none;
}

.music-lyrics-stage {
    cursor: default;
}

.music-lyrics-stage
.music-lyric-line {
    font-weight: 600;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyric-current {
        font-size: 16px;
    }
}


/* Keep the Enter diamond above all player layers during the intro. */
body.intro-mode
.awakening-star {
    z-index: 720;

    opacity: 1;
    visibility: visible;
}


/*
    Intro visibility failsafe.
    The HTML hidden attribute normally maps to display:none!important.
    During intro-mode, explicitly restore the Enter star even if a browser
    or live-reload session carries a stale hidden attribute across reloads.
*/
body.intro-mode
#awakening-star,
body.intro-mode
#awakening-star[hidden] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}


/* --------------------------------------------------
   AWAKENING STAR — TOP LAYER GUARANTEE
   -------------------------------------------------- */

#awakening-star[popover] {
    position: fixed !important;

    inset: auto !important;
    top: 47% !important;
    left: 50% !important;

    width: 104px !important;
    height: 122px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}

#awakening-star[popover]::backdrop {
    display: none;
}

body.intro-charging
#awakening-star[popover] {
    opacity: 1 !important;
}


/* --------------------------------------------------
   MUSIC BUBBLE — TOP RIM + CENTERPIECE LYRICS
   -------------------------------------------------- */

/*
    Free the title from document flow so the lyric wheel can be centered on
    the actual center of the circular player.
*/
.music-player-lyrics-view
.music-lyrics-header {
    position: absolute;
    left: 50%;
    top: -36px;
    z-index: 8;

    width: 170px;
    min-height: 0;

    display: block;

    transform:
        translateX(-50%);

    text-align: center;

    pointer-events: none;
}

.music-lyrics-heading-copy {
    display: grid;
    justify-items: center;
    gap: 4px;

    width: 100%;
}

.music-player-lyrics-view
.music-lyrics-title {
    margin: 0;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.72px;

    white-space: nowrap;

    text-shadow:
        0 1px 5px
        rgba(4,14,24,0.42);
}

.music-player-lyrics-view
.music-lyrics-artist {
    margin: 0;

    font-size: 7px;
    line-height: 1;
    letter-spacing: 0.58px;

    white-space: nowrap;

    opacity: 0.58;
}

/*
    The lyric stage now shares the exact center of the circular player.
    It also gets a little extra horizontal room because the circle is widest
    through its middle.
*/
.music-player-lyrics-view
.music-lyrics-stage {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -22px;
    right: -22px;

    min-height: 0;

    padding:
        0
        10px;

    display: block;

    overflow: hidden;

    text-align: center;
}

/*
    Center lyric is the visual centerpiece. The live carousel also receives
    the same sizes from JS, so there is no size jump when playback advances.
*/
.music-player-lyrics-view
.music-lyric-current {
    font-size: 18.5px;
    line-height: 1.34;
    letter-spacing: 0.10px;
    font-weight: 600;

    text-shadow:
        0 1px 5px
        rgba(4,14,24,0.50),
        0 0 13px
        rgba(220,241,255,0.08);
}

.music-player-lyrics-view
.music-lyric-prev,
.music-player-lyrics-view
.music-lyric-next {
    font-size: 11.5px;
    line-height: 1.42;
}

/*
    Close control joins the same circular coordinate system as the transport
    controls. Its center sits on the upper-right inner rim.
*/
#music-player-close.music-lyrics-close {
    position: absolute;

    left: 81.85%;
    top: 18.15%;

    z-index: 14;

    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    padding: 0;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 50%;

    color:
        rgba(244,250,255,0.78);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.018)
        ),
        rgba(9,17,30,0.06);

    backdrop-filter:
        blur(10px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(10px)
        saturate(130%);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.11),
        0 3px 10px
        rgba(0,0,0,0.06);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    pointer-events: auto;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

#music-player-close.music-lyrics-close:hover,
#music-player-close.music-lyrics-close:focus-visible {
    transform:
        translate(
            -50%,
            calc(-50% - 1px)
        )
        scale(1.05);

    border-color:
        rgba(235,248,255,0.30);

    color:
        rgba(250,253,255,0.96);

    background:
        rgba(255,255,255,0.08);

    outline: none;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-header {
        top: -30px;

        width: 158px;
    }

    .music-player-lyrics-view
    .music-lyrics-stage {
        left: -18px;
        right: -18px;
    }

    .music-player-lyrics-view
    .music-lyric-current {
        font-size: 18.5px;
    }

    .music-player-lyrics-view
    .music-lyric-prev,
    .music-player-lyrics-view
    .music-lyric-next {
        font-size: 11.5px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — FINAL CLEANUP PASS
   -------------------------------------------------- */

/* The filled arc's rounded cap is the song-position indicator. */
.music-lyrics-progress-fill {
    filter: none;

    shape-rendering: geometricPrecision;
}

.music-lyrics-progress-thumb {
    display: none;
}

/* Longer, finer volume gesture along the rim. */
.music-lyrics-volume-track {
    stroke-width: 2.1;
}

.music-lyrics-volume-fill {
    stroke-width: 2.45;

    filter:
        drop-shadow(
            0
            0
            2px
            rgba(190,230,255,0.12)
        );
}

.music-lyrics-volume-hit {
    stroke-width: 28;
}

/* Slightly larger metadata, still restrained against the top rim. */
.music-player-lyrics-view
.music-lyrics-header {
    top: -39px;

    width: 194px;
}

.music-lyrics-heading-copy {
    gap: 5px;
}

.music-player-lyrics-view
.music-lyrics-title {
    font-size: 12.5px;
    line-height: 1.08;
    letter-spacing: 0.82px;
}

.music-player-lyrics-view
.music-lyrics-artist {
    font-size: 8.5px;
    line-height: 1.05;
    letter-spacing: 0.66px;

    opacity: 0.62;
}

/*
    The center of a circle is its widest horizontal section. Give the hero
    lyric almost the full usable diameter so the doubled type can breathe.
*/
.music-player-lyrics-view
.music-lyrics-stage {
    left: -42px;
    right: -42px;
}

.music-player-lyrics-view
.music-lyric-current {
    font-size: 37px;
    line-height: 1.14;
    letter-spacing: 0;
    font-weight: 600;

    text-wrap: balance;
}

.music-player-lyrics-view
.music-lyric-prev,
.music-player-lyrics-view
.music-lyric-next {
    font-size: 11.5px;
    line-height: 1.38;
}

/* The X control has been removed; the launcher and outside-click own closing. */
#music-player-close.music-lyrics-close {
    display: none !important;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-header {
        top: -34px;

        width: 184px;
    }

    .music-player-lyrics-view
    .music-lyrics-stage {
        left: -40px;
        right: -40px;
    }

    .music-player-lyrics-view
    .music-lyric-current {
        font-size: 37px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — RIM GEOMETRY REBALANCE
   -------------------------------------------------- */

/*
    Tight transport cluster: 14-degree steps around the same inner radius.
    The next button stops well before the volume gesture begins.
*/
#music-lyrics-backward {
    left: 72.573%;
    top: 87.567%;
}

#music-lyrics-play-pause {
    left: 80.990%;
    top: 80.990%;
}

#music-lyrics-forward {
    left: 87.567%;
    top: 72.573%;
}

/*
    Song position and volume now share one visual language:
    fine arc + tiny luminous thumb. No SVG filters are used on the moving
    circles, avoiding compositor flicker while they move.
*/
.music-lyrics-progress-track,
.music-lyrics-volume-track {
    stroke-width: 2.05;
}

.music-lyrics-progress-fill,
.music-lyrics-volume-fill {
    stroke-width: 2.25;

    filter: none;
}

.music-lyrics-progress-thumb,
.music-lyrics-volume-thumb {
    display: block !important;

    fill:
        rgba(252,254,255,1);

    stroke:
        rgba(205,237,255,0.36);

    stroke-width: 2.4;

    vector-effect:
        non-scaling-stroke;

    filter: none;

    pointer-events: none;
}

/*
    Keep generous invisible hit targets even though the visible lines are fine.
*/
.music-lyrics-progress-hit,
.music-lyrics-volume-hit {
    stroke-width: 26;
}

/*
    The hero lyric now uses the complete center diameter of the circle.
*/
.music-player-lyrics-view
.music-lyrics-stage {
    left: -60px;
    right: -60px;
}

.music-player-lyrics-view
.music-lyric-current {
    font-size: 74px;
    line-height: 1;
    letter-spacing: -0.8px;
    font-weight: 600;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-stage {
        left: -50px;
        right: -50px;
    }

    .music-player-lyrics-view
    .music-lyric-current {
        font-size: 74px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — TIMER + CONSISTENT LYRIC SCALE
   -------------------------------------------------- */

/*
    Elapsed song time sits at 6 o'clock. The progress arc stops just to its
    left, so the arc and timer read as one continuous progress control.
*/
.music-lyrics-elapsed-time {
    position: absolute;

    left: 50%;
    top: 94.2%;
    z-index: 13;

    min-width: 32px;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        rgba(240,249,255,0.74);

    font-family:
        "Cinzel",
        serif;

    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.45px;
    text-align: center;

    text-shadow:
        0 0 6px
        rgba(195,229,255,0.12);

    pointer-events: none;
}

/*
    The smaller 21px transport bubbles sit at radius ~142px. Move the larger
    31px play bubble inward so all three buttons have nearly identical
    clearance between their outer edge and the inside rim.
*/
#music-lyrics-play-pause {
    left: 79.90%;
    top: 79.90%;
}

/*
    Normal playback, automatic transitions and manual scrolling all use the
    same 20px hero lyric now. CSS mirrors the JS value as a fallback.
*/
.music-player-lyrics-view
.music-lyrics-stage {
    left: -42px;
    right: -42px;
}

.music-player-lyrics-view
.music-lyric-current {
    font-size: 20px;
    line-height: 1.20;
    letter-spacing: 0.05px;
    font-weight: 600;

    text-wrap: balance;
}

.music-player-lyrics-view
.music-lyric-prev,
.music-player-lyrics-view
.music-lyric-next {
    font-size: 10.5px;
    line-height: 1.42;
}

/*
    Both moving scrubber dots use the same tiny luminous treatment without
    GPU filters, preventing the old blinking artifact.
*/
.music-lyrics-progress-thumb,
.music-lyrics-volume-thumb {
    fill:
        rgba(253,255,255,1);

    stroke:
        rgba(190,229,255,0.62);

    stroke-width: 3.1;

    vector-effect:
        non-scaling-stroke;

    filter: none;
}

/*
    Keep the two visible scrubber strokes identical. The progress control is
    longer by geometry, not by visual weight.
*/
.music-lyrics-progress-track,
.music-lyrics-volume-track {
    stroke-width: 2.05;
}

.music-lyrics-progress-fill,
.music-lyrics-volume-fill {
    stroke-width: 2.25;

    filter: none;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-lyrics-elapsed-time {
        top: 93.8%;

        font-size: 7.5px;
    }

    .music-player-lyrics-view
    .music-lyrics-stage {
        left: -38px;
        right: -38px;
    }

    .music-player-lyrics-view
    .music-lyric-current {
        font-size: 20px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — CONTINUOUS CAROUSEL TYPOGRAPHY
   -------------------------------------------------- */

/*
    Every full-view lyric keeps identical text geometry in every carousel
    role. Size hierarchy now comes from transform scale only. This prevents
    re-wrapping, letter-spacing changes and line-height changes at handoff.
*/
.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-prev,
.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-current,
.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-next {
    font-size: 20px !important;
    line-height: 1.20;
    letter-spacing: 0.05px;
    font-weight: 600;

    text-wrap: balance;

    transform-origin: center center;
}

/*
    Manual wheel movement is already driven by fractional carousel geometry.
    Keep only a very short transform interpolation to absorb coarse mouse-wheel
    steps. Font-size is intentionally absent so glyphs never morph.
*/
.music-lyrics-stage.is-manual-browsing
.music-lyric-line {
    transition:
        transform
        75ms
        cubic-bezier(0.22,0.72,0.28,1),
        opacity
        70ms
        ease-out,
        filter
        100ms
        ease,
        text-shadow
        100ms
        ease;
}

/*
    Scrolling is strictly a lyric-browsing mode. Waveforms only belong to the
    live instrumental presentation, never behind manually browsed lyrics.
*/
.music-lyrics-preview.is-manual-browsing
.music-waveform,
.music-lyrics-stage.is-manual-browsing
.music-waveform {
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-prev,
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-current,
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-next {
        font-size: 20px !important;
        line-height: 1.20;
        letter-spacing: 0.05px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — 18PX HERO + SKY-BLUE LYRIC GLOW
   -------------------------------------------------- */

.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-prev,
.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-current,
.music-player-lyrics-view
.music-lyrics-stage
.music-lyric-next {
    font-size: 18px !important;
}

/*
    Keep the lyric color cool and luminous rather than pure white. The fill
    stays readable over the landscape while the glow carries the baby-blue hue.
*/
.music-player-lyrics-view
.music-lyric-word {
    background:
        linear-gradient(
            to right,
            rgba(
                187,
                231,
                255,
                1
            )
            0%,
            rgba(
                187,
                231,
                255,
                1
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                205,
                226,
                242,
                0.38
            )
            calc(
                var(
                    --karaoke-word-fill
                ) *
                100%
            ),
            rgba(
                205,
                226,
                242,
                0.38
            )
            100%
        );

    -webkit-background-clip:
        text;
    background-clip:
        text;

    text-shadow:
        0 0
            calc(
                3px +
                (
                    7px *
                    var(
                        --karaoke-word-glow
                    )
                )
            )
            rgba(
                138,
                215,
                255,
                calc(
                    0.18 +
                    (
                        0.52 *
                        var(
                            --karaoke-word-glow
                        )
                    )
                )
            ),
        0 0 10px
            rgba(
                126,
                207,
                255,
                0.11
            );
}

.music-player-lyrics-view
.music-lyric-line[data-render-mode="plain"] {
    color:
        rgba(
            194,
            226,
            246,
            0.34
        );

    text-shadow:
        0 0 8px
        rgba(
            128,
            207,
            255,
            0.08
        );
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-prev,
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-current,
    .music-player-lyrics-view
    .music-lyrics-stage
    .music-lyric-next {
        font-size: 18px !important;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — IDLE CHROME
   -------------------------------------------------- */

/*
    Lyrics remain fully present while the supporting player chrome recedes.
    Hovering anywhere over the large bubble restores the controls.
*/
.music-player-panel.is-lyrics-mode
.music-lyrics-header {
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1);

    transform-origin:
        50%
        50%;

    transition:
        opacity
        320ms
        ease,
        transform
        360ms
        cubic-bezier(0.16,1,0.3,1);
}

.music-player-panel.is-lyrics-mode
.music-lyrics-floating-controls {
    opacity: 1;

    transform:
        scale(1);

    transition:
        opacity
        320ms
        ease,
        transform
        360ms
        cubic-bezier(0.16,1,0.3,1),
        visibility
        0s
        linear
        0s;
}

.music-player-panel.is-lyrics-mode:not(:hover)
.music-lyrics-header {
    opacity: 0;

    transform:
        translateX(-50%)
        scale(0.95);
}

.music-player-panel.is-lyrics-mode:not(:hover)
.music-lyrics-floating-controls {
    opacity: 0;

    transform:
        scale(0.95);
}

/* Requested metadata sizing. */
.music-player-lyrics-view
.music-lyrics-title {
    font-size: 12.5px;
}

.music-player-lyrics-view
.music-lyrics-artist {
    font-size: 9.5px;
}

/* Requested timer sizing. */
.music-lyrics-elapsed-time {
    font-size: 10px;
}

/*
    Enlarge only the symbol inside the existing 31px play/pause bubble.
*/
.music-play-icon,
.music-pause-icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-lyrics-elapsed-time {
        font-size: 9.5px;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — PROGRESS ENDPOINT STABILITY
   -------------------------------------------------- */

/*
    The moving dot is the only visible endpoint. The fill ends flat beneath it
    so there is no second rounded cap competing on sub-pixel frames.
*/
.music-lyrics-progress-fill {
    stroke-linecap: butt;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;

    shape-rendering: geometricPrecision;
}

.music-lyrics-progress-thumb {
    fill:
        rgba(253,255,255,1);

    stroke:
        rgba(167,221,255,0.58);

    stroke-width: 2.4;

    vector-effect:
        non-scaling-stroke;

    filter: none;

    opacity: 1;
}

/* Lower the song metadata block by exactly 2px. */
.music-player-lyrics-view
.music-lyrics-header {
    top: -37px;
}

@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-lyrics-view
    .music-lyrics-header {
        top: -32px;
    }
}


/* --------------------------------------------------
   MUSIC PLAYER V2 — CENTER SKY MODE
   -------------------------------------------------- */

/*
    The bubble remains at its fixed corner anchor; compositor translation
    and scaling carry the same lens to the center without layout reflow.
    Its original open/close transform animations remain independent.
*/
.music-player-panel {
    scale: 1;

    /* Fixed anchor: only composite translation and scale during center travel. */
    animation: none;
    translate: 0 0;
    transform-origin: 50% 50%;
    will-change: translate, scale;
    transition:
        translate 1250ms cubic-bezier(0.18, 0.74, 0.22, 1),
        scale 1250ms cubic-bezier(0.18, 0.74, 0.22, 1),
        border-color 260ms ease;
}

.music-player-panel.is-center-mode {
    translate:
        var(--music-center-travel-x, 0px)
        var(--music-center-travel-y, 0px);

    z-index: 235;

    scale: 1.55;

    border-color:
        rgba(255,255,255,0.34);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.34),
        inset 1px 0 0
        rgba(255,181,225,0.065),
        inset -1px 0 0
        rgba(145,208,255,0.085),
        inset 0 -1px 0
        rgba(155,211,255,0.065),
        0 26px 62px
        rgba(0,0,0,0.10),
        0 0 30px
        rgba(194,221,255,0.035);
}

/* Upper-left rim control for expanding/returning the same sphere. */
#music-center-toggle {
    position: absolute;

    /*
        Keep the same mirrored angle as the volume arc's maximum endpoint,
        but pull the button inward onto the same radius as replay/next so its
        clearance from the glass rim matches the playback cluster.
    */
    left: 13.67%;
    top: 25.49%;

    z-index: 14;

    width: 20px;
    height: 20px;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: auto;
}

.music-center-expand-icon,
.music-center-collapse-icon {
    width: 10px;
    height: 10px;

    display: block;

    overflow: visible;
}

.music-center-expand-icon path,
.music-center-collapse-icon path {
    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.music-center-collapse-icon {
    display: none;
}

.music-player.is-center-mode
.music-center-expand-icon {
    display: none;
}

.music-player.is-center-mode
.music-center-collapse-icon {
    display: block;
}

/*
    Match the existing control hover behavior without increasing the rim
    button's resting footprint.
*/
#music-center-toggle:hover,
#music-center-toggle:focus-visible {
    transform:
        translate(
            -50%,
            calc(-50% - 1px)
        )
        scale(1.06);

    outline: none;
}

/*
    A common laptop layout uses the existing 292px compact sphere. Increase its
    scale slightly more so center mode lands at almost the same visual diameter
    as the 324px desktop version.
*/
@media (max-width: 1440px) and (max-height: 900px) {
    .music-player-panel.is-center-mode {
        scale: 1.70;
    }
}

@media (max-width: 640px) {
    .music-player-panel.is-center-mode {
        scale: 1.08;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — TRANSPORT HOVER SPECIFICITY FIX
   -------------------------------------------------- */

/*
    The transport buttons use ID-level transform rules for radial positioning.
    Those rules outrank the generic .music-lyrics-float-button:hover transform,
    so the rise/swell never reached replay, play/pause, or next. Match the
    center-view button with ID-specific hover states.
*/
#music-lyrics-backward:hover,
#music-lyrics-backward:focus-visible,
#music-lyrics-play-pause:hover,
#music-lyrics-play-pause:focus-visible,
#music-lyrics-forward:hover,
#music-lyrics-forward:focus-visible {
    transform:
        translate(
            -50%,
            calc(-50% - 1px)
        )
        scale(1.06);

    border-color:
        rgba(230,246,255,0.34);

    background:
        rgba(255,255,255,0.10);

    outline: none;
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — CONTINUOUS WORKSPACE V2
   -------------------------------------------------- */

@media (min-width: 900px) {
    body.word-timing-available
    .word-timing-panel.is-open {
        width:
            min(
                var(
                    --word-timing-width,
                    700px
                ),
                calc(
                    100vw -
                    470px
                )
            );

        max-width:
            calc(
                100vw -
                32px
            );
    }

    body:has(
        .music-player-panel.is-center-mode
    )
    .word-timing-panel.is-open {
        max-width:
            max(
                340px,
                calc(
                    50vw -
                    282px
                )
            );
    }
}

/* Header stays compact while exposing a lightweight horizontal width slider. */
.word-timing-header {
    align-items: center;
}

.word-timing-header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}

.word-timing-width-control {
    display: flex;
    align-items: center;

    gap: 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    color:
        rgba(
            230,
            242,
            252,
            0.64
        );
}

.word-timing-width-control > span {
    white-space: nowrap;
}

#word-timing-width {
    width:
        clamp(
            92px,
            11vw,
            150px
        );

    margin: 0;
}

/* Audio source and overlay filters share the same two-column rhythm. */
.word-timing-filter-row {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 12px;
}

.word-timing-filter-label {
    display: grid;
    gap: 2px;

    min-width: 116px;

    font-family:
        Arial,
        sans-serif;
}

.word-timing-filter-label span {
    font-size: 10px;

    opacity: 0.56;
}

.word-timing-filter-label strong {
    font-size: 15px;
}

.word-timing-filter-options {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}

.word-timing-filter-options button {
    opacity: 0.42;

    transition:
        opacity 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.word-timing-filter-options
.is-word-filter.is-active {
    opacity: 1;

    color:
        rgba(
            255,
            245,
            184,
            0.98
        );

    border-color:
        rgba(
            255,
            219,
            72,
            0.44
        );

    background:
        rgba(
            255,
            214,
            64,
            0.11
        );
}

.word-timing-filter-options
.is-instrumental-filter.is-active {
    opacity: 1;

    color:
        rgba(
            255,
            207,
            207,
            0.98
        );

    border-color:
        rgba(
            255,
            92,
            92,
            0.44
        );

    background:
        rgba(
            255,
            72,
            72,
            0.11
        );
}

/* Five transport controls create a symmetrical -5 / -0.1 / play / +0.1 / +5 row. */
.word-timing-transport {
    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );
}

.word-timing-play-icon-button {
    display: grid;
    place-items: center;
}

.word-timing-play-icon,
.word-timing-pause-icon {
    width: 15px;
    height: 15px;

    display: block;
}

.word-timing-play-icon path,
.word-timing-pause-icon rect {
    fill:
        currentColor;
}

.word-timing-pause-icon {
    display: none;
}

#word-timing-play-pause.is-playing
.word-timing-play-icon {
    display: none;
}

#word-timing-play-pause.is-playing
.word-timing-pause-icon {
    display: block;
}

/* Give the continuous timeline a little more horizontal authority. */
.word-waveform-canvas {
    min-width: 0;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                222,
                78,
                0.018
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.015
            )
            46%,
            rgba(
                255,
                255,
                255,
                0.010
            )
            54%,
            rgba(
                255,
                78,
                78,
                0.018
            )
            100%
        ),
        rgba(
            7,
            13,
            26,
            0.08
        );
}

/* Three progress meters, aligned and color-coded by authoring domain. */
.word-timing-progress-card {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    column-gap: 12px;
    row-gap: 10px;
}

.word-timing-progress-title {
    grid-column:
        1 /
        -1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    font-size: 10px;
}

.word-timing-progress-title
span:last-child {
    opacity: 0.58;
}

.word-timing-progress-item {
    display: grid;

    gap: 7px;

    min-width: 0;

    padding: 9px 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}

.word-timing-progress-item
.word-timing-progress-head {
    min-width: 0;
}

.word-timing-progress-item
.word-timing-progress-head strong {
    overflow: hidden;

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.word-timing-progress-item
.word-timing-progress-meta {
    justify-content: flex-start;
}

.word-timing-progress-item
.word-timing-progress-track {
    height: 8px;
}

.is-text-progress
.word-timing-progress-fill {
    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                199,
                35,
                0.82
            ),
            rgba(
                255,
                232,
                112,
                1
            )
        );
}

.is-instrumental-progress
.word-timing-progress-fill {
    background:
        linear-gradient(
            90deg,
            rgba(
                232,
                54,
                54,
                0.86
            ),
            rgba(
                255,
                110,
                110,
                1
            )
        );
}

.is-unified-progress
.word-timing-progress-fill {
    background:
        linear-gradient(
            90deg,
            rgba(
                62,
                157,
                255,
                0.84
            ),
            rgba(
                126,
                207,
                255,
                1
            )
        );
}

.word-timing-progress-track.is-complete
.word-timing-progress-fill {
    background:
        linear-gradient(
            90deg,
            rgba(
                75,
                198,
                112,
                0.88
            ),
            rgba(
                154,
                242,
                180,
                1
            )
        );
}

@media (max-width: 860px) {
    .word-timing-filter-row {
        grid-template-columns:
            1fr;
    }

    .word-timing-header-tools {
        gap: 7px;
    }

    .word-timing-width-control {
        display: none;
    }

    .word-timing-progress-card {
        grid-template-columns:
            1fr;
    }

    .word-timing-progress-title {
        grid-column:
            1;
    }
}


/* Source mode colors mirror the timeline annotation language. */
.word-timing-source-options
button[data-word-source="mix"].is-active {
    color:
        rgba(206,235,255,0.98);

    border-color:
        rgba(126,207,255,0.42);

    background:
        rgba(87,174,255,0.10);
}

.word-timing-source-options
button[data-word-source="vocals"].is-active {
    color:
        rgba(255,245,184,0.98);

    border-color:
        rgba(255,219,72,0.42);

    background:
        rgba(255,214,64,0.10);
}

.word-timing-source-options
button[data-word-source="instrumental"].is-active {
    color:
        rgba(255,207,207,0.98);

    border-color:
        rgba(255,92,92,0.42);

    background:
        rgba(255,72,72,0.10);
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — WINDOW EDGE RESIZE + UNIFIED WAVEFORM
   -------------------------------------------------- */

/* The old range-slider width control is intentionally retired. */
.word-timing-width-control,
#word-timing-width {
    display: none !important;
}

/*
    Desktop-window behavior: hover the editor's right border and the native
    horizontal resize cursor appears. The wider invisible hit area makes it
    easy to grab without drawing a permanent handle.
*/
.word-timing-resize-edge {
    position: absolute;
    top: 22px;
    right: -5px;
    bottom: 22px;
    z-index: 20;

    width: 11px;

    cursor: ew-resize;
    touch-action: none;

    background: transparent;
}

.word-timing-resize-edge::after {
    content: "";

    position: absolute;
    top: 14px;
    right: 4px;
    bottom: 14px;

    width: 1px;

    border-radius: 999px;

    background:
        rgba(
            209,
            237,
            255,
            0
        );

    transition:
        background 120ms ease,
        box-shadow 120ms ease;
}

.word-timing-resize-edge:hover::after,
.word-timing-resize-edge:focus-visible::after,
body.is-resizing-word-timing
.word-timing-resize-edge::after {
    background:
        rgba(
            209,
            237,
            255,
            0.52
        );

    box-shadow:
        0 0 10px
        rgba(
            141,
            211,
            255,
            0.22
        );
}

body.is-resizing-word-timing,
body.is-resizing-word-timing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

/* One conventional waveform field. No yellow-top/red-bottom visual split. */
.word-waveform-canvas {
    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.026
            ),
            rgba(
                255,
                255,
                255,
                0.010
            )
        ),
        rgba(
            7,
            13,
            26,
            0.10
        );
}

@media (max-width: 899px) {
    .word-timing-resize-edge {
        display: none;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — SEPARATE TIME RULER
   The ruler sits above the waveform so timing labels never cover audio
   or the word/instrumental edit boxes.
   -------------------------------------------------- */
.word-waveform-shell {
    grid-template-rows:
        32px
        auto
        auto
        auto
        auto;
}

.word-waveform-timeline {
    grid-row: 1;

    width: 100%;
    height: 32px;

    display: block;

    pointer-events: none;

    background: transparent;
}

.word-waveform-canvas {
    grid-row: 2;
}

.word-waveform-shell
.word-timing-history {
    grid-row: 3;
}

.word-waveform-scrubber {
    grid-row: 4;
}

.word-timing-zoom-row {
    grid-row: 5;
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — RELIABLE EDGE RESIZE
   The panel itself detects the right-edge hot zone so scrolling content
   cannot cover or clip the resize interaction.
   -------------------------------------------------- */
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-edge {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 14px !important;

    z-index: 200;

    flex: none !important;

    pointer-events: none;
}

body.word-timing-available
.word-timing-panel.is-open.is-resize-hover,
body.word-timing-available
.word-timing-panel.is-open.is-resize-hover * {
    cursor: ew-resize !important;
}

body.word-timing-available
.word-timing-panel.is-open.is-resize-hover
.word-timing-resize-edge::after,
body.is-resizing-word-timing
.word-timing-resize-edge::after {
    right: 0;

    background:
        rgba(
            209,
            237,
            255,
            0.62
        );

    box-shadow:
        0 0 12px
        rgba(
            141,
            211,
            255,
            0.28
        );
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — FULL-WIDTH RESIZE OVERRIDE
   The right edge can now be dragged almost to the browser edge.
   -------------------------------------------------- */
@media (min-width: 900px) {
    body.word-timing-available
    .word-timing-panel.is-open {
        width:
            min(
                var(
                    --word-timing-width,
                    820px
                ),
                calc(
                    100vw -
                    32px
                )
            ) !important;

        max-width:
            calc(
                100vw -
                32px
            ) !important;
    }

    body:has(
        .music-player-panel.is-center-mode
    )
    .word-timing-panel.is-open {
        max-width:
            calc(
                100vw -
                32px
            ) !important;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — ADLIB MODE
   Adlibs use green timing overlays so they are immediately distinct from
   yellow lyric words and red instrumental sections.
   -------------------------------------------------- */
.word-timing-mode-row {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}

.word-timing-filter-options {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}

.word-timing-adlib-controls {
    display: grid;
    grid-template-columns:
        minmax(160px, 1.6fr)
        minmax(120px, 1fr)
        minmax(110px, 0.9fr)
        auto
        auto;
    gap: 8px;
    align-items: center;
}

.word-timing-adlib-controls[hidden] {
    display: none;
}

.word-timing-adlib-controls input,
.word-timing-adlib-controls select {
    min-width: 0;
    min-height: 40px;
    padding: 0 11px;
    color: rgba(235,252,241,0.96);
    border: 1px solid rgba(103,224,143,0.24);
    border-radius: 10px;
    outline: none;
    background: rgba(20,52,34,0.32);
    font: inherit;
}

.word-timing-adlib-controls input:focus,
.word-timing-adlib-controls select:focus {
    border-color: rgba(103,224,143,0.58);
    box-shadow: 0 0 0 2px rgba(79,214,123,0.08);
}

.word-timing-filter-options
.is-adlib-filter.is-active {
    opacity: 1;
    color: rgba(205,255,220,0.98);
    border-color: rgba(83,224,129,0.46);
    background: rgba(65,205,112,0.12);
}

body.word-timing-adlib-mode
.word-timing-text {
    color: rgba(222,255,232,0.98);
    border-color: rgba(91,224,135,0.24);
    background:
        linear-gradient(
            180deg,
            rgba(69,204,112,0.10),
            rgba(47,169,91,0.035)
        );
}

body.word-timing-adlib-mode
.word-timing-word.is-selected {
    color: rgba(223,255,232,1);
    border-color: rgba(82,226,131,0.52);
    background:
        linear-gradient(
            180deg,
            rgba(70,214,119,0.16),
            rgba(48,172,92,0.055)
        );
    box-shadow:
        inset 0 1px 0 rgba(235,255,241,0.18),
        0 0 18px rgba(69,211,116,0.10);
}

@media (max-width: 900px) {
    .word-timing-adlib-controls {
        grid-template-columns:
            1fr
            1fr;
    }

    .word-timing-adlib-controls input {
        grid-column:
            1 /
            -1;
    }
}

@media (max-width: 680px) {
    .word-timing-adlib-controls,
    .word-timing-mode-row,
    .word-timing-filter-options {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — HIGH-CONTRAST WAVEFORM + HISTORY
   Only the waveform canvas gets the black/white treatment.
   -------------------------------------------------- */
.word-timing-history {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );
    gap: 8px;
}

.word-timing-history button:disabled {
    opacity: 0.34;
    cursor: default;
}

.word-waveform-canvas {
    background: #000 !important;
    border-color: rgba(255,255,255,0.18);
}

@media (max-width: 680px) {
    .word-timing-history {
        grid-template-columns: 1fr 1fr;
    }
}


.word-timing-counts {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.word-timing-counts span {
    white-space: nowrap;
}

#word-timing-word-number {
    opacity: 0.62;
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — CLARIFIED CONTROL GROUPS
   Edit mode answers "what am I changing?"
   Waveform view answers "what am I hearing/seeing?"
   -------------------------------------------------- */
.word-timing-section-kicker {
    margin-bottom: -4px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.48;
}

.word-timing-mode-help {
    margin-top: -2px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    background: rgba(255,255,255,0.022);
    text-align: left;
}

.word-timing-view-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    background: rgba(255,255,255,0.022);
}

.word-timing-view-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: Arial, sans-serif;
}

.word-timing-view-heading strong {
    font-size: 12px;
}

.word-timing-view-heading span {
    font-size: 9px;
    opacity: 0.48;
    text-align: right;
}

.word-timing-source-label,
.word-timing-filter-label {
    min-width: 92px;
}

.word-timing-source-label strong,
.word-timing-filter-label strong {
    font-size: 12px;
}

.word-timing-mode-row button,
.word-timing-source-options button,
.word-timing-filter-options button,
.word-timing-history button,
.word-timing-transport button,
.word-timing-speed-presets button,
.word-timing-primary button,
.word-timing-nav button,
.word-timing-save-row button {
    border-radius: 999px;
}

.word-timing-adlib-controls input,
.word-timing-adlib-controls select {
    border-radius: 999px;
}

@media (max-width: 860px) {
    .word-timing-view-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .word-timing-view-heading span {
        text-align: left;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — FLOATING STICKY TITLE + THEMED SCROLLBAR
   -------------------------------------------------- */
body.word-timing-available
.word-timing-panel.is-open {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(119,169,218,0.52)
        transparent;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar {
    width: 10px;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar-track {
    background: transparent;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(137,183,228,0.56),
            rgba(72,111,157,0.42)
        )
        padding-box;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(158,201,240,0.70),
            rgba(83,128,178,0.56)
        )
        padding-box;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    position: sticky;
    top: 0 !important;
    z-index: 40;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 4px 58px 8px !important;

    box-sizing: border-box;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header > div:first-child {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: min(520px, 72vw);

    padding: 8px 22px 7px;

    border: 1px solid rgba(181,216,244,0.13);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(26,38,66,0.72),
            rgba(13,22,43,0.66)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 8px 24px rgba(0,0,0,0.12);

    backdrop-filter:
        blur(18px)
        saturate(115%);
    -webkit-backdrop-filter:
        blur(18px)
        saturate(115%);

    text-align: center;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header strong {
    margin: 0;

    font-size: 16px;
    line-height: 1.05;
    letter-spacing: 0.35px;

    text-align: center;

    text-shadow: none !important;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header span {
    margin-top: 4px;

    font-size: 9px;
    line-height: 1.1;
    letter-spacing: 0.05em;

    text-align: center;
    opacity: 0.48;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header-tools {
    position: absolute;
    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-close {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;

    padding: 0 !important;

    border: 1px solid rgba(190,220,244,0.10) !important;
    border-radius: 999px !important;

    color: rgba(227,240,251,0.72);

    background:
        rgba(18,29,52,0.54) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045);

    font-size: 17px;
    line-height: 1;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-close:hover {
    color: rgba(245,250,255,0.96);

    border-color:
        rgba(197,226,250,0.22) !important;

    background:
        rgba(30,45,73,0.72) !important;
}

/* The resize hot zone exists only OUTSIDE the editor's right edge. */
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-edge {
    display: none !important;
}

body.word-timing-available
.word-timing-panel.is-open.is-resize-hover,
body.word-timing-available
.word-timing-panel.is-open.is-resize-hover * {
    cursor: inherit !important;
}

body.is-word-timing-resize-hover,
body.is-word-timing-resize-hover * {
    cursor: ew-resize !important;
}

body.is-resizing-word-timing,
body.is-resizing-word-timing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

@media (max-width: 700px) {
    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header {
        min-height: 50px;
        padding:
            3px
            46px
            7px !important;
    }

    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header > div:first-child {
        max-width: calc(100vw - 120px);

        padding:
            7px
            16px
            6px;
    }

    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header strong {
        font-size: 14px;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — COMPACT CONTROL DECK
   -------------------------------------------------- */
body.word-timing-available
.word-timing-panel.is-open {
    scrollbar-gutter: auto;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar-track {
    margin-block: 68px 14px;
}

/* Full-width sticky toolbar, like a browser address bar. */
body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    position: sticky;
    top: 0 !important;
    z-index: 60;

    width: 100%;
    min-height: 54px;

    display: grid;
    grid-template-columns:
        minmax(110px, 1fr)
        auto
        minmax(110px, 1fr);
    align-items: center;

    margin: 0 !important;
    padding: 7px 10px !important;

    border: 1px solid rgba(174,211,240,0.12);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(20,31,56,0.96),
            rgba(10,18,36,0.94)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 26px rgba(0,0,0,0.22);

    backdrop-filter:
        blur(22px)
        saturate(118%) !important;
    -webkit-backdrop-filter:
        blur(22px)
        saturate(118%) !important;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header::before {
    content: "";
    grid-column: 1;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header-title {
    grid-column: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 0 16px;

    border: 0;
    background: none;
    box-shadow: none;

    text-align: center;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header-title strong {
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.45px;
    text-shadow: none !important;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header-title span {
    margin-top: 3px;

    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.055em;

    opacity: 0.48;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header-tools {
    position: static;
    grid-column: 3;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    transform: none;
}

.word-timing-export,
body.word-timing-available
.word-timing-panel.is-open
.word-timing-close {
    min-height: 30px !important;
    height: 30px !important;

    border-radius: 999px !important;

    background:
        rgba(255,255,255,0.035) !important;

    border:
        1px solid
        rgba(185,218,244,0.11) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.word-timing-export {
    min-width: 62px;

    padding:
        0
        11px !important;

    color: rgba(221,238,251,0.72);

    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 0.025em;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-close {
    width: 30px !important;
    min-width: 30px !important;

    padding: 0 !important;

    font-size: 16px !important;
}

/* Center the mode helper copy. */
.word-timing-mode-help {
    text-align: center !important;
}

/* Waveform view title and explanation form one centered stack. */
.word-timing-view-heading {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    text-align: center;
}

.word-timing-view-heading strong {
    font-size: 12px;
}

.word-timing-view-heading span {
    font-size: 9px;

    text-align: center !important;

    opacity: 0.48;
}

/* Words are blue everywhere in the timing editor. */
.word-timing-filter-options
.is-word-filter.is-active {
    color: rgba(207,237,255,0.98) !important;
    border-color: rgba(102,190,255,0.50) !important;
    background: rgba(68,166,236,0.14) !important;
}

/* Waveform shell now owns: ruler, waveform, history, compact sliders. */
.word-waveform-shell {
    grid-template-rows:
        32px
        auto
        auto
        auto !important;

    gap: 8px !important;
}

.word-waveform-timeline {
    grid-row: 1 !important;
}

.word-waveform-canvas {
    grid-row: 2 !important;
}

.word-waveform-shell
.word-timing-history {
    grid-row: 3 !important;
}

.word-timing-adjustments {
    grid-row: 4;

    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 8px;
}

.word-timing-control-strip {
    min-width: 0;
    min-height: 52px;

    display: grid;
    grid-template-rows:
        auto
        auto;

    align-content: center;

    gap: 6px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.034),
            rgba(255,255,255,0.012)
        );
}

.word-timing-mini-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    font-family: Arial, sans-serif;
    line-height: 1;
}

.word-timing-mini-label span {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.46;
}

.word-timing-mini-label strong {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    opacity: 0.82;
}

.word-timing-control-strip input[type="range"] {
    width: 100%;
    min-width: 0;

    margin: 0;
}

.word-timing-mini-range {
    display: grid;
    grid-template-columns:
        28px
        minmax(
            0,
            1fr
        )
        28px;

    align-items: center;

    gap: 6px;
}

.word-timing-mini-range button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px !important;

    padding: 0 !important;

    font-size: 12px !important;
}

.word-waveform-scrubber {
    height: auto !important;
}

/* One cozy action strip for navigation, seeking, loop, play and refine. */
.word-timing-action-strip {
    display: grid !important;
    grid-template-columns:
        44px
        minmax(48px, 0.75fr)
        minmax(48px, 0.75fr)
        58px
        64px
        58px
        minmax(48px, 0.75fr)
        minmax(48px, 0.75fr)
        44px !important;

    align-items: stretch;

    gap: 6px !important;
}

.word-timing-action-strip > button {
    min-width: 0 !important;
    min-height: 42px !important;

    padding:
        0
        8px !important;

    border-radius: 999px !important;

    font-size: 10px !important;
}

.word-timing-symbol-button {
    position: relative;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0;
}

.word-timing-action-glyph {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 0.9;
    font-weight: 400;
}

.word-timing-scoped-action
.word-timing-action-glyph {
    font-size: 22px;
}

#word-timing-auto-refine
.word-timing-action-glyph {
    font-size: 18px;
}

.word-timing-action-scope {
    display: block;

    margin-top: 2px;

    font-family: Arial, sans-serif;
    font-size: 7px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    opacity: 0.48;
}

.word-timing-play-icon-button svg {
    width: 22px !important;
    height: 22px !important;
}

.word-timing-action-strip
.word-timing-play-icon-button {
    padding: 0 !important;
}

/* Hide retired rows if stale markup is ever loaded. */
.word-timing-primary,
.word-timing-nav,
.word-timing-save-row,
.word-timing-speed-presets,
.word-timing-zoom-row {
    display: none !important;
}

@media (max-width: 900px) {
    .word-timing-adjustments {
        grid-template-columns: 1fr;
    }

    .word-timing-action-strip {
        grid-template-columns:
            repeat(
                5,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}

@media (max-width: 620px) {
    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header {
        grid-template-columns:
            56px
            minmax(
                0,
                1fr
            )
            auto;

        padding:
            6px
            8px !important;
    }

    body.word-timing-available
    .word-timing-panel.is-open
    .word-timing-header-title {
        padding:
            0
            8px;
    }

    .word-timing-export {
        width: 30px;
        min-width: 30px;

        overflow: hidden;

        padding:
            0
            7px !important;

        white-space: nowrap;
    }
}


/* Final header normalization: the ROW is the pill, not a pill inside a pill. */
body.word-timing-available
.word-timing-panel.is-open
.word-timing-header
> .word-timing-header-title {
    width: auto !important;
    max-width: none !important;

    padding:
        0
        16px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep the themed scrollbar away from the rounded top-right corner. */
body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar {
    width: 8px;
}

body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar-track {
    margin-top: 72px;
    margin-bottom: 14px;

    background: transparent;
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — TRUE INSET SCROLL SURFACE
   The panel shell no longer scrolls. The inner surface does, which physically
   moves the scrollbar away from the rounded outer border.
   -------------------------------------------------- */
body.word-timing-available
.word-timing-panel.is-open {
    display: block !important;

    padding: 7px !important;

    overflow: hidden !important;
}

.word-timing-scroll-area {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 14px;

    box-sizing: border-box;

    padding:
        10px
        10px
        14px
        12px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    border-radius: 17px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(119,169,218,0.52)
        transparent;
}

.word-timing-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.word-timing-scroll-area::-webkit-scrollbar-track {
    margin:
        62px
        0
        10px;

    background: transparent;
}

.word-timing-scroll-area::-webkit-scrollbar-thumb {
    min-height: 44px;

    border:
        2px
        solid
        transparent;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(137,183,228,0.56),
            rgba(72,111,157,0.42)
        )
        padding-box;
}

.word-timing-scroll-area::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(158,201,240,0.70),
            rgba(83,128,178,0.56)
        )
        padding-box;
}

/* Retire scrollbar styling on the outer shell now that it no longer scrolls. */
body.word-timing-available
.word-timing-panel.is-open::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

body.word-timing-available
.word-timing-panel.is-open
.word-timing-header {
    top: 0 !important;
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — MODE COLOR SYSTEM
   Lyrics/words = blue, instrumentals = red, adlibs = green.
   -------------------------------------------------- */
.word-timing-lyric-controls {
    display: grid;
    grid-template-columns:
        minmax(150px, 1.45fr)
        auto
        auto;

    align-items: center;

    gap: 8px;
}

.word-timing-lyric-controls[hidden] {
    display: none;
}

.word-timing-lyric-controls input {
    min-width: 0;
    min-height: 38px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(93,190,255,0.26);

    border-radius: 999px;

    outline: none;

    color: rgba(224,245,255,0.98);

    background:
        rgba(49,137,204,0.10);

    font: inherit;
}

.word-timing-lyric-controls input:focus {
    border-color:
        rgba(104,199,255,0.58);

    box-shadow:
        0 0 0 2px
        rgba(80,180,244,0.09);
}

body.word-timing-lyrics-mode
.word-timing-text,
body.word-timing-lyrics-mode
.word-timing-mode-help {
    color: rgba(218,242,255,0.96);

    border-color:
        rgba(91,184,248,0.22);

    background:
        linear-gradient(
            180deg,
            rgba(65,161,226,0.095),
            rgba(38,112,170,0.035)
        );
}

body.word-timing-lyrics-mode
.word-timing-word {
    color: rgba(190,228,250,0.88) !important;

    border-color:
        rgba(84,179,241,0.28) !important;

    background:
        linear-gradient(
            180deg,
            rgba(60,157,225,0.13),
            rgba(37,105,164,0.045)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(224,245,255,0.08) !important;
}

body.word-timing-lyrics-mode
.word-timing-word:hover {
    color: rgba(224,245,255,0.98) !important;

    border-color:
        rgba(104,199,255,0.46) !important;

    background:
        linear-gradient(
            180deg,
            rgba(72,174,241,0.18),
            rgba(44,124,187,0.065)
        ) !important;
}

body.word-timing-lyrics-mode
.word-timing-word.is-selected {
    color: rgba(238,250,255,1) !important;

    border-color:
        rgba(92,194,255,0.72) !important;

    background:
        linear-gradient(
            180deg,
            rgba(68,173,241,0.27),
            rgba(43,126,191,0.10)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(238,251,255,0.18),
        0 0 18px rgba(68,174,245,0.16) !important;
}

body.word-timing-lyrics-mode
.word-timing-mode-row
button[data-timing-mode="lyrics"].is-active,
body.word-timing-lyrics-mode
.word-timing-lyric-controls button {
    color: rgba(220,244,255,0.98) !important;

    border-color:
        rgba(94,192,255,0.46) !important;

    background:
        linear-gradient(
            180deg,
            rgba(67,166,232,0.16),
            rgba(42,118,180,0.055)
        ) !important;
}

body.word-timing-instrumental-mode
.word-timing-mode-row
button[data-timing-mode="instrumentals"].is-active {
    color: rgba(255,220,220,0.98) !important;

    border-color:
        rgba(255,91,91,0.48) !important;

    background:
        rgba(224,68,68,0.13) !important;
}

body.word-timing-adlib-mode
.word-timing-mode-row
button[data-timing-mode="adlibs"].is-active {
    color: rgba(215,255,226,0.98) !important;

    border-color:
        rgba(75,219,121,0.48) !important;

    background:
        rgba(57,190,100,0.13) !important;
}

/* Vocals belong to the lyric/word color family too. */
.word-timing-source-options
button[data-word-source="vocals"].is-active {
    color: rgba(216,243,255,0.98) !important;

    border-color:
        rgba(98,193,255,0.46) !important;

    background:
        rgba(62,164,232,0.12) !important;
}

@media (max-width: 760px) {
    .word-timing-lyric-controls {
        grid-template-columns:
            1fr
            1fr;
    }

    .word-timing-lyric-controls input {
        grid-column:
            1 /
            -1;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — 2D RESIZE + NON-COLLAPSING SCROLL WORKSPACE
   -------------------------------------------------- */
body.word-timing-available
.word-timing-panel.is-open {
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;

    height:
        min(
            var(
                --word-timing-height,
                calc(
                    100vh -
                    32px
                )
            ),
            calc(
                100vh -
                32px
            )
        ) !important;

    min-height: 360px;
    max-height:
        calc(
            100vh -
            32px
        ) !important;

    overflow: visible !important;
}

/*
    The inner workspace owns scrolling in BOTH directions. Its children no
    longer shrink to make everything fit, so making the editor smaller reveals
    scrollbars instead of crushing the control rows.
*/
.word-timing-scroll-area {
    overflow: auto !important;

    scrollbar-gutter: stable;

    border-radius: 17px;

    background: inherit;
}

.word-timing-scroll-area > * {
    flex:
        0
        0
        auto;

    min-width: 720px;
}

/* Keep the fixed control geometry intact while the workspace scrolls. */
.word-timing-action-strip {
    min-width: 720px;
}

.word-timing-adjustments,
.word-timing-view-card,
.word-waveform-shell,
.word-timing-mode-row,
.word-timing-meta,
.word-timing-lyric-controls,
.word-timing-instrumental-controls,
.word-timing-adlib-controls {
    flex-shrink: 0;
}

.word-timing-scroll-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.word-timing-scroll-area::-webkit-scrollbar-corner {
    background: transparent;
}

/* Right-edge width controller */
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-edge {
    position: absolute;

    top: 50%;
    right: -1px;
    bottom: auto;

    display: block !important;

    width: 8px !important;
    height: 82px;

    transform:
        translateY(
            -50%
        );

    z-index: 210;

    pointer-events: none;
}

body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-edge::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 1px;
    bottom: 8px;

    width: 2px;

    border-radius: 999px;

    background:
        rgba(
            132,
            183,
            226,
            0.28
        );

    box-shadow: none;
}

/* Bottom-edge height controller */
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-bottom {
    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 82px;
    height: 8px;

    transform:
        translateX(
            -50%
        );

    z-index: 210;

    pointer-events: none;
}

body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-bottom::after {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 1px;

    height: 2px;

    border-radius: 999px;

    background:
        rgba(
            132,
            183,
            226,
            0.28
        );
}

/* Bottom-right corner controller */
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-corner {
    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 22px;
    height: 22px;

    z-index: 211;

    pointer-events: none;
}

body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-corner::before,
body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-corner::after {
    content: "";

    position: absolute;

    right: 4px;
    bottom: 4px;

    width: 10px;
    height: 2px;

    border-radius: 999px;

    background:
        rgba(
            132,
            183,
            226,
            0.34
        );

    transform:
        rotate(
            -45deg
        );

    transform-origin:
        center;
}

body.word-timing-available
.word-timing-panel.is-open
> .word-timing-resize-corner::after {
    right: 1px;
    bottom: 7px;
}

/* Hover / active feedback by resize axis. */
body.is-word-timing-resize-hover-width,
body.is-word-timing-resize-hover-width * {
    cursor: ew-resize !important;
}

body.is-word-timing-resize-hover-height,
body.is-word-timing-resize-hover-height * {
    cursor: ns-resize !important;
}

body.is-word-timing-resize-hover-both,
body.is-word-timing-resize-hover-both * {
    cursor: nwse-resize !important;
}

body.is-resizing-word-timing-width,
body.is-resizing-word-timing-width * {
    cursor: ew-resize !important;
    user-select: none !important;
}

body.is-resizing-word-timing-height,
body.is-resizing-word-timing-height * {
    cursor: ns-resize !important;
    user-select: none !important;
}

body.is-resizing-word-timing-both,
body.is-resizing-word-timing-both * {
    cursor: nwse-resize !important;
    user-select: none !important;
}

body.is-word-timing-resize-hover-width
.word-timing-resize-edge::after,
body.is-resizing-word-timing-width
.word-timing-resize-edge::after,
body.is-word-timing-resize-hover-height
.word-timing-resize-bottom::after,
body.is-resizing-word-timing-height
.word-timing-resize-bottom::after,
body.is-word-timing-resize-hover-both
.word-timing-resize-corner::before,
body.is-word-timing-resize-hover-both
.word-timing-resize-corner::after,
body.is-resizing-word-timing-both
.word-timing-resize-corner::before,
body.is-resizing-word-timing-both
.word-timing-resize-corner::after {
    background:
        rgba(
            166,
            214,
            250,
            0.78
        );

    box-shadow:
        0 0 10px
        rgba(
            105,
            181,
            241,
            0.28
        );
}

/* The old one-axis body cursor classes are superseded by the axis-specific set. */
body.is-word-timing-resize-hover,
body.is-word-timing-resize-hover * {
    cursor: inherit !important;
}

@media (max-width: 760px) {
    .word-timing-scroll-area > * {
        min-width: 680px;
    }

    .word-timing-action-strip {
        min-width: 680px;
    }
}


/* --------------------------------------------------
   MUSIC TIMING EDITOR — WAVEFORM DAY / NIGHT TOGGLE
   -------------------------------------------------- */
.word-timing-view-card {
    position: relative;
}

.word-waveform-theme-toggle {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px !important;

    display: grid !important;
    place-items: center;

    padding: 0 !important;

    border-radius: 999px !important;

    color: rgba(226,240,252,0.90) !important;

    border:
        1px solid
        rgba(185,218,244,0.14) !important;

    background:
        rgba(255,255,255,0.035) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.word-waveform-theme-toggle:hover,
.word-waveform-theme-toggle:focus-visible {
    border-color:
        rgba(183,222,252,0.30) !important;

    background:
        rgba(255,255,255,0.065) !important;
}

.word-waveform-theme-icon {
    grid-area: 1 / 1;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;
    line-height: 1;

    transition:
        opacity 140ms ease,
        transform 180ms ease;
}

.word-waveform-theme-icon.is-night {
    opacity: 1;

    transform:
        rotate(
            0deg
        )
        scale(
            1
        );
}

.word-waveform-theme-icon.is-day {
    opacity: 0;

    transform:
        rotate(
            -30deg
        )
        scale(
            0.72
        );
}

body.word-waveform-day
.word-waveform-theme-icon.is-night {
    opacity: 0;

    transform:
        rotate(
            30deg
        )
        scale(
            0.72
        );
}

body.word-waveform-day
.word-waveform-theme-icon.is-day {
    opacity: 1;

    transform:
        rotate(
            0deg
        )
        scale(
            1
        );
}

body.word-waveform-day
.word-waveform-theme-toggle {
    color: rgba(31,40,52,0.88) !important;

    border-color:
        rgba(44,61,79,0.16) !important;

    background:
        rgba(255,255,255,0.88) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 2px 10px rgba(0,0,0,0.08);
}

body.word-waveform-day
.word-waveform-canvas {
    background: #fff !important;

    border-color:
        rgba(0,0,0,0.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 8px 24px rgba(0,0,0,0.08) !important;
}

@media (max-width: 760px) {
    .word-waveform-theme-toggle {
        top: 8px;
        right: 8px;

        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px !important;
    }
}


/* --------------------------------------------------
   MUSIC BUBBLE — FIVE-SECOND CONNECTOR CONTROLS
   -------------------------------------------------- */

/*
    These two micro-bubbles bridge replay -> play -> next without crowding the
    existing rim controls. Their centers sit slightly farther inward than the
    primary transport row so the small circles read as connectors inside the
    glass instead of competing with the main buttons.
*/
.music-lyrics-float-skip {
    position: absolute;
    z-index: 13;

    width: 12px;
    height: 12px;

    min-width: 12px;
    min-height: 12px;

    padding: 0;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: auto;

    font-family:
        Arial,
        sans-serif;

    font-size: 5.8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.18px;

    color:
        rgba(
            239,
            249,
            255,
            0.88
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.14
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.065
            ),
            rgba(
                255,
                255,
                255,
                0.018
            )
        ),
        rgba(
            9,
            17,
            30,
            0.065
        );
}

/*
    Mid-angle placement between the neighboring transport controls, pulled
    inward enough to preserve clean glass between every circle.
*/
#music-lyrics-back-5 {
    left: 73.562%;
    top: 80.158%;
}

#music-lyrics-forward-5 {
    left: 80.158%;
    top: 73.562%;
}


/* --------------------------------------------------
   MUSIC BUBBLE — FIVE-BUTTON RIM GEOMETRY
   -------------------------------------------------- */

/*
    Keep one consistent visible gap between all five transport bubbles.
    The three button sizes use slightly different center radii so their outer
    edges share the same clearance from the inside of the glass rim:
      21px replay/next  -> ~142px center radius
      31px play        -> ~137px center radius
      12px ±5 controls -> ~146.5px center radius

    The cluster is centered a little below the 45deg diagonal so it stays
    clear of the upper-right volume arc and the bottom-center elapsed timer.
*/
#music-lyrics-forward {
    left: 88.404%;
    top: 71.118%;
}

#music-lyrics-forward-5 {
    left: 84.274%;
    top: 77.302%;
}

#music-lyrics-play-pause {
    left: 77.180%;
    top: 82.391%;
}

#music-lyrics-back-5 {
    left: 70.946%;
    top: 88.528%;
}

#music-lyrics-backward {
    left: 64.129%;
    top: 91.487%;
}


/* --------------------------------------------------
   POLARIS — LOCKED MANUAL SKY
   -------------------------------------------------- */

/*
    Locked manual mode keeps Polaris visibly "held" without making it look
    active or flashing continuously. The one-shot lock glimmer confirms the
    click, then Polaris settles into this brighter idle state.
*/
body[data-orbit-locked="true"] .polaris {
    filter:
        drop-shadow(0 0 9px rgba(232, 243, 255, 0.82))
        drop-shadow(0 0 18px rgba(150, 196, 255, 0.34));
}

body[data-orbit-locked="true"] .polaris-core {
    box-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 22px rgba(202, 228, 255, 1),
        0 0 34px rgba(126, 181, 255, 0.62);
}

.polaris.is-orbit-lock-glimmer::before {
    animation:
        polaris-lock-aura
        820ms
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

.polaris.is-orbit-lock-glimmer::after {
    animation:
        polaris-lock-halo
        820ms
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

.polaris.is-orbit-lock-glimmer .polaris-core {
    animation:
        polaris-lock-core
        820ms
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}

@keyframes polaris-lock-aura {
    0% {
        opacity: 0.35;
        transform: scale(1);
    }

    34% {
        opacity: 1;
        transform: scale(2.28);
    }

    62% {
        opacity: 0.86;
        transform: scale(1.76);
    }

    100% {
        opacity: 0.58;
        transform: scale(1.34);
    }
}

@keyframes polaris-lock-halo {
    0% {
        opacity: 0.30;
        transform: scale(1);
    }

    38% {
        opacity: 1;
        transform: scale(1.82);
    }

    68% {
        opacity: 0.80;
        transform: scale(1.46);
    }

    100% {
        opacity: 0.52;
        transform: scale(1.22);
    }
}

@keyframes polaris-lock-core {
    0% {
        transform:
            translate(-50%, -50%)
            scale(1);
        filter: brightness(1);
    }

    34% {
        transform:
            translate(-50%, -50%)
            scale(1.42);
        filter: brightness(1.9);
    }

    60% {
        transform:
            translate(-50%, -50%)
            scale(1.12);
        filter: brightness(1.34);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
        filter: brightness(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .polaris.is-orbit-lock-glimmer::before,
    .polaris.is-orbit-lock-glimmer::after,
    .polaris.is-orbit-lock-glimmer .polaris-core {
        animation: none;
    }
}

/* Clear, lightly tinted glass exists even before WebGL initializes or when
   the browser cannot use it. The live shader replaces this fallback. */
.music-player-shell::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(145deg,
        rgba(169, 220, 249, 0.055) 0%,
        rgba(109, 176, 219, 0.027) 43%,
        rgba(92, 169, 224, 0.047) 100%);
    -webkit-backdrop-filter: blur(0.6px) saturate(1.07);
    backdrop-filter: blur(0.6px) saturate(1.07);
    box-shadow: inset 0 1px 2px rgba(242, 252, 255, 0.08),
                inset 0 -2px 9px rgba(76, 150, 206, 0.04);
}
.music-player-shell.has-live-glass::before {
    opacity: 0;
}
/* Shader water attaches to the FULL bubble shell, not the inset lyric stage. */
.music-player-shell > .music-water-surface {
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 50%;
    pointer-events: none;
    display: block;
    visibility: hidden;
    z-index: 0;
}
.music-player-shell > .music-water-surface.is-visible {
    visibility: visible;
}
.music-player-shell > .music-player-main-view,
.music-player-shell > .music-player-lyrics-view {
    z-index: 1;
}

/* First Light: restrained transparent opening, bounded to the inner rim. */
.music-first-light {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: min(92%, 270px);
    aspect-ratio: 1;
    border-radius: 50%;
}
.music-first-light.is-visible { visibility: visible; opacity: 1; }
.music-player-lyrics-view > .music-first-light {
    width: calc(100% + 120px);
    height: calc(100% + 116px);
    max-width: none;
    aspect-ratio: auto;
}

/* Avoid accidental interaction mid-glide; resume once lens settles. */
.music-player-panel.is-gliding { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .music-player-panel { transition-duration: 0ms; }
}


/* TWO QUIET SKY STARS
   Same 16px visual as Aster; enlarged transparent target for touch/keyboards.
   The existing sky-fracture animation and glass-player rendering are untouched.
*/
.sky-control-star.aster {
    position: fixed;
    z-index: 210;
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    inset: auto;
    flex: none;
    opacity: .83;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .3s ease, filter .3s ease;
}
.sky-control-star.aster::before {
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}
.sky-control-star.aster::after {
    background-position: center;
}
.sky-control-star.aster .aster-core {
    left: 50%;
    top: 50%;
}
.sky-control-star.aster:hover,
.sky-control-star.aster:focus-visible {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(210,230,255,.72));
}
.sky-control-star.aster:focus-visible {
    outline: 1px solid rgba(240,247,255,.7);
    outline-offset: 2px;
}
#music-player-toggle.sky-music-star {
    /* Right-hand part of the OPEN SKY, above the mountain ridgeline.
       Use viewport height, not bottom distance from the landscape. */
    right: clamp(28px, 7vw, 125px);
    top: 42vh;
    bottom: auto;
    transform: none;
    opacity: .83;
}
#music-player-toggle.sky-music-star.is-concealed {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
#awakening-star.sky-fracture-star,
body.site-awakened #awakening-star.sky-fracture-star {
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    opacity: .83;
    visibility: visible;
    pointer-events: auto;
}
#awakening-star.sky-fracture-star.is-awakening::before {
    opacity: 1;
    transform: scale(1.6);
}
#awakening-star.sky-fracture-star.is-awakening::after {
    opacity: 1;
    transform: scale(1.35);
}
#awakening-star.sky-fracture-star.is-awakening .aster-core {
    box-shadow: 0 0 7px #fff,0 0 15px rgba(194,222,255,.85);
}

/* The player remains anchored in its familiar corner.
   Reveal the original round close button and mute bubble only while open.
   The separate star is the launcher, not a replacement for these controls. */
#music-player-close-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .38s ease, visibility 0s linear .38s,
                border-color .30s ease, box-shadow .30s ease;
}
.music-player.is-opening #music-player-close-toggle,
.music-player.is-open #music-player-close-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .38s ease, visibility 0s,
                border-color .30s ease, box-shadow .30s ease;
}
#music-mute-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .42s ease, visibility 0s linear .42s;
}
.music-player.is-opening #music-mute-toggle,
.music-player.is-open #music-mute-toggle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .42s ease, visibility 0s;
}

@media (max-width: 640px) {
    #music-player-toggle.sky-music-star {
        right: clamp(14px, 5vw, 28px);
        top: 38vh;
        bottom: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sky-control-star.aster,
    #music-player-close-toggle,
    #music-mute-toggle {transition-duration: 0ms;}
}


/* CENTERED HOMEPAGE MASTHEAD
   Editorial spacing inspired by classic author sites, without a white
   navigation bar or extra decoration. The sky stays visible underneath.
   Aster (left) and Polaris (right) remain independent controls so the
   name and navigation are mathematically centered.
*/
header.site-masthead {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 31px clamp(22px, 3.8vw, 64px) 26px;
    background: linear-gradient(
        to bottom,
        rgba(5, 10, 22, .34),
        rgba(5, 10, 22, .11) 70%,
        transparent
    );
}
.site-masthead .brand-column {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-masthead .brand {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.site-masthead .brand h1 {
    margin: 0;
    color: rgba(249, 248, 246, .96);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(23px, 2.4vw, 35px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .17em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 16px rgba(7, 13, 30, .45);
}
.site-masthead .brand .polaris {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
.site-masthead .prayer-interface {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 12;
}
.site-masthead .prayer-interface .aster {
    left: 4px;
    top: 11px;
}
.site-masthead .prayer-interface .prayer-panel-row {
    position: absolute;
    top: 43px;
    left: 0;
    z-index: 20;
}
.site-masthead nav.masthead-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 8px;
    margin: 0;
    padding: 0;
}
.site-masthead nav.masthead-nav a {
    position: relative;
    display: inline-block;
    padding: 4px 3px 8px;
    color: rgba(241, 240, 235, .88);
    font: 400 clamp(11px, .86vw, 13px)/1.6 "Cinzel", Georgia, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: .77;
    text-shadow: 0 1px 12px rgba(7, 13, 30, .46);
    transition: opacity .25s ease;
}


/* A mirror-like highlight travels through the actual letter shapes.
   No glowing blade or background layer is painted outside the text.
   The short ABC sequence has a long resting interval between passes. */
.site-masthead nav.masthead-nav a {
    color: #f4f9ff;
    opacity: 1;
    text-shadow: 0 0 3px rgba(207, 232, 255, .28);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-masthead nav.masthead-nav a {
        background-image: linear-gradient(
            108deg,
            #f4f9ff 0%, #f4f9ff 42%,
            #c0e9ff 46%, #ffffff 48.7%,
            #ffffff 50%, #9edbff 52%,
            #f4f9ff 57%, #f4f9ff 100%
        );
        background-size: 320% 100%;
        background-position: 100% 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: nav-text-reflection 9s linear infinite;
    }
    .site-masthead nav.masthead-nav a:nth-child(2) { animation-delay: .38s; }
    .site-masthead nav.masthead-nav a:nth-child(3) { animation-delay: .76s; }
}
@keyframes nav-text-reflection {
    0%, 2% {
        background-position: 100% 0;
        filter: none;
    }
    7% {
        background-position: 50% 0;
        filter: drop-shadow(0 0 3px rgba(226, 244, 255, .85))
                drop-shadow(0 0 6px rgba(131, 201, 255, .52));
    }
    12% {
        background-position: 0% 0;
        filter: none;
    }
    12.01%, 100% {
        background-position: 0% 0;
        filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-masthead nav.masthead-nav a {
        animation: none;
        filter: none;
    }
}

.site-masthead nav.masthead-nav a:hover,
.site-masthead nav.masthead-nav a:focus-visible,
.site-masthead nav.masthead-nav a[aria-current="page"] {
    opacity: 1;
}
.site-masthead nav.masthead-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 16px;
    height: 1px;
    background: rgba(223, 219, 204, .60);
}
@media (max-width: 600px) {
    header.site-masthead {
        gap: 13px;
        padding: 23px 16px 15px;
    }
    .site-masthead .brand h1 {
        font-size: clamp(18px, 5vw, 25px);
        letter-spacing: .10em;
    }
    .site-masthead .brand .polaris {
        right: -4px;
        width: 24px;
        height: 24px;
    }
    .site-masthead .prayer-interface .aster {
        left: 0;
        top: 11px;
    }
    .site-masthead nav.masthead-nav {
        column-gap: clamp(12px, 3.4vw, 24px);
    }
    .site-masthead nav.masthead-nav a {
        font-size: 10px;
        letter-spacing: .07em;
        padding-inline: 0;
    }
    .site-masthead .prayer-interface .prayer-panel-row {
        top: 38px;
    }
}


/* STAR CONTROLS AND PUNCTUATION
   Polaris is the single interactive period following A, rather than a
   standalone header decoration. Aster owns the top-left screen corner. */
header.site-masthead {
    padding-top: 39px;
}
.site-masthead .brand h1 {
    font-size: clamp(29px, 3vw, 44px);
    letter-spacing: .14em;
}
.site-masthead .polaris-name-slot {
    position: relative;
    display: inline-block;
    width: .28em;
    height: 1em;
    vertical-align: baseline;
    white-space: nowrap;
}
.site-masthead .brand .polaris-name-slot .polaris {
    position: absolute;
    top: auto;
    right: auto;
    /* Lift 6px from the previous low position to the period baseline. */
    bottom: calc(-16px + .06em);
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    transform: none;
    /* Aster's resting opacity and fade duration, without another halo. */
    opacity: .72;
    filter: none;
    transition: opacity .35s ease, filter .35s ease;
}
/* Do not draw a second star through the original pseudo-elements.
   The central span now paints the rays, glint and core as ONE image. */
.site-masthead .polaris-name-slot .polaris::before,
.site-masthead .polaris-name-slot .polaris::after {
    content: none;
    animation: none;
}
.site-masthead .polaris-name-slot .polaris-core {
    width: 14px;
    height: 14px;
    border-radius: 0;
    background:
        radial-gradient(circle at center, #fff 0 1.6px, transparent 2.4px)
            center / 14px 14px no-repeat,
        linear-gradient(to bottom, transparent, rgba(255,255,255,.92) 50%, transparent)
            center / 1px 12px no-repeat,
        linear-gradient(to right, transparent, rgba(255,255,255,.92) 50%, transparent)
            center / 12px 1px no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 2px rgba(190,220,255,.60));
    transition: filter .55s ease, transform .55s ease;
}
/* Match Aster's brief class-based glimmer. One painted graphic is
   enlarged slightly, without generating a second star underneath. */
.site-masthead .brand .polaris-name-slot .polaris.is-glimmering {
    opacity: 1;
}
.site-masthead .polaris-name-slot .polaris.is-glimmering .polaris-core {
    box-shadow: none;
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 0 5px rgba(190,220,255,.92))
            drop-shadow(0 0 5px rgba(120,175,255,.30));
}

/* Aster's 32px visual and button anchor are independent of the masthead.
   18px inset keeps the whole star visible and easy to tap. */
.site-masthead .prayer-interface {
    position: fixed;
    left: 18px;
    top: 18px;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    transform: none;
    z-index: 320;
}
.site-masthead .prayer-interface .aster {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    top: 0;
    left: 0;
    transform: none;
}
.site-masthead .prayer-interface .aster-core {
    width: 4px;
    height: 4px;
}
.site-masthead .prayer-interface .aster::after {
    background:
        linear-gradient(to bottom, transparent, rgba(255,255,255,.92) 50%, transparent)
            center / 1px 20px no-repeat,
        linear-gradient(to right, transparent, rgba(255,255,255,.92) 50%, transparent)
            center / 20px 1px no-repeat;
    opacity: .72;
}
.site-masthead .prayer-interface.is-config-open .aster {
    transform: rotate(90deg);
}
.site-masthead .prayer-interface .prayer-panel-row {
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 20;
}

/* Crack remains above the middle of the sky; Echo sits below and right,
   but still comfortably above the distant mountain horizon. */
#awakening-star.sky-fracture-star,
body.site-awakened #awakening-star.sky-fracture-star {
    top: 41%;
}
#music-player-toggle.sky-music-star {
    right: clamp(18px, 5.75vw, 108px);
    top: 59vh;
}
@media (max-width: 640px) {
    #music-player-toggle.sky-music-star {
        right: clamp(10px, 4vw, 24px);
        top: 58vh;
    }
}
@media (max-width: 600px) {
    header.site-masthead {
        padding-top: 29px;
    }
    .site-masthead .brand h1 {
        font-size: clamp(21px, 5.8vw, 27px);
        letter-spacing: .09em;
    }
    .site-masthead .prayer-interface {
        top: 12px;
        left: 12px;
    }
    .site-masthead .brand-column {
        margin-top: 21px;
    }
}


/* Reduced motion: do not animate Polaris beyond a quiet resting point. */
@media (prefers-reduced-motion: reduce) {
    .site-masthead .polaris-name-slot .polaris-core,
    .site-masthead .brand .polaris-name-slot .polaris {
        animation: none;
        transition: none;
    }
}