.glass-nav {
  background: color-mix(
    in srgb,
    var(--surface-bright) 85%,
    transparent
  ) !important;
  backdrop-filter: blur(24px) !important;
}
.primary-gradient {
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-end) 100%
  ) !important;
}
.secondary-gradient {
  background: linear-gradient(
    135deg,
    var(--secondary-dim) 0%,
    var(--secondary) 100%
  ) !important;
}
.hero-badge {
  display: inline-block !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.6px !important;
  margin-bottom: 32px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
.btn-hero-primary:focus-visible {
  outline: none !important;
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 12px 24px -10px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}
.btn-hero-secondary:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 4px 10px -8px color-mix(in srgb, var(--on-surface) 12%, transparent) !important;
}
.features-grid {
  display: grid !important;
  gap: 40px !important;
}
.feature-card {
  position: relative !important;
  padding: 40px !important;
  border-radius: 32px !important;
  background: var(--surface-container-low) !important;
  border: 1px solid transparent !important;
  transition:
    background 0.5s var(--ease-standard, ease),
    box-shadow 0.5s var(--ease-standard, ease),
    border-color 0.5s var(--ease-standard, ease) !important;
}
.feature-card:hover {
  background: var(--surface-bright) !important;
  box-shadow: 0 25px 50px -12px
    color-mix(in srgb, var(--primary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
.feature-card.secondary-hover:hover {
  box-shadow: 0 25px 50px -12px
    color-mix(in srgb, var(--secondary) 10%, transparent) !important;
  border-color: color-mix(
    in srgb,
    var(--secondary) 20%,
    transparent
  ) !important;
}
.feature-card.tertiary-hover:hover {
  box-shadow: 0 25px 50px -12px
    color-mix(in srgb, var(--tertiary) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--tertiary) 20%, transparent) !important;
}
.feature-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
  transition: transform 0.3s !important;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(6deg) !important;
}
.feature-card.secondary-hover:hover .feature-icon {
  transform: scale(1.1) rotate(-6deg) !important;
}
.feature-icon.primary-bg {
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}
.feature-icon.secondary-bg {
  background: color-mix(in srgb, var(--secondary) 10%, transparent) !important;
}
.feature-icon.tertiary-bg {
  background: color-mix(in srgb, var(--tertiary) 30%, transparent) !important;
}
.feature-icon .material-symbols-outlined {
  font-size: 32px !important;
}
.icon-primary {
  color: var(--primary) !important;
}
.icon-secondary {
  color: var(--secondary) !important;
}
.icon-tertiary {
  color: var(--tertiary) !important;
}
.feature-card h3 {
  color: var(--on-background) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}
.feature-card p {
  color: var(--on-surface-variant) !important;
  line-height: 1.7 !important;
  margin-bottom: 32px !important;
  font-size: 18px !important;
}
.feature-card:hover .feature-link {
  gap: 16px !important;
}
.feature-link:focus-visible {
  outline: none !important;
  gap: 16px !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 2px !important;
}
.feature-card .feature-loo {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}
.feature-card:hover .feature-loo {
  opacity: 0.1 !important;
}
.loo-pupils {
  transform-origin: 95px 138px;
  animation: lookDownLeft 7s ease-in-out infinite;
}
.loo-pupils-right {
  transform-origin: 153px 138px;
  animation: lookDownLeft 7s ease-in-out infinite;
}
.loo-mouth {
  transform-origin: 125px 150px;
  animation: surpriseMouth 7s ease-in-out infinite;
}
.how-dashed-line {
  display: none !important;
}
.why-stats-wrap {
  position: relative !important;
}
.stat-grid-bg {
  position: absolute !important;
  inset: -16px !important;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 8%, transparent),
    color-mix(in srgb, var(--secondary) 8%, transparent)
  ) !important;
  border-radius: 40px !important;
  z-index: 0 !important;
}
.stat-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 10 !important;
}
.stat-card {
  background: var(--surface-bright) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  min-height: 188px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
  border: 1px solid var(--outline-variant) !important;
  box-shadow: 0 18px 36px -28px
    color-mix(in srgb, var(--on-surface) 28%, transparent) !important;
}
.stat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 44px -28px
    color-mix(in srgb, var(--on-surface) 34%, transparent) !important;
}
.stat-icon-wrapper {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
.stat-icon-wrapper.primary-bg {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
.stat-icon-wrapper.secondary-bg {
  background: color-mix(in srgb, var(--secondary) 12%, transparent) !important;
}
.stat-icon-wrapper.tertiary-bg {
  background: color-mix(in srgb, var(--tertiary) 25%, transparent) !important;
}
.stat-icon-wrapper.neutral-bg {
  background: color-mix(
    in srgb,
    var(--on-surface-variant) 14%,
    transparent
  ) !important;
}
.stat-icon-wrapper .material-symbols-outlined {
  font-size: 30.4px !important;
}
.icon-neutral {
  color: var(--on-surface) !important;
}
.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  color: var(--on-background) !important;
  line-height: 1.1 !important;
  margin-bottom: 5.6px !important;
}
.stat-label {
  font-size: 15.2px !important;
  font-weight: 600 !important;
  color: var(--on-surface-variant) !important;
  line-height: 1.4 !important;
}
.stat-card.primary-stat {
  border-top: 4px solid var(--primary) !important;
}
.stat-card.secondary-stat {
  border-top: 4px solid var(--secondary) !important;
}
.stat-card.tertiary-stat {
  border-top: 4px solid var(--tertiary) !important;
}
.stat-card.loo-stat {
  border-top: 4px solid var(--outline) !important;
}
.why-kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14.4px !important;
  border-radius: 9999px !important;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  font-size: 11.52px !important;
  font-weight: 800 !important;
  letter-spacing: 1.28px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}
