/* Lightweight, non-interactive color and geometry; no background image download. */
body {
  min-height: 100vh;
  isolation: isolate;
  background: #eefaff;
}
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background:
    radial-gradient(ellipse at 0% 12%, #91e6ff 0%, #b5eeff90 22%, transparent 48%),
    radial-gradient(ellipse at 100% 0%, #ffe493 0%, #ffefb280 25%, transparent 53%),
    radial-gradient(ellipse at 100% 100%, #d5bbfa 0%, #e6d1fc80 27%, transparent 54%),
    radial-gradient(ellipse at 0% 100%, #b7f3d5 0%, transparent 46%),
    linear-gradient(130deg, #e9faff 0%, #fff7e7 48%, #fff0f7 100%);
}
body::after {
  z-index: -1;
  background-image:
    radial-gradient(circle at 12px 12px, #ffffffb3 3px, transparent 3.8px),
    radial-gradient(circle at 55px 85px, #00a8ca26 5px, transparent 5.8px),
    radial-gradient(circle at 120px 36px, transparent 8px, #ef91b333 9px, #ef91b333 11px, transparent 12px);
  background-size: 38px 38px, 234px 248px, 330px 290px;
}
.topbar {
  width: calc(100% - 48px);
  margin-top: 18px;
  padding: 16px 24px;
  background: #ffffffef;
  border: 2px solid white;
  border-radius: 25px;
  box-shadow: 0 5px 0 #59a7cd1c;
}
.grade-banner {
  border: 3px solid transparent;
  border-top-width: 6px;
  border-radius: 26px;
  padding: 22px 28px;
  background:
    linear-gradient(110deg, #ffffff, #fffdf4 55%, #f1fbff) padding-box,
    linear-gradient(95deg, #62caff, #76dbb2 30%, #ffe16f 60%, #efadce 80%, #c4a7ef) border-box;
  box-shadow: 0 6px 0 #7db0cf1c;
}
.intro {
  border: 3px solid white;
  background:
    radial-gradient(ellipse at 100% 0%, #7050d9 0%, transparent 57%),
    linear-gradient(115deg, #174bd2 0%, #2459d8 58%, #1378bd 100%);
  box-shadow: 0 7px 0 #539bc52e;
}
.intro::before {
  content: "";
  position: absolute;
  width: 290px;
  aspect-ratio: 1;
  border: 26px solid #ffffff0e;
  border-radius: 50%;
  right: -50px;
  top: -95px;
  pointer-events: none;
}
.intro > * { position: relative; }
.grade-card, .menu-illustrated .subject-card, .step {
  box-shadow: 0 6px 0 #62a0be26, 0 12px 26px #4172950a;
}
.menu-illustrated .subject-info {
  background: linear-gradient(180deg, #fff 0%, #f7fcff 100%);
}
.section-title {
  width: fit-content;
  max-width: 100%;
  padding: 12px 20px;
  border: 2px solid #ffffffed;
  border-radius: 20px;
  background: #fffffff0;
  gap: 18px;
}
.lesson-index {
  background: #fffffff2;
  padding: 18px 12px;
  border: 1px solid white;
  border-radius: 20px;
}
.lesson-panel, .unit-banner, .question, .assessment { background-color: #fff; }
footer {
  background: #fffffff0;
  border-top: 3px solid #a2deee;
  border-radius: 24px 24px 0 0;
}
@media (max-width: 600px) {
  .topbar { width: calc(100% - 24px); margin-top: 12px; padding: 14px 16px; border-radius: 21px; }
  .grade-banner { padding: 18px; border-radius: 22px; }
  .section-title { padding: 10px 14px; gap: 4px; }
  .lesson-index { padding: 10px 6px; }
  body::after { background-size: 46px 46px, 234px 248px, 330px 290px; opacity: .65; }
}
@media (forced-colors: active), print {
  body::before, body::after, .intro::before { display: none; }
  body { background: Canvas; }
  .topbar, .grade-banner, .intro, .section-title, .lesson-index,
  .menu-illustrated .subject-info, footer {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
}