#component-worship{
        --white: #ffffff;
        --sky: #79a6da;
        --soft-gray: #e6e6e6;
        --charcoal: #333333;
        --ink: #1b1b1b;
        --blue: #003f87;
        --blue-deep: #012b5f;
        --mist: #f3f8f0;
        --glass-border: rgba(255, 255, 255, 0.42);
        --shadow: 0 30px 90px rgba(0, 63, 135, 0.22);
        --frame-radius: clamp(18px, 2.2vw, 30px);
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
        --spring: cubic-bezier(0.18, 1.38, 0.36, 1);
      }
#component-worship *{
        box-sizing: border-box;
      }
#component-worship,#component-worship{
        width: 100%;
        min-width: 320px;
        min-height: 100%;
        margin: 0;
        background: transparent;
        font-family: "Poppins", Arial, sans-serif;
        color: var(--ink);
      }
#component-worship{
        overflow: hidden;
      }
#component-worship button,#component-worship video{
        font: inherit;
      }
#component-worship button{
        -webkit-tap-highlight-color: transparent;
      }
#component-worship .embed-shell{
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        min-width: 0;
        overflow: hidden;
        display: grid;
        place-items: center;
        padding: clamp(12px, 2.4vw, 28px);
        isolation: isolate;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.86), rgba(243, 248, 240, 0.84) 46%, rgba(230, 230, 230, 0.76)),
          radial-gradient(ellipse at 14% 18%, rgba(121, 166, 218, 0.42), transparent 35%),
          radial-gradient(ellipse at 88% 84%, rgba(0, 63, 135, 0.17), transparent 38%),
          linear-gradient(145deg, var(--white), var(--soft-gray));
      }
#component-worship .embed-shell::before{
        position: fixed;
        inset: -20%;
        z-index: -1;
        content: "";
        opacity: 0.58;
        background-image:
          linear-gradient(rgba(0, 63, 135, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 63, 135, 0.05) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(135deg, black, transparent 72%);
        animation: worship-drift 18s var(--ease) infinite alternate;
      }
#component-worship .player-card{
        width: min(100%, 1500px);
        max-height: calc(100dvh - clamp(24px, 4.8vw, 56px));
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.58fr);
        align-items: stretch;
        gap: clamp(18px, 3.2vw, 44px);
        animation: worship-pageIn 920ms var(--spring) both;
      }
#component-worship .copy-panel{
        position: relative;
        min-width: 0;
        min-height: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(24px, 3.1vw, 48px);
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: clamp(18px, 2.2vw, 28px);
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(243, 248, 240, 0.42)),
          rgba(255, 255, 255, 0.5);
        box-shadow:
          18px 22px 48px rgba(0, 63, 135, 0.1),
          -14px -14px 34px rgba(255, 255, 255, 0.92),
          inset 1px 1px 0 rgba(255, 255, 255, 0.82),
          inset -1px -1px 0 rgba(0, 63, 135, 0.05);
        transform:
          perspective(900px)
          rotateX(calc(var(--tilt-y, 0) * -1deg))
          rotateY(calc(var(--tilt-x, 0) * 1deg))
          translate3d(calc(var(--float-x, 0) * 1px), calc(var(--float-y, 0) * 1px), 0);
        transition:
          box-shadow 340ms var(--ease),
          transform 420ms var(--spring);
        animation: worship-copyCardIn 960ms 80ms var(--spring) both;
        will-change: transform;
      }
@media (hover: hover) and (pointer: fine){#component-worship .copy-panel:hover{
          box-shadow:
            22px 28px 62px rgba(0, 63, 135, 0.13),
            -16px -16px 38px rgba(255, 255, 255, 0.96),
            inset 1px 1px 0 rgba(255, 255, 255, 0.9),
            inset -1px -1px 0 rgba(0, 63, 135, 0.06);
        }}
#component-worship .eyebrow{
        margin: 0 0 10px;
        color: var(--sky);
        font-size: clamp(0.72rem, 1.1vw, 0.92rem);
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0;
      }
#component-worship h2{
        margin: 0;
        max-width: 11ch;
        color: var(--blue);
        font-size: clamp(2rem, 4.35vw, 4.8rem);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        text-wrap: balance;
      }
#component-worship .intro{
        max-width: 44rem;
        margin: clamp(14px, 2.2vw, 24px) 0 0;
        color: var(--ink);
        font-size: clamp(0.96rem, 1.22vw, 1.2rem);
        font-weight: 400;
        line-height: 1.62;
        text-wrap: pretty;
      }
#component-worship .video-panel{
        min-width: 0;
        min-height: 0;
        display: grid;
        align-items: stretch;
      }
