:root {

  --bg-main: #dff0ff;

  --panel-bg: #f8fbff;

  --panel-shadow: 0 20px 50px rgba(62, 112, 167, 0.16);

  --text-main: #2f5f9f;

  --text-dark: #2d3d57;

  --text-soft: #6f86a7;

  --white: #ffffff;

  --border-soft: #dbe8f7;

  --blue: #78aef8;

  --blue-dark: #4b86dd;

  --yellow-orange: #ffbe52;

  --pink: #f68dbf;

  --green: #77d285;

  --mint: #c8f3db;

  --radius-xl: 34px;

  --radius-lg: 24px;

  --radius-md: 18px;

  --radius-sm: 12px;

  --panel-width: 1080px;

  --font-stack: "Trebuchet MS", "Segoe UI", Arial, sans-serif;

}



* {

  box-sizing: border-box;

}



html, body {

  min-height: 100%;

}



body {

  margin: 0;

  font-family: var(--font-stack);

  background: linear-gradient(180deg, #dff1ff 0%, #d7ecff 100%);

  color: var(--text-dark);

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

select,

textarea {

  font: inherit;

}



.page-shell {

  max-width: var(--panel-width);

  margin: 22px auto;

  padding: 18px;

}



.topbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 6px;

}



.brand-link {

  font-weight: 900;

  font-size: 0.92rem;

  letter-spacing: 0.12em;

  color: var(--text-main);

}



.page-title {

  margin: 0 0 18px;

  text-align: center;

  color: var(--blue-dark);

  font-size: clamp(2rem, 4vw, 3.15rem);

  font-weight: 900;

  line-height: 1.1;

}



.content-panel {

  background: rgba(248, 251, 255, 0.95);

  border-radius: var(--radius-xl);

  box-shadow: var(--panel-shadow);

  border: 1px solid rgba(219, 232, 247, 0.8);

  padding: 26px;

  position: relative;

  overflow: hidden;

}



.home-panel {

  padding: 34px 34px 28px;

}



.hero-copy {

  text-align: center;

  margin-bottom: 28px;

}



.eyebrow {

  margin: 0 0 10px;

  text-transform: uppercase;

  font-size: 0.88rem;

  letter-spacing: 0.12em;

  color: var(--text-soft);

}



.hero-title {

  margin: 0;

  font-size: clamp(2rem, 4vw, 2.8rem);

  color: var(--blue-dark);

}



.hero-text {

  max-width: 720px;

  margin: 14px auto 0;

  font-size: 1.05rem;

  line-height: 1.65;

  color: var(--text-soft);

}



.categories-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin: 24px 0 32px;

}



.category-card {

  background: var(--white);

  border-radius: 28px;

  padding: 24px 18px;

  min-height: 205px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border: 3px solid color-mix(in srgb, var(--card-accent) 28%, white);

  box-shadow: 0 16px 28px rgba(92, 135, 187, 0.12);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.category-card:hover,

.category-card:focus-visible {

  transform: translateY(-4px);

  box-shadow: 0 20px 34px rgba(92, 135, 187, 0.18);

  outline: none;

}



.category-icon {

  font-size: 3rem;

  margin-bottom: 10px;

}



.category-name {

  font-size: 1.35rem;

  font-weight: 800;

  color: var(--blue-dark);

  margin-bottom: 8px;

}



.category-description {

  font-size: 0.95rem;

  line-height: 1.45;

  color: var(--text-soft);

}



.home-cta {

  text-align: center;

}



.secondary-links {

  margin-top: 24px;

  display: flex;

  justify-content: center;

  gap: 26px;

  flex-wrap: wrap;

}



.secondary-links a {

  font-weight: 700;

  color: var(--blue-dark);

}



.btn {

  border: none;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 12px 26px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.2s ease, filter 0.2s ease;

}



.btn:hover,

.btn:focus-visible {

  transform: translateY(-2px);

  filter: brightness(1.03);

  outline: none;

}



.btn-back {

  background: var(--white);

  color: var(--blue-dark);

  border: 2px solid #dce8f8;

  min-height: 46px;

  padding-inline: 20px;

}



.btn-quiz {

  background: linear-gradient(180deg, #80aefb, #5e95ee);

  color: var(--white);

  min-width: 220px;

  min-height: 60px;

  font-size: 1.15rem;

  box-shadow: 0 14px 24px rgba(84, 133, 210, 0.22);

}



.lesson-panel {

  min-height: 720px;

}



.lesson-header {

  display: flex;

  justify-content: space-between;

  gap: 18px;

  align-items: flex-start;

  margin-bottom: 18px;

}



.lesson-description {

  margin: 0;

  color: var(--text-soft);

  font-size: 1rem;

  max-width: 560px;

  line-height: 1.6;

}



.autoplay-toggle {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 18px;

  background: var(--white);

  border-radius: 999px;

  border: 2px solid var(--border-soft);

  cursor: pointer;

  font-weight: 800;

  color: var(--blue-dark);

  user-select: none;

}



.autoplay-toggle input {

  display: none;

}



.toggle-pill {

  width: 52px;

  height: 30px;

  border-radius: 999px;

  background: #d8e7fb;

  position: relative;

  transition: background 0.2s ease;

}



.toggle-pill::after {

  content: "";

  position: absolute;

  top: 4px;

  left: 4px;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: var(--white);

  box-shadow: 0 3px 10px rgba(73, 110, 161, 0.22);

  transition: transform 0.2s ease;

}



.autoplay-toggle input:checked + .toggle-pill {

  background: #84cc95;

}



.autoplay-toggle input:checked + .toggle-pill::after {

  transform: translateX(22px);

}



.progress-wrap {

  margin-bottom: 24px;

}



.progress-text {

  color: var(--blue-dark);

  font-weight: 800;

  margin-bottom: 10px;

}



.progress-bar {

  width: 100%;

  height: 12px;

  background: #e5eef9;

  border-radius: 999px;

  overflow: hidden;

}



.progress-fill {

  width: 0%;

  height: 100%;

  background: linear-gradient(90deg, #81b0ff, #8fd8b2);

  border-radius: inherit;

  transition: width 0.3s ease;

}



.flashcard-stage {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.action-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  justify-content: center;

  margin-top: 24px;

}



.btn-prev {

  background: var(--yellow-orange);

  color: #6b4400;

}



.btn-random {

  background: var(--pink);

  color: #7f2557;

}



.btn-next {

  background: var(--green);

  color: #17592d;

}



.hidden {

  display: none !important;

}



.completion-card {

  margin: 32px auto 0;

  max-width: 420px;

  text-align: center;

  background: var(--white);

  border-radius: 28px;

  padding: 28px;

  box-shadow: 0 16px 26px rgba(92, 135, 187, 0.14);

}



.confetti-canvas {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 10;

}



@media (max-width: 960px) {

  .categories-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .lesson-header {

    flex-direction: column;

    align-items: stretch;

  }

}



@media (max-width: 640px) {

  .page-shell {

    margin: 10px auto;

    padding: 10px;

  }



  .content-panel {

    padding: 18px;

  }



  .categories-grid {

    grid-template-columns: 1fr;

  }



  .secondary-links {

    gap: 14px;

    flex-direction: column;

    align-items: center;

  }



  .action-buttons {

    width: 100%;

  }



  .action-buttons .btn {

    width: 100%;

  }

}