/* Dimensional cartoon presentation: raised surfaces, pastel color, and soft light. */
:root {
  --ink: #24334d;
  --blue: #385d9c;
  --orange: #a64130;
  --gold: #f5bf43;
  --soft: #eef3ff;
  --line: #ccd4e5;
  --muted: #58667b;
  --paper: #fffdf6;
  --cream: #fff3d4;
}
body,
.competition-page,
.club-page {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
}
.site-header,
.simple-header,
.club-header,
.algebra-header {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  border-bottom: 2px solid #24334d;
  box-shadow: none;
}
.announcement,
.algebra-announcement {
  background: #385d9c;
}
.announcement span {
  color: #fff1b5;
}
.button,
.club-button,
.a-button {
  background: linear-gradient(165deg, #ffe59a 0%, #ffd365 45%, #efb63b 100%);
  color: #24334d;
  border: 1px solid #66758e;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 #fff8,
    inset 0 -2px 0 #b1782220,
    0 5px 0 #ab7c30,
    0 10px 16px #77562a26;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.button:hover,
.club-button:hover,
.a-button:hover {
  background: linear-gradient(165deg, #fff0b5, #ffdb7a 50%, #f6c44d);
  color: #24334d;
  border-color: #24334d;
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 #fff9,
    0 7px 0 #ab7c30,
    0 14px 20px #77562a2b;
}
.button:active,
.club-button:active,
.a-button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 3px #77562a20,
    0 1px 0 #ab7c30,
    0 3px 5px #77562a1a;
}
.login-button,
.subject-jump a,
.hero-facts span {
  border-radius: 12px;
}
:where(a, button, summary):focus-visible {
  outline: 3px solid #3864ab;
  outline-offset: 5px;
}
.hero,
.page-hero,
.content-hero,
.science-hero,
.school-hero {
  background-color: #eef3ff;
  background-image: radial-gradient(#cbd8f0 1px, transparent 1px);
  background-size: 24px 24px;
  color: #24334d;
  border-bottom: 2px solid #24334d;
}
.hero {
  position: relative;
}
.hero-copy,
.hero-visual {
  z-index: 1;
}
.hero::after {
  content: "";
  position: absolute;
  width: 95px;
  height: 95px;
  right: 4%;
  top: 26px;
  border: 18px solid #f7cf68;
  border-top-color: #ffe9a4;
  border-left-color: #ffdc82;
  border-bottom-color: #d9a644;
  border-right-color: #e9b951;
  border-radius: 50%;
  box-shadow:
    inset 2px 3px 5px #8c6a2620,
    2px 5px 0 #bd934337,
    5px 12px 18px #8c6a2626;
  pointer-events: none;
}
.page-hero::after {
  border-color: #d6c9f4;
  border-width: 50px;
}
.hero h1,
.page-hero h1,
.content-hero h1,
.school-hero h1,
.competition-hero h1,
.v2-heading h2,
.section-heading h2,
.page-intro h2,
.program-copy h2,
.method h2,
.trial h2,
.page-cta h2,
.club-page h1,
.club-page h2,
.algebra-page h1,
.algebra-page h2 {
  font-family: "Trebuchet MS", "DM Sans", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.hero h1 {
  font-size: clamp(38px, 4.1vw, 58px);
}
.school-hero h1 {
  font-size: clamp(40px, 5.5vw, 76px);
}
.hero .highlight {
  color: #3a609b;
  text-decoration: underline;
  text-decoration-color: #f5bf43;
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
}
.hero .home-hero-title {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.22;
  letter-spacing: -0.035em;
}
.hero .hero-lead {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.8;
}
.v2-heading h2 {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.v2-five {
  row-gap: 16px;
}
.v2-five article {
  box-shadow:
    inset 0 2px 0 #fffc,
    0 4px 0 #c4cddd,
    0 10px 16px -7px #35425b33;
}
.v2-five b {
  font-size: 12px;
  font-weight: 600;
}
.brand-footer .brand-logo {
  width: 130px;
  border-radius: 12px;
}
.home-hero-title .hero-title-intro {
  display: block;
  text-wrap: balance;
}
.hero .home-hero-title .highlight {
  display: block;
  margin-top: 0.12em;
  text-decoration: none;
}
.home-hero-title .hero-title-phrase {
  display: inline-block;
  white-space: nowrap;
}
.hero .home-hero-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 22px;
  border-radius: 5px;
  background: #edc978;
}
@media (min-width: 1251px) {
  .hero:has(.home-hero-title) {
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.95fr);
    gap: 48px;
  }
  .hero:has(.home-hero-title) .hero-copy {
    max-width: none;
  }
}
@media (max-width: 620px) {
  .hero .home-hero-title {
    font-size: clamp(30px, 8.3vw, 40px);
  }
}
.hero .eyebrow,
.page-hero .kicker,
.content-hero .kicker {
  color: #385d9c;
}
.hero-lead,
.hero .hero-lead {
  color: #4e607b;
}
.problem-card,
.club-notebook,
.school-hero aside {
  border: 1px solid #66758e;
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 #c4b3ea33,
    0 7px 0 #b6a5d7,
    0 14px 18px #35425b1a,
    0 28px 42px -16px #35425b38;
}
.problem-card {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  padding: 30px;
  transform: rotate(1deg);
}
.problem-top {
  border-bottom: 2px dashed #bac6dc;
  font-weight: 800;
}
.problem-top b {
  color: #87513a;
  background: #ffe4a2;
  border-radius: 8px;
  padding: 0 6px;
}
.problem-card h2 {
  font-family: "Trebuchet MS", "DM Sans", Arial, sans-serif;
  line-height: 1.55;
}
.problem-label {
  color: #385d9c;
}
.problem-foot strong {
  border-radius: 50%;
  background: #385d9c;
}
.answer-row span {
  border: 2px solid #bfcee4;
  border-radius: 10px;
  background: linear-gradient(155deg, #f7faff, #edf3ff 55%, #d6e3f8);
}
.answer-row span:nth-child(2n) {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
  border-color: #ddc379;
}
.problem-note {
  position: static;
  width: fit-content;
  margin: 24px auto 0;
  padding: 10px 16px;
  background: linear-gradient(160deg, #fff1bb, #ffe59c 60%, #efcc75);
  color: #24334d;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #66758e;
  border-radius: 10px;
  transform: rotate(-2deg);
}
.club-notebook {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
}
.problem-note {
  box-shadow:
    inset 0 1px 0 #fff9,
    0 3px 0 #d7b55f,
    0 8px 12px -4px #8c6a2633;
}
.answer-row span {
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #c2cfe2,
    0 4px 6px #35425b0a;
}
.answer-row span:nth-child(2n) {
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #d7c086,
    0 4px 6px #35425b0a;
}
.stats,
.programs,
.bookstore {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
}
.stats strong {
  color: #385d9c;
}
.v2-programs,
.method,
.stories,
.program-band,
.home-club {
  background: #eef5ef;
}
.program-band.light,
.trial,
.page-cta,
.club-closing {
  background: #fff1d1;
}
.program-band.dark {
  background: #24334d;
}
.program-card,
.book-card,
.story-grid blockquote,
.info-card,
.content-grid article,
.pathway-cards a,
.v2-program-grid a,
.course-card,
.level-pathway article,
.two-column-details article,
.club-duo article {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  border: 1px solid #66758e;
  border-radius: 20px;
  box-shadow:
    inset 0 2px 0 #fff9,
    0 4px 0 #bcc9df,
    0 10px 18px -5px #35425b26;
}
.v2-program-grid a:nth-child(2n),
.pathway-cards a:nth-child(2n),
.content-grid article:nth-child(2n) {
  background: linear-gradient(155deg, #fbf6ff, #f2eaff 55%, #ded0f2);
}
.v2-program-grid a:nth-child(2n + 1),
.pathway-cards a:nth-child(2n + 1) {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
}
.program-card:hover,
.book-card:hover,
.info-card:hover,
.pathway-cards a:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 #fff9,
    0 5px 0 #bcc9df,
    0 17px 24px -7px #35425b30;
}
.v2-five {
  gap: 12px;
}
.v2-five article,
.v2-five article:last-child {
  background: linear-gradient(155deg, #f7faff, #edf3ff 55%, #d6e3f8);
  border: 1px solid #66758e;
  border-radius: 18px;
  padding: 22px 16px;
}
.v2-five article:nth-child(2) {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
}
.v2-five article:nth-child(3) {
  background: linear-gradient(155deg, #fbf6ff, #f2eaff 55%, #ded0f2);
}
.v2-five article:nth-child(4) {
  background: linear-gradient(155deg, #f3fff4, #e6f3e9 55%, #cce3d1);
}
.v2-five article:nth-child(5) {
  background: linear-gradient(155deg, #fff8f0, #ffede3 55%, #efd3c5);
}
.v2-five b {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #66758e;
  border-radius: 50%;
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  color: #24334d;
}
.v2-program-grid span,
.v2-program-grid b,
.pathway-cards span {
  color: #385d9c;
}
.v2-program-grid h3,
.v2-five h3,
.content-grid h2,
.info-card h3 {
  font-family: "Trebuchet MS", "DM Sans", Arial, sans-serif;
}
.trial-form,
.inquiry-form,
.account-login {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  border: 1px solid #66758e;
  border-radius: 18px;
}
.trial-form input,
.trial-form select,
.inquiry-form textarea {
  border-radius: 9px;
}
.trial-points span {
  background: #ffe39a;
  border-radius: 10px;
}
.site-footer,
.simple-footer {
  background: #eef3ff;
  border-top: 2px solid #24334d;
}
@media (max-width: 1250px) {
  .site-header .main-nav {
    background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
    border-bottom: 2px solid #24334d;
  }
}
@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(34px, 9vw, 44px);
    letter-spacing: -0.035em;
  }
  .hero::after {
    width: 52px;
    height: 52px;
    border-width: 10px;
    right: 15px;
    top: 15px;
    opacity: 0.6;
  }
  .problem-card {
    padding: 21px;
    transform: none;
    box-shadow:
      inset 0 2px 0 #fff9,
      0 5px 0 #b6a5d7,
      0 12px 20px -4px #35425b26;
  }
  .problem-note {
    display: block;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .club-button,
  .a-button,
  .program-card,
  .book-card,
  .info-card,
  .pathway-cards a {
    transition: none;
  }
}

/* Standalone course, competition, account, shop, and staff components. */
body.playful-site {
  background-color: #fffdf6;
}
body.playful-site :is(h1, h2, h3) {
  font-family: "Trebuchet MS", "DM Sans", Arial, sans-serif;
}
.course-header {
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  border-bottom: 2px solid #24334d;
}
.course-hero,
.store-hero,
.competition-hero,
.algebra-hero,
.club-hero {
  background-color: #eef3ff;
  background-image: radial-gradient(#cbd8f0 1px, transparent 1px);
  background-size: 24px 24px;
  color: #24334d;
}
.competition-hero .kicker,
.competition-hero h1 em,
.competition-hero-link {
  color: #385d9c;
}
.competition-hero > div > p:not(.kicker) {
  color: #4e607b;
}
.competition-map {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
  color: #24334d;
  border: 1px solid #66758e;
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 #fff9,
    0 6px 0 #b6a5d7,
    0 16px 26px -5px #35425b29;
}
.competition-map > p,
.competition-map span {
  color: #755018;
}
.competition-map > div {
  border-color: #d7c48d;
}
.competition-map small {
  color: #4e607b;
}
.competition-jump,
.region-strip,
.course-footer,
.algebra-final,
.publisher-note {
  background: #fff1d1;
}
.competition-section.tinted,
.practice-section,
.club-mission,
.club-science,
.club-philosophy {
  background: #eef3ff;
}
.modeling-section,
.semester-section,
.club-pathways,
.club-community {
  background: #eaf5ed;
}
.private-support,
.alignment-section,
.club-small-group-classes {
  background: linear-gradient(155deg, #fbf6ff, #f2eaff 55%, #ded0f2);
}
.hero-study,
.study-paper,
.worked-example,
.alignment-form,
.unit-detail,
.sample-card,
.assessment-card,
.stage-grid article,
.contest-card,
.organizer-intro,
.cms-contests,
.schedule-card,
.confirmation-card,
.account-record,
.account-stats article,
.account-admin-grid > section,
.student-list article,
.admin-area-grid > a,
.login-card,
.overview article,
.setup-card,
.panel {
  border: 1px solid #66758e;
  border-radius: 20px;
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  box-shadow:
    inset 0 2px 0 #fff9,
    0 4px 0 #bcc9df,
    0 10px 18px -5px #35425b26;
}
.hero-study,
.stage-grid article:nth-child(3n + 1),
.account-stats article:nth-child(3n + 1) {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
}
.contest-card:nth-child(2n),
.stage-grid article:nth-child(3n + 2),
.account-stats article:nth-child(3n + 2) {
  background: linear-gradient(155deg, #fbf6ff, #f2eaff 55%, #ded0f2);
}
.stage-grid article:nth-child(3n),
.account-stats article:nth-child(3n) {
  background: #eaf5ed;
}
.lesson-card,
.preview-note,
.review-sidebar,
.common-mistake,
.next-review,
.catalog-filters,
.publisher-note,
.book-detail-cover,
.enrol-summary,
.placement-help {
  border-radius: 18px;
  background: #fff1d1;
  border: 1px solid #d9c895;
}
.contest-table-wrap,
.table-wrap {
  border: 1px solid #66758e;
  border-radius: 20px;
}
.contest-table thead th,
.table-wrap th {
  background: #e6edfc;
}
.course-switch a,
.unit-list button,
.skill-tags span,
.subject-filters button,
.view-switch,
.view-switch button,
.admin-navigation a,
.student-wrap button,
.record-badge {
  border-radius: 12px;
}
.unit-list button[aria-pressed="true"],
.course-switch a[aria-current="page"],
.subject-filters button[aria-pressed="true"],
.admin-navigation a[aria-current="page"] {
  background: #385d9c;
  color: #fff;
  border-color: #24334d;
}
.unit-list button:hover:not([aria-pressed="true"]),
.answer-option:hover {
  background: #eef3ff;
}
.answer-option {
  border-radius: 12px;
}
.answer-option:has(input:checked) {
  border-color: #385d9c;
  background: #e4edff;
}
.answer-option.correct-choice {
  background: #edf3ee;
}
.course-path span,
.hero-facts span,
.subject-jump a {
  border-radius: 12px;
}
.explorer-tabs button,
.tabs button {
  border-radius: 12px 12px 0 0;
}
.explorer-tabs button[aria-selected="true"],
.tabs button[aria-selected="true"] {
  background: linear-gradient(155deg, #fff8df, #fff1c7 55%, #f0dca2);
  color: #24334d;
}
.shop-page .button,
.school-hero .button,
.simple-header > .button,
.student-wrap button.button,
.student-wrap .register-button,
.admin-shell .primary,
.class-option button:not(:disabled),
.study-next {
  background: linear-gradient(165deg, #ffe59a 0%, #ffd365 45%, #efb63b 100%);
  color: #24334d;
  border: 1px solid #66758e;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 #fff8,
    inset 0 -2px 0 #b1782220,
    0 5px 0 #ab7c30,
    0 10px 16px #77562a26;
}
.shop-page .button:hover,
.school-hero .button:hover,
.simple-header > .button:hover,
.student-wrap button.button:hover,
.admin-shell .primary:hover,
.class-option button:not(:disabled):hover,
.study-next:hover {
  background: linear-gradient(165deg, #fff0b5, #ffdb7a 50%, #f6c44d);
  color: #24334d;
}
.a-button.outline,
.button.secondary,
.secondary-button {
  border: 1px solid #66758e;
  border-radius: 12px;
  background: #eef3ff;
  color: #24334d;
}
.catalog-card {
  border-radius: 20px;
}
.catalog-cover-link {
  border-radius: 20px 20px 0 0;
  background: linear-gradient(155deg, #fbf6ff, #f2eaff 55%, #ded0f2);
}
.course-card .meta span:first-child {
  border-radius: 8px;
}
.course-details summary {
  border-radius: 10px;
  background: #eef3ff;
}
.school-hero aside {
  background-color: #fff1c7;
  border-radius: 18px;
}
.playful-site
  :is(
    .a-form-grid,
    .student-wrap,
    .catalog-filters,
    .catalog-tools
  )
  :is(input, select, textarea) {
  border-radius: 10px;
}
.playful-site dialog {
  border-radius: 18px;
  border: 1px solid #66758e;
}
.admin-workspace {
  border: 1px solid #66758e;
  border-radius: 20px;
}
.admin-workspace-tabs {
  background: #eef3ff;
}
.playful-site button:disabled {
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .competition-map,
  .hero-study {
    box-shadow:
      inset 0 2px 0 #fff9,
      0 5px 0 #b6a5d7,
      0 12px 20px -4px #35425b26;
  }
}

/* A paper receipt treatment works for confirmed, pending, and error states. */
.registration-result-page {
  background:
    radial-gradient(ellipse at 15% 20%, #fff5dc, transparent 55%), #edf2f7;
  min-height: 100vh;
}
.registration-result-page .school-section {
  width: min(850px, 100%);
  min-height: 65vh;
  padding: 72px 28px;
}
.registration-result-page #confirmation {
  position: relative;
  padding: clamp(26px, 5vw, 52px);
  background: linear-gradient(155deg, #fffefa, #fffdf6 55%, #f6f1e5);
  border: 1px solid #66758e;
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 #fff9,
    0 6px 0 #b6a5d7,
    0 16px 26px -5px #35425b29;
}
.registration-result-page #confirmation::before {
  content: "";
  position: absolute;
  width: 84px;
  height: 26px;
  left: calc(50% - 42px);
  top: -14px;
  background: linear-gradient(160deg, #fff1bb, #ffe59c 60%, #efcc75);
  border: 1px solid #ddc379;
  transform: rotate(-4deg);
  pointer-events: none;
}
.registration-result-page #confirmation h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.registration-result-page #confirmation p {
  color: #58667b;
  line-height: 1.75;
}
.registration-result-page #confirmation button {
  padding: 12px 16px;
  border: 1px solid #bbc8d8;
  border-radius: 12px;
  background: linear-gradient(#fff, #edf2f8);
  color: #24334d;
  box-shadow: 0 2px 3px #24334d0d;
  cursor: pointer;
}
.registration-result-page #confirmation .record-actions {
  gap: 14px;
}
@media (max-width: 620px) {
  .registration-result-page .school-section {
    padding: 48px 20px;
  }
}

/* Shared homepage card palette across all pages. */
:root {
  --card-gold-light: #fff5df;
  --card-gold-base: #f5e4bd;
  --card-gold-edge: #c9ad77;
  --card-gold-accent: #99552f;
  --card-purple-light: #f2edfc;
  --card-purple-base: #e3daf5;
  --card-purple-edge: #b8a8d4;
  --card-purple-accent: #62528c;
  --card-blue-light: #edf4ff;
  --card-blue-base: #d6e5f7;
  --card-blue-edge: #9fb9d7;
  --card-blue-accent: #345e8c;
  --card-green-light: #e6f3e9;
  --card-green-base: #cce3d1;
  --card-green-edge: #a2c4ac;
  --card-green-accent: #356b52;
  --card-peach-light: #ffede3;
  --card-peach-base: #efd3c5;
  --card-peach-edge: #d3af9b;
  --card-peach-accent: #965139;
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ) {
  --surface-light: var(--card-gold-light);
  --surface-base: var(--card-gold-base);
  --surface-edge: var(--card-gold-edge);
  --surface-accent: var(--card-gold-accent);
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ):nth-child(5n + 2) {
  --surface-light: var(--card-purple-light);
  --surface-base: var(--card-purple-base);
  --surface-edge: var(--card-purple-edge);
  --surface-accent: var(--card-purple-accent);
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ):nth-child(5n + 3) {
  --surface-light: var(--card-blue-light);
  --surface-base: var(--card-blue-base);
  --surface-edge: var(--card-blue-edge);
  --surface-accent: var(--card-blue-accent);
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ):nth-child(5n + 4) {
  --surface-light: var(--card-green-light);
  --surface-base: var(--card-green-base);
  --surface-edge: var(--card-green-edge);
  --surface-accent: var(--card-green-accent);
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ):nth-child(5n + 5) {
  --surface-light: var(--card-peach-light);
  --surface-base: var(--card-peach-base);
  --surface-edge: var(--card-peach-edge);
  --surface-accent: var(--card-peach-accent);
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ) {
  background: linear-gradient(
    150deg,
    #fffefa 5%,
    var(--surface-light) 75%,
    var(--surface-base)
  );
  border-color: var(--surface-edge);
  box-shadow:
    inset 0 2px 0 #fffc,
    0 5px 0 var(--surface-edge),
    0 14px 22px -12px #24334d40;
}
body.playful-site
  :is(
    .program-card,
    .book-card,
    .story-grid blockquote,
    .info-card,
    .content-grid article,
    .pathway-cards > a,
    .v2-program-grid > a,
    .v2-five > article,
    .course-card,
    .level-pathway article,
    .two-column-details article,
    .club-duo article,
    .stage-grid article,
    .contest-card,
    .sample-card,
    .assessment-card,
    .schedule-card,
    .confirmation-card,
    .account-record,
    .account-stats article,
    .account-admin-grid > section,
    .student-list article,
    .admin-area-grid > a,
    .login-card,
    .registration-card,
    .overview article,
    .setup-card,
    .panel,
    .catalog-card,
    .hero-study,
    .worked-example,
    .unit-detail,
    .organizer-intro,
    .cms-contests,
    .school-hero aside
  ):hover {
  box-shadow:
    inset 0 2px 0 #fffc,
    0 5px 0 var(--surface-edge),
    0 19px 28px -12px #24334d40;
}
body.playful-site .home-pathways .program-card {
  --surface-light: var(--path-light);
  --surface-base: var(--path-base);
  --surface-edge: var(--path-edge);
}