#component-worship .video-frame{
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: calc(100dvh - clamp(28px, 5vw, 72px));
        overflow: hidden;
        contain: paint;
        isolation: isolate;
        border: 1px solid rgba(255, 255, 255, 0.64);
        border-radius: var(--frame-radius);
        background:
          linear-gradient(145deg, rgba(0, 63, 135, 0.94), rgba(27, 27, 27, 0.96)),
          var(--ink);
        background-clip: padding-box;
        box-shadow: var(--shadow);
        clip-path: inset(0 round var(--frame-radius));
        transform: translateZ(0);
        animation: worship-playerLift 1080ms 150ms var(--spring) both;
      }
#component-worship .video-frame::before{
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        content: "";
        background:
          linear-gradient(180deg, rgba(27, 27, 27, 0.04), transparent 44%),
          linear-gradient(0deg, rgba(27, 27, 27, 0.44), transparent 35%);
      }
#component-worship .video-frame::after{
        position: absolute;
        inset: 1px;
        z-index: 1;
        pointer-events: none;
        content: "";
        border-radius: inherit;
        background:
          linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 28%),
          linear-gradient(305deg, rgba(121, 166, 218, 0.14), transparent 42%);
        mix-blend-mode: screen;
        opacity: 0.72;
      }
#component-worship .worship-video{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0;
        border-radius: inherit;
        background: var(--ink);
        transform: translateZ(0);
      }
@media (min-width: 751px){#component-worship .worship-video::-webkit-media-controls{
          display: none !important;
        }}
#component-worship .glass-controls{
        position: absolute;
        left: clamp(12px, 2vw, 24px);
        right: clamp(12px, 2vw, 24px);
        bottom: clamp(12px, 2vw, 24px);
        z-index: 2;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: clamp(10px, 1.4vw, 18px);
        min-height: 64px;
        padding: 10px clamp(10px, 1.6vw, 18px);
        border: 1px solid var(--glass-border);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0.13));
        box-shadow: 0 18px 44px rgba(0, 63, 135, 0.18);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        transition:
          transform 340ms var(--spring),
          background 260ms var(--ease),
          opacity 260ms var(--ease);
        animation: worship-controlsIn 920ms 420ms var(--spring) both;
      }
#component-worship .video-frame:hover .glass-controls{
        transform: translateY(-6px);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.16));
      }
#component-worship .control-button{
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.56);
        border-radius: 999px;
        color: var(--white);
        background: rgba(27, 27, 27, 0.36);
        cursor: pointer;
        transition:
          transform 280ms var(--spring),
          background 220ms var(--ease),
          border-color 220ms var(--ease);
      }
#component-worship .control-button:hover{
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 63, 135, 0.58);
      }
#component-worship .control-button:active{
        transform: scale(0.92);
      }
#component-worship .control-button:focus-visible,#component-worship .progress-track:focus-visible{
        outline: 3px solid rgba(121, 166, 218, 0.88);
        outline-offset: 3px;
      }
#component-worship .control-button svg{
        width: 22px;
        height: 22px;
        fill: currentColor;
      }
#component-worship .pause-icon,#component-worship .volume-muted-icon,#component-worship .is-playing .play-icon,#component-worship .is-muted .volume-icon{
        display: none;
      }
#component-worship .is-playing .pause-icon,#component-worship .is-muted .volume-muted-icon{
        display: block;
      }
#component-worship .time-group{
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(60px, 1fr) auto;
        align-items: center;
        gap: 10px;
        color: var(--white);
        font-size: 0.82rem;
        font-weight: 600;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.38);
      }
#component-worship .progress-track{
        position: relative;
        width: 100%;
        height: 8px;
        overflow: hidden;
        padding: 0;
        border: 0;
        border-radius: 999px;
        appearance: none;
        background: rgba(255, 255, 255, 0.35);
        cursor: pointer;
      }
#component-worship .progress-fill{
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--white), var(--sky));
        transition: width 120ms linear;
      }
@keyframes worship-pageIn{
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.985);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
@keyframes worship-playerLift{
        from {
          opacity: 0;
          transform: translateY(24px) scale(0.97);
          filter: blur(8px);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }
@keyframes worship-copyCardIn{
        from {
          opacity: 0;
          transform:
            perspective(900px)
            translateY(18px)
            scale(0.965);
        }

        72% {
          opacity: 1;
          transform:
            perspective(900px)
            translateY(-5px)
            scale(1.012);
        }

        to {
          opacity: 1;
          transform:
            perspective(900px)
            rotateX(calc(var(--tilt-y, 0) * -1deg))
            rotateY(calc(var(--tilt-x, 0) * 1deg))
            translate3d(calc(var(--float-x, 0) * 1px), calc(var(--float-y, 0) * 1px), 0);
        }
      }
@keyframes worship-drift{
        from {
          transform: translate3d(-18px, -12px, 0);
        }

        to {
          transform: translate3d(18px, 12px, 0);
        }
      }
@keyframes worship-controlsIn{
        from {
          opacity: 0;
          transform: translateY(22px) scale(0.96);
        }

        70% {
          opacity: 1;
          transform: translateY(-7px) scale(1.01);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
@media (prefers-reduced-motion: reduce){#component-worship *,#component-worship *::before,#component-worship *::after{
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 1ms !important;
        }}
@media (max-width: 1100px){#component-worship .player-card{
          grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.5fr);
          gap: clamp(16px, 2.4vw, 30px);
        }
#component-worship .copy-panel{
          padding: clamp(20px, 2.5vw, 32px);
        }
