:root {
  --ink: #14171F;
  --muted: #4A5060;
  --line: #E8E6E0;
  --bg: #FFFFFF;
  --brand: #1F5FC8;
  --brand-hover: #194FA8;
  --soft: #E8F0FC;

  --algebra-bg: #E3F6C4;   --algebra-dot: #4E8C0C;
  --precalc-bg: #FFE9BF;   --precalc-dot: #C67C00;
  --calculus-bg: #CDEFE6;  --calculus-dot: #0F7A63;
  --algebra2-bg: #ECE4FD;

  /* surfaces + text that change with the night theme */
  --surface: #FFFFFF;
  --surface-2: #F6F5F1;
  --surface-3: #EEEDE8;
  --tint: #E8F1FE;
  --tint-soft: #F4F7FC;
  --sel-a: #E8F1FE; --sel-b: #D4E5FC;
  --line-strong: #D6D3CA;
  --ink-2: #3C4250;
  --faint: #8A8F9C;
  --link: var(--brand);
  --ok: #1F6B42;  --ok-bg: #EEF8F2;
  --bad: #A33232; --bad-bg: #FDF0F0;
  color-scheme: light;
}

/* ---------- Night theme ---------- */
:root[data-theme="dark"] {
  --ink: #ECEEF3;
  --ink-2: #D3D7E0;
  --muted: #A4AABA;
  --faint: #7C8293;
  --line: #2A2F3B;
  --line-strong: #3A4050;
  --bg: #10131A;
  --surface: #181C25;
  --surface-2: #1E222C;
  --surface-3: #262B36;
  --soft: #1C2A44;
  --tint: #1C2A44;
  --tint-soft: #172033;
  --sel-a: #1F2F4D; --sel-b: #1A2A46;
  --link: #7DB0FF;
  --ok: #7FD6A4;  --ok-bg: #14291E;
  --bad: #FF9C9C; --bad-bg: #2E1A1C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Nav */
.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: default; user-select: none; -webkit-user-select: none;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
}
.nav-links { display: flex; gap: 28px; flex: 1; justify-content: center; font-size: 15px; font-weight: 500; }
.nav-links a, .link { text-decoration: none; padding: 10px 0; }
button.link, button.btn { font-family: inherit; line-height: inherit; border: 0; cursor: pointer; }
button.link { background: none; color: inherit; font-size: inherit; font-weight: 500; }
.nav-links a:hover, .link:hover { color: var(--link); }
.nav-actions { display: flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 500; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 10px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background .15s ease, transform .12s ease, box-shadow .12s ease;
}
.btn-lg { min-height: 66px; padding: 0 48px; font-size: 20px; border-radius: 14px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* 3D primary button: top highlight, darker bottom "lip", soft drop shadow */
.btn-primary {
  --lip: 3px;
  color: #fff;
  background: linear-gradient(180deg, #2E74DE 0%, var(--brand) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 var(--lip) 0 #17479A,
    0 6px 12px -4px rgba(23, 71, 154, .45);
}
.btn-primary.btn-lg {
  --lip: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 var(--lip) 0 #17479A,
    0 12px 24px -8px rgba(23, 71, 154, .5);
}
.btn-primary:hover { background: linear-gradient(180deg, #3A7FE6 0%, #2466D2 100%); transform: translateY(-1px); }
.btn-primary:active {
  transform: translateY(var(--lip));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 #17479A, 0 2px 4px rgba(23, 71, 154, .35);
}
.btn-soft { background: var(--soft); color: var(--link); }
.btn-soft:hover { background: var(--tint); }

/* Hero */
.hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 88px 24px 56px;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.12em;
}
.hero-line { white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 0.22em;
  padding: 0.02em 0.38em 0.1em 0.3em;
  border-radius: 999px;
  background: var(--algebra-bg);
  transition: background .4s ease;
}
.pill-dot {
  width: 0.32em; height: 0.32em; border-radius: 50%;
  background: var(--algebra-dot);
  transition: background .4s ease;
  flex: none;
}
.pill-word { display: inline-block; transition: opacity .25s ease, transform .25s ease; }
.pill-word.out { opacity: 0; transform: translateY(0.25em); }

.pill[data-subject="precalc"]  { background: var(--precalc-bg); }
.pill[data-subject="precalc"] .pill-dot  { background: var(--precalc-dot); }
.pill[data-subject="calculus"] { background: var(--calculus-bg); }
.pill[data-subject="calculus"] .pill-dot { background: var(--calculus-dot); }

.lede {
  margin: 28px auto 0;
  max-width: 560px;
  font-size: 20px; line-height: 1.55;
  color: var(--muted);
}
.hero-ctas { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn-ghost { color: var(--link); font-size: 17px; padding: 0 24px; }
.btn-ghost:hover { background: var(--soft); }

/* Preview window */
.preview { max-width: 1040px; margin: 0 auto; padding: 24px 24px 72px; }
.window {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 60px -32px rgba(20, 23, 31, .25);
}
.window-bar { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.window-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.window-body { display: flex; flex-wrap: wrap; }
.sidebar {
  flex: 1 1 200px;
  background: var(--surface-2);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
}
.sidebar a { text-decoration: none; padding: 8px 10px; border-radius: 6px; }
.sidebar a:hover { background: var(--surface-3); }
.sidebar a.active { background: var(--surface); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.side-label { margin: 12px 10px 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.side-label:first-child { margin-top: 0; }
.lesson { flex: 3 1 360px; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.lesson-meta { margin: 0; font-size: 14px; color: var(--muted); }
.problem { background: var(--surface-2); border-radius: 12px; padding: 18px 20px; }
.problem-label { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.problem-eq { margin: 0; font-size: 22px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.answer { background: var(--algebra-bg); padding: 3px 8px; border-radius: 6px; }
.tag {
  align-self: flex-start;
  font-size: 13px; font-weight: 600;
  color: #2C4A0E; background: var(--algebra-bg);
  padding: 6px 12px; border-radius: 999px;
}

/* Subjects */
.subjects {
  max-width: 1040px; margin: 0 auto; padding: 0 24px 96px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.subject {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.subject:hover { border-color: var(--brand); }
.subject .mono { color: var(--link); font-size: 16px; }
.subject strong { font-family: "Space Grotesk", sans-serif; font-size: 22px; }

/* Footer */
.footer {
  max-width: 1200px; margin: 0 auto; padding: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--muted);
}
.footer nav { display: flex; gap: 20px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 20px; }
  .nav-actions { margin-left: auto; }
  .hero { padding-top: 56px; }
  .lesson { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .pill-dot, .pill-word { transition: none; }
}

/* ---------- Sign-in popup ---------- */
.auth {
  padding: 0; border: 0; background: transparent;
  max-width: min(960px, calc(100vw - 32px));
  width: 100%;
  overflow: visible;
}
/* No backdrop blur: blurring the page behind the popup every frame made the animations stutter */
.auth::backdrop { background: rgba(20, 23, 31, .6); }
.auth[open] { animation: auth-in .2s ease-out; }
@keyframes auth-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.auth-card {
  display: flex; flex-wrap: wrap;
  background: var(--surface);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(20, 23, 31, .45);
}
.auth-left {
  flex: 1 1 380px;
  padding: 44px 40px 36px;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--ink);
}
.auth-left h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.02em;
}
.auth-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.auth-options { display: flex; flex-direction: column; gap: 12px; }
.auth-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 52px;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.auth-btn svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.auth-btn:hover { border-color: var(--brand); background: var(--tint-soft); }
.auth-btn:focus-visible, .auth-close:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 2px; }
.auth-note { margin: 0; min-height: 20px; font-size: 14px; color: var(--link); font-weight: 500; }
.auth-legal { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.auth-legal a { color: var(--link); font-weight: 500; }

.auth-art {
  flex: 1 1 380px;
  position: relative;
  min-height: 460px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #1F5FC8 0%, #2B7BDB 45%, #9CCBFA 100%);
}
.auth-mascot {
  position: absolute; left: 50%; top: 52%;
  width: 250px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 24px rgba(15, 40, 90, .35));
}

.auth-mascot .zo { width: 100%; height: auto; }

/* Zo: stomping feet, bouncing body, swinging arms, growing smile */
.zo { display: block; overflow: visible; }
.zo .zo-foot, .zo .zo-upper, .zo .zo-arm, .zo .zo-mouth, .zo .zo-eye, .zo .zo-shadow { transform-box: fill-box; }
.zo .zo-foot { transform-origin: 50% 100%; animation: zo-stomp 0.9s ease-in-out infinite; }
.zo .zo-foot-r { animation-delay: -0.45s; }
.zo .zo-upper { transform-origin: 50% 100%; animation: zo-bounce 0.45s ease-in-out infinite; }
.zo .zo-arm-l { transform-origin: 95% 10%; animation: zo-arm-l 0.45s ease-in-out infinite alternate; }
.zo .zo-arm-r { transform-origin: 5% 10%; animation: zo-arm-r 0.45s ease-in-out infinite alternate; }
.zo .zo-eye { transform-origin: 50% 50%; animation: zo-happy 1.8s ease-in-out infinite; }
.zo .zo-shadow { transform-origin: 50% 50%; animation: zo-shadow 0.45s ease-in-out infinite; }
@keyframes zo-stomp { 0% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-out; } 24% { transform: translateY(-24%) rotate(-7deg); animation-timing-function: ease-in; } 36% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(1.5%) scale(1.06, 0.92); } 46%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes zo-bounce { 0%, 66%, 100% { transform: translateY(0); } 76% { transform: translateY(0.6%); } 86% { transform: translateY(0); } }
@keyframes zo-arm-l { from { transform: rotate(8deg); } to { transform: rotate(-14deg); } }
@keyframes zo-arm-r { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes zo-happy { 0%, 100% { transform: scale(1, 1); } 45%, 70% { transform: scale(1.04, 0.86); } }
@keyframes zo-shadow { 0%, 66%, 100% { transform: scale(1, 1); } 76% { transform: scale(1.03, 1.08); } }
@media (prefers-reduced-motion: reduce) { .zo * { animation: none !important; } }
/* Math bubbles orbit around Zo; each bubble counter-spins so its symbol stays upright */
.orbit { position: absolute; left: 50%; top: 52%; width: 0; height: 0; animation: orbit-spin 24s linear infinite; }
.orbit-item { position: absolute; left: 0; top: 0; }
.chip {
  position: absolute; left: -32px; top: -32px;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 24px; color: #fff;
  box-shadow: 0 10px 22px -10px rgba(15, 40, 90, .6);
  animation: orbit-spin 24s linear infinite reverse;
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit, .chip { animation: none; } }

.auth-close {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink); border: 0; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(20, 23, 31, .35);
}
.auth-close:hover { background: var(--surface-3); }

@media (max-width: 760px) {
  .auth-art { display: none; }
  .auth-left { padding: 36px 24px 28px; }
  .auth-close { top: 10px; right: 10px; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth[open] { animation: none; }
}

/* ---------- Hover & keyboard-focus feedback ---------- */
a, button { cursor: pointer; }

/* Logo: Zo tilts and grows a little */
/* Hovering the logo makes Zo do his little stomps: origins for each moving part */
.zo-logo .zo-foot, .zo-logo .zo-upper, .zo-logo .zo-arm { transform-box: fill-box; }
.zo-logo .zo-foot, .zo-logo .zo-upper { transform-origin: 50% 100%; }
.zo-logo .zo-arm-l { transform-origin: 95% 10%; }
.zo-logo .zo-arm-r { transform-origin: 5% 10%; }
/* (the stomp itself is driven from script.js so Zo is redrawn sharply every frame) */

/* Nav links: turn blue and slide in an underline */
.nav-links a { position: relative; transition: color .15s ease; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

/* Sign Up (text button): light blue pill appears */
button.link { padding: 8px 14px; border-radius: 10px; transition: background .15s ease, color .15s ease; }
button.link:hover { background: var(--soft); color: var(--link); }

/* Blue 3D buttons: brighten and rise, then press down on click */
.btn-primary:hover {
  background: linear-gradient(180deg, #4589EC 0%, #2A6DD8 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(var(--lip) + 2px) 0 #17479A, 0 14px 24px -8px rgba(23, 71, 154, .55);
}
.btn-primary.btn-lg:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(var(--lip) + 2px) 0 #17479A, 0 18px 30px -10px rgba(23, 71, 154, .55);
}
.btn-primary:active, .btn-primary.btn-lg:active {
  transform: translateY(var(--lip));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 #17479A, 0 2px 4px rgba(23, 71, 154, .35);
}

/* Lesson preview sidebar */
.sidebar a { transition: background .15s ease, color .15s ease; }
.sidebar a:hover { background: var(--soft); color: var(--link); }

/* Subject cards: lift with a blue outline */
.subject { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.subject:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(31, 95, 200, .5); }

/* Footer links */
.footer a { transition: color .15s ease; }
.footer a:hover { color: var(--link); text-decoration: underline; }

/* Sign-in popup options and close button */
.auth-btn { transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.auth-btn:hover {
  border-color: var(--brand); background: var(--tint); color: var(--link);
  transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(31, 95, 200, .5);
}
.auth-btn:active { transform: translateY(0); box-shadow: none; }
.auth-close { transition: background .15s ease, color .15s ease, transform .2s ease; }
.auth-close:hover { background: var(--tint); color: var(--link); transform: rotate(90deg); }
.auth-legal a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }

/* Keyboard users get a visible ring */
.nav-links a:focus-visible, button.link:focus-visible, .btn:focus-visible,
.sidebar a:focus-visible, .subject:focus-visible, .footer a:focus-visible, .brand:focus-visible {
  outline: 3px solid #9CC2F5; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .subject:hover, .auth-btn:hover, .auth-close:hover { transform: none; }
}

/* Zo blinks every few seconds in the header logo */
.zo-logo { display: block; overflow: visible; transition: transform .2s ease; }
/* Blink with an eyelid that slides over the eye, so the eye itself is never stretched (stays sharp) */
.zo-logo .zo-lid { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); animation: zo-lid 4.5s ease-in-out infinite; }
@keyframes zo-lid { 0%, 88%, 100% { transform: scaleY(0); } 91% { transform: scaleY(1); } 94% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .zo-logo .zo-lid { animation: none; } }

/* Popup option rendered as a link (temporary Apple bypass) */
a.auth-btn { text-decoration: none; }

/* ---------- Course selection page ---------- */
.nav-actions-end { margin-left: auto; }
.link-pill { padding: 8px 14px; border-radius: 10px; transition: background .15s ease, color .15s ease; }
.link-pill:hover { background: var(--soft); color: var(--link); }

.courses { max-width: 1040px; margin: 0 auto; padding: 64px 24px 96px; text-align: center; }
.courses h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(36px, 6vw, 56px); line-height: 1.08; letter-spacing: -0.03em;
}
.courses .lede { margin-top: 16px; }

.course-grid {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 900px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .course-grid { grid-template-columns: minmax(0, 1fr); } }
.course {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 16px 26px;
  font: inherit; color: var(--ink); text-align: center;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.course:hover { border-color: #9CC2F5; transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(31, 95, 200, .5); }
/* Selected course: the whole card fills with light blue */
.course[aria-pressed="true"] {
  border-color: var(--brand); color: var(--ink);
  background: linear-gradient(180deg, var(--sel-a) 0%, var(--sel-b) 100%);
  box-shadow: 0 0 0 4px var(--tint), 0 14px 28px -16px rgba(31, 95, 200, .55);
}
.course[aria-pressed="true"] p { color: var(--muted); }
.course[aria-pressed="true"] .mono { color: var(--link); }
.course[aria-pressed="true"] .course-icon.join { background: var(--surface); }
.course:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 3px; }

.course-art {
  width: 100%; height: 150px; border-radius: 14px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
}
.course-art svg { width: 100%; max-width: 260px; height: 100%; }
.course-art.algebra  { background: var(--algebra-bg); }
.course-art.algebra2 { background: var(--algebra2-bg); }
.course-art.precalc  { background: var(--precalc-bg); }
.course-art.calculus { background: var(--calculus-bg); }
.course-icon.join {
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: var(--soft); color: var(--link);
}
.course h2 { margin: 4px 0 0; font-family: "Space Grotesk", sans-serif; font-size: 24px; letter-spacing: -0.02em; }
.course p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.course .mono { margin-top: auto; padding-top: 6px; font-size: 15px; color: var(--link); }


.course-join { grid-column: 1 / -1; border-style: dashed; padding-top: 26px; }
.course-join[aria-pressed="true"] { border-style: solid; }
.course-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.course-join h2 { margin: 4px 0 0; font-size: 22px; }

.courses-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.courses-note { margin: 0; min-height: 22px; font-size: 15px; font-weight: 500; color: var(--link); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

@media (max-width: 640px) {
  .courses { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .course:hover { transform: none; } }

/* Course illustrations animate while the card is hovered */
.alg-beam { transform-box: view-box; transform-origin: 120px 55px; }
.alg-eq { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes alg-tip { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 45% { transform: rotate(6deg); } 65% { transform: rotate(-3deg); } 82% { transform: rotate(1deg); } }
@keyframes alg-pop { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.3); } }

/* Precalculus: the point circles the unit circle; its height is traced onto the sine wave */
.pc-static { transition: opacity .2s ease; }
/* Hidden instantly (no fade) so the moving parts never flash at their resting spot in the corner */
.pc-anim, .pc-wdot { opacity: 0; }
.pc-theta { transform: translate(113px, 70px); }
.pc-radius, .pc-hline, .pc-hclip, .pc-vline, .pc-vclip, .pc-wdot, .pc-theta { transform-box: view-box; transform-origin: 0 0; }
.pc-radius { transform-origin: 80px 70px; }
.pc-wdot { transform: translate(164.4px, 36.6px); }
.course:hover .pc-static { opacity: 0; }
.course:hover .pc-anim, .course:hover .pc-wdot { opacity: 1; }
.course:hover .pc-radius { animation: pc-spin 3.2s linear infinite; }
.course:hover .pc-hline { animation: pc-hline 3.2s linear infinite; }
.course:hover .pc-hclip { animation: pc-hclip 3.2s linear infinite; }
.course:hover .pc-vline { animation: pc-vline 3.2s linear infinite; }
.course:hover .pc-vclip { animation: pc-vclip 3.2s linear infinite; }
.course:hover .pc-arc { animation: pc-arc 3.2s linear infinite; }
.course:hover .pc-theta { animation: pc-theta 3.2s linear infinite; }
.course:hover .pc-wdot { animation: pc-wdot 3.2s linear infinite; }
@keyframes pc-spin { from { transform: rotate(40deg); } to { transform: rotate(-320deg); } }
@keyframes pc-hline { 0.000% { transform: translateY(70.00px); } 2.083% { transform: translateY(63.21px); } 4.167% { transform: translateY(56.54px); } 6.250% { transform: translateY(50.10px); } 8.333% { transform: translateY(44.00px); } 10.417% { transform: translateY(38.34px); } 12.500% { transform: translateY(33.23px); } 14.583% { transform: translateY(28.75px); } 16.667% { transform: translateY(24.97px); } 18.750% { transform: translateY(21.96px); } 20.833% { transform: translateY(19.77px); } 22.917% { transform: translateY(18.44px); } 25.000% { transform: translateY(18.00px); } 27.083% { transform: translateY(18.44px); } 29.167% { transform: translateY(19.77px); } 31.250% { transform: translateY(21.96px); } 33.333% { transform: translateY(24.97px); } 35.417% { transform: translateY(28.75px); } 37.500% { transform: translateY(33.23px); } 39.583% { transform: translateY(38.34px); } 41.667% { transform: translateY(44.00px); } 43.750% { transform: translateY(50.10px); } 45.833% { transform: translateY(56.54px); } 47.917% { transform: translateY(63.21px); } 50.000% { transform: translateY(70.00px); } 52.083% { transform: translateY(76.79px); } 54.167% { transform: translateY(83.46px); } 56.250% { transform: translateY(89.90px); } 58.333% { transform: translateY(96.00px); } 60.417% { transform: translateY(101.66px); } 62.500% { transform: translateY(106.77px); } 64.583% { transform: translateY(111.25px); } 66.667% { transform: translateY(115.03px); } 68.750% { transform: translateY(118.04px); } 70.833% { transform: translateY(120.23px); } 72.917% { transform: translateY(121.56px); } 75.000% { transform: translateY(122.00px); } 77.083% { transform: translateY(121.56px); } 79.167% { transform: translateY(120.23px); } 81.250% { transform: translateY(118.04px); } 83.333% { transform: translateY(115.03px); } 85.417% { transform: translateY(111.25px); } 87.500% { transform: translateY(106.77px); } 89.583% { transform: translateY(101.66px); } 91.667% { transform: translateY(96.00px); } 93.750% { transform: translateY(89.90px); } 95.833% { transform: translateY(83.46px); } 97.917% { transform: translateY(76.79px); } 100.000% { transform: translateY(70.00px); } }
@keyframes pc-hclip { 0.000% { transform: translate(132.00px, 70.00px) scaleX(24.00); } 2.083% { transform: translate(131.56px, 63.21px) scaleX(26.03); } 4.167% { transform: translate(130.23px, 56.54px) scaleX(28.94); } 6.250% { transform: translate(128.04px, 50.10px) scaleX(32.71); } 8.333% { transform: translate(125.03px, 44.00px) scaleX(37.30); } 10.417% { transform: translate(121.25px, 38.34px) scaleX(42.66); } 12.500% { transform: translate(116.77px, 33.23px) scaleX(48.73); } 14.583% { transform: translate(111.66px, 28.75px) scaleX(55.43); } 16.667% { transform: translate(106.00px, 24.97px) scaleX(62.67); } 18.750% { transform: translate(99.90px, 21.96px) scaleX(70.35); } 20.833% { transform: translate(93.46px, 19.77px) scaleX(78.37); } 22.917% { transform: translate(86.79px, 18.44px) scaleX(86.63); } 25.000% { transform: translate(80.00px, 18.00px) scaleX(95.00); } 27.083% { transform: translate(73.21px, 18.44px) scaleX(103.37); } 29.167% { transform: translate(66.54px, 19.77px) scaleX(111.63); } 31.250% { transform: translate(60.10px, 21.96px) scaleX(119.65); } 33.333% { transform: translate(54.00px, 24.97px) scaleX(127.33); } 35.417% { transform: translate(48.34px, 28.75px) scaleX(134.57); } 37.500% { transform: translate(43.23px, 33.23px) scaleX(141.27); } 39.583% { transform: translate(38.75px, 38.34px) scaleX(147.34); } 41.667% { transform: translate(34.97px, 44.00px) scaleX(152.70); } 43.750% { transform: translate(31.96px, 50.10px) scaleX(157.29); } 45.833% { transform: translate(29.77px, 56.54px) scaleX(161.06); } 47.917% { transform: translate(28.44px, 63.21px) scaleX(163.97); } 50.000% { transform: translate(28.00px, 70.00px) scaleX(166.00); } 52.083% { transform: translate(28.44px, 76.79px) scaleX(167.14); } 54.167% { transform: translate(29.77px, 83.46px) scaleX(167.39); } 56.250% { transform: translate(31.96px, 89.90px) scaleX(166.79); } 58.333% { transform: translate(34.97px, 96.00px) scaleX(165.37); } 60.417% { transform: translate(38.75px, 101.66px) scaleX(163.17); } 62.500% { transform: translate(43.23px, 106.77px) scaleX(160.27); } 64.583% { transform: translate(48.34px, 111.25px) scaleX(156.74); } 66.667% { transform: translate(54.00px, 115.03px) scaleX(152.67); } 68.750% { transform: translate(60.10px, 118.04px) scaleX(148.15); } 70.833% { transform: translate(66.54px, 120.23px) scaleX(143.29); } 72.917% { transform: translate(73.21px, 121.56px) scaleX(138.20); } 75.000% { transform: translate(80.00px, 122.00px) scaleX(133.00); } 77.083% { transform: translate(86.79px, 121.56px) scaleX(127.80); } 79.167% { transform: translate(93.46px, 120.23px) scaleX(122.71); } 81.250% { transform: translate(99.90px, 118.04px) scaleX(117.85); } 83.333% { transform: translate(106.00px, 115.03px) scaleX(113.33); } 85.417% { transform: translate(111.66px, 111.25px) scaleX(109.26); } 87.500% { transform: translate(116.77px, 106.77px) scaleX(105.73); } 89.583% { transform: translate(121.25px, 101.66px) scaleX(102.83); } 91.667% { transform: translate(125.03px, 96.00px) scaleX(100.63); } 93.750% { transform: translate(128.04px, 89.90px) scaleX(99.21); } 95.833% { transform: translate(130.23px, 83.46px) scaleX(98.61); } 97.917% { transform: translate(131.56px, 76.79px) scaleX(98.86); } 100.000% { transform: translate(132.00px, 70.00px) scaleX(100.00); } }
@keyframes pc-arc { from { stroke-dasharray: 0 360; } to { stroke-dasharray: 360 0; } }
@keyframes pc-theta { 0.000% { transform: translate(113.00px, 70.00px); } 2.083% { transform: translate(112.93px, 67.84px); } 4.167% { transform: translate(112.72px, 65.69px); } 6.250% { transform: translate(112.37px, 63.56px); } 8.333% { transform: translate(111.88px, 61.46px); } 10.417% { transform: translate(111.25px, 59.39px); } 12.500% { transform: translate(110.49px, 57.37px); } 14.583% { transform: translate(109.60px, 55.40px); } 16.667% { transform: translate(108.58px, 53.50px); } 18.750% { transform: translate(107.44px, 51.67px); } 20.833% { transform: translate(106.18px, 49.91px); } 22.917% { transform: translate(104.81px, 48.24px); } 25.000% { transform: translate(103.33px, 46.67px); } 27.083% { transform: translate(101.76px, 45.19px); } 29.167% { transform: translate(100.09px, 43.82px); } 31.250% { transform: translate(98.33px, 42.56px); } 33.333% { transform: translate(96.50px, 41.42px); } 35.417% { transform: translate(94.60px, 40.40px); } 37.500% { transform: translate(92.63px, 39.51px); } 39.583% { transform: translate(90.61px, 38.75px); } 41.667% { transform: translate(88.54px, 38.12px); } 43.750% { transform: translate(86.44px, 37.63px); } 45.833% { transform: translate(84.31px, 37.28px); } 47.917% { transform: translate(82.16px, 37.07px); } 50.000% { transform: translate(80.00px, 37.00px); } 52.083% { transform: translate(77.84px, 37.07px); } 54.167% { transform: translate(75.69px, 37.28px); } 56.250% { transform: translate(73.56px, 37.63px); } 58.333% { transform: translate(71.46px, 38.12px); } 60.417% { transform: translate(69.39px, 38.75px); } 62.500% { transform: translate(67.37px, 39.51px); } 64.583% { transform: translate(65.40px, 40.40px); } 66.667% { transform: translate(63.50px, 41.42px); } 68.750% { transform: translate(61.67px, 42.56px); } 70.833% { transform: translate(59.91px, 43.82px); } 72.917% { transform: translate(58.24px, 45.19px); } 75.000% { transform: translate(56.67px, 46.67px); } 77.083% { transform: translate(55.19px, 48.24px); } 79.167% { transform: translate(53.82px, 49.91px); } 81.250% { transform: translate(52.56px, 51.67px); } 83.333% { transform: translate(51.42px, 53.50px); } 85.417% { transform: translate(50.40px, 55.40px); } 87.500% { transform: translate(49.51px, 57.37px); } 89.583% { transform: translate(48.75px, 59.39px); } 91.667% { transform: translate(48.12px, 61.46px); } 93.750% { transform: translate(47.63px, 63.56px); } 95.833% { transform: translate(47.28px, 65.69px); } 97.917% { transform: translate(47.07px, 67.84px); } 100.000% { transform: translate(47.00px, 70.00px); } }
@keyframes pc-vline { 0.000% { transform: translateX(132.00px); } 2.083% { transform: translateX(131.56px); } 4.167% { transform: translateX(130.23px); } 6.250% { transform: translateX(128.04px); } 8.333% { transform: translateX(125.03px); } 10.417% { transform: translateX(121.25px); } 12.500% { transform: translateX(116.77px); } 14.583% { transform: translateX(111.66px); } 16.667% { transform: translateX(106.00px); } 18.750% { transform: translateX(99.90px); } 20.833% { transform: translateX(93.46px); } 22.917% { transform: translateX(86.79px); } 25.000% { transform: translateX(80.00px); } 27.083% { transform: translateX(73.21px); } 29.167% { transform: translateX(66.54px); } 31.250% { transform: translateX(60.10px); } 33.333% { transform: translateX(54.00px); } 35.417% { transform: translateX(48.34px); } 37.500% { transform: translateX(43.23px); } 39.583% { transform: translateX(38.75px); } 41.667% { transform: translateX(34.97px); } 43.750% { transform: translateX(31.96px); } 45.833% { transform: translateX(29.77px); } 47.917% { transform: translateX(28.44px); } 50.000% { transform: translateX(28.00px); } 52.083% { transform: translateX(28.44px); } 54.167% { transform: translateX(29.77px); } 56.250% { transform: translateX(31.96px); } 58.333% { transform: translateX(34.97px); } 60.417% { transform: translateX(38.75px); } 62.500% { transform: translateX(43.23px); } 64.583% { transform: translateX(48.34px); } 66.667% { transform: translateX(54.00px); } 68.750% { transform: translateX(60.10px); } 70.833% { transform: translateX(66.54px); } 72.917% { transform: translateX(73.21px); } 75.000% { transform: translateX(80.00px); } 77.083% { transform: translateX(86.79px); } 79.167% { transform: translateX(93.46px); } 81.250% { transform: translateX(99.90px); } 83.333% { transform: translateX(106.00px); } 85.417% { transform: translateX(111.66px); } 87.500% { transform: translateX(116.77px); } 89.583% { transform: translateX(121.25px); } 91.667% { transform: translateX(125.03px); } 93.750% { transform: translateX(128.04px); } 95.833% { transform: translateX(130.23px); } 97.917% { transform: translateX(131.56px); } 100.000% { transform: translateX(132.00px); } }
@keyframes pc-vclip { 0.000% { transform: translate(132.00px, 70.00px) scaleY(0.01); } 2.083% { transform: translate(131.56px, 63.21px) scaleY(6.79); } 4.167% { transform: translate(130.23px, 56.54px) scaleY(13.46); } 6.250% { transform: translate(128.04px, 50.10px) scaleY(19.90); } 8.333% { transform: translate(125.03px, 44.00px) scaleY(26.00); } 10.417% { transform: translate(121.25px, 38.34px) scaleY(31.66); } 12.500% { transform: translate(116.77px, 33.23px) scaleY(36.77); } 14.583% { transform: translate(111.66px, 28.75px) scaleY(41.25); } 16.667% { transform: translate(106.00px, 24.97px) scaleY(45.03); } 18.750% { transform: translate(99.90px, 21.96px) scaleY(48.04); } 20.833% { transform: translate(93.46px, 19.77px) scaleY(50.23); } 22.917% { transform: translate(86.79px, 18.44px) scaleY(51.56); } 25.000% { transform: translate(80.00px, 18.00px) scaleY(52.00); } 27.083% { transform: translate(73.21px, 18.44px) scaleY(51.56); } 29.167% { transform: translate(66.54px, 19.77px) scaleY(50.23); } 31.250% { transform: translate(60.10px, 21.96px) scaleY(48.04); } 33.333% { transform: translate(54.00px, 24.97px) scaleY(45.03); } 35.417% { transform: translate(48.34px, 28.75px) scaleY(41.25); } 37.500% { transform: translate(43.23px, 33.23px) scaleY(36.77); } 39.583% { transform: translate(38.75px, 38.34px) scaleY(31.66); } 41.667% { transform: translate(34.97px, 44.00px) scaleY(26.00); } 43.750% { transform: translate(31.96px, 50.10px) scaleY(19.90); } 45.833% { transform: translate(29.77px, 56.54px) scaleY(13.46); } 47.917% { transform: translate(28.44px, 63.21px) scaleY(6.79); } 50.000% { transform: translate(28.00px, 70.00px) scaleY(0.01); } 52.083% { transform: translate(28.44px, 76.79px) scaleY(-6.79); } 54.167% { transform: translate(29.77px, 83.46px) scaleY(-13.46); } 56.250% { transform: translate(31.96px, 89.90px) scaleY(-19.90); } 58.333% { transform: translate(34.97px, 96.00px) scaleY(-26.00); } 60.417% { transform: translate(38.75px, 101.66px) scaleY(-31.66); } 62.500% { transform: translate(43.23px, 106.77px) scaleY(-36.77); } 64.583% { transform: translate(48.34px, 111.25px) scaleY(-41.25); } 66.667% { transform: translate(54.00px, 115.03px) scaleY(-45.03); } 68.750% { transform: translate(60.10px, 118.04px) scaleY(-48.04); } 70.833% { transform: translate(66.54px, 120.23px) scaleY(-50.23); } 72.917% { transform: translate(73.21px, 121.56px) scaleY(-51.56); } 75.000% { transform: translate(80.00px, 122.00px) scaleY(-52.00); } 77.083% { transform: translate(86.79px, 121.56px) scaleY(-51.56); } 79.167% { transform: translate(93.46px, 120.23px) scaleY(-50.23); } 81.250% { transform: translate(99.90px, 118.04px) scaleY(-48.04); } 83.333% { transform: translate(106.00px, 115.03px) scaleY(-45.03); } 85.417% { transform: translate(111.66px, 111.25px) scaleY(-41.25); } 87.500% { transform: translate(116.77px, 106.77px) scaleY(-36.77); } 89.583% { transform: translate(121.25px, 101.66px) scaleY(-31.66); } 91.667% { transform: translate(125.03px, 96.00px) scaleY(-26.00); } 93.750% { transform: translate(128.04px, 89.90px) scaleY(-19.90); } 95.833% { transform: translate(130.23px, 83.46px) scaleY(-13.46); } 97.917% { transform: translate(131.56px, 76.79px) scaleY(-6.79); } 100.000% { transform: translate(132.00px, 70.00px) scaleY(0.01); } }
@keyframes pc-wdot { 0.000% { transform: translate(156.00px, 70.00px); } 2.083% { transform: translate(157.58px, 63.21px); } 4.167% { transform: translate(159.17px, 56.54px); } 6.250% { transform: translate(160.75px, 50.10px); } 8.333% { transform: translate(162.33px, 44.00px); } 10.417% { transform: translate(163.92px, 38.34px); } 12.500% { transform: translate(165.50px, 33.23px); } 14.583% { transform: translate(167.08px, 28.75px); } 16.667% { transform: translate(168.67px, 24.97px); } 18.750% { transform: translate(170.25px, 21.96px); } 20.833% { transform: translate(171.83px, 19.77px); } 22.917% { transform: translate(173.42px, 18.44px); } 25.000% { transform: translate(175.00px, 18.00px); } 27.083% { transform: translate(176.58px, 18.44px); } 29.167% { transform: translate(178.17px, 19.77px); } 31.250% { transform: translate(179.75px, 21.96px); } 33.333% { transform: translate(181.33px, 24.97px); } 35.417% { transform: translate(182.92px, 28.75px); } 37.500% { transform: translate(184.50px, 33.23px); } 39.583% { transform: translate(186.08px, 38.34px); } 41.667% { transform: translate(187.67px, 44.00px); } 43.750% { transform: translate(189.25px, 50.10px); } 45.833% { transform: translate(190.83px, 56.54px); } 47.917% { transform: translate(192.42px, 63.21px); } 50.000% { transform: translate(194.00px, 70.00px); } 52.083% { transform: translate(195.58px, 76.79px); } 54.167% { transform: translate(197.17px, 83.46px); } 56.250% { transform: translate(198.75px, 89.90px); } 58.333% { transform: translate(200.33px, 96.00px); } 60.417% { transform: translate(201.92px, 101.66px); } 62.500% { transform: translate(203.50px, 106.77px); } 64.583% { transform: translate(205.08px, 111.25px); } 66.667% { transform: translate(206.67px, 115.03px); } 68.750% { transform: translate(208.25px, 118.04px); } 70.833% { transform: translate(209.83px, 120.23px); } 72.917% { transform: translate(211.42px, 121.56px); } 75.000% { transform: translate(213.00px, 122.00px); } 77.083% { transform: translate(214.58px, 121.56px); } 79.167% { transform: translate(216.17px, 120.23px); } 81.250% { transform: translate(217.75px, 118.04px); } 83.333% { transform: translate(219.33px, 115.03px); } 85.417% { transform: translate(220.92px, 111.25px); } 87.500% { transform: translate(222.50px, 106.77px); } 89.583% { transform: translate(224.08px, 101.66px); } 91.667% { transform: translate(225.67px, 96.00px); } 93.750% { transform: translate(227.25px, 89.90px); } 95.833% { transform: translate(228.83px, 83.46px); } 97.917% { transform: translate(230.42px, 76.79px); } 100.000% { transform: translate(232.00px, 70.00px); } }

/* Calculus: the point slides along the curve while the area under it grows */
.cal-clip-rect, .cal-pt, .cal-tan { transform-box: view-box; transform-origin: 0 0; }
.cal-clip-rect { transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0.6146); }
.cal-pt { transform: translate(150px, 52px); }
.cal-tan { transform: translate(150px, 52px) rotate(-42.42deg); }
.course:hover .cal-clip-rect { animation: cal-area 3.4s linear infinite; }
.course:hover .cal-pt { animation: cal-pt 3.4s linear infinite; }
.course:hover .cal-tan { animation: cal-tan 3.4s linear infinite; }
@keyframes cal-area { 0.000% { transform: scaleX(0.0417); } 2.000% { transform: scaleX(0.0643); } 4.000% { transform: scaleX(0.0870); } 6.000% { transform: scaleX(0.1096); } 8.000% { transform: scaleX(0.1323); } 10.000% { transform: scaleX(0.1549); } 12.000% { transform: scaleX(0.1776); } 14.000% { transform: scaleX(0.2003); } 16.000% { transform: scaleX(0.2229); } 18.000% { transform: scaleX(0.2456); } 20.000% { transform: scaleX(0.2682); } 22.000% { transform: scaleX(0.2909); } 24.000% { transform: scaleX(0.3135); } 26.000% { transform: scaleX(0.3362); } 28.000% { transform: scaleX(0.3589); } 30.000% { transform: scaleX(0.3815); } 32.000% { transform: scaleX(0.4042); } 34.000% { transform: scaleX(0.4268); } 36.000% { transform: scaleX(0.4495); } 38.000% { transform: scaleX(0.4721); } 40.000% { transform: scaleX(0.4948); } 42.000% { transform: scaleX(0.5174); } 44.000% { transform: scaleX(0.5401); } 46.000% { transform: scaleX(0.5628); } 48.000% { transform: scaleX(0.5854); } 50.000% { transform: scaleX(0.6081); } 52.000% { transform: scaleX(0.6307); } 54.000% { transform: scaleX(0.6534); } 56.000% { transform: scaleX(0.6760); } 58.000% { transform: scaleX(0.6987); } 60.000% { transform: scaleX(0.7214); } 62.000% { transform: scaleX(0.7440); } 64.000% { transform: scaleX(0.7667); } 66.000% { transform: scaleX(0.7893); } 68.000% { transform: scaleX(0.8120); } 70.000% { transform: scaleX(0.8346); } 72.000% { transform: scaleX(0.8573); } 74.000% { transform: scaleX(0.8799); } 76.000% { transform: scaleX(0.9026); } 78.000% { transform: scaleX(0.9253); } 80.000% { transform: scaleX(0.9479); } 100% { transform: scaleX(0.9479); } }
@keyframes cal-pt { 0.000% { transform: translate(40.00px, 107.30px); } 2.000% { transform: translate(44.35px, 106.80px); } 4.000% { transform: translate(48.70px, 106.20px); } 6.000% { transform: translate(53.05px, 105.51px); } 8.000% { transform: translate(57.40px, 104.71px); } 10.000% { transform: translate(61.75px, 103.80px); } 12.000% { transform: translate(66.10px, 102.76px); } 14.000% { transform: translate(70.45px, 101.60px); } 16.000% { transform: translate(74.80px, 100.30px); } 18.000% { transform: translate(79.15px, 98.86px); } 20.000% { transform: translate(83.50px, 97.28px); } 22.000% { transform: translate(87.85px, 95.56px); } 24.000% { transform: translate(92.20px, 93.69px); } 26.000% { transform: translate(96.55px, 91.68px); } 28.000% { transform: translate(100.90px, 89.55px); } 30.000% { transform: translate(105.25px, 87.22px); } 32.000% { transform: translate(109.60px, 84.69px); } 34.000% { transform: translate(113.95px, 81.94px); } 36.000% { transform: translate(118.30px, 78.97px); } 38.000% { transform: translate(122.65px, 75.79px); } 40.000% { transform: translate(127.00px, 72.40px); } 42.000% { transform: translate(131.35px, 68.82px); } 44.000% { transform: translate(135.70px, 65.08px); } 46.000% { transform: translate(140.05px, 61.19px); } 48.000% { transform: translate(144.40px, 57.21px); } 50.000% { transform: translate(148.75px, 53.17px); } 52.000% { transform: translate(153.10px, 49.31px); } 54.000% { transform: translate(157.45px, 45.82px); } 56.000% { transform: translate(161.80px, 42.62px); } 58.000% { transform: translate(166.15px, 39.65px); } 60.000% { transform: translate(170.50px, 36.90px); } 62.000% { transform: translate(174.85px, 34.33px); } 64.000% { transform: translate(179.20px, 31.94px); } 66.000% { transform: translate(183.55px, 29.70px); } 68.000% { transform: translate(187.90px, 27.62px); } 70.000% { transform: translate(192.25px, 25.68px); } 72.000% { transform: translate(196.60px, 23.89px); } 74.000% { transform: translate(200.95px, 22.23px); } 76.000% { transform: translate(205.30px, 20.72px); } 78.000% { transform: translate(209.65px, 19.36px); } 80.000% { transform: translate(214.00px, 18.15px); } 100% { transform: translate(214.00px, 18.15px); } }
@keyframes cal-tan { 0.000% { transform: translate(40.00px, 107.30px) rotate(-5.99deg); } 2.000% { transform: translate(44.35px, 106.80px) rotate(-7.14deg); } 4.000% { transform: translate(48.70px, 106.20px) rotate(-8.39deg); } 6.000% { transform: translate(53.05px, 105.51px) rotate(-9.72deg); } 8.000% { transform: translate(57.40px, 104.71px) rotate(-11.13deg); } 10.000% { transform: translate(61.75px, 103.80px) rotate(-12.62deg); } 12.000% { transform: translate(66.10px, 102.76px) rotate(-14.18deg); } 14.000% { transform: translate(70.45px, 101.60px) rotate(-15.80deg); } 16.000% { transform: translate(74.80px, 100.30px) rotate(-17.46deg); } 18.000% { transform: translate(79.15px, 98.86px) rotate(-19.13deg); } 20.000% { transform: translate(83.50px, 97.28px) rotate(-20.80deg); } 22.000% { transform: translate(87.85px, 95.56px) rotate(-22.43deg); } 24.000% { transform: translate(92.20px, 93.69px) rotate(-23.99deg); } 26.000% { transform: translate(96.55px, 91.68px) rotate(-25.47deg); } 28.000% { transform: translate(100.90px, 89.55px) rotate(-27.01deg); } 30.000% { transform: translate(105.25px, 87.22px) rotate(-29.16deg); } 32.000% { transform: translate(109.60px, 84.69px) rotate(-31.27deg); } 34.000% { transform: translate(113.95px, 81.94px) rotate(-33.32deg); } 36.000% { transform: translate(118.30px, 78.97px) rotate(-35.27deg); } 38.000% { transform: translate(122.65px, 75.79px) rotate(-37.07deg); } 40.000% { transform: translate(127.00px, 72.40px) rotate(-38.70deg); } 42.000% { transform: translate(131.35px, 68.82px) rotate(-40.12deg); } 44.000% { transform: translate(135.70px, 65.08px) rotate(-41.29deg); } 46.000% { transform: translate(140.05px, 61.19px) rotate(-42.17deg); } 48.000% { transform: translate(144.40px, 57.21px) rotate(-42.75deg); } 50.000% { transform: translate(148.75px, 53.17px) rotate(-43.01deg); } 52.000% { transform: translate(153.10px, 49.31px) rotate(-39.98deg); } 54.000% { transform: translate(157.45px, 45.82px) rotate(-37.49deg); } 56.000% { transform: translate(161.80px, 42.62px) rotate(-35.28deg); } 58.000% { transform: translate(166.15px, 39.65px) rotate(-33.28deg); } 60.000% { transform: translate(170.50px, 36.90px) rotate(-31.43deg); } 62.000% { transform: translate(174.85px, 34.33px) rotate(-29.67deg); } 64.000% { transform: translate(179.20px, 31.94px) rotate(-28.01deg); } 66.000% { transform: translate(183.55px, 29.70px) rotate(-26.39deg); } 68.000% { transform: translate(187.90px, 27.62px) rotate(-24.80deg); } 70.000% { transform: translate(192.25px, 25.68px) rotate(-23.21deg); } 72.000% { transform: translate(196.60px, 23.89px) rotate(-21.61deg); } 74.000% { transform: translate(200.95px, 22.23px) rotate(-19.98deg); } 76.000% { transform: translate(205.30px, 20.72px) rotate(-18.28deg); } 78.000% { transform: translate(209.65px, 19.36px) rotate(-16.50deg); } 80.000% { transform: translate(214.00px, 18.15px) rotate(-14.58deg); } 100% { transform: translate(214.00px, 18.15px) rotate(-14.58deg); } }

.course-join:hover .course-icon svg { animation: cap-toss 1.3s ease-in-out infinite; }
@keyframes cap-toss { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-9px) rotate(-14deg); } 55% { transform: translateY(-11px) rotate(10deg); } 75% { transform: translateY(0) rotate(0deg); } }
/* Algebra 2: a line pivots through the root (2, 0) of y = x² − 4; the orange dot is where it crosses the parabola again */
.alg2-line, .alg2-hit { transform-box: view-box; transform-origin: 0 0; opacity: 0; transition: opacity .2s ease; }
.alg2-line { transform: translate(160px, 48px) rotate(16.70deg); }
.alg2-hit { transform: translate(74.00px, 22.20px); }
.alg2-pivot { transform-box: fill-box; transform-origin: 50% 50%; }
.course:hover .alg2-line, .course:hover .alg2-hit { opacity: 1; }
.course:hover .alg2-line { animation: alg2-line 4.6s linear infinite; }
.course:hover .alg2-hit { animation: alg2-hit 4.6s linear infinite; }
.course:hover .alg2-pivot { animation: alg2-pulse 2.3s ease-in-out infinite; }
@keyframes alg2-line { 0.000% { transform: translate(160px, 48px) rotate(16.70deg); } 2.083% { transform: translate(160px, 48px) rotate(15.82deg); } 4.167% { transform: translate(160px, 48px) rotate(13.15deg); } 6.250% { transform: translate(160px, 48px) rotate(8.62deg); } 8.333% { transform: translate(160px, 48px) rotate(2.22deg); } 10.417% { transform: translate(160px, 48px) rotate(-5.88deg); } 12.500% { transform: translate(160px, 48px) rotate(-15.17deg); } 14.583% { transform: translate(160px, 48px) rotate(-24.84deg); } 16.667% { transform: translate(160px, 48px) rotate(-34.02deg); } 18.750% { transform: translate(160px, 48px) rotate(-42.11deg); } 20.833% { transform: translate(160px, 48px) rotate(-48.87deg); } 22.917% { transform: translate(160px, 48px) rotate(-54.37deg); } 25.000% { transform: translate(160px, 48px) rotate(-58.78deg); } 27.083% { transform: translate(160px, 48px) rotate(-62.30deg); } 29.167% { transform: translate(160px, 48px) rotate(-65.10deg); } 31.250% { transform: translate(160px, 48px) rotate(-67.35deg); } 33.333% { transform: translate(160px, 48px) rotate(-69.15deg); } 35.417% { transform: translate(160px, 48px) rotate(-70.58deg); } 37.500% { transform: translate(160px, 48px) rotate(-71.73deg); } 39.583% { transform: translate(160px, 48px) rotate(-72.63deg); } 41.667% { transform: translate(160px, 48px) rotate(-73.33deg); } 43.750% { transform: translate(160px, 48px) rotate(-73.84deg); } 45.833% { transform: translate(160px, 48px) rotate(-74.20deg); } 47.917% { transform: translate(160px, 48px) rotate(-74.41deg); } 50.000% { transform: translate(160px, 48px) rotate(-74.48deg); } 52.083% { transform: translate(160px, 48px) rotate(-74.41deg); } 54.167% { transform: translate(160px, 48px) rotate(-74.20deg); } 56.250% { transform: translate(160px, 48px) rotate(-73.84deg); } 58.333% { transform: translate(160px, 48px) rotate(-73.33deg); } 60.417% { transform: translate(160px, 48px) rotate(-72.63deg); } 62.500% { transform: translate(160px, 48px) rotate(-71.73deg); } 64.583% { transform: translate(160px, 48px) rotate(-70.58deg); } 66.667% { transform: translate(160px, 48px) rotate(-69.15deg); } 68.750% { transform: translate(160px, 48px) rotate(-67.35deg); } 70.833% { transform: translate(160px, 48px) rotate(-65.10deg); } 72.917% { transform: translate(160px, 48px) rotate(-62.30deg); } 75.000% { transform: translate(160px, 48px) rotate(-58.78deg); } 77.083% { transform: translate(160px, 48px) rotate(-54.37deg); } 79.167% { transform: translate(160px, 48px) rotate(-48.87deg); } 81.250% { transform: translate(160px, 48px) rotate(-42.11deg); } 83.333% { transform: translate(160px, 48px) rotate(-34.02deg); } 85.417% { transform: translate(160px, 48px) rotate(-24.84deg); } 87.500% { transform: translate(160px, 48px) rotate(-15.17deg); } 89.583% { transform: translate(160px, 48px) rotate(-5.88deg); } 91.667% { transform: translate(160px, 48px) rotate(2.22deg); } 93.750% { transform: translate(160px, 48px) rotate(8.62deg); } 95.833% { transform: translate(160px, 48px) rotate(13.15deg); } 97.917% { transform: translate(160px, 48px) rotate(15.82deg); } 100.000% { transform: translate(160px, 48px) rotate(16.70deg); } }
@keyframes alg2-hit { 0.000% { transform: translate(74.00px, 22.20px); } 2.083% { transform: translate(74.33px, 23.73px); } 4.167% { transform: translate(75.33px, 28.22px); } 6.250% { transform: translate(76.97px, 35.42px); } 8.333% { transform: translate(79.23px, 44.87px); } 10.417% { transform: translate(82.06px, 56.02px); } 12.500% { transform: translate(85.42px, 68.22px); } 14.583% { transform: translate(89.26px, 80.75px); } 16.667% { transform: translate(93.50px, 92.89px); } 18.750% { transform: translate(98.08px, 103.97px); } 20.833% { transform: translate(102.91px, 113.39px); } 22.917% { transform: translate(107.91px, 120.69px); } 25.000% { transform: translate(113.00px, 125.55px); } 27.083% { transform: translate(118.09px, 127.82px); } 29.167% { transform: translate(123.09px, 127.52px); } 31.250% { transform: translate(127.92px, 124.86px); } 33.333% { transform: translate(132.50px, 120.19px); } 35.417% { transform: translate(136.74px, 113.99px); } 37.500% { transform: translate(140.58px, 106.83px); } 39.583% { transform: translate(143.94px, 99.34px); } 41.667% { transform: translate(146.77px, 92.15px); } 43.750% { transform: translate(149.03px, 85.86px); } 45.833% { transform: translate(150.67px, 80.96px); } 47.917% { transform: translate(151.67px, 77.86px); } 50.000% { transform: translate(152.00px, 76.80px); } 52.083% { transform: translate(151.67px, 77.86px); } 54.167% { transform: translate(150.67px, 80.96px); } 56.250% { transform: translate(149.03px, 85.86px); } 58.333% { transform: translate(146.77px, 92.15px); } 60.417% { transform: translate(143.94px, 99.34px); } 62.500% { transform: translate(140.58px, 106.83px); } 64.583% { transform: translate(136.74px, 113.99px); } 66.667% { transform: translate(132.50px, 120.19px); } 68.750% { transform: translate(127.92px, 124.86px); } 70.833% { transform: translate(123.09px, 127.52px); } 72.917% { transform: translate(118.09px, 127.82px); } 75.000% { transform: translate(113.00px, 125.55px); } 77.083% { transform: translate(107.91px, 120.69px); } 79.167% { transform: translate(102.91px, 113.39px); } 81.250% { transform: translate(98.08px, 103.97px); } 83.333% { transform: translate(93.50px, 92.89px); } 85.417% { transform: translate(89.26px, 80.75px); } 87.500% { transform: translate(85.42px, 68.22px); } 89.583% { transform: translate(82.06px, 56.02px); } 91.667% { transform: translate(79.23px, 44.87px); } 93.750% { transform: translate(76.97px, 35.42px); } 95.833% { transform: translate(75.33px, 28.22px); } 97.917% { transform: translate(74.33px, 23.73px); } 100.000% { transform: translate(74.00px, 22.20px); } }
@keyframes alg2-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
/* Algebra scale: x (= 7) on the left is weighed against 7, then 8, then 6.
   8 is heavier, so the right side sinks (x < 8); 6 is lighter, so it rises (x > 6); 7 balances (x = 7). */
.alg-n8, .alg-n6, .alg-s-lt, .alg-s-gt { opacity: 0; }
.course:hover .alg-beam, .course-hero-art:hover .alg-beam { animation: alg-weigh 4.8s ease-in-out -0.6s infinite; }
.course:hover .alg-eq, .course-hero-art:hover .alg-eq { animation: alg-signpop 4.8s ease-in-out -0.6s infinite; }
.course:hover .alg-n7, .course-hero-art:hover .alg-n7, .course:hover .alg-s-eq, .course-hero-art:hover .alg-s-eq { animation: alg-show7 4.8s linear -0.6s infinite; }
.course:hover .alg-n8, .course-hero-art:hover .alg-n8, .course:hover .alg-s-lt, .course-hero-art:hover .alg-s-lt { animation: alg-show8 4.8s linear -0.6s infinite; }
.course:hover .alg-n6, .course-hero-art:hover .alg-n6, .course:hover .alg-s-gt, .course-hero-art:hover .alg-s-gt { animation: alg-show6 4.8s linear -0.6s infinite; }
@keyframes alg-weigh { 0% { transform: rotate(0deg); } 15% { transform: rotate(0deg); } 19% { transform: rotate(11.5deg); } 22% { transform: rotate(5.5deg); } 25% { transform: rotate(9.4deg); } 28% { transform: rotate(7.2deg); } 31% { transform: rotate(8deg); } 45% { transform: rotate(8deg); } 49% { transform: rotate(-11.5deg); } 52% { transform: rotate(-5.5deg); } 55% { transform: rotate(-9.4deg); } 58% { transform: rotate(-7.2deg); } 61% { transform: rotate(-8deg); } 75% { transform: rotate(-8deg); } 79% { transform: rotate(3.5deg); } 82% { transform: rotate(-2.6deg); } 85% { transform: rotate(1.4deg); } 88% { transform: rotate(-0.6deg); } 91% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes alg-signpop { 0%, 14%, 21%, 44%, 51%, 74%, 81%, 100% { transform: scale(1); } 17%, 47%, 77% { transform: scale(1.3); } }
@keyframes alg-show7 { 0%, 14% { opacity: 1; } 15%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes alg-show8 { 0%, 14% { opacity: 0; } 15%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes alg-show6 { 0%, 44% { opacity: 0; } 45%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .course:hover * { animation: none !important; } }

/* =====================================================================
   Course overview page (course.html)
   ===================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.course-missing { max-width: 640px; margin: 0 auto; padding: 96px 24px; text-align: center; }

.course-hero { background: var(--algebra-bg); }
.course-hero.theme-algebra { background: var(--algebra-bg); }
.course-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 20px 24px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px;
}
.course-hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.back-link { font-size: 15px; font-weight: 500; color: #2F5A06; text-decoration: none; padding: 4px 0; }
.back-link:hover { text-decoration: underline; }
.course-hero h1 {
  margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(36px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
}
.course-tagline { margin: 0; font-size: 19px; line-height: 1.5; color: #34401F; }
.course-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; font-weight: 500; color: #34401F; margin: 6px 0 0; }
.progress-bar { width: 260px; max-width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.course-finished { margin: 0; font-weight: 600; color: var(--link); }
.course-hero-art { flex: 0 1 236px; min-width: 0; display: flex; justify-content: center; }
.course-hero-art svg { width: 100%; max-width: 236px; height: auto; cursor: default; }

.course-body { max-width: 1120px; margin: 0 auto; padding: 36px 24px 96px; }

/* Search */
.module-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.module-search label { font-size: 16px; font-weight: 600; }
.module-search input {
  flex: 1 1 280px; max-width: 520px; height: 46px; padding: 0 16px;
  font: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface);
}
.module-search input:focus { outline: 3px solid #9CC2F5; outline-offset: 1px; border-color: var(--brand); }
.search-empty { margin: 8px 0 0; color: var(--muted); }
.search-empty:empty { display: none; }

/* Module rows: card on the left, % tile on the right */
.module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.module-row { display: grid; grid-template-columns: minmax(0, 1fr) 186px; gap: 8px 16px; align-items: stretch; }
.module-head {
  grid-column: 1; display: flex; align-items: center; gap: 22px;
  min-height: 184px; padding: 36px 32px;
  font: inherit; color: var(--ink); text-align: left;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.module-head:hover { border-color: #9CC2F5; box-shadow: 0 10px 24px -18px rgba(31, 95, 200, .55); }
.module-head:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 3px; }
.module-badge {
  flex: none; width: 112px; height: 112px; border-radius: 26px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #EEFAD8 0%, var(--algebra-bg) 100%);
  /* bevel: light top edge, darker bottom lip, then the status ring */
  --ring: var(--line-strong);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -5px 0 rgba(47, 90, 6, .14), 0 0 0 5px var(--surface), 0 0 0 8px var(--ring);
}
.module-badge svg { width: 92px; height: auto; margin-top: 2px; }
.module-badge img { width: 100%; height: 100%; object-fit: cover; }
.module-heading { display: flex; flex-direction: column; gap: 4px; }
.module-kicker { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.module-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.module-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -0.01em; line-height: 1.25; }
.module-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; vertical-align: 2px;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--tint); color: var(--link);
}
.module-bar { display: block; height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.module-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.module-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 13px; color: var(--muted); }
.module-toggle { font-weight: 600; color: var(--link); }

.module-tile {
  grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 184px; border-radius: 18px; background: var(--surface-2); color: var(--ink);
}
.module-tile strong { font-family: "Space Grotesk", sans-serif; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.module-tile span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

/* States: done = blue, working on = green, not started / coming soon = neutral */
.state-done .module-badge { --ring: var(--brand); }
.state-done .module-tile { background: var(--brand); color: #fff; }
.state-active .module-badge { --ring: #4E8C0C; }
.state-active .module-bar span { background: #4E8C0C; }
.state-active .module-tile { background: #3D6E0A; color: #fff; }
.state-soon .module-tile { color: var(--muted); }
.module-row.is-open .module-head { border-color: var(--brand); }

/* Topics inside an open module */
.topic-rows {
  grid-column: 1; list-style: none; margin: 0; padding: 6px 0;
  border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface);
}
.topic-rows[hidden] { display: none; }
.topic-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.topic-row + .topic-row { border-top: 1px solid var(--line); }
.topic-num {
  flex: none; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500;
  background: var(--surface-3); color: var(--ink);
}
.topic-row.is-done .topic-num { background: var(--brand); color: #fff; }
.topic-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.topic-name small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--faint); }
.topic-name small.ok { color: var(--link); }
.topic-icons { flex: none; display: flex; gap: 8px; }
.step-dot-link {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.step-dot-link.is-done { background: var(--brand); color: #fff; border: 2px solid var(--brand); }
.step-dot-link.is-ready { background: var(--surface); color: var(--link); border: 2px solid var(--brand); }
.step-dot-link.is-soon { background: var(--surface); color: var(--faint); border: 2px dashed var(--line-strong); }
.step-dot-link:hover { transform: translateY(-2px) scale(1.06); }
.step-dot-link.is-ready:hover { background: var(--tint); }
.step-dot-link:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 2px; }

.module-resume { grid-column: 2; align-self: start; justify-content: center; width: 100%; }

@media (max-width: 760px) {
  .module-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .module-head { gap: 14px; padding: 24px 16px; min-height: 140px; }
  .module-badge { width: 52px; height: 52px; border-radius: 14px; }
  .module-badge svg { width: 44px; }
  .module-meta { display: none; }
  .module-tile { min-height: 140px; }
  .module-tile strong { font-size: 22px; }
  .module-title { font-size: 18px; }
  .module-head { gap: 12px; padding: 18px 14px; }
  .module-tile span { font-size: 10px; }
  .topic-rows, .module-resume { grid-column: 1 / -1; }
  .topic-row { flex-wrap: wrap; padding: 12px 16px; }
  .topic-icons { width: 100%; padding-left: 54px; }
  .course-hero-art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .step-dot-link:hover { transform: none; } }

/* =====================================================================
   Lesson page (lesson.html)
   ===================================================================== */
.lesson-page { max-width: 880px; margin: 0 auto; padding: 24px 24px 96px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; padding: 6px 0; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.lesson-head { margin: 14px 0 22px; }
.lesson-kicker { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--link); }
.lesson-head h1 { margin: 4px 0 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }

.step-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.step-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 10px;
  font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.step-tab:hover { border-color: #9CC2F5; color: var(--ink); }
.step-tab[aria-current="step"] { border-color: var(--brand); background: var(--tint); color: var(--link); }
.step-tab:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 2px; }
.step-dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--surface-3); color: var(--ink);
}
.step-tab.is-done .step-dot { background: var(--brand); color: #fff; }
.step-tab-icon { display: none; }
@media (max-width: 600px) {
  .step-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step-body { min-height: 240px; }
.step-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0E1320; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.empty-step {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 56px 24px; border: 2px dashed var(--line-strong); border-radius: 18px; background: var(--surface-2);
}
.empty-step p { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.empty-step strong { color: var(--ink); }

/* Quiz */
.quiz { display: flex; flex-direction: column; gap: 18px; }
.quiz-q { margin: 0; padding: 20px; border: 1.5px solid var(--line); border-radius: 16px; }
.quiz-q legend { display: flex; gap: 12px; align-items: baseline; padding: 0; font-size: 18px; font-weight: 600; line-height: 1.4; float: left; width: 100%; margin-bottom: 14px; }
.quiz-q legend + * { clear: both; }
.q-num {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-size: 14px; font-weight: 700; background: var(--tint); color: var(--link);
}
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: #9CC2F5; background: var(--tint-soft); }
.choice input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--tint); }
.quiz-q.is-wrong .choice:has(input:checked) { border-color: #D14343; background: var(--bad-bg); }
.choice.is-answer { border-color: #2E8B57 !important; background: var(--ok-bg) !important; }
.q-feedback { margin: 12px 0 0; min-height: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.q-feedback:empty { display: none; }
.quiz-q.is-right .q-feedback { color: var(--ok); }
.quiz-q.is-wrong .q-feedback { color: var(--bad); }
.quiz-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quiz-score { margin: 0; font-weight: 600; color: var(--link); }

/* Examples */
.example { padding: 22px 24px; border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 16px; }
.example-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }
.example-problem { margin: 6px 0 14px; font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 500; }
.example-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.example-steps li::marker { color: var(--link); font-weight: 600; }
.example-actions { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.link-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--link); background: none; border: 0; padding: 10px 4px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
button.btn-soft { cursor: pointer; }

/* Practice */
.practice { padding: 20px; border: 1.5px solid var(--line); border-radius: 16px; margin-bottom: 16px; transition: border-color .15s ease, background .15s ease; }
.practice.is-right { border-color: #2E8B57; background: var(--ok-bg); }
.practice.is-wrong { border-color: #D14343; }
.practice-problem { display: flex; gap: 12px; align-items: baseline; font-family: "JetBrains Mono", monospace; font-size: 19px; font-weight: 500; }
.practice-row { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.practice-row input {
  flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 14px;
  font: inherit; font-size: 17px; font-family: "JetBrains Mono", monospace;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.practice-row input:focus { outline: 3px solid #9CC2F5; outline-offset: 1px; border-color: var(--brand); }
.practice-feedback { margin: 10px 0 0; font-size: 15px; font-weight: 500; }
.practice-feedback:empty { display: none; }
.practice.is-right .practice-feedback { color: var(--ok); }
.practice.is-wrong .practice-feedback { color: var(--bad); }
.hint { margin-top: 10px; font-size: 15px; color: var(--muted); }
.hint summary { cursor: pointer; color: var(--link); font-weight: 500; padding: 6px 0; }
.hint p { margin: 6px 0 0; }
.practice-done { margin: 4px 0 0; font-weight: 600; color: var(--link); }

.lesson-nav { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .course-hero-art *, .module-badge * { animation: none !important; } }

/* =====================================================================
   App sidebar (course + lesson pages), Duolingo-style
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  flex: none; width: 256px; box-sizing: border-box;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px; background: var(--surface); border-right: 2px solid var(--line);
}
.side-brand { padding: 6px 12px 10px; font-size: 28px; color: var(--ink); }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-item {
  display: flex; align-items: center; gap: 18px;
  min-height: 52px; padding: 6px 14px;
  font-family: Nunito, "Space Grotesk", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  border: 2px solid transparent; border-radius: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.side-item:hover { background: var(--tint-soft); color: var(--ink); }
.side-item[aria-current="page"] { background: var(--tint); border-color: #9CC2F5; color: var(--link); }
.side-item:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 2px; }
.side-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.side-theme { margin-top: auto; }
.side-logout { margin-top: 0; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main > main { flex: 1; }

/* "Coming soon" toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 12px; background: #14171F; color: #fff;
  font-weight: 600; box-shadow: 0 12px 30px -10px rgba(20, 23, 31, .5);
}

/* Narrow laptops: icons only */
@media (max-width: 1100px) {
  .app-sidebar { width: 88px; padding: 24px 12px; align-items: center; }
  .side-brand span, .side-label { display: none; }
  .side-brand { padding: 6px 0 10px; }
  .side-item { justify-content: center; padding: 6px; width: 56px; }
}
/* Phones: bottom tab bar */
@media (max-width: 700px) {
  .app-shell { display: block; }
  .app-sidebar {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 68px; padding: 6px 8px;
    flex-direction: row; justify-content: space-around; align-items: center; gap: 0;
    border-right: 0; border-top: 2px solid var(--line);
  }
  .side-brand, .side-logout { display: none; }
  .side-nav { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .side-item { width: 52px; min-height: 52px; }
  .app-main { padding-bottom: 72px; }
  .toast { bottom: 88px; }
}

/* Text on pastel panels stays dark in the night theme */
.course-hero, .pill, .answer, .module-badge { color: #14171F; }
:root[data-theme="dark"] .footer { border-top-color: var(--line); }
:root[data-theme="dark"] .toast { background: #ECEEF3; color: #14171F; }
:root[data-theme="dark"] .window { box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .side-icon svg [stroke="#7A808C"] { stroke: #A4AABA; }

/* Day / night toggle */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: var(--tint-soft); border-color: #9CC2F5; }
.theme-toggle:focus-visible { outline: 3px solid #9CC2F5; outline-offset: 2px; }
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon,
.side-theme .icon-sun, :root[data-theme="dark"] .side-theme .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun, :root[data-theme="dark"] .side-theme .icon-sun { display: block; }
.side-theme { width: 100%; background: none; cursor: pointer; }

/* Night versions of the green course banner */
:root[data-theme="dark"] .course-hero { background: #1D2912; color: #EEF7E2; }
:root[data-theme="dark"] .course-tagline, :root[data-theme="dark"] .course-progress { color: #C9DCB0; }
:root[data-theme="dark"] .progress-bar { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .course-hero-art .alg-beam rect, :root[data-theme="dark"] .course-hero-art path[fill="#2F5A06"],
:root[data-theme="dark"] .course-hero-art rect[fill="#2F5A06"], :root[data-theme="dark"] .course-hero-art circle[fill="#2F5A06"] { filter: brightness(1.6); }

/* =====================================================================
   Sign-in forms inside the popup
   ===================================================================== */
.auth-view[hidden] { display: none; }
.auth-flow { display: flex; flex-direction: column; gap: 12px; }
.auth-back, .auth-link {
  align-self: flex-start; padding: 6px 0; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--link); background: none; border: 0; cursor: pointer;
}
.auth-back:hover, .auth-link:hover { text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form label, .auth-dob legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"],
.auth-form input[type="tel"], .auth-form input[inputmode="numeric"], .auth-form select {
  height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; width: 100%; box-sizing: border-box;
}
.auth-form input:focus, .auth-form select:focus { outline: 3px solid #9CC2F5; outline-offset: 1px; border-color: var(--brand); }
.auth-form input + label, .pw-row + label, .pw-row + .auth-hint, .pw-row + .auth-link { margin-top: 6px; }
.pw-row { display: flex; gap: 8px; }
.pw-row input { flex: 1; min-width: 0; }
.pw-toggle {
  flex: none; padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--link);
  background: var(--tint-soft); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
}
.auth-hint { margin: 0; font-size: 13px; color: var(--muted); }
.auth-error { margin: 4px 0 0; min-height: 0; font-size: 14px; font-weight: 500; color: var(--bad); }
.auth-error:empty { display: none; }
.auth-done { margin: 0; font-size: 14px; font-weight: 500; color: var(--ok); }
.auth-done:empty { display: none; }
.auth-submit { margin-top: 8px; width: 100%; }
.auth-switch { margin: 0; font-size: 14px; color: var(--muted); }
.auth-switch .auth-link { display: inline; padding: 0 2px; }
.auth-stack { display: flex; flex-direction: column; gap: 10px; }
.auth-stack .btn { width: 100%; }
.auth-dob { border: 0; padding: 0; margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.auth-dob legend { margin-bottom: 8px; padding: 0; }
.auth-dob select { flex: 1 1 140px; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-weight: 500 !important; line-height: 1.45; }
.auth-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.auth-check a { color: var(--link); }
button.btn[disabled] { opacity: .6; cursor: progress; }

/* Pages that need an account stay hidden until the sign-in check finishes */
.auth-checking body { visibility: hidden; }
.auth-banner {
  margin: 0; padding: 10px 16px; text-align: center; font-size: 14px; font-weight: 600;
  background: #FFF4D6; color: #6B4A00; border-bottom: 1px solid #F2DFA6;
}
:root[data-theme="dark"] .auth-banner { background: #2E2510; color: #F5D88A; border-color: #4A3B14; }

/* =====================================================================
   Profile page (account.html)
   ===================================================================== */
.account-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; display: flex; flex-direction: column; gap: 20px; }
.account-head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.account-head h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 36px; letter-spacing: -0.02em; }
.account-avatar {
  flex: none; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #2E74DE 0%, var(--brand) 100%);
}
.account-sub { margin: 4px 0 0; color: var(--muted); }
.account-card { padding: 22px 24px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); }
.account-card h2 { margin: 0 0 14px; font-family: "Space Grotesk", sans-serif; font-size: 20px; }
.account-card p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }
.account-form { display: flex; flex-direction: column; gap: 8px; }
.account-form label { font-size: 14px; font-weight: 600; }
.account-form input {
  height: 44px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 10px; min-width: 0;
}
.account-form input:focus { outline: 3px solid #9CC2F5; outline-offset: 1px; border-color: var(--brand); }
.account-row { display: flex; gap: 10px; flex-wrap: wrap; }
.account-row input { flex: 1 1 220px; }
.account-msg { margin: 0; font-size: 14px; font-weight: 500; color: var(--ok); }
.account-msg.error { color: var(--bad); }
.account-msg:empty { display: none; }
.account-facts { margin: 18px 0 0; display: grid; gap: 12px; }
.account-facts div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.account-facts dt { width: 140px; color: var(--muted); font-size: 14px; }
.account-facts dd { margin: 0; font-weight: 500; }
.badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: #FFF4D6; color: #6B4A00; }
.account-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.account-line + .account-line { border-top: 1px solid var(--line); }
.account-line p { margin: 2px 0 0; font-size: 14px; }
.account-small { font-size: 14px; }
.account-small a, .account-card a { color: var(--link); }
.account-card.danger { border-color: #F2C4C4; }
:root[data-theme="dark"] .account-card.danger { border-color: #5A2A2C; }
.btn-danger { color: #fff; background: #C93636; border: 0; cursor: pointer; }
.btn-danger:hover { background: #A82B2B; }

/* =====================================================================
   Legal pages (privacy.html, terms.html)
   ===================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 24px 96px; line-height: 1.65; }
.legal h1 { margin: 12px 0 4px; font-family: "Space Grotesk", sans-serif; font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.02em; }
.legal h2 { margin: 36px 0 8px; font-family: "Space Grotesk", sans-serif; font-size: 22px; }
.legal h3 { margin: 20px 0 6px; font-size: 17px; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--link); }
.legal-updated { color: var(--muted) !important; }
.legal-draft { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FFF4D6; color: #6B4A00 !important; font-size: 14px; }
:root[data-theme="dark"] .legal-draft { background: #2E2510; color: #F5D88A !important; }

/* ---------- Coming-soon views (Practice, Pro, Flashcards, Pomodoro) ---------- */
#view:focus { outline: none; }
.soon-page { max-width: 640px; margin: 0 auto; padding: 56px 24px 96px; }
.soon-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 40px 32px 36px; border: 1.5px solid var(--line); border-radius: 24px; background: var(--surface);
}
.soon-icon { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 28px; background: var(--tint); }
.soon-icon svg { width: 72px; height: 72px; }
.soon-badge {
  padding: 4px 12px; border-radius: 999px; background: var(--soft); color: var(--brand);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
:root[data-theme="dark"] .soon-badge { background: var(--tint); color: var(--ink); }
.soon-card h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 34px; line-height: 1.15; }
.soon-lead { margin: 0; max-width: 440px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.soon-points { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.soon-points li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; }
.soon-points li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
@media (max-width: 640px) {
  .soon-page { padding: 24px 16px 96px; }
  .soon-card { padding: 32px 20px 28px; }
  .soon-card h1 { font-size: 28px; }
}