.theme-schools .accent-videos { --page-accent: var(--ybag-pink); --page-accent-soft: color-mix(in srgb, var(--ybag-pink) 13%, var(--panel)); }
.videos-page { --video-pink: #e93078; --video-blue: #1268c4; --video-ink: #10245c; --video-muted: #586680; color: var(--video-ink); background: #fff; }
.videos-frame { width: min(calc(100% - 48px), 1320px); margin: 0 auto; }
.videos-hero { overflow: hidden; background: radial-gradient(circle at 85% 26%, rgba(233,48,120,.18), transparent 24%), radial-gradient(circle at 95% 80%, rgba(18,104,196,.14), transparent 30%), linear-gradient(135deg, #fff 0 56%, #f7f1ff 100%); }
.videos-hero-grid { display: grid; min-height: 540px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr); align-items: center; gap: clamp(50px, 8vw, 120px); padding: clamp(76px, 9vw, 126px) 0; }
.videos-hero-copy h1 { max-width: 850px; margin: 19px 0 23px; color: var(--video-ink); font: 900 clamp(48px, 6vw, 86px)/.96 'Changa', Arial, sans-serif; letter-spacing: -.045em; }
.videos-hero-copy h1 em { color: #d92046; font-style: normal; }
.videos-hero-copy > p:last-of-type { max-width: 780px; margin: 0; color: var(--video-muted); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.7; }
.videos-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 25px; margin-top: 33px; }
.videos-youtube-link { color: var(--video-ink); font-weight: 900; text-decoration: none; }
.videos-youtube-link:hover { color: var(--video-pink); }
.videos-hero-orbit { position: relative; display: grid; width: min(380px, 100%); aspect-ratio: 1; place-items: center; border: 2px solid rgba(18,104,196,.2); border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 28px 80px rgba(16,36,92,.12), inset 0 0 0 28px rgba(255,255,255,.4); }
.videos-hero-orbit::before, .videos-hero-orbit::after { position: absolute; border: 2px dashed rgba(233,48,120,.28); border-radius: 50%; content: ''; }
.videos-hero-orbit::before { inset: 35px; }.videos-hero-orbit::after { inset: 78px; border-color: rgba(255,173,0,.35); }
.videos-orbit-play { z-index: 2; display: grid; width: 100px; height: 100px; place-items: center; border-radius: 31px; color: #fff; background: linear-gradient(145deg, var(--video-pink), #b51c5c); box-shadow: 0 20px 45px rgba(233,48,120,.32); font-size: 37px; text-indent: 5px; transform: rotate(-5deg); }
.videos-hero-orbit > i { position: absolute; z-index: 3; width: 17px; height: 17px; border-radius: 50%; background: var(--video-blue); box-shadow: 0 0 0 8px rgba(18,104,196,.1); }.videos-hero-orbit > i:nth-of-type(1) { top: 10%; left: 26%; }.videos-hero-orbit > i:nth-of-type(2) { right: 5%; bottom: 31%; background: #6cae19; }.videos-hero-orbit > i:nth-of-type(3) { bottom: 6%; left: 29%; background: #ffad00; }
.videos-hero-orbit > strong { position: absolute; right: -8px; top: 22%; display: grid; min-width: 90px; padding: 14px 17px; border-radius: 19px; color: #fff; background: var(--video-blue); box-shadow: 0 16px 35px rgba(18,104,196,.25); font: 900 26px/1 'Changa', Arial, sans-serif; text-align: center; }.videos-hero-orbit strong small { margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.videos-watch { padding: clamp(72px, 8vw, 112px) 0; background: #f6f8fd; }
.videos-watch.is-locked { position: relative; min-height: 760px; }
.videos-access-gate { position: relative; z-index: 5; display: grid; max-width: 680px; justify-items: center; margin: 0 auto 28px; border: 1px solid rgba(18,104,196,.2); border-radius: 25px; padding: 28px 32px 30px; color: var(--video-ink); background: rgba(255,255,255,.94); box-shadow: 0 22px 70px rgba(16,36,92,.18); text-align: center; backdrop-filter: blur(16px); }
.videos-access-gate > p { margin: 0 0 5px; color: var(--video-pink); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.videos-access-gate h2 { margin: 0; color: var(--video-ink); font: 900 clamp(27px, 3vw, 39px)/1.13 'Changa', Arial, sans-serif; }
.videos-access-gate > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 21px; }
.videos-access-gate .videos-register-button { color: #fff; background: #d92046; box-shadow: 0 12px 28px rgba(217,32,70,.22); }
.videos-access-gate .videos-register-button:hover { color: #fff; background: #b91737; }
.videos-access-gate .videos-login-button { color: #fff; background: var(--ybag-violet); box-shadow: 0 12px 28px rgba(130,70,180,.2); }
.videos-access-gate .videos-login-button:hover { color: #fff; background: #663491; }
.videos-watch.is-locked .videos-locked-content { filter: blur(9px); opacity: .52; pointer-events: none; user-select: none; }
.videos-section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr); align-items: end; gap: 50px; margin-bottom: 34px; }
.videos-section-heading h2 { max-width: 760px; margin: 0; color: var(--video-ink); font: 900 clamp(35px, 4vw, 56px)/1.05 'Changa', Arial, sans-serif; letter-spacing: -.03em; }.videos-section-heading > p { margin: 0 0 6px; color: var(--video-muted); font-size: 16px; line-height: 1.7; }
.videos-watch-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(370px, .75fr); gap: 22px; align-items: start; }
.videos-player-card, .videos-playlist-card { overflow: hidden; border: 1px solid #dce4f2; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgba(16,36,92,.1); }
.videos-player-wrap { position: relative; aspect-ratio: 16/9; background: #061127; }.videos-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videos-now-playing { padding: 25px 28px 28px; }.videos-now-playing > span { color: var(--video-pink); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.videos-now-playing h2 { margin: 6px 0 8px; color: var(--video-ink); font: 800 clamp(23px, 2vw, 31px)/1.2 'Changa', Arial, sans-serif; }.videos-now-playing p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; margin: 0; color: var(--video-muted); font-size: 13px; }.videos-now-playing p i { width: 4px; height: 4px; border-radius: 50%; background: #aab4c7; }
.videos-playlist-card { display: flex; max-height: 680px; flex-direction: column; }
.videos-playlist-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 20px; color: #fff; background: linear-gradient(130deg, var(--video-ink), #193d87); }.videos-playlist-header span { color: #ff9bc3; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.videos-playlist-header h2 { margin: 4px 0 0; color: #fff; font: 800 24px/1.15 'Changa', Arial, sans-serif; }.videos-playlist-header > strong { flex: 0 0 auto; border-radius: 99px; padding: 7px 10px; color: #fff; background: rgba(255,255,255,.12); font-size: 11px; }
.videos-playlist { min-height: 0; margin: 0; padding: 10px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: #bcc8da transparent; scrollbar-width: thin; }
.videos-playlist li + li { border-top: 1px solid #edf0f6; }
.videos-playlist-item { display: grid; width: 100%; grid-template-columns: 29px 116px minmax(0,1fr); align-items: center; gap: 11px; border: 0; border-radius: 15px; padding: 11px 9px; color: var(--video-ink); background: transparent; cursor: pointer; text-align: left; transition: background .18s ease, transform .18s ease; }.videos-playlist-item:hover { background: #f6f0fa; }.videos-playlist-item.is-active { background: #fff0f6; box-shadow: inset 4px 0 var(--video-pink); }
.videos-playlist-number { color: #8b97aa; font-size: 11px; font-weight: 900; text-align: center; }.videos-playlist-item.is-active .videos-playlist-number { color: var(--video-pink); }
.videos-playlist-thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 10px; background: #d9e0eb; }.videos-playlist-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }.videos-playlist-thumb small { position: absolute; right: 4px; bottom: 4px; border-radius: 4px; padding: 2px 4px; color: #fff; background: rgba(0,0,0,.78); font-size: 9px; font-weight: 800; }.videos-playlist-thumb i { position: absolute; inset: 50% auto auto 50%; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: rgba(233,48,120,.88); font-size: 10px; font-style: normal; opacity: 0; text-indent: 2px; transform: translate(-50%,-50%); transition: opacity .18s ease; }.videos-playlist-item:hover .videos-playlist-thumb i, .videos-playlist-item.is-active .videos-playlist-thumb i { opacity: 1; }
.videos-playlist-copy { min-width: 0; }.videos-playlist-copy strong { display: -webkit-box; overflow: hidden; color: var(--video-ink); font-size: 13px; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.videos-playlist-copy small { display: block; overflow: hidden; margin-top: 5px; color: #78859a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.videos-care-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px 26px; margin-top: 25px; border: 1px solid #e7c651; border-radius: 20px; padding: 21px 24px; color: #604d08; background: #fff9dd; }.videos-care-note strong { font: 800 18px/1.4 'Changa', Arial, sans-serif; }.videos-care-note p { margin: 0; line-height: 1.65; }
.videos-system-library { background: #fff; }
@media (max-width: 1080px) { .videos-hero-grid { grid-template-columns: minmax(0,1fr) 300px; }.videos-watch-grid { grid-template-columns: 1fr; }.videos-playlist-card { max-height: 590px; } }
@media (max-width: 780px) { .videos-frame { width: min(calc(100% - 32px), 1320px); }.videos-hero-grid, .videos-section-heading { grid-template-columns: 1fr; }.videos-hero-grid { min-height: 0; gap: 55px; padding: 70px 0; }.videos-hero-orbit { width: min(300px, 86vw); justify-self: center; }.videos-section-heading { gap: 18px; }.videos-watch-grid { gap: 15px; }.videos-player-card, .videos-playlist-card { border-radius: 20px; }.videos-care-note { grid-template-columns: 1fr; }.videos-playlist-item { grid-template-columns: 25px 100px minmax(0,1fr); } }
@media (max-width: 500px) { .videos-hero-copy h1 { font-size: 47px; }.videos-now-playing { padding: 20px; }.videos-playlist { padding: 6px; }.videos-playlist-item { grid-template-columns: 24px 88px minmax(0,1fr); gap: 8px; padding: 10px 5px; }.videos-playlist-header { padding: 20px; }.videos-care-note { padding: 19px; } }
@media (prefers-reduced-motion: reduce) { .videos-playlist-item, .videos-playlist-thumb i { transition: none; } }