#component-worship h2{
          font-size: clamp(1.85rem, 4.7vw, 3.75rem);
        }}
@media (max-width: 900px){#component-worship{
          overflow: auto;
        }
#component-worship .embed-shell{
          min-height: 100dvh;
          place-items: start stretch;
          padding: clamp(10px, 2.6vw, 22px);
        }
#component-worship .player-card{
          max-height: none;
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          align-content: center;
          gap: clamp(12px, 2.4vw, 20px);
        }
#component-worship .copy-panel{
          align-self: end;
          padding: clamp(18px, 3vw, 28px);
          transform: none;
        }
#component-worship h2{
          max-width: none;
          font-size: clamp(1.8rem, 5.8vw, 3.35rem);
          line-height: 1.06;
        }
#component-worship .intro{
          max-width: 64rem;
          font-size: clamp(0.92rem, 2.2vw, 1.1rem);
          line-height: 1.52;
        }
#component-worship .video-panel,#component-worship .video-frame{
          align-items: start;
          align-self: start;
          transform: none;
        }
#component-worship .video-frame{
          max-height: none;
        }}
@media (min-width: 751px) and (max-height: 760px){#component-worship .player-card{
          grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.55fr);
          grid-template-rows: 1fr;
          align-items: stretch;
        }
#component-worship .copy-panel{
          align-self: stretch;
          padding: clamp(8px, 2vw, 22px);
          transform: none;
        }
#component-worship h2{
          max-width: 12ch;
          font-size: clamp(1.72rem, 4vw, 3.4rem);
        }
#component-worship .intro{
          font-size: clamp(0.82rem, 1.32vw, 1rem);
          line-height: 1.46;
        }
#component-worship .video-panel{
          align-items: stretch;
        }}
@media (max-width: 750px){#component-worship{
          --frame-radius: 16px;
        }
#component-worship .embed-shell{
          padding: clamp(10px, 3.2vw, 16px);
        }
#component-worship .player-card{
          min-height: calc(100dvh - clamp(20px, 6.4vw, 32px));
          align-content: center;
        }
#component-worship .copy-panel{
          padding: clamp(16px, 4vw, 22px);
          border-radius: 18px;
        }
#component-worship .eyebrow{
          margin-bottom: 7px;
          font-size: clamp(0.68rem, 2.6vw, 0.78rem);
        }
#component-worship h2{
          font-size: clamp(1.55rem, 7.2vw, 2.42rem);
        }
#component-worship .intro{
          margin-top: 10px;
          font-size: clamp(0.82rem, 3.35vw, 0.98rem);
          line-height: 1.46;
        }
#component-worship .video-frame{
          box-shadow: 0 16px 42px rgba(27, 27, 27, 0.14);
        }
#component-worship .video-frame::before,#component-worship .video-frame::after,#component-worship .glass-controls{
          display: none;
        }
#component-worship .worship-video{
          min-height: 100%;
        }}
@media (max-height: 430px) and (orientation: landscape){#component-worship{
          overflow: auto;
        }
#component-worship .player-card{
          grid-template-columns: minmax(210px, 0.68fr) minmax(0, 1.5fr);
          grid-template-rows: 1fr;
          min-height: auto;
          gap: 14px;
        }
#component-worship .copy-panel{
          align-self: center;
          padding: clamp(12px, 2vw, 18px);
          transform: none;
        }
#component-worship .eyebrow{
          margin-bottom: 6px;
        }
#component-worship h2{
          font-size: clamp(1.35rem, 4.7vw, 2.15rem);
        }
#component-worship .intro{
          margin-top: 8px;
          font-size: clamp(0.76rem, 2vw, 0.9rem);
          line-height: 1.36;
        }
#component-worship .video-panel{
          align-items: stretch;
          transform: none;
        }}
@media (max-width: 420px), (max-height: 330px){#component-worship .intro{
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }}
@media (max-height: 300px){#component-worship .player-card{
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
        }
#component-worship .copy-panel{
          display: none;
        }
#component-worship .video-panel{
          align-items: center;
          transform: none;
        }}