.why-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12.8px !important;
}
.why-list li {
  display: flex !important;
  gap: 16px !important;
  padding: 18.4px !important;
  border-radius: 20px !important;
  border: 1px solid var(--outline-variant) !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 86%,
    transparent
  ) !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}
.why-list li:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  box-shadow: 0 12px 28px -18px
    color-mix(in srgb, var(--on-surface) 32%, transparent) !important;
  transform: translateY(-2px) !important;
}
.why-check {
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 13.6px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.why-list li:hover .why-check {
  transform: none !important;
}
.why-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.why-list h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 750 !important;
  font-size: 17.6px !important;
  margin-bottom: 5.6px !important;
  color: var(--on-background) !important;
}
.why-list p {
  color: var(--on-surface-variant) !important;
  font-size: 15.68px !important;
  line-height: 1.55 !important;
}
.showcase-section {
  padding: 128px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: linear-gradient(
    180deg,
    var(--surface-warm) 0%,
    var(--surface) 100%
  ) !important;
}
.showcase-svg-aura {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.showcase-svg-aura svg {
  width: 100% !important;
  height: 100% !important;
}
.showcase-aura-ring {
  fill: none !important;
  stroke: url(#auraRingStroke) !important;
  stroke-width: 2px !important;
  opacity: 0.46 !important;
}
.showcase-aura-ring.alt {
  opacity: 0.24 !important;
}
.showcase-aura-dot {
  fill: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  animation: showcaseDotPulse 5.8s ease-in-out infinite !important;
}
.showcase-aura-dot.dot-b {
  fill: color-mix(in srgb, var(--secondary) 40%, transparent) !important;
  animation-delay: 1.2s !important;
}
.showcase-aura-dot.dot-c {
  fill: color-mix(in srgb, var(--tertiary) 52%, transparent) !important;
  animation-delay: 2.4s !important;
}
.showcase-section .layer-content {
  position: relative !important;
  z-index: 2 !important;
}
.showcase-header {
  text-align: center !important;
  margin-bottom: 48px !important;
}
.showcase-header h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--on-background) !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  border: none !important;
  padding: 0 !important;
}
.showcase-header p {
  color: var(--on-surface-variant) !important;
  font-size: 19px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
.showcase-slider-container {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 36px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--surface-bright) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface-warm) 92%, transparent) 100%
  ) !important;
  box-shadow: 0 34px 72px -44px
    color-mix(in srgb, var(--on-surface) 44%, transparent) !important;
}
.showcase-slider-container--single + .showcase-dots {
  display: none !important;
}
.showcase-slider-track {
  display: flex !important;
  transition: transform 0.72s cubic-bezier(0.33, 1, 0.68, 1) !important;
  will-change: transform !important;
}
.showcase-slide {
  flex: 0 0 100% !important;
  min-width: 0 !important;
  padding: 20px !important;
  opacity: 0.72 !important;
  transition: opacity 0.4s ease !important;
}
.showcase-slide.is-active {
  opacity: 1 !important;
}
.showcase-slide-shell {
  border-radius: 28px !important;
  padding: 32px !important;
  min-height: 380px !important;
  display: grid !important;
  gap: 28px !important;
  align-items: center !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 84%,
    transparent
  ) !important;
}
.showcase-slide--dashboard .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 12%, transparent) 0%,
    color-mix(in srgb, var(--surface-bright) 88%, transparent) 58%,
    color-mix(in srgb, var(--info) 20%, transparent) 100%
  ) !important;
}
.showcase-slide--quizzes .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--secondary) 16%, transparent) 0%,
    color-mix(in srgb, var(--surface-bright) 90%, transparent) 56%,
    color-mix(in srgb, var(--tertiary) 18%, transparent) 100%
  ) !important;
}
.showcase-slide--flashcards .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--tertiary) 24%, transparent) 0%,
    color-mix(in srgb, var(--surface-bright) 94%, transparent) 60%,
    color-mix(in srgb, var(--primary) 12%, transparent) 100%
  ) !important;
}
.showcase-slide--podcasts .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 24%, transparent) 0%,
    color-mix(in srgb, var(--surface-bright) 92%, transparent) 56%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 100%
  ) !important;
}
.showcase-slide-kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 76%,
    transparent
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent) !important;
  color: var(--primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
.showcase-slide-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--on-background) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}
.showcase-slide-text {
  color: var(--on-surface-variant) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  margin-bottom: 22px !important;
  max-width: 620px !important;
}
.showcase-slide-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.showcase-slide-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--on-background) !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 76%,
    transparent
  ) !important;
  border: 1px solid var(--outline-variant) !important;
}
.showcase-slide-media {
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 72%,
    transparent
  ) !important;
  box-shadow: 0 22px 38px -30px
    color-mix(in srgb, var(--on-surface) 40%, transparent) !important;
}
.showcase-slide-media img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
}
.showcase-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
}
.showcase-dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--outline) 55%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 70%,
    transparent
  ) !important;
  transition:
    width 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease !important;
}
.showcase-dot.inactive:hover {
  transform: scale(1.12) !important;
}
.showcase-dot.active {
  width: 34px !important;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--secondary) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
}
.faq-item[data-expanded='true'] {
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--primary) 12%, transparent) 0%,
      transparent 60%
    ),
    color-mix(
      in srgb,
      var(--surface-container-lowest) 92%,
      var(--primary-container) 8%
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 48%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent),
    0 24px 48px -22px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
