.learn-page {
  position: relative;
  isolation: isolate;
  background: transparent;
  overflow-x: hidden;
  cursor: default;
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.learn-page *,
.learn-page *::before,
.learn-page *::after {
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.learn-page a,
.learn-page button {
  cursor: pointer;
}
.learn-page img,
.learn-page svg {
  -webkit-user-drag: none;
}

.learn-decor { display: none; }
.learn-bg-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.learn-bg-slice {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}
/* Top art nudged up (same as previous background-position) */
.learn-bg-top {
  z-index: 1;
  margin-top: -72px;
}
/* Each lower slice overlaps above the one before it */
.learn-bg-mid {
  z-index: 2;
  margin-top: -18%;
}
.learn-bg-bot {
  z-index: 3;
  margin-top: -18%;
}
/* Placeholder hills/flowers replaced by learn-bg stack */
.hill,
.flower {
  display: none;
}
.float-note {
  position: absolute;
  font-size: 28px;
  font-weight: 800;
  opacity: 0.55;
  text-shadow: 0 2px 0 rgb(255 255 255 / 0.4);
}
.note-sky-1 { top: 110px; left: 4%; color: #3db8d4; transform: rotate(-18deg); font-size: 42px; }
.note-sky-2 { top: 220px; left: 9%; color: #ffbf39; transform: rotate(12deg); font-size: 22px; }
.note-sky-3 { top: 160px; right: 7%; color: #8b6fd4; transform: rotate(16deg); font-size: 36px; }
.note-sky-4 { top: 320px; right: 11%; color: #34c37b; transform: rotate(-10deg); font-size: 24px; }

.wood-sign {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #e8c48a, #d4a56a);
  border: 3px solid #c48a4a;
  box-shadow: 4px 6px 0 rgb(120 70 20 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.35);
  color: #5a3310;
  font-family: 'Fredoka', 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -0.02em;
}
.sign-left-1 { top: 280px; left: 18px; transform: rotate(-8deg); }
.sign-left-2 { top: 620px; left: 22px; transform: rotate(6deg); background: linear-gradient(180deg, #f0d09a, #dcb070); }
.sign-left-3 { top: 980px; left: 20px; transform: rotate(-5deg); }
.sign-right-1 { top: 360px; right: 22px; transform: rotate(7deg); }
.sign-right-2 { top: 700px; right: 16px; transform: rotate(-6deg); background: linear-gradient(180deg, #f0d09a, #dcb070); }

.learn-page .learn-main { position: relative; z-index: 1; }

.learn-page .learn-intro {
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 8px;
}
.learn-page .learn-heading p {
  font-size: 17px;
  font-weight: 700;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.65),
    0 0 8px rgb(255 255 255 / 0.6);
}

.learn-page .streak-card {
  padding: 18px 22px 16px;
  border: 4px solid white;
  border-radius: 24px;
  background: linear-gradient(#fff, #fff8ee);
  box-shadow: 0 8px 20px rgb(16 84 115 / 0.12);
}
.learn-page .streak-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', 'Baloo 2', cursive;
  font-size: 18px;
}
.learn-page .streak-fire { flex: 0 0 auto; line-height: 1; }
.learn-page .streak-label { white-space: nowrap; }
.learn-page .streak-msg { margin: 2px 0 10px; }
.learn-page .streak-day.done {
  background: #34c37b;
  border-color: #2eaf6d;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.08);
}
.learn-page .streak-days {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.learn-page .lesson-section {
  position: relative;
  margin-top: 22px;
  padding: 14px 22px 16px;
  border: 6px solid white;
  border-radius: 32px;
  scroll-margin-top: 118px;
  box-shadow:
    0 0 20px 4px rgb(18 56 32 / 0.36),
    0 0 8px rgb(18 56 32 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.7);
  overflow: visible;
}
.learn-page .lesson-section::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1.5px dashed rgb(255 255 255 / 0.55);
  pointer-events: none;
}
.learn-page .section-green {
  background-color: #d8f8db;
  background-image: url('section-1-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-blue {
  background-color: #bfebfd;
  background-image: url('section-2-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-purple {
  background-color: #ccc8fc;
  background-image: url('section-3-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-peach {
  background-color: #fdaea0;
  background-image: url('section-4-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-sun {
  background-color: #fde78b;
  background-image: url('section-5-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-mint {
  background-color: #bdf0ea;
  background-image: url('section-6-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-sand {
  background-color: #fbe4ba;
  background-image: url('section-7-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}
.learn-page .section-amber {
  background-color: #fec48c;
  background-image: url('section-8-bg.png?v=4');
  background-repeat: no-repeat;
  background-position: center bottom -65px;
  background-size: cover;
}

.learn-page .section-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 8px;
  position: relative;
  z-index: 1;
}
.section-notes {
  position: relative;
  width: 56px;
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-note {
  position: static;
  font-family: 'Fredoka', 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  transform: none;
  text-shadow: 0 3px 0 rgb(255 255 255 / 0.45);
  filter: drop-shadow(0 4px 0 rgb(16 84 115 / 0.08));
}
.n-teal { color: #1ea8c4; }
.n-lime { color: #7ad13a; }
.n-sky { color: #3aa7e0; }
.n-blue { color: #4f7fe8; }
.n-lilac { color: #b07ae8; }
.n-violet { color: #7b5ed4; }
.n-coral { color: #f06a8a; }
.n-gold { color: #e6a820; }

.section-copy h2 {
  margin: 0;
  font-family: 'Fredoka', 'Baloo 2', cursive;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #06344f;
}
.section-copy p {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #3d6788;
}

.learn-page .section-progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  max-width: none;
  min-width: 260px;
  align-self: start;
  padding-top: 12px;
  padding-right: 14px;
}
.learn-page .progress-track {
  width: 180px;
  height: 14px;
  border-radius: 100px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: inset 0 1px 3px rgb(16 84 115 / 0.12);
  overflow: hidden;
}
.learn-page .progress-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #7be07a, #34c37b);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.08);
}
.learn-page .fill-green { background: linear-gradient(90deg, #7be07a, #34c37b); }
.learn-page .fill-blue { background: linear-gradient(90deg, #8fd4f2, #3aa7e0); }
.learn-page .fill-purple { background: linear-gradient(90deg, #d2b8f6, #9b74e0); }
.learn-page .fill-peach { background: linear-gradient(90deg, #ffc4b6, #f08a72); }
.learn-page .fill-sun { background: linear-gradient(90deg, #ffe47a, #f0c53a); }
.learn-page .fill-mint { background: linear-gradient(90deg, #9fe0d6, #4ec4b2); }
.learn-page .fill-sand { background: linear-gradient(90deg, #f5d08a, #e0b45a); }
.learn-page .fill-amber { background: linear-gradient(90deg, #ffd4a0, #f0a85a); }
.learn-page .section-progress .progress-label {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #35577a;
  white-space: nowrap;
}
.progress-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  cursor: pointer;
  flex: 0 0 auto;
  color: #4d7394;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  outline: none;
  transition: background 160ms ease;
}
.progress-chevron:hover {
  background: rgb(255 255 255 / 0.9);
}
.progress-chevron:focus-visible {
  outline: 3px solid #087a9d;
  outline-offset: 2px;
}
.progress-chevron::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease, margin 160ms ease;
  pointer-events: none;
}
.lesson-section.is-collapsed .progress-chevron::after {
  margin-top: 0;
  margin-left: -3px;
  transform: rotate(-45deg);
}
.lesson-section.is-collapsed {
  padding-bottom: 12px;
}
.lesson-section.is-collapsed .lesson-track {
  display: none;
}

.lesson-track {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  padding: 10px 8px 0;
}
.learn-page .lesson-row {
  --node-w: 136px;
  --node-gap: clamp(20px, 3.2vw, 56px);
  --row-gap: 12px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--node-w));
  justify-content: center;
  justify-items: center;
  align-items: start;
  column-gap: var(--node-gap);
  row-gap: var(--row-gap);
  margin-top: 0;
  overflow: visible;
  padding: 8px 12px 12px;
}
.lesson-squiggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.lesson-squiggle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 10;
}

.learn-texture-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-green .lesson-squiggle { color: #6dcf6a; }
.section-blue .lesson-squiggle { color: #62b7e0; }
.section-purple .lesson-squiggle { color: #b08ee0; }
.section-peach .lesson-squiggle { color: #f08a72; }
.section-sun .lesson-squiggle { color: #e0b45a; }
.section-mint .lesson-squiggle { color: #4ec4b2; }
.section-sand .lesson-squiggle { color: #e0b45a; }
.section-amber .lesson-squiggle { color: #f0a85a; }
.section-green .lesson-squiggle .squiggle-wrap { color: #c5eb9e; }
.section-blue .lesson-squiggle .squiggle-wrap { color: #a8d8ef; }
.section-purple .lesson-squiggle .squiggle-wrap { color: #d4c2f0; }
.section-peach .lesson-squiggle .squiggle-wrap { color: #ffc9bc; }
.section-sun .lesson-squiggle .squiggle-wrap { color: #f5e6a8; }
.section-mint .lesson-squiggle .squiggle-wrap { color: #a8e5dc; }
.section-sand .lesson-squiggle .squiggle-wrap { color: #f5d9a0; }
.section-amber .lesson-squiggle .squiggle-wrap { color: #ffd9b0; }

.learn-page .lesson-node {
  width: var(--node-w);
  gap: 6px;
  position: relative;
  z-index: 1;
  color: inherit;
  scroll-margin-top: 138px;
}
a.lesson-node { cursor: pointer; }
.learn-page .lesson-node { cursor: pointer; }
.learn-page .lesson-node .node-circle,
.learn-page .lesson-node .node-stars { transition: transform 160ms ease; }
.learn-page .lesson-node:hover .node-circle,
.learn-page .lesson-node:hover .node-stars { transform: translateY(-3px); }
.learn-page .node-circle {
  width: 74px;
  height: 74px;
  font-size: 30px;
  background: #ffffff;
  border: 6px solid #ffffff;
  box-shadow:
    0 0 0 2.5px #324C6E,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
  overflow: visible;
}
.learn-page .lesson-node.done .node-circle {
  background: #ffffff;
  box-shadow:
    0 0 0 2.5px #324C6E,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-green .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #3ecf62,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-blue .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #3aa7e0,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-purple .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #9b74e0,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-peach .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #f08a72,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-sun .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #e0b45a,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-mint .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #4ec4b2,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-sand .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #e0b45a,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-amber .lesson-node.done .node-circle {
  box-shadow:
    0 0 0 2.5px #f0a85a,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.learn-page .lesson-node.current .node-circle {
  box-shadow:
    0 0 0 5px #ffd23a,
    0 0 10px 3px rgb(255 214 80 / 0.4),
    0 0 18px 6px rgb(255 196 50 / 0.22),
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.section-green .lesson-node.current .node-circle { background: #d8c7fb; }
.section-blue .lesson-node.current .node-circle { background: #ffd0bc; }
.section-purple .lesson-node.current .node-circle { background: #c5f0d4; }
.section-peach .lesson-node.current .node-circle { background: #b8e4f8; }
.section-sun .lesson-node.current .node-circle { background: #d0c4f8; }
.section-mint .lesson-node.current .node-circle { background: #f0c8e8; }
.section-sand .lesson-node.current .node-circle { background: #c8d6f8; }
.section-amber .lesson-node.current .node-circle { background: #c5e8de; }
.section-green .lesson-node.open .node-circle { background: #d8c7fb; }
.section-blue .lesson-node.open .node-circle { background: #ffd0bc; }
.section-purple .lesson-node.open .node-circle { background: #c5f0d4; }
.section-peach .lesson-node.open .node-circle { background: #b8e4f8; }
.section-sun .lesson-node.open .node-circle { background: #d0c4f8; }
.section-mint .lesson-node.open .node-circle { background: #f0c8e8; }
.section-sand .lesson-node.open .node-circle { background: #c8d6f8; }
.section-amber .lesson-node.open .node-circle { background: #c5e8de; }
.learn-page .lesson-node.open .node-circle {
  box-shadow:
    0 0 0 2.5px #324C6E,
    0 0 16px 3px rgb(18 56 32 / 0.36),
    0 0 6px rgb(18 56 32 / 0.18);
}
.lock-badge {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-sizing: border-box;
  background: url('lock.png?v=4') center / contain no-repeat;
  box-shadow: none;
  transform-origin: center center;
  overflow: visible;
}
.learn-page .lesson-node.locked .lock-badge {
  background-image: url('lock-muted.png?v=1');
}
.node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.learn-page .lesson-node.locked .node-icon {
  filter: grayscale(1) contrast(0.45) brightness(1.25);
  opacity: 0.72;
}
.lock-badge::before,
.lock-badge::after {
  content: none;
}
.learn-page .lesson-node.is-unlocking .lock-badge {
  z-index: 5;
  animation: lock-badge-unlock 1.15s cubic-bezier(0.2, 1.4, 0.35, 1) forwards;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgb(16 84 115 / 0.28));
}
.learn-page .lesson-node.is-unlocking .lock-badge::before,
.learn-page .lesson-node.is-unlocking .lock-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    linear-gradient(#ffd23a, #ffd23a) center / 3px 14px no-repeat,
    linear-gradient(#ffd23a, #ffd23a) center / 14px 3px no-repeat;
  transform-origin: center;
  animation: lock-spark-burst 1.15s ease forwards;
  pointer-events: none;
}
.learn-page .lesson-node.is-unlocking .lock-badge::before { left: -22px; }
.learn-page .lesson-node.is-unlocking .lock-badge::after { right: -22px; }
@keyframes lock-badge-unlock {
  0% {
    transform: scale(1) rotate(0deg);
    background-image: url('lock.png?v=4');
    opacity: 1;
  }
  28% {
    transform: scale(1.7) rotate(-12deg);
    background-image: url('lock.png?v=4');
    opacity: 1;
  }
  40% {
    transform: scale(1.85) rotate(10deg);
    background-image: url('unlock.png?v=4');
    opacity: 1;
  }
  68% {
    transform: scale(2.15) rotate(-4deg);
    background-image: url('unlock.png?v=4');
    opacity: 1;
  }
  100% {
    transform: scale(2.45) rotate(0deg);
    background-image: url('unlock.png?v=4');
    opacity: 0;
  }
}
@keyframes lock-spark-burst {
  0%, 18% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: scale(1.6) rotate(50deg); }
}
.learn-page .lesson-node.locked .node-circle {
  background: #e4e6e4;
  color: #9aa3ab;
  box-shadow:
    0 0 0 2.5px #a0aec0,
    0 0 14px 2px rgb(18 56 32 / 0.28),
    0 0 5px rgb(18 56 32 / 0.14);
}

.check-mark {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 48% 56% 46% 54%;
  background: linear-gradient(180deg, #62e07a, #2fbf58);
  border: 3px solid white;
  box-shadow: 0 3px 0 #249a46, 0 5px 10px rgb(16 84 115 / 0.18);
  transform: rotate(var(--check-rot, -8deg));
  z-index: 2;
}
.check-mark::after {
  content: '';
  position: absolute;
  inset: 18%;
  background: #ffffff;
  -webkit-mask: url('checkmark.png') center / contain no-repeat;
  mask: url('checkmark.png') center / contain no-repeat;
}

.node-stars {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  height: 22px;
  margin-top: -15px;
  pointer-events: none;
}
.node-stars .star {
  position: relative;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}
.node-stars .star::before,
.node-stars .star::after {
  content: '';
  position: absolute;
  inset: 0;
}
.node-stars .star::before {
  background: #fff;
  -webkit-mask: url('Star_Full.png') center / contain no-repeat;
  mask: url('Star_Full.png') center / contain no-repeat;
  transform: scale(1.22);
}
.node-stars .star::after {
  background: url('Star_Full.png') center / contain no-repeat;
}
.node-stars .star:nth-child(1) { transform: translate(1px, -2px) rotate(-16deg); }
.node-stars .star:nth-child(2) { transform: translateY(1px); }
.node-stars .star:nth-child(3) { transform: translate(-1px, -2px) rotate(16deg); }
.learn-page .node-label {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1d4c6b;
  width: 100%;
  white-space: normal;
  line-height: 1.15;
  text-shadow:
    0 0 4px rgb(255 255 255 / 0.95),
    0 0 8px rgb(255 255 255 / 0.7);
}
.learn-page .lesson-node.locked .node-label { color: #6f8aa0; }
.learn-page .current-tag {
  margin-top: 2px;
  padding: 4px 10px;
  background: #ffd35c;
  color: #6b4a00;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 11px;
  box-shadow: 0 2px 0 #e0b63d;
}

.unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
}
.unlock-modal[hidden] { display: none; }
.unlock-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(8 36 58 / 0.28);
}
.unlock-modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 36px 32px 28px;
  border-radius: 36px;
  background: linear-gradient(180deg, #f7fdff 0%, #eef8ff 100%);
  box-shadow: 0 18px 40px rgb(16 84 115 / 0.22);
  text-align: center;
  color: #16395a;
}
.unlock-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #5d7d96;
  border-radius: 50%;
}
.unlock-modal-close:hover { background: rgb(22 57 90 / 0.08); }
.unlock-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.unlock-modal-lock {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 5px solid #d7e7f4;
  background: #fff url('lock.png?v=4') center / 48px 48px no-repeat;
  box-shadow: 0 6px 16px rgb(16 84 115 / 0.12);
}
.unlock-modal-sparks {
  width: 22px;
  height: 38px;
  background:
    linear-gradient(#ffd23a, #ffd23a) 50% 0 / 4px 16px no-repeat,
    linear-gradient(#ffd23a, #ffd23a) 2px 12px / 14px 4px no-repeat,
    linear-gradient(#ffd23a, #ffd23a) 8px 22px / 4px 12px no-repeat;
  opacity: 0.95;
}
.unlock-modal-sparks-left { transform: scaleX(-1) rotate(-8deg); }
.unlock-modal-sparks-right { transform: rotate(-8deg); }
.unlock-modal-card h2 {
  margin: 0 0 8px;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #16395a;
}
.unlock-modal-card p {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 700;
  color: #5d7d96;
}
.unlock-modal-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.unlock-btn-back,
.unlock-btn-go {
  min-width: 148px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.unlock-btn-back {
  border: 3px solid #d5e2ec;
  background: #fff;
  color: #1d4c6b;
  box-shadow: 0 3px 0 #d5e2ec;
}
.unlock-btn-go {
  border: 0;
  background: #2f86ff;
  color: #fff;
  box-shadow: 0 4px 0 #1d6fe0;
}
.unlock-btn-go:hover { background: #247af4; }

@media (max-width: 1599px) {
  .wood-sign { display: none; }
}
@media (max-width: 900px) {
  .learn-page .section-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .learn-page .section-progress {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .learn-page .lesson-row {
    overflow: visible;
    padding-bottom: 8px;
  }
}
@media (max-width: 800px) {
  .learn-page .learn-intro {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    grid-template-areas:
      "title streak"
      "copy copy";
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
  }
  .learn-page .learn-heading {
    display: contents;
  }
  .learn-page .learn-heading .page-title-lockup {
    grid-area: title;
    align-self: start;
    font-size: clamp(36px, 10vw, 56px);
  }
  .learn-page .learn-heading p {
    grid-area: copy;
  }
  .learn-page .streak-card {
    display: flex;
    grid-area: streak;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 10px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    justify-self: end;
    align-self: center;
    padding: 10px 12px;
  }
  .learn-page .streak-title {
    flex: 0 0 auto;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
  }
  .learn-page .streak-msg {
    display: none;
  }
  .learn-page .streak-days {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    width: auto;
  }
  .learn-page .streak-day {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    max-width: none;
    font-size: 10px;
  }
}
@media (max-width: 520px) {
  .learn-page .streak-label { display: none; }
  .learn-page .streak-title { gap: 0; }
}
@media (max-width: 700px) {
  .section-notes { width: 44px; height: 52px; }
  .big-note { font-size: 48px; }
  .learn-page .lesson-section { padding: 12px 12px 14px; border-width: 5px; }
  .learn-page .progress-track { width: 120px; }
  .learn-page .section-progress { min-width: 0; }
  .learn-page .streak-card { padding: 8px 10px; }
  .learn-page .streak-title { font-size: 12px; gap: 4px; }
  .learn-page .streak-days { gap: 3px; }
  .learn-page .streak-day {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .check-mark { transform: none; }
  .learn-page .lesson-node.is-unlocking .lock-badge {
    animation-duration: 0.01ms;
  }
}