#playerWrap {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 aspect ratio */
      overflow: hidden;
      border-radius: 1rem;
      background-color: black;
    }
    #videoPlayer,
    #ytContainer,
    #ytContainer iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
    }

    :root{
      --brand1:#2f00ff;
      --brand2:#22c55e;
      --ring: 0 0 0 10px rgba(197, 34, 34, 0.5);
    }
    body{ margin:0; background: linear-gradient(180deg,#b30059,#b30059 40%,#b30059); color:#0f172a; }
    @media (prefers-color-scheme: dark){ body{ background: linear-gradient(180deg,#0b1220,#0b1220 40%,#06140b); color:#e2e8f0; } }

    html[data-theme="light"] body{ background: linear-gradient(180deg,#ffcc00,#ffcc00 40%,#ffcc00); color:#0f172a; }
    html[data-theme="dark"] body{ background: linear-gradient(180deg,#1DA1F2,#1DA1F2 40%,#1DA1F2); color:#0c71f5; }
    html[data-theme="red"] body{ background: linear-gradient(180deg,#DE3163,#DE3163 40%,#DE3163); color:#DE3163; }

    
.lesson-item { gap: .5rem; padding: .6rem; }
@media (max-width: 640px){
  .brand-text{ font-size:1rem; }
  #playerWrap{ padding-top:56.25%; }}


    .glass{ background:rgba(255,255,255,.75); backdrop-filter: blur(14px) saturate(170%); }
    @media (prefers-color-scheme: dark){ .glass{ background:rgba(17, 40, 40, 0.65); } }
    .card{ border-radius:18px; border:2px solid rgba(253, 5, 108, 0.35); box-shadow:0 10px 30px rgba(2,6,23,.06); }
    .brand-text{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .brand-pill{ background: linear-gradient(90deg,var(--brand1),var(--brand2)); color: black; }
    .btn{ border-radius:14px; padding:.6rem 1.1rem; font-weight:700; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .lesson-item{ display:flex; gap:.75rem; align-items:center; padding:.7rem .9rem; border-radius:12px; border:1px solid rgba(148,163,184,.35); cursor:pointer; }
    .lesson-item:hover{ border-color:#86efac; }
    .lesson-item.active{ border-color:#86efac; background:linear-gradient(180deg,rgba(34,197,94,.12),transparent); }
    .lesson-item:focus-visible{ outline: var(--ring); }

    .pbar{ height:6px; background:rgba(148,163,184,.35); border-radius:999px; overflow:hidden; }
    .pbar>span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand1),var(--brand2)); }

    .loading::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.15); }

    .logo { image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; }
    .logo-title { line-height: 1; }

    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    }

    .presets { display:flex; gap:.4rem; margin-left:.5rem; align-items:center; }
    .preset-btn { border-radius:10px; padding:.35rem .6rem; font-weight:700; border:1px solid rgba(0,0,0,.06); background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:white; cursor:pointer; }
    .kbd { background:rgba(15,23,42,.8); color:#f8fafc; border-radius:6px; padding:.12rem .4rem; font-weight:700; font-size:12px; margin-left:.4rem; }
    .note { font-size:12px; color:#374151; margin-left:.5rem; }