.faq-item[data-expanded='true'] .faq-button .material-symbols-outlined {
  transform: rotate(180deg) !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent),
    0 10px 20px -10px color-mix(in srgb, var(--primary) 56%, transparent) !important;
}
.faq-item[data-expanded='true'] .faq-answer {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  padding: 0 26px 24px !important;
}
body.theme-dark .faq-item[data-expanded='true'] {
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      color-mix(in srgb, var(--primary) 18%, transparent) 0%,
      transparent 60%
    ),
    color-mix(
      in srgb,
      var(--surface-container-high) 76%,
      var(--primary-container) 24%
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent),
    0 26px 48px -22px rgba(0, 0, 0, 0.7) !important;
}
body.theme-dark
  .faq-item[data-expanded='true']
  .faq-button
  .material-symbols-outlined {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 22%, transparent),
    0 12px 22px -10px color-mix(in srgb, var(--primary) 70%, transparent) !important;
}
.btn-cta:focus-visible {
  outline: none !important;
  box-shadow:
    0 18px 38px -16px var(--cta-btn-shadow),
    0 0 0 4px color-mix(in srgb, var(--cta-btn-bg) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.hero-noise {
  opacity: 0.6;
  mix-blend-mode: soft-light;
  animation: noiseDrift 22s linear infinite;
}
.icon-fill {
  font-variation-settings: 'FILL' 1 !important;
}
.icon-inline-xs {
  font-size: 14px !important;
  vertical-align: text-bottom !important;
}
@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .feature-card.offset-down {
    transform: translateY(48px) !important;
  }
  .showcase-slide-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    min-height: 430px !important;
  }
  .showcase-slide-title {
    font-size: 46px !important;
  }
}
@media (min-width: 1024px) {
  .why-stats-wrap {
    order: 1 !important;
  }
}
@media (max-width: 767px) {
  .showcase-section {
    padding: 92px 0 !important;
  }
  .showcase-header {
    margin-bottom: 30px !important;
  }
  .showcase-header h2 {
    font-size: 36px !important;
    margin-bottom: 12px !important;
  }
  .showcase-header p {
    font-size: 16px !important;
  }
  .showcase-slider-container {
    border-radius: 24px !important;
  }
  .showcase-slide {
    padding: 12px !important;
  }
  .showcase-slide-shell {
    min-height: auto !important;
    padding: 22px !important;
    border-radius: 18px !important;
    gap: 20px !important;
  }
  .showcase-slide-title {
    font-size: 31px !important;
    line-height: 1.14 !important;
  }
  .showcase-slide-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
  }
  .showcase-slide-kicker {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }
  .showcase-slide-tag {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
  .showcase-slide-media {
    border-radius: 16px !important;
  }
  .showcase-dots {
    margin-top: 14px !important;
    gap: 8px !important;
  }
  .faq-item[data-expanded='true'] .faq-answer {
    padding: 0 18px 18px !important;
  }
}
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track {
  background: var(--surface-container) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--outline) !important;
  border-radius: 5px !important;
  border: 2px solid var(--surface-container) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--on-surface-variant) !important;
}
body.theme-dark .glass-nav {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 92%,
    transparent
  ) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom: 1px solid
    color-mix(in srgb, var(--outline-variant) 72%, transparent) !important;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 16px 30px -22px color-mix(in srgb, black 80%, transparent) !important;
}
body.theme-dark .stat-grid-bg {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary) 16%, transparent),
    color-mix(in srgb, var(--info) 12%, transparent)
  ) !important;
}
body.theme-dark .stat-card {
  background: var(--surface-container-lowest) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  box-shadow: 0 20px 36px -22px rgba(0, 0, 0, 0.56) !important;
}
body.theme-dark .stat-card.primary-stat {
  border-top-color: var(--primary) !important;
}
body.theme-dark .stat-card.secondary-stat {
  border-top-color: var(--secondary) !important;
}
body.theme-dark .stat-card.tertiary-stat {
  border-top-color: var(--tertiary) !important;
}
body.theme-dark .stat-card.loo-stat {
  border-top-color: var(--outline) !important;
}
body.theme-dark .why-list li {
  background: rgba(37, 36, 34, 0.86) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
  box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.5) !important;
}
body.theme-dark .why-list li:hover {
  border-color: color-mix(in srgb, var(--info) 34%, transparent) !important;
  box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.56) !important;
}
body.theme-dark .why-check {
  background: color-mix(in srgb, var(--primary) 16%, transparent) !important;
  color: var(--primary) !important;
}
body.theme-dark .comparison-table thead th {
  background: var(--surface-container-high) !important;
}
body.theme-dark .comparison-table tbody tr:nth-child(even) td {
  background: var(--surface-container-low) !important;
}
body.theme-dark .showcase-section {
  background:
    radial-gradient(
      circle at 14% 18%,
      color-mix(in srgb, var(--primary) 16%, transparent),
      transparent 46%
    ),
    radial-gradient(
      circle at 84% 24%,
      color-mix(in srgb, var(--info) 16%, transparent),
      transparent 52%
    ),
    linear-gradient(180deg, #1a1917 0%, #141413 100%) !important;
}
body.theme-dark .showcase-slider-container {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent) !important;
  background: linear-gradient(
    160deg,
    rgba(37, 36, 34, 0.94) 0%,
    rgba(30, 29, 27, 0.95) 100%
  ) !important;
  box-shadow: 0 34px 72px -44px rgba(0, 0, 0, 0.66) !important;
}
body.theme-dark .showcase-slide-shell {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent) !important;
  background: rgba(32, 31, 29, 0.92) !important;
}
body.theme-dark .showcase-slide--dashboard .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    rgba(122, 42, 59, 0.54) 0%,
    rgba(37, 36, 34, 0.94) 58%,
    rgba(24, 73, 95, 0.52) 100%
  ) !important;
}
body.theme-dark .showcase-slide--quizzes .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    rgba(24, 73, 95, 0.56) 0%,
    rgba(37, 36, 34, 0.94) 56%,
    rgba(95, 75, 20, 0.5) 100%
  ) !important;
}
body.theme-dark .showcase-slide--flashcards .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    rgba(95, 75, 20, 0.52) 0%,
    rgba(37, 36, 34, 0.92) 56%,
    rgba(122, 42, 59, 0.48) 100%
  ) !important;
}
body.theme-dark .showcase-slide--podcasts .showcase-slide-shell {
  background: linear-gradient(
    145deg,
    rgba(122, 42, 59, 0.52) 0%,
    rgba(37, 36, 34, 0.94) 56%,
    rgba(24, 73, 95, 0.48) 100%
  ) !important;
}
body.theme-dark .showcase-slide-kicker {
  background: rgba(32, 31, 29, 0.88) !important;
  border-color: color-mix(in srgb, var(--info) 26%, transparent) !important;
}
body.theme-dark .showcase-slide-tag {
  background: rgba(32, 31, 29, 0.82) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
  color: var(--on-surface) !important;
}
body.theme-dark .showcase-slide-media {
  border-color: color-mix(in srgb, var(--info) 26%, transparent) !important;
  background: rgba(20, 20, 19, 0.92) !important;
}
body.theme-dark .showcase-dot.inactive {
  border-color: color-mix(in srgb, var(--primary) 24%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 24%, transparent) !important;
}
body.theme-dark .showcase-dot.active {
  border-color: color-mix(in srgb, var(--info) 42%, transparent) !important;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--secondary) 100%
  ) !important;
}
body
  .st-container.st-fs-container
  .st-panel-workspace-controls.st-study-tabs-filters
  .st-study-tabs-filter-item
  .st-panel-workspace-select
  .custom-dropdown,
