taleem-player 1.0.14 → 1.0.16

package/dist/css/taleem.css

@@ -1,601 +1 @@
-
-/* =====================================================
-   TALEEM — Single Public Stylesheet
-
-  /* -------------------------------
-     Global Page Reset
-     ------------------------------- */
-  
-     html,body {
-      height: 100%;
-       overflow: hidden;
-      margin: 0;
-      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-      background: var(--backgroundColor, #0b1220);
-      color: var(--primaryColor, #e6e9ff);
-    }
-    
-    #app {
-      position: relative;
-      width: 100vw;
-      min-height: 100vh;
-      overflow: hidden;
-    }
-    
-    /* -------------------------------
-       Browser / Player Layers
-       ------------------------------- */
-    .taleem-browser-bg {
-      position: absolute;
-      inset: 0;
-      z-index: 0;
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .taleem-browser-slide {
-      position: relative;
-      z-index: 1;
-    }
-    
-    /* -------------------------------
-       Base Slide Grammar
-       ------------------------------- */
-    .slide {
-      height: 100vh;
-      box-sizing: border-box;
-    
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    
-      padding: 64px 80px;
-      gap: 32px;
-    
-      overflow: hidden;
-      background: transparent;
-      color: var(--primaryColor, #e6e9ff);
-    
-      font-size: 2.4rem;
-      line-height: 1.6;
-      letter-spacing: 0.01em;
-      text-align: center;
-    }
-    
-    /* -------------------------------
-       Global Image Safety
-       ------------------------------- */
-    .slide img {
-      max-width: 100%;
-      max-height: 100%;
-      height: auto;
-      width: auto;
-      display: block;
-    }
-    
-    /* -------------------------------
-       Headings
-       ------------------------------- */
-    .slide h1 {
-      margin: 0;
-      letter-spacing: -0.015em;
-    }
-    
-    /* -------------------------------
-       Slide Types
-       ------------------------------- */
-    .slide.titleSlide h1 {
-      font-size: 5.6rem;
-      font-weight: 700;
-      line-height: 1.2;
-    }
-    
-    .slide.titleAndSubtitle h1 {
-      font-size: 5.8rem;
-      font-weight: 700;
-    }
-    
-    .slide.titleAndSubtitle h2 {
-      font-size: 3.8rem;
-      font-weight: 400;
-      opacity: 0.8;
-      margin: 0;
-    }
-    
-    .slide.titleAndPara h1 {
-      font-size: 4.8rem;
-      font-weight: 600;
-    }
-    
-    .slide.titleAndPara p {
-      font-size: 3rem;
-      max-width: 70ch;
-      opacity: 0.9;
-      margin: 0;
-    }
-    
-    /* -------------------------------
-       Bullet List
-       ------------------------------- */
-    .slide.bulletList ul {
-      list-style: disc;
-      padding-left: 2rem;
-      margin: 0;
-    }
-    
-    .slide.bulletList li {
-      font-size: 3.6rem;
-      margin-bottom: 1rem;
-      text-align: left;
-      font-weight: 500;
-    }
-    
-    /* -------------------------------
-       Image Variants
-       ------------------------------- */
-    .slide.imageSlide {
-      padding: 0;
-    }
-    
-    .slide.imageSlide img {
-      object-fit: contain;
-    }
-    
-    .slide.imageWithTitle {
-      position: relative;
-      padding: 48px;
-    }
-    
-    .slide.imageWithTitle img {
-      height: calc(100vh - 96px);
-      border-radius: 12px;
-    }
-    
-    .slide.imageWithTitle h1 {
-      position: absolute;
-      bottom: 64px;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: 4.6rem;
-      background: rgba(0, 0, 0, 0.45);
-      padding: 0.4em 0.8em;
-      border-radius: 6px;
-    }
-    
-    .slide.imageWithCaption {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 32px;
-      height: 100vh;
-      overflow: hidden;
-    }
-    
-    .slide.imageWithCaption img {
-      max-height: 55vh;        /* reduce slightly */
-      object-fit: contain;
-      flex-shrink: 0;
-    }
-    
-    .slide.imageWithCaption p {
-      max-height: 20vh;        /* hard cap text */
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    /* -------------------------------
-   Two Column Text
-   ------------------------------- */
-
-
-   .slide.twoColumnText {
-    flex-direction: row;
-    justify-content: center;   /* center the columns block */
-    align-items: center;
-    gap: 64px;
-  }
-  
-  .slide.twoColumnText > div {
-    flex: 1;
-    max-width: 520px;          /* keeps columns visually centered */
-  }
-  
-
-    /* QUOTE SLIDE */
-    .slide.quoteSlide {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 32px;
-      height: 100vh;
-      overflow: hidden;
-    }
-    
-    .slide.quoteSlide blockquote {
-      max-height: 60vh;
-      overflow: hidden;
-    }
-    
-    .slide.quoteSlide cite {
-      flex-shrink: 0;
-    }
-    
-    /* -------------------------------
-       Quote Slide
-       ------------------------------- */
-    .slide.quoteSlide blockquote {
-      font-size: 3.8rem;
-      font-style: italic;
-      max-width: 60ch;
-    }
-    
-    .slide.quoteSlide cite {
-      font-size: 2.4rem;
-      opacity: 0.75;
-    }
-    
-    /* -------------------------------
-       Big Number
-       ------------------------------- */
-    .slide.bigNumber .number {
-      font-size: 9rem;
-      font-weight: 700;
-    }
-    
-    /* -------------------------------
-       Fill Image (Full Bleed)
-       ------------------------------- */
-    .slide.fillImage {
-      padding: 0;
-      height: 100vh;
-      display: block;
-    }
-    
-    .slide.fillImage img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    /* -------------------------------
-       Demo / Player UI (Optional)
-       ------------------------------- */
-    #timebar {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 32px;
-      background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(6px);
-      z-index: 10;
-    }
-    
-
-    /* -------------------------------
-   Image + Bullets (Side by Side)
-   ------------------------------- */
-
-.slide.imageRightBulletsLeft,
-.slide.imageLeftBulletsRight {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 64px;
-  text-align: left;
-}
-
-/* image on right */
-.slide.imageRightBulletsLeft img {
-  order: 2;
-}
-/* -------------------------------
-   Table Slide
-   ------------------------------- */
-
-   .slide.table {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  
-    width: 100%;
-    height: 100vh;
-  
-    padding: 64px 80px;
-    box-sizing: border-box;
-  }
-  
-  /* actual table */
-  .slide.table table {
-    border-collapse: collapse;
-    width: 100%;
-    max-width: 1200px;
-  
-    font-size: 2.8rem;
-    line-height: 1.4;
-    text-align: center;
-  
-    color: var(--primaryColor, #e6e9ff);
-  }
-  
-  /* header cells (title row) */
-  .slide.table thead th {
-    font-weight: 700; /* title row bold */
-    padding: 20px 24px;
-  
-    border: 2px solid rgba(255, 255, 255, 0.35);
-  }
-  
-  /* body cells */
-  .slide.table tbody td {
-    padding: 20px 24px;
-  
-    border: 2px solid rgba(255, 255, 255, 0.25);
-  }
-/* hide empty table header row */
-.slide.table thead th:empty {
-  display: none;
-}
-
-.slide.table thead tr:has(th:empty) {
-  display: none;
-}
-  
-
-/* =====================================================
-   EQ — Final visual behavior
-   ===================================================== */
-
-/* EQ should grow from TOP, not vertical center */
-.slide.eq.imageRightBulletsLeft {
-  align-items: flex-start;
-}
-
-/* ---------- EQ: equation lines as table rows ---------- */
-
-.slide.eq.imageRightBulletsLeft .eq-lines {
-  flex: 1;
-  list-style: none;          /* remove bullet visuals */
-  padding: 0;
-  margin: 0;
-
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.slide.eq.imageRightBulletsLeft .eq-lines li {
-  padding: 14px 18px;
-  font-size: 2.6rem;
-  line-height: 1.45;
-
-  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.03);
-
-  transition: background 0.25s ease, color 0.25s ease;
-}
-
-/* selected (latest) line */
-.slide.eq.imageRightBulletsLeft .eq-lines li:last-child {
-  background: rgba(245, 197, 66, 0.18); /* soft yellow */
-  color: #ffd7a3;                      /* warm / reddish */
-  font-weight: 600;
-}
-
-/* ---------- RIGHT: fixed explanation panel ---------- */
-
-.slide.eq.imageRightBulletsLeft .eq-side-panel {
-  flex: 1;
-  height: 75vh;               /* FIXED height → no shaking */
-  overflow: hidden;           /* contain layout */
-
-  padding: 28px 32px;
-
-  background: rgba(0, 0, 0, 0.35);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 16px;
-
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
-
-  display: flex;
-  flex-direction: column;
-}
-
-/* ---------- Side panel items ---------- */
-
-.slide.eq.imageRightBulletsLeft .eq-explain-item {
-  font-size: 1.6rem;
-  line-height: 1.75;
-  text-align:justify;
-
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-
-  background: rgba(255, 255, 255, 0.06);
-  padding: 14px 18px;
-  border-radius: 12px;
-
-  
-}
-
-/* ---------- Side panel image ---------- */
-
-.slide.eq.imageRightBulletsLeft .eq-explain-image img {
-  width: 70%;
-  margin: 0 auto;            /* center image */
-  display: block;
-
-  border-radius: 12px;
-}
-
-/* =====================================================
-   Bar Chart Slide
-   ===================================================== */
-
-   .slide.barChart {
-    justify-content: center;
-    align-items: center;
-    text-align: left;
-  }
-  
-  .slide.barChart .bar-chart {
-    width: 100%;
-    max-width: 900px;
-  
-    display: flex;
-    flex-direction: column;
-    gap: 22px;
-  }
-  
-  /* one bar row */
-  .slide.barChart .bar-row {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-  
-  /* label on the left */
-  .slide.barChart .bar-label {
-    width: 220px;
-    font-size: 2.2rem;
-    opacity: 0.9;
-    flex-shrink: 0;
-  }
-  
-  /* bar background */
-  .slide.barChart .bar-track {
-    flex: 1;
-    height: 26px;
-  
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 13px;
-    overflow: hidden;
-  }
-  
-  /* actual bar */
-  .slide.barChart .bar-fill {
-    height: 100%;
-    width: 0;
-  
-    background: #ff9900;
-    border-radius: 13px;
-  }
-  
-  /* numeric value on right */
-  .slide.barChart .bar-value {
-    width: 48px;
-    text-align: right;
-    font-size: 2rem;
-    opacity: 0.85;
-  }
-
-  
-  /* -------------------------------
-   Progress Bar Slide
-   ------------------------------- */
-
-.slide.progressbar {
-  justify-content: center;
-  align-items: center;
-  text-align: left;
-}
-
-.slide.progressbar .progressbar-item {
-  width: 100%;
-  max-width: 900px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-
-  margin-bottom: 28px;
-}
-
-.slide.progressbar .progressbar-label {
-  font-size: 2.4rem;
-  font-weight: 600;
-  opacity: 0.9;
-}
-
-.slide.progressbar .progressbar-track {
-  width: 100%;
-  height: 28px;
-
-  background: rgba(255, 255, 255, 0.18);
-  border-radius: 14px;
-  overflow: hidden;
-}
-
-.slide.progressbar .progressbar-fill {
-  height: 100%;
-  width: 0;
-
-  background: #ff9900;
-  border-radius: 14px;
-
-  transition: width 0.6s ease;
-}
-
-/* -------------------------------
-   Key Ideas Slide (Corner Words / 4 Quadrants)
-   ------------------------------- */
-
-   .slide.keyIdeasSlide {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    padding: 0;
-  }
-  
-  /* base idea block */
-  .slide.keyIdeasSlide .key-idea {
-    position: absolute;
-    width: 45%;
-    height: 45%;
-  
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-  
-    font-size: 4.2rem;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-    text-align: center;
-  }
-  
-  /* icon */
-  .slide.keyIdeasSlide .key-idea .icon {
-    font-size: 5.2rem;
-    line-height: 1;
-  }
-  
-  /* label */
-  .slide.keyIdeasSlide .key-idea .label {
-    font-size: 3.6rem;
-    font-weight: 600;
-  }
-  
-  /* quadrants */
-  .slide.keyIdeasSlide .key-idea:nth-child(1) {
-    top: 0;
-    left: 0;
-  }
-  
-  .slide.keyIdeasSlide .key-idea:nth-child(2) {
-    top: 0;
-    right: 0;
-  }
-  
-  .slide.keyIdeasSlide .key-idea:nth-child(3) {
-    bottom: 0;
-    left: 0;
-  }
-  
-  .slide.keyIdeasSlide .key-idea:nth-child(4) {
-    bottom: 0;
-    right: 0;
-  }
-  
+.slide{width:100%;height:100vh;box-sizing:border-box;padding:4rem 6rem;display:flex;flex-direction:column;justify-content:center;font-family:system-ui,-apple-system,sans-serif;align-items:center;background:var(--backgroundColor, #ffffff);color:var(--primaryColor, #111111)}.slide img{max-width:100%;max-height:100%;height:auto;width:auto;display:block}.slide h1,.slide h2,.slide h3,.slide p{margin:0}.slide ul{margin:0;padding-left:1.2em}.slide li{margin:0}.katex{font-size:1.4em}body{margin:0;font-family:system-ui,sans-serif}#app{height:100vh;box-sizing:border-box}.nav-test{position:fixed;left:0;right:0;bottom:0;height:90px;transition:opacity .5s ease;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);background:#bbbbbcd9;border-top:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:1rem;padding:0 1rem;z-index:999999}.nav-test span{font-weight:700;min-width:80px}input[type=range]{flex:1}.slide.titleAndSubtitle{align-items:center;text-align:center;gap:32px}.slide.titleAndSubtitle h1{font-size:5.8rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:0}.slide.titleAndSubtitle h2{font-size:2.3rem;font-weight:400;opacity:.8;margin:0}.slide.titleAndPara{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:3rem;gap:1rem;text-align:center}.slide.titleAndPara h1{font-size:3rem;font-weight:700;line-height:1.2;max-width:1100px;margin:0 auto}.slide.titleAndPara p{font-size:2.2rem;line-height:1.7;max-width:1000px;margin:0 auto}@media(min-width:1024px){.slide.titleAndPara{padding-top:5rem;gap:2rem}.slide.titleAndPara h1{font-size:2.8rem;max-width:900px}.slide.titleAndPara p{font-size:1.6rem;max-width:750px;line-height:1.6}}@media(orientation:landscape){.slide.titleAndPara p{font-size:1.5rem;max-width:1100px;line-height:1.5}}@media(orientation:portrait){.slide.titleAndPara p{font-size:2.75rem;max-width:1100px;line-height:2.2;text-align:justify}}@media(min-width:1600px){.slide.titleAndPara{padding-top:6rem;gap:3rem}.slide.titleAndPara h1{font-size:4rem;max-width:1200px}.slide.titleAndPara p{font-size:2.4rem;max-width:1100px;line-height:1.8}}.slide.bulletList{align-items:center;text-align:left}.slide.bulletList ul{list-style:disc;padding-left:2rem;margin:0;max-width:900px}.slide.bulletList li{font-size:2.2rem;font-weight:500;line-height:2;margin-bottom:1rem}@media(orientation:portrait){.slide.bulletList li{line-height:3}}@media(min-width:1024px)and (max-width:1440px){.slide.bulletList ul{max-width:750px}.slide.bulletList li{font-size:3rem;line-height:1.8;margin-bottom:.8rem}}@media(min-width:1600px){.slide.bulletList ul{max-width:1100px}.slide.bulletList li{font-size:3rem;line-height:2.2}}.slide.twoColumnText{display:flex;flex-direction:row;font-size:2rem;line-height:1.7;justify-content:center;align-items:stretch;gap:4rem;text-align:center}.slide.twoColumnText>div{flex:1;max-width:600px;padding:2.5rem;border:1px solid white;border-radius:12px;box-shadow:0 12px 30px #00000014}@media(orientation:portrait){.slide.twoColumnText{flex-direction:column;font-size:3rem;line-height:2;gap:2rem}.slide.twoColumnText>div{max-width:100%}}@media(orientation:landscape){.slide.twoColumnText{font-size:1.5rem}.slide.twoColumnText>div{max-width:100%}}@media(min-width:1600px){.slide.twoColumnText{font-size:3rem;line-height:1.9;gap:3rem}.slide.twoColumnText>div{max-width:800px;padding:3rem}}.slide.imageSlide{padding:0;align-items:center;justify-content:center}.slide.imageSlide img{max-width:90%;max-height:90%;object-fit:contain}.slide.imageWithTitle{align-items:center;text-align:center;gap:2.5rem}.slide.imageWithTitle h1{font-size:2.5rem;font-weight:600;line-height:1.2;margin:0}.slide.imageWithTitle img{max-width:85%;max-height:70%;object-fit:contain}@media(orientation:portrait){.slide.imageWithTitle h1{font-size:3.2rem}.slide.imageWithTitle img{max-width:95%;max-height:65%}}.slide.imageWithCaption{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2.5rem}.slide.imageWithCaption img{max-width:85%;max-height:65%;object-fit:contain;display:block}.slide.imageWithCaption figcaption{font-size:2.4rem;line-height:1.6;max-width:800px;margin:0;opacity:.85}@media(orientation:portrait){.slide.imageWithCaption img{max-width:95%;max-height:60%}.slide.imageWithCaption figcaption{font-size:2.8rem}}.slide.imageLeftBulletsRight{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageLeftBulletsRight img{max-width:45%;max-height:75%;object-fit:contain}.slide.imageLeftBulletsRight ul{max-width:45%;margin:0;padding-left:2rem}.slide.imageLeftBulletsRight li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageLeftBulletsRight{flex-direction:column;text-align:left}.slide.imageLeftBulletsRight img{max-width:85%}.slide.imageLeftBulletsRight ul{max-width:100%;padding-left:0;list-style-position:inside}}.slide.imageRightBulletsLeft{flex-direction:row;align-items:center;justify-content:center;gap:4rem;text-align:left}.slide.imageRightBulletsLeft img{order:2;max-width:45%;max-height:75%;object-fit:contain}.slide.imageRightBulletsLeft ul{order:1;max-width:45%;margin:0;padding-left:2rem}.slide.imageRightBulletsLeft li{font-size:2rem;line-height:1.5;margin-bottom:1rem}@media(orientation:portrait){.slide.imageRightBulletsLeft{flex-direction:column;text-align:left}.slide.imageRightBulletsLeft ul{order:1;max-width:100%;padding-left:0;list-style-position:inside}.slide.imageRightBulletsLeft img{order:2;max-width:85%}}.slide.table{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem}.slide.table table{border-collapse:collapse;width:100%;max-width:1100px;table-layout:fixed}.slide.table td{padding:1rem;font-size:2.4rem;border:2px solid var(--primaryColor);word-break:break-word;text-align:center}@media(orientation:portrait){.slide.table td{font-size:1.8rem;padding:1rem 1.2rem}}.slide.barChart{align-items:center;justify-content:center;text-align:left}.slide.barChart .bar-chart{width:100%;max-width:900px;display:flex;flex-direction:column;gap:2.4rem}.slide.barChart .bar-row{display:flex;align-items:center;gap:2rem}.slide.barChart .bar-label{width:220px;flex-shrink:0;font-size:2.4rem;opacity:.9}.slide.barChart .bar-track{flex:1;height:28px;background:#00000014;border-radius:14px;overflow:hidden}.slide.barChart .bar-fill{height:100%;width:0;background:#f5c542;border-radius:14px;transition:width .6s ease}.slide.barChart .bar-value{width:60px;text-align:right;font-size:2.2rem;opacity:.85}@media(orientation:portrait){.slide.barChart .bar-label{width:140px;font-size:2rem}.slide.barChart .bar-value{width:48px;font-size:1.8rem}.slide.barChart .bar-track{height:22px}}.slide.progressbar{align-items:center;justify-content:center;text-align:center;gap:3rem}.slide.progressbar .progressbar-item{width:90%;max-width:900px}.slide.progressbar .progressbar-label{font-size:2.6rem;font-weight:500;margin-bottom:1.4rem}.slide.progressbar .progressbar-track{position:relative;height:46px;border-radius:999px;background:#00000040;box-shadow:inset 0 4px 8px #00000026}.slide.progressbar .progressbar-fill{height:100%;width:0;border-radius:999px;background:#f5c542;transition:width .6s ease;display:flex;align-items:center;padding-left:1.8rem;font-size:2.2rem;font-weight:600;color:#222}.slide.progressbar .progressbar-fill:before{content:attr(data-value) "%"}.slide.progressbar .progressbar-track:after{content:"100%";position:absolute;right:-75px;top:50%;transform:translateY(-50%);font-size:2.2rem;font-weight:500;opacity:.75}.slide.quoteSlide{margin:0;width:100%;align-items:center;justify-content:center;text-align:center;padding:6rem 10rem}.slide.quoteSlide p{font-size:4.2rem;line-height:1.4;font-weight:400;max-width:1100px;margin:0 auto;position:relative}.slide.quoteSlide p:before,.slide.quoteSlide p:after{font-size:6rem;opacity:.15;position:absolute}.slide.quoteSlide p:before{content:"\201c";left:-4rem;top:-2rem}.slide.quoteSlide p:after{content:"\201d";right:-4rem;bottom:-2rem}.slide.quoteSlide footer{margin-top:3rem;font-size:2.4rem;font-weight:500;opacity:.75}.slide.keyIdeasSlide{padding:2rem 6rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:4rem;text-align:center}.slide.keyIdeasSlide .key-idea{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}.slide.keyIdeasSlide .icon{font-size:8rem;line-height:1}.slide.keyIdeasSlide .label{font-size:3.6rem;font-weight:700;letter-spacing:.05em}@media(orientation:landscape)and (max-height:500px){.slide.keyIdeasSlide{padding:1.5rem 4rem;gap:3rem}.slide.keyIdeasSlide .icon{font-size:5rem}.slide.keyIdeasSlide .label{font-size:2.2rem}.slide.keyIdeasSlide .key-idea{gap:1.5rem}}.slide.fillImage{padding:0;display:flex}.slide.fillImage img{width:100%;height:100%;object-fit:cover}.slide.eq{display:flex;color:gray;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;padding-left:3rem;padding-right:3rem;overflow:hidden}.slide.eq .eq-lines{flex:0 0 45%;min-width:0;overflow:hidden;list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.slide.eq .eq-lines li{padding:4px 6px;font-size:1.25rem;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.18);background:#ffffff08;overflow-x:auto;overflow-y:hidden;max-width:100%}.highlighted{background:#967c342e;color:#fff;font-weight:600;border:2px solid gold;border-radius:10px}.slide.eq .eq-side-panel{flex:0 0 55%;min-width:0;overflow:hidden;padding:6px;background:#00000059;border:1px solid rgba(255,255,255,.18);border-radius:16px;display:flex;flex-direction:column;gap:4px}.slide.eq .eq-explain-item{font-size:1.25rem;line-height:1.5;text-align:justify;background:#ffffff0f;padding:14px 18px;border-radius:12px;overflow-wrap:break-word}.slide.eq .eq-explain-image img{width:70%;margin:0 auto;display:block;border-radius:12px}@media(min-width:1024px){.slide.eq{gap:1.5rem}.slide.eq .eq-lines li{font-size:1.5rem}.slide.eq .eq-explain-item{font-size:1.2rem}}@media(min-width:1600px){.slide.eq{gap:2rem;padding-left:4rem;padding-right:4rem}.slide.eq .eq-lines,.slide.eq .eq-side-panel{flex:0 0 50%}.slide.eq .eq-lines li{font-size:2.25rem}.slide.eq .eq-explain-item{font-size:2.25rem;line-height:1.5em}}

package/dist/css/themes/default.css

@@ -0,0 +1,6 @@
+
+:root {
+    --backgroundColor: #081b7a;
+    --primaryColor: #ccd0e4;
+  }
+  

package/dist/spec/index.js

@@ -206,7 +206,6 @@ var goldenDeckV1 = {
 
 // src/spec/slideTypesV1.js
 var SLIDE_TYPES_V1 = [
-  "titleSlide",
   "titleAndSubtitle",
   "titleAndPara",
   "bulletList",
@@ -217,14 +216,10 @@ var SLIDE_TYPES_V1 = [
   "imageLeftBulletsRight",
   "imageRightBulletsLeft",
   "table",
-  "statistic",
-  "donutChart",
-  "bigNumber",
   "barChart",
+  "progressbar",
   "quoteSlide",
-  "quoteWithImage",
-  "cornerWordsSlide",
-  "contactSlide",
+  "keyIdeasSlide",
   "fillImage",
   "eq"
 ];

package/dist/taleem-player.esm.js

@@ -157,8 +157,8 @@ var ImageWithTitleSlide = {
       render() {
         return `
           <section class="slide imageWithTitle">
-            <img src="${src}" alt="" />
             <h1>${title}</h1>
+            <img src="${src}" alt="" />
           </section>
         `;
       }
@@ -262,13 +262,15 @@ var TableSlide = {
       type: "table",
       render() {
         return `
-          <table class="slide table">
+        <section class="slide table">
+          <table>
             <tbody>
               ${rows.map(
           (row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`
         ).join("")}
             </tbody>
           </table>
+          </section>
         `;
       }
     });
@@ -339,7 +341,12 @@ var Progressbar = {
                 <div class="progressbar-item">
                   <div class="progressbar-label">${b.label}</div>
                   <div class="progressbar-track">
-                    <div class="progressbar-fill" style="width:${b.value}%"></div>
+                    <div 
+                        class="progressbar-fill"
+                        style="width:${b.value}%"
+                        data-value="${b.value}"
+                      ></div>
+
                   </div>
                 </div>
               `;
@@ -411,25 +418,32 @@ var EqSlide = {
   type: "eq",
   fromJSON(raw) {
     const lines = raw.data ?? [];
+    const maxVisible = 3;
     return Object.freeze({
       type: "eq",
       lines,
-      render({ visibleCount = lines.length } = {}) {
-        const end = Math.min(visibleCount, lines.length);
-        const visibleLines = lines.slice(0, end);
-        const activeLine = end > 0 ? lines[end - 1] : null;
+      render({ activeIndex = -1 } = {}) {
+        let start = 0;
+        if (activeIndex >= maxVisible) {
+          start = activeIndex - (maxVisible - 1);
+        }
+        const visibleLines = lines.slice(start);
+        const activeLine = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex] : null;
         const spItems = activeLine?.spItems ?? [];
         return `
-          <section class="slide eq imageRightBulletsLeft">
+          <section class="slide eq">
             
-            <!-- LEFT: lines (pure bullet behavior) -->
             <ul class="eq-lines">
-              ${visibleLines.map(
-          (line) => `<li class="eq-line">${line.content}</li>`
-        ).join("")}
+              ${visibleLines.map((line, index) => {
+          const realIndex = start + index;
+          return `
+                  <li class="eq-line ${realIndex === activeIndex ? "highlighted" : ""}">
+                    ${line.content}
+                  </li>
+                `;
+        }).join("")}
             </ul>
 
-            <!-- RIGHT: explanation panel -->
             <div class="eq-side-panel">
               ${spItems.map((item) => {
           if (item.type === "spImage") {

package/dist/taleem-player.umd.js

@@ -188,8 +188,8 @@ var TaleemPlayer = (() => {
         render() {
           return `
           <section class="slide imageWithTitle">
-            <img src="${src}" alt="" />
             <h1>${title}</h1>
+            <img src="${src}" alt="" />
           </section>
         `;
         }
@@ -293,13 +293,15 @@ var TaleemPlayer = (() => {
         type: "table",
         render() {
           return `
-          <table class="slide table">
+        <section class="slide table">
+          <table>
             <tbody>
               ${rows.map(
             (row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`
           ).join("")}
             </tbody>
           </table>
+          </section>
         `;
         }
       });
@@ -370,7 +372,12 @@ var TaleemPlayer = (() => {
                 <div class="progressbar-item">
                   <div class="progressbar-label">${b.label}</div>
                   <div class="progressbar-track">
-                    <div class="progressbar-fill" style="width:${b.value}%"></div>
+                    <div 
+                        class="progressbar-fill"
+                        style="width:${b.value}%"
+                        data-value="${b.value}"
+                      ></div>
+
                   </div>
                 </div>
               `;
@@ -442,25 +449,32 @@ var TaleemPlayer = (() => {
     type: "eq",
     fromJSON(raw) {
       const lines = raw.data ?? [];
+      const maxVisible = 3;
       return Object.freeze({
         type: "eq",
         lines,
-        render({ visibleCount = lines.length } = {}) {
-          const end = Math.min(visibleCount, lines.length);
-          const visibleLines = lines.slice(0, end);
-          const activeLine = end > 0 ? lines[end - 1] : null;
+        render({ activeIndex = -1 } = {}) {
+          let start = 0;
+          if (activeIndex >= maxVisible) {
+            start = activeIndex - (maxVisible - 1);
+          }
+          const visibleLines = lines.slice(start);
+          const activeLine = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex] : null;
           const spItems = activeLine?.spItems ?? [];
           return `
-          <section class="slide eq imageRightBulletsLeft">
+          <section class="slide eq">
             
-            <!-- LEFT: lines (pure bullet behavior) -->
             <ul class="eq-lines">
-              ${visibleLines.map(
-            (line) => `<li class="eq-line">${line.content}</li>`
-          ).join("")}
+              ${visibleLines.map((line, index) => {
+            const realIndex = start + index;
+            return `
+                  <li class="eq-line ${realIndex === activeIndex ? "highlighted" : ""}">
+                    ${line.content}
+                  </li>
+                `;
+          }).join("")}
             </ul>
 
-            <!-- RIGHT: explanation panel -->
             <div class="eq-side-panel">
               ${spItems.map((item) => {
             if (item.type === "spImage") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "main": "./dist/taleem-player.umd.js",
   "module": "./dist/taleem-player.esm.js",