:root {
  color-scheme: light;
  --ink: #253047;
  --violet: #7654e8;
  --teal: #11866a;
  --coral: #d95f48;
}
html { scroll-behavior: smooth; }
body { font-family: Nunito, ui-sans-serif, system-ui, sans-serif; }
body { background-color: #f8f8fc; color: var(--ink); }
a, button, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7654e8; outline-offset: 3px; }
.prose-copy p { line-height: 1.8; }
.key-term { padding: 0 .14em; border-radius: .28em; font-weight: 900; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.key-tone-0 { background: #e0f2fe; color: #075985; }
.key-tone-1 { background: #dcfce7; color: #166534; }
.key-tone-2 { background: #ffedd5; color: #9a3412; }
.key-tone-3 { background: #ede9fe; color: #5b21b6; }
.key-tone-4 { background: #fce7f3; color: #9d174d; }
.quiz-option:has(input:checked) { border-color: #7654e8; background: #f2efff; box-shadow: 0 0 0 2px #7654e822; }
.svg-wrap svg { display: block; width: 100%; height: auto; max-height: 28rem; }
.topic-illustration { display: block; width: 100%; height: auto; max-height: 24rem; margin-inline: auto; border-radius: 1rem; background: #fff; object-fit: contain; }
.image-credit { margin-top: .65rem; color: #64748b; font-size: .75rem; line-height: 1.5; }
.site-header { border-color: transparent; background: #fff; background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #fca5a5, #fcd34d, #86efac, #67e8f9, #c4b5fd); background-origin: border-box; background-clip: padding-box, border-box; }
.brand-logo { background: linear-gradient(145deg, #f97316, #ec4899 55%, #8b5cf6); box-shadow: 0 7px 16px #ec489933; }
.brand-name { color: #7654e8; }
.site-footer { border-color: #e8e5f3; background: #fff; color: #696b7d; }
.site-footer span { color: #f59e0b; }
.login-scene { position: relative; overflow: hidden; background: radial-gradient(ellipse at 12% 10%, #fde68a 0, transparent 27%), radial-gradient(ellipse at 88% 18%, #fbcfe8 0, transparent 29%), radial-gradient(ellipse at 12% 88%, #a5f3fc 0, transparent 30%), linear-gradient(135deg, #ede9fe, #fff7ed 54%, #e0f2fe); }
.login-scene::before, .login-scene::after { position: absolute; border-radius: 9999px; content: ""; pointer-events: none; }
.login-scene::before { top: -8rem; right: 9%; width: 17rem; height: 17rem; border: 2rem solid #f9731620; }
.login-scene::after { bottom: -7rem; left: 8%; width: 15rem; height: 15rem; background: #8b5cf618; }
.login-card { position: relative; overflow: hidden; border-color: #ffffffc9; background: #ffffffed; box-shadow: 0 28px 70px -30px #57478b55; backdrop-filter: blur(14px); }
.login-sparkles { position: absolute; top: 1.2rem; right: 1.5rem; display: flex; align-items: center; gap: .65rem; color: #f97316; }
.login-sparkles span:nth-child(2) { color: #ec4899; font-size: 1.5rem; }
.login-sparkles span:nth-child(3) { color: #14b8a6; font-size: .8rem; }
.login-logo { background: linear-gradient(145deg, #f97316, #ec4899 55%, #8b5cf6); }
.login-button { background: linear-gradient(100deg, #7c3aed, #db4f9d 55%, #f97316); box-shadow: 0 9px 20px #a855f244; }
.login-button:hover { filter: saturate(1.2) brightness(.96); }
.home-hero { isolation: isolate; background: linear-gradient(115deg, #5334bd 0%, #7848db 47%, #148ba0 100%); box-shadow: 0 22px 46px -25px #4832a766; }
.home-hero::before, .home-hero::after { position: absolute; z-index: -1; border-radius: 9999px; content: ""; pointer-events: none; }
.home-hero::before { top: -8rem; right: 1%; width: 23rem; height: 23rem; border: 3.5rem solid #fff2; }
.home-hero::after { right: 29%; bottom: -10rem; width: 18rem; height: 18rem; background: #fde04722; }
.hero-decoration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-decoration span { position: absolute; color: #fde68a; font-size: 2rem; }
.hero-decoration span:first-child { top: 17%; right: 15%; }
.hero-decoration span:nth-child(2) { top: 55%; right: 7%; color: #a5f3fc; font-size: 1rem; }
.hero-decoration span:last-child { right: 34%; bottom: 10%; color: #fbcfe8; }
.hero-kicker { background: #ffffff27; color: #fff8d8; }
.hero-stat { box-shadow: 0 6px 16px #27204a26; }
.hero-stat-lime { background: #d9f99d; color: #365314; }
.hero-stat-peach { background: #fed7aa; color: #7c2d12; }
.hero-stat-sky { background: #bae6fd; color: #164e63; }
.subject-card { position: relative; isolation: isolate; overflow: hidden; border-color: #ffffff; }
.subject-card::after { position: absolute; z-index: -1; top: -2rem; right: -2rem; width: 11rem; height: 11rem; border: 1.8rem solid #ffffff72; border-radius: 9999px; content: ""; transition: transform .3s ease; }
.subject-card:hover::after { transform: scale(1.12) rotate(12deg); }
.subject-card > * { position: relative; }
.subject-card-ipa { background: linear-gradient(135deg, #d9f99d, #99f6e4 52%, #bae6fd); }
.subject-card-ips { background: linear-gradient(135deg, #fed7aa, #fbcfe8 54%, #fde68a); }
.subject-card-ipa .subject-icon { background: linear-gradient(145deg, #65a30d, #0d9488); box-shadow: 0 8px 18px #0f766e33; }
.subject-card-ips .subject-icon { background: linear-gradient(145deg, #f97316, #db2777); box-shadow: 0 8px 18px #db277733; }
.subject-card-ipa .subject-count { background: #ffffffbb; color: #166534; }
.subject-card-ips .subject-count { background: #ffffffbb; color: #9a3412; }
.subject-card-ipa h3 { color: #14532d; }
.subject-card-ips h3 { color: #7c2d12; }
.subject-intro { box-shadow: 0 12px 30px -20px #33415555; }
.subject-intro-ipa { background: linear-gradient(115deg, #d9f99d, #a7f3d0 50%, #bae6fd); }
.subject-intro-ipa > p:first-child { color: #166534; }
.subject-intro-ips { background: linear-gradient(115deg, #fed7aa, #fbcfe8 54%, #fde68a); }
.subject-intro-ips > p:first-child { color: #9a3412; }
.topic-group { padding: 1rem; border: 1px solid #e7e5ee; border-radius: 1.5rem; background: #ffffffc9; box-shadow: 0 10px 28px -24px #344054; }
.group-mark { box-shadow: 0 5px 12px #3341552b; }
.group-palette-0 .group-mark { background: #0f9f8f; }
.group-palette-1 .group-mark { background: #e98b2a; }
.group-palette-2 .group-mark { background: #7654e8; }
.group-palette-3 .group-mark { background: #ec5f78; }
.group-palette-4 .group-mark { background: #3a82c4; }
.group-palette-5 .group-mark { background: #79a832; }
.topic-card { border-color: #ffffff; transition: transform .18s ease, box-shadow .18s ease; }
.topic-number { box-shadow: inset 0 0 0 1px #ffffffaa; }
.syllabus-count { background: #fef3c7; color: #854d0e; }
.topic-tone-0 { background: #e0f2fe; }
.topic-tone-0 .topic-number { background: #bae6fd; color: #075985; }
.topic-tone-1 { background: #dcfce7; }
.topic-tone-1 .topic-number { background: #bbf7d0; color: #166534; }
.topic-tone-2 { background: #fef3c7; }
.topic-tone-2 .topic-number { background: #fde68a; color: #92400e; }
.topic-tone-3 { background: #fce7f3; }
.topic-tone-3 .topic-number { background: #fbcfe8; color: #9d174d; }
.topic-tone-4 { background: #ede9fe; }
.topic-tone-4 .topic-number { background: #ddd6fe; color: #5b21b6; }
.topic-tone-5 { background: #ffe4d6; }
.topic-tone-5 .topic-number { background: #fed7aa; color: #9a3412; }
.topic-hero { isolation: isolate; color: #253047; box-shadow: 0 14px 34px -22px #34405477; }
.topic-hero::before { position: absolute; z-index: -1; top: -5rem; right: -3rem; width: 16rem; height: 16rem; border: 2rem solid #ffffff65; border-radius: 9999px; content: ""; }
.topic-hero-ipa { background: linear-gradient(120deg, #d9f99d, #99f6e4 55%, #bfdbfe); }
.topic-hero-ipa > span:first-of-type { color: #166534; }
.topic-hero-ips { background: linear-gradient(120deg, #fed7aa, #fbcfe8 55%, #fde68a); }
.topic-hero-ips > span:first-of-type { color: #9a3412; }
.topic-hero-orbit { position: absolute; top: 1.1rem; right: 1.5rem; color: #fff; font-size: 2.6rem; }
.topic-section-nav { border-color: #e6e1f2; background-color: #ffffffed; }
.topic-section-nav a:hover { background: #f2efff; color: #5b21b6; }
.topic-section h2 { color: #443477; }
.format-panel { border-color: #c7d2fe; background: linear-gradient(110deg, #eef2ff, #fdf2f8 56%, #fff7ed); }
.format-icon { background: linear-gradient(145deg, #fde68a, #fbcfe8); }
.lesson-panel { border-color: #c7e9ed; background: linear-gradient(145deg, #ffffff, #effcff); }
.lesson-panel h3 { color: #0f766e; }
.visual-panel { border-color: #f4d5e6; background: linear-gradient(145deg, #fff, #fff3f8); }
.visual-panel h3 { color: #a21caf; }
.summary-panel { background: linear-gradient(145deg, #fef3c7, #ffedd5); }
.terms-panel { background: linear-gradient(145deg, #e0e7ff, #f3e8ff); }
.terms-panel dt { color: #5b21b6; }
.quiz-question { min-width: 0; margin: 0; border-color: #e5def5; background: linear-gradient(145deg, #fff, #faf8ff); }
.quiz-question-prompt { display: block; width: 100%; overflow-wrap: anywhere; }
.quiz-question:nth-child(4n+1) { border-left: 4px solid #a78bfa; }
.quiz-question:nth-child(4n+2) { border-left: 4px solid #2dd4bf; }
.quiz-question:nth-child(4n+3) { border-left: 4px solid #fb923c; }
.quiz-question:nth-child(4n) { border-left: 4px solid #f472b6; }
.quiz-option { border-color: #e7e5ee; background: #ffffffc9; }
.quiz-option > span > span:first-child { display: inline-grid; min-width: 1.45rem; height: 1.45rem; place-items: center; border-radius: .5rem; background: #ede9fe; color: #5b21b6; font-size: .8rem; }
.essay-card { border-color: #f4d9bd; background: linear-gradient(145deg, #fff, #fff8ed); }
.essay-card:nth-child(even) { border-color: #f2d4e7; background: linear-gradient(145deg, #fff, #fff4fa); }
.essay-toggle { border: 1px solid #8b5cf6; background: #f3e8ff; color: #5b21b6; }
.essay-toggle:hover { background: #e9d5ff; }
.essay-answer { background: #dcfce7; }
.quiz-result-panel { border-color: #ddd6fe; }
@media (max-width: 639px) {
  .hero-decoration span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}