body
  .st-container.st-fs-container
  .st-panel-workspace-controls.st-study-tabs-filters
  .st-study-tabs-filter-item
  .st-panel-workspace-select
  select {
  width: 100% !important;
}
body .st-doc-mode-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  padding: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, var(--on-surface) 52%, transparent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body .st-doc-mode-choice {
  width: min(560px, 100%) !important;
  margin: 0 !important;
  padding: 22px !important;
  border: none !important;
  border-radius: 22px !important;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    var(--surface-container-low) 10%
  ) !important;
  box-shadow: 0 36px 64px -44px
    color-mix(in srgb, var(--on-surface) 74%, transparent) !important;
  text-align: left !important;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}
body .st-doc-mode-choice h3 {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--primary) 8%
  ) !important;
}
body .st-doc-mode-choice p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: var(--on-surface-variant) !important;
}
body .st-doc-mode-options {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}
body .st-doc-mode-btn {
  width: 100% !important;
  min-height: 124px !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 14px 12px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 8px !important;
  text-align: center !important;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 84%,
    var(--surface-container-low) 16%
  ) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--outline-variant) 46%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--primary) 10%
  ) !important;
}
body .st-doc-mode-btn i {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  font-size: 18px !important;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
}
body .st-doc-mode-btn span {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}
body .st-doc-mode-btn small {
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: var(--on-surface-variant) !important;
}
body .st-doc-mode-btn:hover,
body .st-doc-mode-btn:focus-visible {
  transform: translateY(-2px);
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 70%,
    var(--primary-container) 30%
  ) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--primary-container) 62%, transparent) !important;
}
body .st-doc-mode-apply-all {
  margin-top: 10px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: var(--on-surface-variant) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  ) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--outline-variant) 42%, transparent) !important;
}
@media (max-width: 760px) {
  body .st-doc-mode-choice {
    padding: 18px !important;
    border-radius: 18px !important;
  }
  body .st-doc-mode-choice h3 {
    font-size: 22px !important;
  }
  body .st-doc-mode-choice p {
    font-size: 13px !important;
  }
  body .st-doc-mode-options {
    grid-template-columns: 1fr;
  }
}
body.theme-dark .glass-nav {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 92%,
    transparent
  ) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom: 1px solid
    color-mix(in srgb, var(--outline-variant) 72%, transparent) !important;
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 16px 30px -22px color-mix(in srgb, black 80%, transparent) !important;
}
body.theme-dark .btn,
body.theme-dark .btn-login {
  background: var(--eduloo-dark-btn-soft-bg) !important;
  border: 1px solid var(--eduloo-dark-btn-soft-border) !important;
  color: var(--eduloo-dark-btn-soft-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
    0 12px 24px -18px color-mix(in srgb, black 68%, transparent) !important;
}
body.theme-dark .btn:hover,
body.theme-dark .btn-login:hover {
  background: var(--eduloo-dark-btn-soft-bg-hover) !important;
  border-color: color-mix(
    in srgb,
    var(--eduloo-dark-btn-soft-border) 66%,
    var(--secondary) 34%
  ) !important;
  color: var(--on-surface) !important;
}
body.theme-dark .btn-cta:focus-visible {
  outline: none !important;
  box-shadow:
    0 22px 44px -18px var(--cta-btn-shadow),
    0 0 0 4px color-mix(in srgb, var(--cta-btn-bg) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
body.theme-dark .why-check {
  background: color-mix(
    in srgb,
    var(--primary-container) 74%,
    transparent
  ) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  ) !important;
}
body.theme-dark a:focus-visible,
body.theme-dark button:focus-visible {
  outline: 2px solid var(--eduloo-dark-focus-ring) !important;
  outline-offset: 2px !important;
}
body.theme-dark input:focus-visible,
body.theme-dark select:focus-visible,
body.theme-dark textarea:focus-visible {
  outline: none !important;
}
body .tag-filter-chips {
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 56%, transparent) !important;
  background: var(--surface-container-lowest) !important;
  box-shadow: none !important;
  gap: 8px !important;
}
body .filter-chip {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 54%, transparent) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}
body .filter-chip .count-badge {
  min-width: 20px !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 70%,
    var(--primary-container) 30%
  ) !important;
  color: var(--on-surface) !important;
}
body .filter-chip.active {
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 40%,
    var(--primary-container) 60%
  ) !important;
  background: color-mix(
    in srgb,
    var(--primary-container) 28%,
    var(--surface-container-low) 72%
  ) !important;
}
body .filter-chip:hover {
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 40%,
    var(--primary-container) 60%
  ) !important;
  background: color-mix(
    in srgb,
    var(--primary-container) 22%,
    var(--surface-container-low) 78%
  ) !important;
}
.study-accordion__panel:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--tool-accent, var(--primary)) 55%, transparent) !important;
  outline-offset: 3px !important;
}
.study-accordion-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(20px, 4vw, 64px) !important;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 50%,
      color-mix(in srgb, var(--tool-accent, var(--primary)) 14%, transparent) 0%,
      transparent 70%
    ),
    color-mix(in srgb, black 70%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 0 !important;
  transition:
    opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 240ms ease !important;
}
.study-accordion-preview.is-open {
  display: flex !important;
  opacity: 1 !important;
}
.study-accordion-preview__close {
  position: absolute !important;
  top: clamp(16px, 2vw, 28px) !important;
  right: clamp(16px, 2vw, 28px) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, white 35%, transparent) !important;
  background: color-mix(in srgb, white 14%, transparent) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  transition:
    background 200ms ease,
    transform 200ms ease !important;
}
.study-accordion-preview__close:hover {
  background: color-mix(in srgb, white 28%, transparent) !important;
  transform: scale(1.06) !important;
}
.study-accordion-preview__close .icon {
  color: #fff !important;
  font-size: 18px !important;
}
.study-accordion-preview__body {
  position: relative !important;
  width: fit-content !important;
  max-width: min(96vw, 1400px) !important;
  max-height: 88vh !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 36px 80px -20px rgba(0, 0, 0, 0.6) !important;
  transform: scale(0.96) !important;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      color-mix(in srgb, white 28%, transparent),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--tool-accent, var(--primary)) 95%, transparent) 0%,
      color-mix(in srgb, var(--tool-accent, var(--primary)) 65%, transparent)
        100%
    ) !important;
}
.study-accordion-preview.is-open .study-accordion-preview__body {
  transform: scale(1) !important;
}
.study-accordion-preview__body img {
  display: block !important;
  max-width: min(96vw, 1400px) !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.study-accordion-preview__placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  width: min(80vw, 600px) !important;
  height: min(80vh, 720px) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 32px !important;
}
.study-accordion-preview__placeholder::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(
    color-mix(in srgb, white 16%, transparent) 1px,
    transparent 1px
  ) !important;
  background-size: 28px 28px !important;
  mix-blend-mode: overlay !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.study-accordion-preview__icon {
  position: relative !important;
  z-index: 1 !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: color-mix(in srgb, white 18%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid color-mix(in srgb, white 38%, transparent) !important;
}
.study-accordion-preview__icon .icon {
  font-size: 44px !important;
  color: #fff !important;
}
.study-accordion-preview__label {
  position: relative !important;
  z-index: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 12px color-mix(in srgb, black 25%, transparent) !important;
}
.study-accordion-preview__hint {
  position: relative !important;
  z-index: 1 !important;
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, white 80%, transparent) !important;
}
body.is-study-preview-open {
  overflow: hidden !important;
}
.comp-best {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 38%, transparent) !important;
}
.comp-foot {
  max-width: 1320px !important;
  margin: clamp(28px, 4vw, 44px) auto 0 !important;
  padding: 0 clamp(24px, 4vw, 72px) !important;
}
.comp-foot-card {
  padding: 28px clamp(28px, 3.5vw, 44px) !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 28px !important;
  align-items: center !important;
  background: linear-gradient(
    135deg,
    var(--surface-bright) 0%,
    color-mix(in srgb, var(--primary) 8%, var(--surface-bright)) 100%
  ) !important;
  border-radius: 22px !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--primary) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--on-surface) 4%, transparent) !important;
}
.comp-foot-text h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  letter-spacing: -0.015em !important;
  color: var(--on-background) !important;
  margin: 0 0 6px !important;
  text-wrap: balance !important;
  border: 0 !important;
  padding: 0 !important;
}
.comp-foot-text p {
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--on-surface-variant) !important;
  max-width: 60ch !important;
}
@media (max-width: 960px) {
  .comp-best {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .comp-foot-card {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }
}
.store-badge:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}
[dir='rtl'] .hero-svg-scene {
  right: auto !important;
  left: -220px !important;
}
[dir='rtl'] .hero-glow-1 {
  right: auto !important;
  left: -64px !important;
}
[dir='rtl'] .hero-glow-2 {
  left: auto !important;
  right: -64px !important;
}
[dir='rtl'] .hero-notification {
  left: auto !important;
  right: 8% !important;
}
[dir='rtl'] .hero-loo-sticker {
  right: auto !important;
  left: 10% !important;
}
[dir='rtl'] .hero-phone-spark.spark-a {
  right: auto !important;
  left: 18% !important;
}
[dir='rtl'] .hero-phone-spark.spark-b {
  left: auto !important;
  right: 16% !important;
}
[dir='rtl'] .hero-badge-float {
  right: auto !important;
  left: -32px !important;
}