: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;
}

* { 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;
  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(--brand); }
.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(--brand); }
.btn-soft:hover { background: #D6E5FA; }

/* 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(--brand); 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: #fff;
  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: #E2E0D9; }
.window-body { display: flex; flex-wrap: wrap; }
.sidebar {
  flex: 1 1 200px;
  background: #F8F7F4;
  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: #EFEDE7; }
.sidebar a.active { background: #fff; 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: #F8F7F4; 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(--brand); 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: #fff;
  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: #fff;
  border: 1.5px solid #D9D7D0; 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: #F6F9FF; }
.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(--brand); font-weight: 500; }
.auth-legal { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.auth-legal a { color: var(--brand); 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: #fff; color: var(--ink); border: 0; cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(20, 23, 31, .35);
}
.auth-close:hover { background: #F2F2EF; }

@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 */
.brand:hover .zo-logo { transform: rotate(-8deg) scale(1.08); }

/* 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(--brand); }

/* 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(--brand); }

/* 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(--brand); 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: #EEF4FE; color: var(--brand);
  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: #EEF4FE; color: var(--brand); 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) {
  .brand:hover .zo-logo, .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; }
.zo-logo .zo-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: zo-blink 4.5s ease-in-out infinite; }
@keyframes zo-blink { 0%, 88%, 100% { transform: scaleY(1); } 91% { transform: scaleY(0.08); } 94% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .zo-logo .zo-eye { 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(--brand); }

.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: #fff; 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, #E8F1FE 0%, #D4E5FC 100%);
  box-shadow: 0 0 0 4px #E8F0FC, 0 14px 28px -16px rgba(31, 95, 200, .55);
}
.course[aria-pressed="true"] p { color: #3B4A66; }
.course[aria-pressed="true"] .mono { color: var(--brand); }
.course[aria-pressed="true"] .course-icon.join { background: #fff; }
.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(--brand);
}
.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(--brand); }


.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(--brand); }
.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%; }
.course:hover .alg-beam { animation: alg-tip 1.6s ease-in-out infinite; }
.course:hover .alg-eq { animation: alg-pop 1.6s ease-in-out infinite; }
@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.5978); }
.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.0010); } 2.000% { transform: scaleX(0.0236); } 4.000% { transform: scaleX(0.0473); } 6.000% { transform: scaleX(0.0709); } 8.000% { transform: scaleX(0.0946); } 10.000% { transform: scaleX(0.1182); } 12.000% { transform: scaleX(0.1418); } 14.000% { transform: scaleX(0.1655); } 16.000% { transform: scaleX(0.1891); } 18.000% { transform: scaleX(0.2128); } 20.000% { transform: scaleX(0.2364); } 22.000% { transform: scaleX(0.2601); } 24.000% { transform: scaleX(0.2837); } 26.000% { transform: scaleX(0.3073); } 28.000% { transform: scaleX(0.3310); } 30.000% { transform: scaleX(0.3546); } 32.000% { transform: scaleX(0.3783); } 34.000% { transform: scaleX(0.4019); } 36.000% { transform: scaleX(0.4255); } 38.000% { transform: scaleX(0.4492); } 40.000% { transform: scaleX(0.4728); } 42.000% { transform: scaleX(0.4965); } 44.000% { transform: scaleX(0.5201); } 46.000% { transform: scaleX(0.5438); } 48.000% { transform: scaleX(0.5674); } 50.000% { transform: scaleX(0.5910); } 52.000% { transform: scaleX(0.6147); } 54.000% { transform: scaleX(0.6383); } 56.000% { transform: scaleX(0.6620); } 58.000% { transform: scaleX(0.6856); } 60.000% { transform: scaleX(0.7092); } 62.000% { transform: scaleX(0.7329); } 64.000% { transform: scaleX(0.7565); } 66.000% { transform: scaleX(0.7802); } 68.000% { transform: scaleX(0.8038); } 70.000% { transform: scaleX(0.8274); } 72.000% { transform: scaleX(0.8511); } 74.000% { transform: scaleX(0.8747); } 76.000% { transform: scaleX(0.8984); } 78.000% { transform: scaleX(0.9220); } 80.000% { transform: scaleX(0.9457); } 100% { transform: scaleX(0.9457); } }
@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); } }
@media (prefers-reduced-motion: reduce) { .course:hover * { animation: none !important; } }