:root {
  --orange: #ff7a45;
  --orange-dark: #db4e1e;
  --orange-soft: #fff0e6;
  --orange-decor: #ff8d5f;
  --blue: #2764d8;
  --blue-dark: #173b82;
  --blue-soft: #eaf1ff;
  --blue-decor: #7199ed;
  --blue-stage: #8fb0ef;
  --yellow: #ffd84d;
  --yellow-soft: #fff8cd;
  --yellow-decor: #ffe064;
  --ink: #17304f;
  --muted: #53677f;
  --cream: #fffaf1;
  --white: #ffffff;
  --line: #dce5ee;
  --shadow: 0 22px 60px rgba(35, 68, 114, 0.14);
  --small-shadow: 0 12px 30px rgba(35, 68, 114, 0.1);
  --radius-lg: 32px;
  --radius-md: 22px;
  --font: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header,
.site-footer,
.hero,
.learning-loop,
.lesson-preview,
.local-first {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 34px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 12px;
  background: var(--orange);
}

.brand-mark::before {
  position: absolute;
  top: -9px;
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: var(--blue-dark);
  content: "";
}

.brand-mark::after {
  position: absolute;
  top: -13px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
  content: "";
}

.brand-mark span,
.brand-mark span::after {
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-dark);
}

.brand-mark span::after {
  display: block;
  margin-left: 13px;
  content: "";
}

/* Shared header: one row of page links on the left and same-size icon controls on the right.
   Below 900px the links move into a menu opened by the last button. */
.site-header {
  position: relative;
  gap: 18px;
}

.header-links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
}

.header-link {
  display: inline-flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 6px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-link:hover,
.header-link:focus-visible {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.header-link[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
}

.header-link-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.header-link-meet .header-link-icon,
.header-link-album .header-link-icon {
  background: var(--yellow-soft);
  color: var(--orange-dark);
}

.header-link[aria-current="page"] .header-link-icon {
  background: var(--white);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-icon-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.header-icon-button:hover,
.header-icon-button:focus-visible {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.sound-toggle-label,
.buddy-toggle-label {
  display: none;
}

.support-link-icon {
  color: var(--orange-dark);
  font-size: 1.05rem;
  line-height: 1;
}

.sound-toggle-icon {
  color: var(--blue);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.buddy-toggle-icon {
  position: relative;
  width: 22px;
  height: 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 7px;
  background: var(--orange);
}

.buddy-toggle-icon::before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-dark);
  box-shadow: 6px 0 0 var(--blue-dark);
  content: "";
}

/* A switched-off sound or companion is greyed out and crossed through. */
.sound-toggle:not(.is-on) > *,
.buddy-toggle:not(.is-on) > * {
  opacity: 0.6;
}

.sound-toggle:not(.is-on)::after,
.buddy-toggle:not(.is-on)::after {
  position: absolute;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange-dark);
  transform: rotate(-45deg);
  content: "";
}

.language-switch {
  height: 42px;
  align-items: center;
  border-radius: 14px;
}

.language-button {
  min-height: 32px;
}

.header-menu-button {
  display: none;
}

.header-menu-icon,
.header-menu-icon::before,
.header-menu-icon::after {
  display: block;
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}

.header-menu-icon {
  position: relative;
}

.header-menu-icon::before,
.header-menu-icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.header-menu-icon::before {
  top: -6px;
}

.header-menu-icon::after {
  top: 6px;
}

.is-menu-open .header-menu-button {
  border-color: var(--blue);
  color: var(--blue-dark);
}

@media (max-width: 900px) {
  .header-menu-button {
    display: grid;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-links {
    position: absolute;
    top: calc(100% - 8px);
    right: 0;
    z-index: 60;
    display: none;
    width: min(260px, 100%);
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border: 2px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--small-shadow);
  }

  .is-menu-open .header-links {
    display: flex;
  }

  .header-link {
    height: 48px;
    font-size: 1rem;
  }
}

@media (max-width: 520px) {
  .brand > span:not(.brand-mark) {
    display: none;
  }

  .header-actions {
    gap: 5px;
  }

  .header-icon-button,
  .language-switch {
    height: 40px;
  }

  .header-icon-button {
    width: 40px;
  }

  .language-button {
    min-width: 32px;
    padding-inline: 5px;
  }
}

.language-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.language-button {
  min-width: 38px;
  min-height: 34px;
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.language-button:hover,
.language-button:focus-visible {
  color: var(--blue);
}

.language-button.is-active {
  background: var(--blue);
  color: var(--white);
}

.faq-main {
  width: min(100% - 48px, 820px);
  margin: 0 auto;
  padding: 62px 0 90px;
}

.faq-intro .eyebrow {
  justify-content: center;
}

.faq-intro h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
}

.faq-jump a {
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-dark);
  font-weight: 900;
  text-decoration: none;
}

.faq-jump a:hover,
.faq-jump a:focus-visible {
  border-color: var(--blue);
}

.faq-group {
  margin: 0 0 48px;
  scroll-margin-top: 24px;
}

.faq-group h2 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.faq-group-adults h2 {
  color: var(--orange-dark);
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.faq-item[open] {
  border-color: var(--blue-decor);
}

.faq-group-adults .faq-item[open] {
  border-color: var(--orange-decor);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 900;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 1.2rem;
}

.faq-group-adults .faq-item summary::after {
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin: 0;
  padding: 0 22px 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.faq-link {
  display: inline-block;
  margin: 0 22px 18px;
  color: var(--blue-dark);
  font-weight: 900;
}

.picks-main {
  width: min(100% - 48px, 1040px);
  margin: 0 auto;
  padding: 62px 0 90px;
}

.picks-intro .eyebrow {
  justify-content: center;
}

.picks-intro h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.pick-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 1.5rem;
}

.pick-card:nth-child(even) .pick-icon {
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.pick-tag {
  margin: 16px 0 4px;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.pick-card h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pick-card p:not(.pick-tag) {
  flex: 1;
  margin: 10px 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

.pick-link,
.picks-back,
.picks-teaser-link {
  color: var(--blue-dark);
  font-weight: 900;
}

.picks-adults {
  margin: 40px 0 28px;
  padding: 22px 24px;
  border: 2px dashed var(--orange-decor);
  border-radius: var(--radius-md);
  background: var(--white);
}

.picks-adults h2 {
  margin: 0 0 8px;
  color: var(--orange-dark);
  font-size: 1.3rem;
}

.picks-adults p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.picks-teaser {
  width: min(100%, 900px);
  margin: 40px auto 0;
  padding: clamp(26px, 5vw, 40px);
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--small-shadow);
  text-align: center;
}

.picks-teaser.runtime-thanks {
  border-top-color: var(--blue);
}

.picks-teaser .eyebrow {
  justify-content: center;
}

.picks-teaser h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.04em;
}

.picks-teaser p:not(.eyebrow) {
  margin: 12px 0 18px;
  color: var(--muted);
}

.picks-teaser .runtime-thanks-note {
  font-size: 0.85rem;
}

.runtime-thanks-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
}

.runtime-thanks-people {
  color: var(--blue-dark);
  font-weight: 900;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  min-height: calc(100vh - 88px);
  padding: 50px 0 90px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 19px;
  color: var(--orange-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow > span {
  display: inline-grid;
  min-width: 33px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.77rem;
  letter-spacing: -0.08em;
}

.eyebrow-blue {
  color: var(--blue);
}

.hero h1,
.section-heading h2,
.preview-copy h2,
.local-first h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.hero h1 {
  max-width: 670px;
  font-size: clamp(3.35rem, 6.2vw, 5.75rem);
}

.hero h1 > span:last-child {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--blue);
}

.hero h1 > span:last-child::after {
  position: absolute;
  right: -4px;
  bottom: 7px;
  left: -4px;
  z-index: -1;
  height: 16px;
  border-radius: 999px;
  background: var(--yellow);
  content: "";
  transform: rotate(-1deg);
}

.hero h1 .title-line {
  display: block;
}

.hero-intro {
  max-width: 590px;
  margin: 27px 0 0;
  color: var(--muted);
  font-size: 1.17rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 35px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  border-color: var(--blue-dark);
  background: var(--blue);
  box-shadow: 0 6px 0 var(--blue-dark);
  color: var(--white);
}

.button-primary:hover {
  box-shadow: 0 8px 0 var(--blue-dark);
}

.button-secondary {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: #b8c9da;
  box-shadow: var(--small-shadow);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 22px;
  margin: 34px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.trust-list span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.68rem;
}

.hero-stage {
  position: relative;
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(39, 100, 216, 0.34);
  border-radius: 48% 52% 42% 58% / 48% 43% 57% 52%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.84) 0 25%, transparent 26%),
    linear-gradient(145deg, #dbe7ff 0%, #b7cdf8 54%, var(--blue-stage) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 22px 60px rgba(23, 59, 130, 0.12);
}

.hero-stage::before,
.hero-stage::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.hero-stage::before {
  top: 38px;
  right: 55px;
  width: 74px;
  height: 74px;
  border: 12px solid rgba(255, 216, 77, 0.85);
}

.hero-stage::after {
  bottom: 105px;
  left: 46px;
  width: 42px;
  height: 42px;
  background: rgba(255, 122, 69, 0.22);
}

.spark {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 900;
}

.spark-one {
  top: 31%;
  left: 9%;
  font-size: 2.3rem;
  transform: rotate(16deg);
}

.spark-two {
  top: 23%;
  right: 11%;
  color: var(--orange);
  font-size: 1.8rem;
}

.spark-three {
  right: 11%;
  bottom: 26%;
  color: var(--yellow);
  font-size: 3.6rem;
}

.speech-bubble {
  position: absolute;
  top: 24px;
  left: -16px;
  z-index: 7;
  max-width: 258px;
  padding: 16px 20px 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 20px 20px 20px 5px;
  background: var(--white);
  box-shadow: 7px 8px 0 rgba(23, 59, 130, 0.13);
}

.speech-kicker {
  color: var(--orange-dark);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.speech-bubble p {
  margin: 3px 0 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.38;
}

.learner-name-card {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  z-index: 8;
  padding: 14px 16px;
  border: 2px solid var(--blue-dark);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 7px 8px 0 rgba(23, 59, 130, 0.13);
}

.learner-name-form > label {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-dark);
  font-size: 0.88rem;
  font-weight: 900;
}

.learner-name-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.learner-name-entry input {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  outline: 0;
}

.learner-name-entry input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(39, 100, 216, 0.14);
}

.learner-name-form.is-invalid input {
  border-color: var(--orange-dark);
}

.learner-name-entry button,
.learner-name-saved button {
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--blue-dark);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 900;
  cursor: pointer;
}

.learner-name-note,
.learner-name-error {
  margin: 7px 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

.learner-name-note {
  color: var(--muted);
}

.learner-name-error {
  color: var(--orange-dark);
  font-weight: 900;
}

.learner-name-forget {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.learner-name-saved {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.learner-name-saved p {
  margin: 0;
  color: var(--blue-dark);
  font-size: 0.86rem;
  font-weight: 800;
}

.learner-name-saved strong {
  color: var(--orange-dark);
}

.learner-name-form[hidden],
.learner-name-saved[hidden],
.learner-name-forget[hidden],
.learner-name-error[hidden] {
  display: none;
}

.pybot-wrap {
  position: relative;
  z-index: 4;
  width: 340px;
  height: 390px;
  margin-top: 20px;
}

.pybot {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 20px 14px rgba(30, 66, 111, 0.16));
}

.bot-head {
  position: absolute;
  top: 55px;
  left: 58px;
  z-index: 5;
  width: 225px;
  height: 174px;
  padding: 17px;
  border: 7px solid var(--blue-dark);
  border-radius: 64px 64px 72px 72px;
  background: var(--orange);
  transform-origin: 50% 95%;
  transition: transform 260ms ease;
}

.bot-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px solid rgba(23, 59, 130, 0.92);
  border-radius: 43px 43px 51px 51px;
  background: #f7fbff;
  box-shadow: inset 0 -10px 0 rgba(39, 100, 216, 0.05);
}

.antenna {
  position: absolute;
  top: 7px;
  left: 166px;
  z-index: 2;
  width: 9px;
  height: 55px;
  border: 3px solid var(--blue-dark);
  border-radius: 8px;
  background: var(--blue);
  transform: rotate(6deg);
  transform-origin: bottom;
}

.antenna span {
  position: absolute;
  top: -17px;
  left: -8px;
  width: 19px;
  height: 19px;
  border: 4px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
}

.ear {
  position: absolute;
  top: 112px;
  z-index: 3;
  width: 35px;
  height: 68px;
  border: 6px solid var(--blue-dark);
  background: var(--yellow);
}

.ear-left {
  left: 37px;
  border-radius: 18px 6px 6px 18px;
}

.ear-right {
  right: 36px;
  border-radius: 6px 18px 18px 6px;
}

.eye {
  position: absolute;
  top: 46px;
  width: 29px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-dark);
  transition: width 220ms ease, height 220ms ease, border-radius 220ms ease, transform 220ms ease;
}

.eye span {
  position: absolute;
  top: 6px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}

.eye-left {
  left: 39px;
}

.eye-right {
  right: 39px;
}

.brow {
  position: absolute;
  top: 31px;
  z-index: 2;
  width: 29px;
  height: 5px;
  border-radius: 6px;
  background: var(--blue-dark);
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms ease;
}

.brow-left {
  left: 38px;
}

.brow-right {
  right: 38px;
}

.cheek {
  position: absolute;
  top: 82px;
  width: 23px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 122, 69, 0.32);
}

.cheek-left {
  left: 18px;
}

.cheek-right {
  right: 18px;
}

.mouth {
  position: absolute;
  top: 84px;
  left: calc(50% - 27px);
  width: 54px;
  height: 25px;
  border-bottom: 7px solid var(--orange-dark);
  border-radius: 0 0 50px 50px;
  transition: width 220ms ease, height 220ms ease, border 220ms ease, border-radius 220ms ease, transform 220ms ease;
}

.bot-neck {
  position: absolute;
  top: 218px;
  left: 143px;
  z-index: 2;
  width: 55px;
  height: 40px;
  border: 6px solid var(--blue-dark);
  background: var(--yellow);
}

.bot-body {
  position: absolute;
  top: 242px;
  left: 91px;
  z-index: 4;
  width: 160px;
  height: 137px;
  border: 7px solid var(--blue-dark);
  border-radius: 37px 37px 48px 48px;
  background: var(--blue);
}

.bot-body::before {
  position: absolute;
  right: 22px;
  bottom: -18px;
  left: 22px;
  height: 26px;
  border: 7px solid var(--blue-dark);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: var(--orange);
  content: "";
}

.chest-light {
  position: absolute;
  top: 20px;
  left: 21px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
}

.chest-code {
  position: absolute;
  top: 35px;
  left: 44px;
  display: grid;
  width: 72px;
  height: 49px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: #f6fbff;
  color: var(--orange-dark);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.12em;
}

.arm {
  position: absolute;
  z-index: 3;
  width: 38px;
  height: 115px;
  border: 6px solid var(--blue-dark);
  border-radius: 22px;
  background: var(--orange);
  transform-origin: 50% 20%;
  transition: transform 300ms ease;
}

.arm-left {
  top: 251px;
  left: 56px;
  transform: rotate(13deg);
}

.arm-right {
  top: 249px;
  right: 54px;
  transform: rotate(-44deg);
}

.hand {
  position: absolute;
  bottom: -13px;
  left: -6px;
  width: 39px;
  height: 35px;
  border: 6px solid var(--blue-dark);
  border-radius: 18px;
  background: var(--yellow);
}

.pybot-wrap[data-mood="happy"] .antenna {
  animation: antenna-wave 2.4s ease-in-out infinite;
}

.pybot-wrap[data-mood="happy"] .arm-right {
  animation: arm-wave 1.5s ease-in-out infinite;
}

.pybot-wrap[data-mood="encouraging"] .bot-head {
  transform: rotate(-3deg) translateY(-2px);
}

.pybot-wrap[data-mood="encouraging"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="encouraging"] .brow-left {
  transform: rotate(-7deg) translateY(1px);
}

.pybot-wrap[data-mood="encouraging"] .brow-right {
  transform: rotate(7deg) translateY(1px);
}

.pybot-wrap[data-mood="encouraging"] .eye {
  height: 30px;
}

.pybot-wrap[data-mood="encouraging"] .mouth {
  width: 40px;
  height: 19px;
  transform: translateX(7px);
}

.pybot-wrap[data-mood="encouraging"] .arm-right {
  transform: rotate(-103deg) translateY(-4px);
}

.pybot-wrap[data-mood="thinking"] .bot-head {
  transform: rotate(5deg) translateY(1px);
}

.pybot-wrap[data-mood="thinking"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="thinking"] .brow-left {
  transform: rotate(11deg) translateY(3px);
}

.pybot-wrap[data-mood="thinking"] .brow-right {
  transform: rotate(-13deg) translateY(-1px);
}

.pybot-wrap[data-mood="thinking"] .eye-left {
  width: 19px;
  height: 19px;
  transform: translate(7px, 8px);
}

.pybot-wrap[data-mood="thinking"] .eye-right {
  transform: translate(-2px, -2px);
}

.pybot-wrap[data-mood="thinking"] .mouth {
  top: 94px;
  left: calc(50% - 16px);
  width: 32px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--orange-dark);
  transform: rotate(-5deg);
}

.pybot-wrap[data-mood="thinking"] .arm-right {
  transform: rotate(-25deg) translate(-7px, -40px);
}

.pybot-wrap[data-mood="celebrating"] .bot-head {
  transform: translateY(-6px);
}

.pybot-wrap[data-mood="celebrating"] .eye {
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  transform: translateY(8px);
}

.pybot-wrap[data-mood="celebrating"] .mouth {
  top: 80px;
  left: calc(50% - 34px);
  width: 68px;
  height: 34px;
  border-bottom-width: 9px;
}

.pybot-wrap[data-mood="celebrating"] .arm-left {
  transform: rotate(145deg) translateY(-5px);
}

.pybot-wrap[data-mood="celebrating"] .arm-right {
  transform: rotate(-145deg) translateY(-5px);
}

.pybot-wrap[data-mood="celebrating"] .antenna {
  animation: antenna-wave 1.2s ease-in-out infinite;
}

.pybot-wrap[data-mood="surprised"] .bot-head {
  transform: translateY(-3px);
}

.pybot-wrap[data-mood="surprised"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="surprised"] .brow-left {
  transform: rotate(-10deg) translateY(-5px);
}

.pybot-wrap[data-mood="surprised"] .brow-right {
  transform: rotate(10deg) translateY(-5px);
}

.pybot-wrap[data-mood="surprised"] .eye {
  width: 34px;
  height: 41px;
  transform: translateY(-3px);
}

.pybot-wrap[data-mood="surprised"] .mouth {
  top: 84px;
  left: calc(50% - 14px);
  width: 28px;
  height: 31px;
  border: 6px solid var(--orange-dark);
  border-radius: 50%;
  background: var(--white);
}

.pybot-wrap[data-mood="surprised"] .arm-left {
  transform: rotate(35deg);
}

.pybot-wrap[data-mood="surprised"] .arm-right {
  transform: rotate(-35deg);
}

.pybot-wrap[data-mood="curious"] .bot-head {
  transform: rotate(-6deg) translateY(1px);
}

.pybot-wrap[data-mood="curious"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="curious"] .brow-left {
  transform: rotate(-5deg) translate(6px, 1px);
}

.pybot-wrap[data-mood="curious"] .brow-right {
  transform: rotate(-14deg) translate(6px, -2px);
}

.pybot-wrap[data-mood="curious"] .eye {
  transform: translateX(8px);
}

.pybot-wrap[data-mood="curious"] .mouth {
  top: 94px;
  left: calc(50% - 18px);
  width: 36px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--orange-dark);
  transform: rotate(6deg);
}

.pybot-wrap[data-mood="curious"] .arm-right {
  transform: rotate(-76deg) translate(-2px, -9px);
}

.pybot-wrap[data-mood="focused"] .bot-head {
  transform: translateY(4px);
}

.pybot-wrap[data-mood="focused"] .brow {
  opacity: 1;
  transform: translateY(9px);
}

.pybot-wrap[data-mood="focused"] .eye {
  height: 19px;
  border-radius: 6px 6px 50% 50%;
  transform: translateY(10px);
}

.pybot-wrap[data-mood="focused"] .mouth {
  top: 92px;
  left: calc(50% - 14px);
  width: 28px;
  height: 12px;
  border-bottom-width: 6px;
}

.pybot-wrap[data-mood="focused"] .arm-left {
  transform: rotate(-24deg);
}

.pybot-wrap[data-mood="focused"] .arm-right {
  transform: rotate(24deg);
}

.pybot-wrap[data-mood="welcoming"] .antenna {
  animation: antenna-wave 2.4s ease-in-out infinite;
}

.pybot-wrap[data-mood="welcoming"] .mouth {
  top: 84px;
  left: calc(50% - 26px);
  width: 52px;
  height: 27px;
  border: 0;
  border-radius: 6px 6px 40px 40px;
  background: var(--orange-dark);
}

.pybot-wrap[data-mood="welcoming"] .arm-left {
  transform: rotate(72deg);
}

.pybot-wrap[data-mood="welcoming"] .arm-right {
  transform: rotate(-72deg);
}

.pybot-wrap[data-mood="starry"] .bot-head {
  transform: translateY(-4px);
}

.pybot-wrap[data-mood="starry"] .eye {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: var(--orange);
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%);
  transform: translate(-4px, -4px);
}

.pybot-wrap[data-mood="starry"] .eye span {
  opacity: 0;
}

.pybot-wrap[data-mood="starry"] .mouth {
  top: 86px;
  left: calc(50% - 15px);
  width: 30px;
  height: 24px;
  border: 6px solid var(--orange-dark);
  border-radius: 45% 45% 50% 50%;
  background: var(--white);
}

.pybot-wrap[data-mood="starry"] .arm-left {
  transform: rotate(112deg);
}

.pybot-wrap[data-mood="starry"] .arm-right {
  transform: rotate(-112deg);
}

.pybot-wrap[data-mood="wink"] .bot-head {
  transform: rotate(-4deg);
}

.pybot-wrap[data-mood="wink"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="wink"] .brow-left {
  transform: rotate(-6deg) translateY(9px);
}

.pybot-wrap[data-mood="wink"] .brow-right {
  transform: rotate(8deg) translateY(-4px);
}

.pybot-wrap[data-mood="wink"] .eye-left {
  height: 8px;
  border-radius: 999px;
  transform: translateY(16px);
}

.pybot-wrap[data-mood="wink"] .eye-left span {
  opacity: 0;
}

.pybot-wrap[data-mood="wink"] .mouth {
  width: 44px;
  height: 20px;
  transform: translateX(8px) rotate(-8deg);
}

.pybot-wrap[data-mood="wink"] .arm-right {
  transform: rotate(-150deg) translateY(-4px);
}

.pybot-wrap[data-mood="proud"] .bot-head {
  transform: translateY(-3px);
}

.pybot-wrap[data-mood="proud"] .eye {
  height: 17px;
  border-top: 7px solid var(--blue-dark);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: transparent;
  transform: translateY(12px);
}

.pybot-wrap[data-mood="proud"] .eye span {
  opacity: 0;
}

.pybot-wrap[data-mood="proud"] .cheek {
  background: rgba(255, 122, 69, 0.58);
}

.pybot-wrap[data-mood="proud"] .mouth {
  top: 80px;
  left: calc(50% - 31px);
  width: 62px;
  height: 30px;
  border-bottom-width: 8px;
}

.pybot-wrap[data-mood="proud"] .arm-left {
  transform: rotate(-38deg) translate(4px, -8px);
}

.pybot-wrap[data-mood="proud"] .arm-right {
  transform: rotate(38deg) translate(-4px, -8px);
}

.pybot-wrap[data-mood="deciding"] .bot-head {
  transform: rotate(4deg);
}

.pybot-wrap[data-mood="deciding"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="deciding"] .brow-left {
  transform: translate(10px, 3px);
}

.pybot-wrap[data-mood="deciding"] .brow-right {
  transform: rotate(12deg) translate(10px, -6px);
}

.pybot-wrap[data-mood="deciding"] .eye {
  transform: translateX(10px);
}

.pybot-wrap[data-mood="deciding"] .mouth {
  top: 94px;
  left: calc(50% - 12px);
  width: 30px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: var(--orange-dark);
  transform: rotate(-8deg);
}

.pybot-wrap[data-mood="deciding"] .arm-right {
  transform: rotate(-96deg) translateY(-6px);
}

.pybot-wrap[data-mood="counting"] .bot-head {
  transform: rotate(-3deg);
}

.pybot-wrap[data-mood="counting"] .eye {
  transform: translateY(-8px);
}

.pybot-wrap[data-mood="counting"] .mouth {
  top: 86px;
  left: calc(50% - 17px);
  width: 34px;
  height: 18px;
  border-bottom-width: 6px;
}

.pybot-wrap[data-mood="counting"] .arm-right {
  animation: arm-count 1.8s ease-in-out infinite;
  transform: rotate(-165deg);
}

.pybot-wrap[data-mood="determined"] .brow {
  opacity: 1;
}

.pybot-wrap[data-mood="determined"] .brow-left {
  transform: rotate(14deg) translateY(6px);
}

.pybot-wrap[data-mood="determined"] .brow-right {
  transform: rotate(-14deg) translateY(6px);
}

.pybot-wrap[data-mood="determined"] .eye {
  height: 26px;
  transform: translateY(5px);
}

.pybot-wrap[data-mood="determined"] .mouth {
  top: 86px;
  left: calc(50% - 29px);
  width: 58px;
  height: 18px;
  border: 0;
  border-radius: 5px 5px 30px 30px;
  background: var(--orange-dark);
}

.pybot-wrap[data-mood="determined"] .arm-left {
  transform: rotate(28deg);
}

.pybot-wrap[data-mood="determined"] .arm-right {
  transform: rotate(-125deg) translateY(-4px);
}

.mood-panel {
  position: absolute;
  right: 26px;
  bottom: 22px;
  left: 26px;
  z-index: 8;
  padding: 13px 16px 16px;
  border: 1px solid rgba(23, 59, 130, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: var(--small-shadow);
  backdrop-filter: blur(10px);
}

.mood-panel > p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mood-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mood-button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.77rem;
  font-weight: 900;
  cursor: pointer;
}

.mood-button:hover,
.mood-button:focus-visible {
  border-color: var(--blue);
}

.mood-button.is-active {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: var(--white);
}

.mood-button span {
  color: var(--orange);
}

.mood-button b {
  color: inherit;
  font-size: inherit;
}

.mood-button.is-active span {
  color: var(--yellow);
}

.meet-main {
  width: min(100% - 48px, 1080px);
  margin: 0 auto;
  padding: 62px 0 90px;
}

.meet-intro {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.meet-intro h1 {
  margin: 10px 0 0;
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.meet-intro > p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.meet-stage {
  width: min(100%, 900px);
  min-height: 800px;
  align-items: flex-start;
  margin-inline: auto;
  padding-top: 110px;
}

.meet-stage .speech-bubble {
  top: 38px;
  left: 44px;
}

.meet-stage .pybot-wrap {
  margin-top: 0;
  transform: scale(1.08);
}

.meet-mood-panel {
  right: 34px;
  bottom: 28px;
  left: 34px;
  padding: 16px 18px 18px;
}

.meet-mood-panel .mood-controls {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-us {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(35px, 7vw, 78px);
  align-items: center;
  width: min(100%, 900px);
  margin: 80px auto 0;
  padding: clamp(30px, 6vw, 58px);
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.about-us-orbit {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 25px;
  background: var(--blue-soft);
}

.about-planet {
  position: absolute;
  top: 70px;
  left: calc(50% - 67px);
  width: 134px;
  height: 134px;
  border: 7px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: inset -25px -12px 0 rgba(219, 78, 30, 0.28);
}

.about-planet::after {
  position: absolute;
  top: 48px;
  right: -42px;
  left: -42px;
  height: 28px;
  border: 8px solid var(--yellow);
  border-radius: 50%;
  content: "";
  transform: rotate(-13deg);
}

.about-star,
.about-rocket {
  position: absolute;
  color: var(--blue);
  font-size: 1.8rem;
  font-weight: 900;
}

.star-a {
  top: 28px;
  right: 32px;
  color: var(--yellow);
}

.star-b {
  bottom: 25px;
  left: 28px;
}

.about-rocket {
  right: 27px;
  bottom: 26px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 15px;
  background: var(--yellow);
  color: var(--blue-dark);
}

.about-us-copy h2 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.about-us-copy > p:not(.eyebrow) {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.about-us-copy > strong {
  display: block;
  margin-top: 20px;
  color: var(--blue-dark);
}

.about-profile {
  display: inline-flex;
  gap: 6px;
  margin-top: 24px;
  padding: 10px 14px;
  border: 2px solid var(--blue-dark);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.colombia-love {
  --colombia-yellow: #fcd116;
  --colombia-blue: #003893;
  --colombia-red: #ce1126;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(30px, 6vw, 64px);
  align-items: center;
  width: min(100%, 900px);
  margin: 40px auto 0;
  padding: clamp(30px, 5vw, 50px);
  border: 2px solid var(--line);
  border-top: 7px solid var(--colombia-yellow);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.scene-colombia::before {
  background: var(--yellow-soft);
}

.scene-colombia .pybot-wrap .arm-right {
  animation: none;
  transform: rotate(-150deg) translateY(-4px);
}

.scene-colombia .lesson-pybot-figure {
  left: -20px;
}

/* Sits behind PyBot so the raised hand grips the pole. */
.colombia-flag {
  position: absolute;
  top: 172px;
  left: 268px;
  z-index: 3;
  width: 92px;
  height: 150px;
  transform: rotate(5deg);
  transform-origin: bottom left;
}

.colombia-flag i {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 150px;
  border-radius: 4px;
  background: var(--blue-dark);
}

.colombia-flag i::before {
  position: absolute;
  top: -10px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--blue-dark);
  content: "";
}

.colombia-flag b {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 84px;
  height: 58px;
  border: 3px solid var(--blue-dark);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(
    var(--colombia-yellow) 0 50%,
    var(--colombia-blue) 50% 75%,
    var(--colombia-red) 75% 100%
  );
  transform-origin: left center;
  animation: flag-wave 1.6s ease-in-out infinite alternate;
}

.colombia-heart {
  position: absolute;
  z-index: 8;
  color: var(--colombia-red);
  font-size: 1.7rem;
  line-height: 1;
  animation: colombia-heart-float 2.8s ease-in-out infinite;
}

.heart-a {
  top: 108px;
  left: 18px;
}

.heart-b {
  top: 150px;
  left: 64px;
  font-size: 1.1rem;
  animation-delay: 0.9s;
}

.heart-c {
  top: 92px;
  right: 120px;
  font-size: 1.3rem;
  animation-delay: 1.7s;
}

@keyframes colombia-heart-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-10px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .colombia-flag b,
  .colombia-heart {
    animation: none;
  }
}

.colombia-love-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.colombia-love-copy > p:not(.eyebrow) {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.learning-loop {
  padding: 120px 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  column-gap: 80px;
  align-items: end;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
}

.section-heading h2,
.preview-copy h2,
.local-first h2 {
  font-size: clamp(2.3rem, 4.2vw, 4rem);
}

.section-heading > p:last-child {
  max-width: 460px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 1.05rem;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 55px 0 0;
  padding: 0;
  list-style: none;
}

.step-card {
  position: relative;
  min-height: 320px;
  padding: 35px 31px 31px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.step-card::after {
  position: absolute;
  right: -50px;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  content: "";
  opacity: 1;
}

.step-orange::after {
  background: var(--orange-decor);
}

.step-blue::after {
  background: var(--blue-decor);
}

.step-yellow::after {
  background: var(--yellow-decor);
}

.step-number {
  position: absolute;
  top: 24px;
  right: 27px;
  color: #bdcad8;
  font-size: 1rem;
  font-weight: 900;
}

.step-icon {
  display: grid;
  width: 67px;
  height: 67px;
  place-items: center;
  margin-bottom: 28px;
  border: 3px solid var(--blue-dark);
  border-radius: 21px;
  font-size: 1.25rem;
  font-weight: 900;
}

.idea-icon {
  position: relative;
  background: var(--orange-soft);
}

.idea-icon::before {
  width: 25px;
  height: 28px;
  border: 4px solid var(--orange-dark);
  border-radius: 50% 50% 45% 45%;
  content: "";
}

.idea-icon span {
  position: absolute;
  bottom: 12px;
  width: 17px;
  height: 4px;
  border-radius: 4px;
  background: var(--orange-dark);
}

.code-icon {
  background: var(--blue-soft);
  color: var(--blue);
  letter-spacing: -0.12em;
}

.result-icon {
  background: var(--yellow-soft);
  color: #856400;
  font-size: 1.7rem;
}

.step-card h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.step-card p {
  margin: 12px 0 0;
  color: var(--muted);
}

.lesson-preview {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
  padding: 105px clamp(30px, 6vw, 78px);
  border-radius: 42px;
  background: var(--blue-soft);
}

.preview-copy > p:not(.eyebrow) {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.tiny-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 28px;
  padding-top: 25px;
  border-top: 2px dashed #c6d7ed;
}

.tiny-note-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 900;
}

.tiny-note p {
  margin: 2px 0 0 !important;
  font-size: 0.88rem !important;
}

.code-window {
  overflow: hidden;
  border: 3px solid var(--blue-dark);
  border-radius: 24px;
  background: #132d4b;
  box-shadow: 13px 15px 0 rgba(23, 59, 130, 0.14);
  color: var(--white);
}

.window-bar {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 2px solid #38516d;
  background: #1d3d61;
  color: #d9e6f4;
  font-size: 0.74rem;
  font-weight: 800;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

.window-dots i:nth-child(2) {
  background: var(--yellow);
}

.window-dots i:nth-child(3) {
  background: #58d09a;
}

.preview-tag {
  margin-left: auto;
  color: #a9bdd1;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.code-area {
  display: grid;
  grid-template-columns: 30px 1fr;
  min-height: 150px;
  align-items: start;
  padding: 36px 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 56px, transparent 56px),
    #132d4b;
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(0.9rem, 1.6vw, 1.06rem);
}

.code-area textarea {
  width: 100%;
  min-height: 116px;
  padding: 0;
  resize: vertical;
  border: 0;
  background: transparent;
  color: #ffd86b;
  caret-color: var(--yellow);
  font: inherit;
  line-height: 1.55;
  outline: 0;
  tab-size: 2;
}

.code-area:focus-within {
  box-shadow: inset 0 0 0 3px rgba(121, 184, 255, 0.48);
}

.line-number {
  color: #6f88a2;
  user-select: none;
}

.code-function {
  color: #79b8ff;
}

.code-string {
  color: #ffd86b;
}

.output-area {
  min-height: 110px;
  padding: 20px 28px;
  border-top: 2px solid #38516d;
  background: #0e243d;
}

.output-label {
  color: #7f9ab4;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.output-area p {
  margin: 8px 0 0;
  color: #daecff;
  font-family: Consolas, "Courier New", monospace;
}

.output-area p .output-cursor {
  color: var(--yellow);
  animation: cursor-blink 1.1s steps(1) infinite;
}

.output-area .python-hint {
  margin: 10px 0 4px;
  padding: 10px 14px;
  border-left: 4px solid var(--yellow);
  border-radius: 12px;
  background: #17304f;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.98rem;
  line-height: 1.45;
}

.output-area .python-hint[hidden] {
  display: none;
}

.output-area .python-hint strong {
  display: block;
  color: var(--yellow);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.output-area pre {
  min-height: 48px;
  margin: 8px 0 0;
  overflow: auto;
  color: #daecff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.runner-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 0 16px 16px;
}

.run-button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  border: 2px solid var(--yellow);
  border-radius: 13px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 900;
  cursor: pointer;
}

.run-button:hover:not(:disabled),
.run-button:focus-visible {
  background: #ffe778;
}

.run-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.stop-button {
  display: flex;
  min-width: 106px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid #7890a9;
  border-radius: 13px;
  background: transparent;
  color: #d9e6f4;
  font-weight: 900;
  cursor: pointer;
}

.stop-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.stop-button:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}

.runtime-credit {
  padding: 13px 17px 16px;
  border-top: 2px solid #38516d;
  background: #f4f8fc;
  color: var(--muted);
  font-size: 0.7rem;
}

.runtime-credit summary {
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.runtime-credit p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.runtime-credit a {
  color: var(--blue-dark);
  font-weight: 900;
}

.local-first {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 90px;
  padding: 60px clamp(30px, 6vw, 75px);
  border: 3px solid var(--blue-dark);
  border-radius: 35px;
  background: var(--yellow);
  box-shadow: 11px 12px 0 var(--blue-dark);
}

.local-first .eyebrow {
  color: var(--blue-dark);
}

.local-first h2 {
  max-width: 790px;
}

.local-first .local-text {
  max-width: 750px;
  margin: 18px 0 0;
  color: #384d66;
}

.backup-tools {
  max-width: 750px;
  margin-top: 28px;
  padding: 22px 24px;
  border: 2px solid var(--blue-dark);
  border-radius: 22px;
  background: var(--white);
}

.backup-tools strong {
  color: var(--blue-dark);
  font-size: 1.05rem;
}

.backup-tools p {
  margin: 6px 0 0;
  color: var(--muted);
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.backup-actions button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.backup-actions button:first-child {
  background: var(--blue);
  color: var(--white);
}

.backup-actions button:hover,
.backup-actions button:focus-visible {
  background: var(--blue-dark);
  color: var(--white);
}

.backup-tools .backup-status:empty {
  display: none;
}

.backup-tools .backup-status {
  margin-top: 12px;
  color: var(--blue-dark);
  font-weight: 900;
}

.backup-tools .backup-version {
  margin-top: 12px;
  font-size: 0.85rem;
}

.reset-tools {
  max-width: 750px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.reset-tools summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 800;
}

.reset-tools p {
  margin: 8px 0 0;
}

.reset-tools button {
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 2px solid #9b2c2c;
  border-radius: 14px;
  background: var(--white);
  color: #9b2c2c;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.reset-tools button:hover,
.reset-tools button:focus-visible {
  background: #9b2c2c;
  color: var(--white);
}

.reset-tools .backup-status:empty {
  display: none;
}

.reset-tools .backup-status {
  margin-top: 10px;
  color: var(--blue-dark);
  font-weight: 900;
}

.local-icon {
  position: relative;
  width: 150px;
  height: 120px;
  border: 6px solid var(--blue-dark);
  border-radius: 24px;
  background: var(--white);
}

.local-icon::before {
  position: absolute;
  top: -19px;
  left: 29px;
  width: 80px;
  height: 31px;
  border: 6px solid var(--blue-dark);
  border-radius: 20px 20px 6px 6px;
  background: var(--orange);
  content: "";
}

.local-icon::after {
  position: absolute;
  top: 35px;
  left: 55px;
  width: 28px;
  height: 36px;
  border: 6px solid var(--blue-dark);
  border-radius: 16px 16px 8px 8px;
  background: var(--blue-soft);
  content: "";
}

.local-icon span {
  position: absolute;
  top: 52px;
  left: 67px;
  z-index: 1;
  width: 6px;
  height: 15px;
  border-radius: 4px;
  background: var(--orange-dark);
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 120px;
  padding: 35px 0 45px;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.footer-brand {
  font-size: 1.1rem;
}

.site-footer p {
  margin: 0;
  text-align: center;
}

.site-footer .footer-credit {
  grid-column: 1 / -1;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.75rem;
}

.footer-credit a {
  margin-left: 6px;
  color: inherit;
}

.footer-status {
  justify-self: end;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-main {
  width: min(1040px, calc(100% - 40px));
  margin-inline: auto;
}

.course-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: end;
  padding: 90px 0 62px;
}

.course-intro h1 {
  margin: 0;
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.course-intro h1 span {
  display: block;
}

.course-intro h1 span:last-child {
  color: var(--blue);
}

.course-intro > div > p:last-child {
  max-width: 530px;
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.course-rule {
  display: flex;
  max-width: 260px;
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 17px;
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--blue-dark);
}

.course-rule > span {
  color: var(--blue-dark);
  font-size: 1.4rem;
  font-weight: 900;
}

.course-rule p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
}

.course-rule a {
  display: inline-block;
  margin-top: 5px;
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.mission-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  min-height: 140px;
  padding: 24px 29px 24px 22px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(35, 68, 114, 0.07);
}

.mission-card[data-course-step].is-current {
  border-color: var(--blue-dark);
  box-shadow: 7px 8px 0 rgba(23, 59, 130, 0.18);
  transform: translateY(-2px);
}

.mission-card[data-course-step].is-current::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background: var(--yellow);
  content: "";
}

.mission-card[data-course-step].is-visited .mission-number {
  border-color: var(--blue);
  background: var(--blue);
  color: transparent;
}

.mission-card[data-course-step].is-visited .mission-number::after {
  position: absolute;
  color: var(--white);
  content: "✓";
}

.course-step-status {
  min-width: 82px;
  color: #9aaac0;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: right;
}

.mission-card.is-current .course-step-status {
  color: var(--orange-dark);
}

.mission-card.is-visited .course-step-status {
  color: var(--blue);
}

.mission-card[data-course-step].is-new {
  border-color: var(--orange);
  background: #fff1e8;
}

.mission-card[data-course-step].is-new .mission-number::after {
  position: absolute;
  top: -10px;
  right: -14px;
  padding: 2px 6px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.6rem;
  content: "★";
}

.mission-card.is-new .course-step-status {
  color: var(--orange-dark);
}

.foundation-route a.is-new {
  border-color: var(--orange);
}

.path-new-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--white);
  color: var(--orange-dark);
  font-weight: 900;
  text-decoration: none;
}

.path-new-link[hidden] {
  display: none;
}

.mission-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7px;
  background: var(--orange);
  content: "";
}

.mission-blue::before {
  background: var(--blue);
}

.mission-yellow::before {
  background: var(--yellow);
}

.mission-foundation {
  border-color: var(--blue-dark);
  background: linear-gradient(100deg, var(--blue-dark), #2258b7);
  color: var(--white);
  box-shadow: 8px 9px 0 rgba(23, 59, 130, 0.18);
}

.mission-foundation::before {
  background: var(--yellow);
}

/* A pit stop on the track: checkered flag stripe and a dashed lane. */
.mission-checkpoint {
  border: 3px dashed var(--blue-dark);
  background: var(--yellow-soft);
}

.mission-checkpoint::before {
  width: 14px;
  background: repeating-conic-gradient(var(--blue-dark) 0 25%, var(--white) 0 50%) 0 0 / 14px 14px;
}

.mission-checkpoint .mission-number {
  border-color: var(--blue-dark);
  background: var(--white);
  font-size: 1.5rem;
}

.mission-card[data-course-step].is-review {
  border-color: var(--orange-dark);
}

.mission-card[data-course-step].is-review .mission-number::after {
  position: absolute;
  top: -10px;
  right: -14px;
  padding: 1px 5px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 0.7rem;
  content: "🔧";
}

.mission-card.is-review .course-step-status {
  color: var(--orange-dark);
}

/* A zone that opens after the one before it: soft and dimmed, never scary. */
.mission-card.is-locked {
  border-style: dashed;
  background: #f5f7fb;
}

.mission-card.is-locked .mission-copy > :not(.zone-lock-note),
.mission-card.is-locked .mission-number,
.mission-card.is-locked .mission-start,
.mission-card.is-locked nav a.is-locked {
  opacity: 0.6;
}

.zone-lock-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 8px 0 0;
  color: var(--blue-dark);
  font-weight: 900;
}

.zone-lock-note a {
  color: var(--orange-dark);
}

/* Kept quiet on purpose, so it is not a tempting button for small kids. */
.zone-skip {
  margin: 6px 0 0;
  font-size: 0.75rem;
}

.zone-skip button {
  padding: 0;
  border: 0;
  background: none;
  color: #9aaac0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.zone-skip span {
  color: var(--muted);
  font-weight: 700;
}

.mission-foundation .zone-skip button,
.mission-foundation .zone-skip span {
  color: rgba(255, 255, 255, 0.72);
}

.zone-locked .lesson-main > :not(.lesson-back):not(.lesson-crumb):not(.zone-lock) {
  display: none;
}

.zone-lock {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 32px auto;
  padding: 28px 24px;
  border: 3px dashed var(--blue-dark);
  border-radius: 24px;
  background: var(--yellow-soft);
  text-align: center;
}

.zone-lock > span {
  font-size: 3rem;
}

.zone-lock h1,
.zone-lock p {
  margin: 0;
}

.mission-number {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 17px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 900;
}

.mission-foundation .mission-number {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--yellow);
}

.mission-copy {
  min-width: 0;
}

.mission-concept {
  display: block;
  margin-bottom: 3px;
  color: var(--orange-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.mission-foundation .mission-concept {
  color: var(--yellow);
}

.mission-copy h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.mission-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.mission-foundation .mission-copy p {
  color: #dae7ff;
}

.mission-code {
  min-width: 105px;
  padding: 11px 14px;
  border: 2px solid #c9d6e5;
  border-radius: 13px;
  background: #f4f8fc;
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.mission-foundation .mission-code {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.mission-start {
  min-width: 105px;
  padding: 12px 16px;
  border: 2px solid var(--yellow);
  border-radius: 13px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mission-start:hover {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.foundation-route {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 2px;
}

.foundation-route a {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  min-height: 62px;
  padding: 9px 11px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  text-decoration: none;
}

.foundation-route a:hover,
.foundation-route a:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.foundation-route a > span {
  position: relative;
  display: grid;
  grid-row: 1 / 3;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 900;
}

.foundation-route b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foundation-route small {
  color: #c8d8f5;
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.foundation-route a.is-current {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--blue-dark);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.19);
}

.foundation-route a.is-current small {
  color: var(--orange-dark);
}

.foundation-route a.is-visited {
  background: rgba(255, 255, 255, 0.2);
}

.foundation-route a.is-visited > span::after {
  position: absolute;
  content: "✓";
}

.foundation-route a.is-visited > span {
  color: transparent;
}

.foundation-route a.is-visited > span::after {
  color: var(--yellow);
}

/* The same route inside a light zone card, for zones split into subtopics. */
.zone-route a {
  border-color: var(--line);
  background: #fffaf0;
  color: var(--blue-dark);
}

.zone-route a:hover,
.zone-route a:focus-visible {
  background: #fff3cc;
}

.zone-route small {
  color: #9aaac0;
}

.zone-route a.is-current {
  border-color: var(--blue-dark);
}

.zone-route a.is-visited {
  border-color: var(--blue);
  background: #eef4ff;
}

.zone-route a.is-visited > span::after {
  color: var(--blue);
}

.zone-route a.is-visited small {
  color: var(--blue);
}

.zone-route a.is-new {
  background: #fff1e8;
}

.zone-route a.is-new small,
.zone-route a.is-review small {
  color: var(--orange-dark);
}

.course-note {
  display: flex;
  gap: 18px;
  align-items: center;
  width: fit-content;
  margin: 50px auto 0;
  padding: 17px 25px 17px 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 6px 7px 0 rgba(23, 59, 130, 0.15);
}

.course-note-face {
  display: flex;
  width: 52px;
  height: 45px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--blue-dark);
  border-radius: 15px;
  background: var(--orange);
}

.course-note-face i {
  width: 7px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-dark);
}

.construction-note {
  margin: 28px auto 0;
  color: var(--blue-dark);
  font-weight: 800;
  text-align: center;
}

.course-note p {
  margin: 2px 0 0;
  font-weight: 900;
}

.lesson-site-header {
  border-bottom: 2px solid var(--line);
}

.lesson-main {
  width: min(1040px, calc(100% - 40px));
  margin-inline: auto;
  padding: 34px 0 80px;
}

.lesson-back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.lesson-back:hover {
  color: var(--blue);
}

/* Where you are: zone, zone name and page, built from pathZones in script.js. */
.lesson-crumb {
  margin: 12px 0 18px;
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.58fr);
  gap: clamp(32px, 5vw, 65px);
  align-items: center;
  margin-top: 25px;
  padding: clamp(42px, 7vw, 76px);
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 38px;
  box-shadow: var(--small-shadow);
}

.lesson-hero-world {
  min-height: 620px;
  border-color: #d7e2ec;
  background: linear-gradient(104deg, #fffaf2 0 61%, var(--orange) 61% 100%);
  box-shadow: var(--small-shadow);
}

.lesson-hero-world .eyebrow > span {
  background: var(--orange);
  color: var(--white);
}

.lesson-hero-language {
  min-height: 620px;
  border-color: #d7e2ec;
  background: linear-gradient(104deg, #f7faff 0 61%, var(--blue-stage) 61% 100%);
}

.lesson-hero-thinking {
  min-height: 620px;
  border-color: #eadca3;
  background: linear-gradient(104deg, #fffaf2 0 61%, var(--yellow) 61% 100%);
}

.lesson-hero h1 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(3rem, 6.8vw, 5.7rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.lesson-lead {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1.12rem;
  font-weight: 700;
}

.lesson-pybot-note {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 2px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 6px 7px 0 rgba(23, 59, 130, 0.14);
}

.lesson-pybot-note .course-note-face {
  flex: 0 0 auto;
}

.lesson-pybot-note p {
  margin: 3px 0 0;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.38;
}

.lesson-pybot-scene {
  position: relative;
  width: 360px;
  height: 500px;
  justify-self: center;
}

.lesson-pybot-scene::before {
  position: absolute;
  right: -2px;
  bottom: 12px;
  z-index: 0;
  width: 320px;
  height: 320px;
  border: 4px solid var(--blue-dark);
  border-radius: 50%;
  background: #fff4c9;
  box-shadow: 10px 12px 0 rgba(23, 59, 130, 0.15);
  content: "";
}

.lesson-pybot-bubble {
  position: absolute;
  top: 0;
  left: -12px;
  z-index: 9;
  width: 236px;
  padding: 14px 18px 16px;
  border: 2px solid var(--blue-dark);
  border-radius: 18px 18px 18px 5px;
  background: var(--white);
  box-shadow: 6px 7px 0 rgba(23, 59, 130, 0.14);
}

.lesson-pybot-bubble::after {
  position: absolute;
  bottom: -13px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid var(--blue-dark);
  border-left: 2px solid var(--blue-dark);
  background: var(--white);
  content: "";
  transform: rotate(-45deg);
}

.lesson-pybot-bubble p {
  margin: 3px 0 0;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.35;
}

.lesson-pybot-figure {
  position: absolute;
  bottom: 0;
  left: 10px;
  margin: 0;
  transform: scale(0.92);
  transform-origin: bottom center;
}

.floating-question {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 900;
  transform: rotate(8deg);
}

.question-one {
  top: 105px;
  right: 2px;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
}

.question-two {
  top: 172px;
  right: 39px;
  width: 30px;
  height: 30px;
  border-width: 2px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 0.82rem;
  transform: rotate(-8deg);
}

.language-symbol-scene::before {
  background: #fff4c9;
}

.code-symbol {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 50px;
  height: 46px;
  place-items: center;
  padding-inline: 9px;
  border: 3px solid var(--blue-dark);
  border-radius: 15px;
  background: var(--white);
  box-shadow: 4px 5px 0 rgba(23, 59, 130, 0.16);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 1rem;
  font-weight: 900;
}

.symbol-braces {
  top: 108px;
  right: -4px;
  background: var(--yellow);
  transform: rotate(7deg);
}

.symbol-brackets {
  top: 228px;
  left: -18px;
  background: var(--orange);
  color: var(--white);
  transform: rotate(-8deg);
}

.symbol-parentheses {
  right: -6px;
  bottom: 23px;
  background: var(--blue);
  color: var(--white);
  transform: rotate(6deg);
}

.symbol-semicolon {
  bottom: 51px;
  left: 5px;
  min-width: 42px;
  background: var(--yellow);
  transform: rotate(-7deg);
}

.pybot-magnifier {
  position: absolute;
  top: 127px;
  right: -12px;
  z-index: 8;
  width: 68px;
  height: 68px;
  border: 7px solid var(--blue-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 8px 8px 0 rgba(255, 255, 255, 0.38);
  transform: rotate(-7deg);
}

.pybot-magnifier::before {
  position: absolute;
  top: 10px;
  left: 13px;
  width: 18px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  content: "";
  transform: rotate(-32deg);
}

.pybot-magnifier::after {
  position: absolute;
  top: 54px;
  left: 2px;
  width: 19px;
  height: 72px;
  border: 6px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--orange);
  content: "";
  transform: rotate(38deg);
  transform-origin: top center;
}

.language-symbol-scene .arm-right {
  transform: rotate(-57deg) translate(-3px, -18px);
}

.steps-pybot-scene::before {
  background: var(--orange-soft);
}

.steps-pybot-scene::after {
  position: absolute;
  top: 149px;
  right: 13px;
  z-index: 1;
  width: 68px;
  height: 225px;
  border-right: 5px dashed var(--blue-dark);
  border-radius: 50%;
  content: "";
  opacity: 0.34;
  transform: rotate(-7deg);
}

.plan-bubble {
  position: absolute;
  z-index: 8;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  box-shadow: 4px 5px 0 rgba(23, 59, 130, 0.17);
  color: var(--blue-dark);
  font-weight: 900;
}

.plan-one {
  top: 115px;
  right: 7px;
  background: var(--orange);
  color: var(--white);
  transform: rotate(7deg);
}

.plan-two {
  top: 212px;
  right: -14px;
  background: var(--blue);
  color: var(--white);
  transform: rotate(-6deg);
}

.plan-three {
  right: 9px;
  bottom: 47px;
  background: var(--yellow);
  transform: rotate(6deg);
}

.app-jobs,
.language-rules {
  padding: 95px 0 0;
}

.thinking-practice {
  padding-top: 95px;
}

.thinking-confidence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 55px);
  align-items: center;
  margin-top: 78px;
  padding: clamp(28px, 5vw, 48px);
  border: 3px solid var(--blue-dark);
  border-radius: 28px;
  background: linear-gradient(135deg, #fffbe1, #ffe778);
  box-shadow: 8px 9px 0 var(--blue-dark);
}

.confidence-path {
  display: flex;
  align-items: center;
  gap: 8px;
}

.confidence-path span {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  background: var(--white);
  color: var(--blue-dark);
  font-weight: 900;
}

.confidence-path span:nth-of-type(2) {
  background: var(--orange);
  color: var(--white);
}

.confidence-path span:nth-of-type(3) {
  background: var(--blue);
  color: var(--white);
}

.confidence-path b {
  color: var(--orange-dark);
  font-size: 1.15rem;
}

.thinking-confidence h2 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.thinking-confidence p:not(.eyebrow) {
  max-width: 720px;
  margin: 15px 0 0;
  color: #41566f;
  font-size: 0.98rem;
  line-height: 1.55;
}

.thinking-confidence strong {
  display: block;
  margin-top: 12px;
  color: var(--blue-dark);
  font-size: 0.96rem;
}

.thinking-algorithm {
  padding-top: 95px;
}

.algorithm-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.algorithm-rules li {
  padding: 24px;
  border: 3px solid var(--blue-dark);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 5px 6px 0 var(--blue-dark);
}

.algorithm-rules span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--orange);
  color: var(--white);
  font-weight: 900;
}

.algorithm-rules h3 {
  margin: 14px 0 0;
  color: var(--blue-dark);
  font-size: 1.25rem;
}

.algorithm-rules p {
  margin: 8px 0 0;
  color: #41566f;
  line-height: 1.5;
}

.algorithm-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
  margin-top: 36px;
  padding: clamp(28px, 5vw, 44px);
  border: 3px solid var(--blue-dark);
  border-radius: 28px;
  background: linear-gradient(135deg, #eef4ff, #d6e4ff);
  box-shadow: 8px 9px 0 var(--blue-dark);
}

.algorithm-code h3 {
  margin: 8px 0 0;
  color: var(--blue-dark);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.algorithm-code > div > p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #41566f;
  line-height: 1.55;
}

.algorithm-code strong {
  display: block;
  margin-top: 12px;
  color: var(--blue-dark);
}

.algorithm-listing {
  margin: 0;
  padding: 22px;
  border: 3px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--blue-dark);
  color: var(--white);
}

.algorithm-listing figcaption {
  font-weight: 900;
}

.algorithm-listing ol {
  margin: 14px 0 0;
  padding-left: 2.2em;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.8;
}

.algorithm-listing li::marker {
  color: #ffb08f;
}

.algorithm-listing p {
  margin: 14px 0 0;
  color: #ffe778;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .algorithm-rules,
  .algorithm-code {
    grid-template-columns: 1fr;
  }
}

.practice-intro {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.plan-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin-top: 28px;
}

.plan-progress-summary > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 12px 15px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}

.plan-progress-summary strong {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--blue);
  color: var(--white);
  font-size: 1.05rem;
}

.plan-progress-summary span {
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.plan-progress-summary .progress-remaining strong {
  background: var(--yellow);
  color: var(--blue-dark);
}

.plan-progress-summary .progress-review strong {
  background: var(--orange);
}

.step-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.step-activity {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 25px;
  background: var(--white);
  box-shadow: 0 10px 25px rgba(35, 68, 114, 0.08);
}

.step-activity.needs-review:not(.is-complete)::before {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 4;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 11px;
  background: var(--orange);
  color: var(--white);
  content: "?";
  font-weight: 900;
}

.activity-bag {
  border-top-color: var(--blue);
}

.all-plans .step-activity:nth-child(3n + 1) {
  border-top-color: var(--orange);
}

.all-plans .step-activity:nth-child(3n + 2) {
  border-top-color: var(--blue);
}

.all-plans .step-activity:nth-child(3n) {
  border-top-color: #e0b400;
}

.step-activity-header {
  display: flex;
  gap: 14px;
  align-items: center;
}

.step-activity-header > span {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 15px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 900;
}

.activity-bag .step-activity-header > span {
  background: var(--blue);
  color: var(--white);
}

.all-plans .step-activity:nth-child(3n + 1) .step-activity-header > span {
  background: var(--orange);
  color: var(--white);
}

.all-plans .step-activity:nth-child(3n + 2) .step-activity-header > span {
  background: var(--blue);
  color: var(--white);
}

.all-plans .step-activity:nth-child(3n) .step-activity-header > span {
  background: var(--yellow);
  color: var(--blue-dark);
}

.step-activity h3 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.daily-plan {
  display: grid;
  gap: 10px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.daily-plan li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 7px 13px 7px 8px;
  border: 2px solid #e2e9f0;
  border-radius: 16px;
  background: #fbfdff;
}

.daily-plan li > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.74rem;
  font-weight: 900;
}

.daily-plan p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.daily-plan .missing-step {
  border-color: var(--yellow);
  border-style: dashed;
  background: var(--yellow-soft);
}

.daily-plan .missing-step > span {
  background: var(--yellow);
}

.daily-plan .missing-step p {
  color: var(--orange-dark);
  font-size: 1.2rem;
}

.activity-question {
  margin: 24px 0 12px;
  color: var(--blue-dark);
  font-size: 0.96rem;
  font-weight: 900;
}

.activity-options {
  display: grid;
  gap: 9px;
}

.activity-options button {
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid #cbd8e5;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.83rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.activity-options button:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  transform: translateX(3px);
}

.activity-options button.is-correct {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: var(--white);
}

.activity-options button.is-wrong {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange-dark);
  animation: answer-shake 330ms ease-in-out;
}

.activity-feedback {
  min-height: 44px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.4;
}

.step-activity.is-complete .activity-feedback {
  color: var(--blue-dark);
}

.step-activity.is-complete .missing-step {
  border-color: var(--blue);
  border-style: solid;
  background: var(--blue-soft);
}

.step-activity.is-complete .missing-step p {
  color: var(--blue-dark);
  font-size: 0.84rem;
}

.activity-options button:disabled {
  cursor: default;
  transform: none;
}

.answer-confetti {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 72%;
  left: 50%;
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 3px;
  background: var(--confetti-color);
  opacity: 0;
  animation: confetti-burst 1050ms cubic-bezier(0.16, 0.72, 0.24, 1) var(--confetti-delay) forwards;
}

.page-progress-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: center;
  margin-top: 32px;
  padding: 22px 24px;
  border: 2px dashed #c7d5e4;
  border-radius: 22px;
  background: var(--white);
}

.page-progress-tools strong {
  color: var(--blue-dark);
  font-size: 0.92rem;
}

.page-progress-tools p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.page-progress-tools button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border: 2px solid var(--orange-dark);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.page-progress-tools button:hover {
  background: var(--orange);
  color: var(--white);
}

.page-progress-tools .progress-reset-status {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: var(--blue-dark);
  font-weight: 900;
}

.lesson-section-heading h2,
.same-job h2,
.lesson-big-idea h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.lesson-section-heading h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.7rem);
}

.app-job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 38px;
}

.app-job-card {
  --card-accent: var(--blue);
  --card-decor: var(--blue-decor);
  position: relative;
  z-index: 0;
  min-height: 255px;
  padding: 29px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-top: 7px solid var(--card-accent);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(35, 68, 114, 0.07);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.app-job-card:hover {
  box-shadow: 0 16px 34px rgba(35, 68, 114, 0.13);
  transform: translateY(-4px);
}

.app-job-card::after {
  display: none;
}

.app-game {
  --card-accent: var(--blue);
  --card-decor: var(--blue-decor);
  background: var(--white);
}

.app-map {
  --card-accent: var(--blue);
  --card-decor: var(--blue-decor);
  background: var(--white);
}

.app-video {
  --card-accent: var(--orange);
  --card-decor: var(--orange-decor);
  background: var(--white);
}

.app-learn {
  --card-accent: #e0b400;
  --card-decor: var(--yellow-decor);
  background: var(--white);
}

.app-job-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  margin-bottom: 19px;
  border: 3px solid var(--blue-dark);
  border-radius: 15px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 0.86rem;
  font-weight: 900;
}

.app-map .app-job-icon,
.app-learn .app-job-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.app-video .app-job-icon {
  background: var(--yellow-soft);
  color: #745900;
}

.app-game .app-job-icon {
  border-color: var(--yellow);
  background: var(--orange);
  color: var(--white);
}

.app-learn .app-job-icon {
  background: var(--yellow);
  color: var(--blue-dark);
}

.app-job-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.app-job-card p {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.app-example {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: center;
  margin: -3px 0 20px;
}

.app-example span {
  color: var(--orange-dark);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.app-example strong {
  padding: 5px 9px;
  border: 1px solid rgba(23, 59, 130, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  font-size: 0.75rem;
  font-weight: 900;
}

.app-example-note {
  margin: 16px 2px 0;
  color: #7a8da3;
  font-size: 0.72rem;
}

.lesson-big-idea {
  display: flex;
  gap: 23px;
  align-items: center;
  margin-top: 70px;
  padding: 31px 35px;
  border: 3px solid var(--blue-dark);
  border-radius: 25px;
  background: var(--yellow);
  box-shadow: 8px 9px 0 var(--blue-dark);
}

.big-idea-mark {
  display: grid;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 4px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--white);
  color: var(--orange-dark);
  font-size: 1.8rem;
  font-weight: 900;
}

.big-idea-label {
  color: var(--blue-dark);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.lesson-big-idea h2 {
  margin-top: 2px;
  font-size: clamp(1.45rem, 3.2vw, 2.25rem);
}

.lesson-big-idea p {
  margin: 7px 0 0;
  color: #394d65;
}

.lesson-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 58px;
  padding-top: 28px;
  border-top: 2px solid var(--line);
}

.rule-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 38px;
}

.rule-card {
  min-height: 210px;
  padding: 27px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(35, 68, 114, 0.07);
}

.rule-number {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  margin-bottom: 26px;
  border: 2px solid var(--blue-dark);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.rule-card:nth-child(1) .rule-number {
  background: var(--orange);
  color: var(--white);
}

.rule-card:nth-child(2) .rule-number {
  background: var(--blue);
  color: var(--white);
}

.rule-card:nth-child(3) .rule-number {
  background: var(--yellow);
  color: var(--blue-dark);
}

.rule-card h3 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.rule-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.rule-card code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
}

.same-job {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: clamp(40px, 7vw, 80px);
  align-items: center;
  margin-top: 80px;
  padding: clamp(35px, 6vw, 65px);
  border-radius: 32px;
  background: var(--blue-soft);
}

.same-job h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
}

.same-job-copy > p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
}

.language-code-grid {
  display: grid;
  gap: 12px;
}

.language-code-card {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  min-height: 96px;
  overflow: hidden;
  border: 2px solid var(--blue-dark);
  border-radius: 18px;
  background: #132d4b;
  color: var(--white);
}

.language-code-card > span {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 10px;
  border-right: 2px solid #38516d;
  color: #a9bdd1;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.language-code-card code {
  padding: 18px;
  font-family: Consolas, "Courier New", monospace;
  font-style: normal;
}

.language-code-card code b {
  color: #79b8ff;
}

.language-code-card code i {
  color: #ffd86b;
  font-style: normal;
}

.language-code-card p {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 12px;
  border-left: 2px solid #38516d;
  background: #0e243d;
  color: #d9e9f8;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
}

.language-code-card small {
  color: #7f9ab4;
  font-family: var(--font);
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.concept-preview {
  padding-top: 95px;
}

.concept-preview-intro {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.concept-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 38px;
}

.concept-card {
  min-width: 0;
  padding: 16px 16px 24px;
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 9px 24px rgba(35, 68, 114, 0.08);
}

.concept-card:nth-child(2) {
  border-top-color: var(--blue);
}

.concept-card:nth-child(3) {
  border-top-color: #dfb200;
}

.concept-card:nth-child(4) {
  border-top-color: var(--orange);
}

.concept-visual {
  position: relative;
  height: 166px;
  overflow: hidden;
  border-radius: 19px;
  background: var(--orange-soft);
}

.concept-condition .concept-visual {
  background: var(--blue-soft);
}

.concept-loop .concept-visual {
  background: var(--yellow-soft);
}

.concept-function .concept-visual {
  background: linear-gradient(145deg, #edf4ff, #d8e6ff);
}

.concept-mini-bot {
  position: absolute;
  top: 42px;
  left: 50%;
  z-index: 4;
  width: 64px;
  height: 51px;
  border: 4px solid var(--blue-dark);
  border-radius: 19px 19px 22px 22px;
  background: var(--orange);
  transform: translateX(-50%);
}

.concept-mini-bot::before {
  position: absolute;
  top: 47px;
  left: 8px;
  width: 40px;
  height: 43px;
  border: 4px solid var(--blue-dark);
  border-radius: 13px 13px 17px 17px;
  background: var(--blue);
  content: "";
}

.concept-mini-bot::after {
  position: absolute;
  top: -24px;
  left: 28px;
  width: 5px;
  height: 22px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--yellow);
  content: "";
}

.concept-mini-bot > i {
  position: absolute;
  top: 18px;
  width: 8px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue-dark);
}

.concept-mini-bot > i:first-child {
  left: 17px;
}

.concept-mini-bot > i:nth-child(2) {
  right: 17px;
}

.concept-mini-bot > b {
  position: absolute;
  bottom: 8px;
  left: calc(50% - 10px);
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: var(--orange-dark);
}

.memory-box {
  position: absolute;
  top: 57px;
  right: 12px;
  z-index: 5;
  display: grid;
  width: 64px;
  height: 54px;
  place-items: center;
  border: 4px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.7rem;
  font-weight: 900;
  transform: rotate(4deg);
}

.concept-variable .concept-mini-bot,
.concept-function .concept-mini-bot {
  left: 30%;
}

.decision-question {
  position: absolute;
  top: 10px;
  left: calc(50% - 16px);
  z-index: 6;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 900;
}

.choice-arrow {
  position: absolute;
  bottom: 11px;
  z-index: 6;
  display: grid;
  width: 50px;
  height: 37px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 13px;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 900;
}

.choice-left {
  left: 16px;
  background: var(--orange);
  transform: rotate(-5deg);
}

.choice-right {
  right: 16px;
  background: var(--blue);
  transform: rotate(5deg);
}

.loop-orbit {
  position: absolute;
  top: 17px;
  left: calc(50% - 66px);
  z-index: 2;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: start end;
  padding: 3px 11px;
  border: 5px dashed var(--blue);
  border-radius: 50%;
  color: var(--orange-dark);
  font-size: 1.6rem;
  font-weight: 900;
  animation: concept-loop-spin 6s linear infinite;
}

.concept-loop .concept-mini-bot {
  top: 48px;
  transform: translateX(-50%) scale(0.78);
}

.function-steps {
  position: absolute;
  top: 24px;
  right: 15px;
  z-index: 5;
  display: grid;
  gap: 5px;
}

.function-steps i,
.function-steps b {
  display: grid;
  width: 43px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--blue-dark);
  border-radius: 9px;
  background: var(--white);
  color: var(--blue-dark);
  font-style: normal;
  font-size: 0.62rem;
}

.function-steps b {
  background: var(--yellow);
  font-weight: 900;
}

.concept-card > code {
  display: inline-flex;
  margin-top: 18px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 900;
}

.concept-card h3 {
  margin: 13px 0 0;
  font-size: 1.18rem;
  letter-spacing: -0.025em;
}

.concept-card > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.code-care {
  padding-top: 95px;
}

.code-care-intro {
  max-width: 650px;
  margin: 16px 0 0;
  color: var(--muted);
}

.code-care-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.code-care-card {
  position: relative;
  min-height: 250px;
  padding: 25px;
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 25px;
  background: var(--white);
  box-shadow: 0 10px 25px rgba(35, 68, 114, 0.08);
}

.care-debug {
  border-top-color: var(--blue);
}

.care-compile {
  border-top-color: #e0b400;
}

.code-care-icon {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--orange);
  color: var(--white);
  font-weight: 900;
}

.care-debug .code-care-icon {
  background: var(--blue);
}

.care-compile .code-care-icon {
  background: var(--yellow);
  color: var(--blue-dark);
}

.tiny-bug {
  position: relative;
  display: grid;
  width: 38px;
  height: 32px;
  place-items: center;
  border: 3px solid var(--white);
  border-radius: 50% 50% 42% 42%;
  font-size: 0.76rem;
  letter-spacing: 4px;
}

.tiny-search {
  font-size: 2.4rem;
  line-height: 1;
}

.tiny-compile {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.code-care-number {
  position: absolute;
  top: 26px;
  right: 25px;
  color: #b8c7da;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.code-care-card h3 {
  margin: 25px 0 0;
  color: var(--ink);
  font-size: 1.28rem;
  letter-spacing: -0.025em;
}

.code-care-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.code-care-note {
  display: inline-flex;
  margin: 20px 0 0;
  padding: 10px 15px;
  border-radius: 12px;
  background: var(--yellow-soft);
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.topic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(34px, 7vw, 80px);
  align-items: center;
  padding: clamp(34px, 6vw, 68px);
  border: 2px solid var(--line);
  border-top: 8px solid var(--orange);
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.topic-page[data-page="environment"] .topic-hero,
.topic-page[data-page="conditionals"] .topic-hero,
.topic-page[data-page="comparisons"] .topic-hero,
.topic-page[data-page="comparisonsAnd"] .topic-hero,
.topic-page[data-page="comparisonsOr"] .topic-hero,
.topic-page[data-page="comparisonsNot"] .topic-hero,
.topic-page[data-page="comparisonsIn"] .topic-hero,
.topic-page[data-page="comparisonsLogic"] .topic-hero {
  border-top-color: var(--blue);
}

.topic-page[data-page="symbols"] .topic-hero,
.topic-page[data-page="loops"] .topic-hero {
  border-top-color: #e0b400;
}

.topic-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.topic-hero-copy > p:last-child {
  max-width: 600px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Zone header scenes: the full PyBot with a prop for each topic. */
.topic-pybot-scene {
  height: 470px;
}

.scene-keyboard::before,
.scene-boxes::before,
.scene-functions::before {
  background: var(--blue-soft);
}

.scene-environment::before,
.scene-loops::before {
  background: var(--orange-soft);
}

.scene-token-a {
  top: 112px;
  right: -6px;
  background: var(--yellow);
  transform: rotate(7deg);
}

.scene-token-b {
  top: 206px;
  right: -14px;
  background: var(--orange);
  color: var(--white);
  transform: rotate(-6deg);
}

.scene-token-c {
  top: 300px;
  right: -4px;
  background: var(--blue);
  color: var(--white);
  transform: rotate(5deg);
}

.scene-variables .scene-token-a {
  top: 214px;
  right: -10px;
}

.scene-keys {
  position: absolute;
  bottom: 26px;
  left: 62px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 230px;
  padding: 12px;
  border: 4px solid var(--blue-dark);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16);
  transform: perspective(300px) rotateX(18deg);
}

.scene-keys span {
  height: 18px;
  border: 2px solid var(--blue-dark);
  border-radius: 6px;
  background: var(--yellow-soft);
}

.scene-keys .scene-key-space {
  grid-column: 2 / 5;
  background: var(--orange);
}

.scene-window {
  position: absolute;
  top: 118px;
  right: -16px;
  z-index: 8;
  display: grid;
  gap: 8px;
  width: 128px;
  padding: 0 0 10px;
  overflow: hidden;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 4px 5px 0 rgba(23, 59, 130, 0.16);
  color: var(--blue-dark);
  font-weight: 900;
  text-align: center;
  transform: rotate(5deg);
}

.scene-window-bar {
  display: flex;
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 3px solid var(--blue-dark);
  background: var(--blue);
}

.scene-window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}

.scene-window code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
}

.scene-window b {
  justify-self: center;
  padding: 3px 12px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.75rem;
}

.scene-symbols .code-symbol {
  background: var(--white);
  color: var(--blue-dark);
}

.scene-symbols .symbol-brackets,
.scene-symbols .symbol-parentheses {
  background: var(--yellow);
}

.scene-box {
  display: grid;
  place-items: center;
  border: 4px solid var(--blue-dark);
  border-radius: 10px;
  background: #e7b77a;
  box-shadow: inset 0 9px 0 rgba(23, 59, 130, 0.12);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.scene-box-held {
  position: absolute;
  bottom: 52px;
  left: 108px;
  z-index: 8;
  width: 128px;
  height: 92px;
  gap: 2px;
  align-content: center;
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16), inset 0 12px 0 rgba(23, 59, 130, 0.12);
}

.scene-box-held b {
  padding: 1px 10px;
  border: 2px solid var(--blue-dark);
  border-radius: 6px;
  background: var(--white);
  font-size: 0.8rem;
}

.scene-box-held code {
  font-size: 1.5rem;
}

.scene-box-stack {
  position: absolute;
  right: -10px;
  bottom: 20px;
  z-index: 8;
  display: grid;
  justify-items: center;
}

.scene-box-stack .scene-box {
  width: 74px;
  height: 52px;
  margin-top: -4px;
  font-size: 0.95rem;
}

.scene-box-stack .scene-box:nth-child(1) {
  width: 60px;
  background: var(--yellow);
  transform: rotate(-6deg);
}

.scene-box-stack .scene-box:nth-child(2) {
  background: var(--orange);
  color: var(--white);
  transform: rotate(3deg);
}

.scene-box-stack .scene-box:nth-child(3) {
  width: 88px;
  background: var(--blue);
  color: var(--white);
}

.scene-signpost {
  position: absolute;
  right: -12px;
  bottom: 18px;
  z-index: 8;
  width: 112px;
  height: 250px;
}

.scene-signpost::before {
  position: absolute;
  bottom: 0;
  left: calc(50% - 7px);
  width: 14px;
  height: 230px;
  border: 3px solid var(--blue-dark);
  border-radius: 6px;
  background: #e7b77a;
  content: "";
}

.scene-sign {
  position: absolute;
  left: 4px;
  display: grid;
  width: 104px;
  height: 40px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  color: var(--white);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  box-shadow: 3px 4px 0 rgba(23, 59, 130, 0.16);
}

.scene-sign-if {
  top: 18px;
  border-radius: 8px 22px 22px 8px;
  background: var(--blue);
  transform: rotate(-4deg);
}

.scene-sign-else {
  top: 74px;
  border-radius: 22px 8px 8px 22px;
  background: var(--orange);
  transform: rotate(4deg);
}

.scene-compare {
  position: absolute;
  right: -6px;
  bottom: 40px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
  justify-items: center;
}

.scene-compare span,
.scene-compare b {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 10px;
  background: var(--white);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.scene-compare b {
  background: var(--yellow);
}

.scene-compare i {
  grid-column: 1 / -1;
  padding: 6px 14px;
  border: 3px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-family: Consolas, "Courier New", monospace;
  font-style: normal;
  font-weight: 900;
}

.scene-loop-ring {
  position: absolute;
  bottom: 70px;
  left: 22px;
  z-index: 1;
  width: 300px;
  height: 300px;
  border: 5px dashed var(--blue-dark);
  border-radius: 50%;
  opacity: 0.4;
  animation: concept-loop-spin 14s linear infinite;
}

.scene-loop-ring span {
  position: absolute;
  top: -22px;
  left: calc(50% - 20px);
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 1.4rem;
  font-weight: 900;
}

.scene-machine {
  position: absolute;
  right: -14px;
  bottom: 26px;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.scene-machine b {
  display: grid;
  width: 96px;
  height: 70px;
  place-items: center;
  border: 4px solid var(--blue-dark);
  border-radius: 16px;
  background: var(--orange);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16), inset 0 -10px 0 rgba(23, 59, 130, 0.14);
  color: var(--white);
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.15rem;
}

.scene-machine span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 10px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.scene-machine-out {
  background: var(--blue);
  color: var(--white);
}

.topic-overview,
.topic-practice,
.topic-run {
  padding-top: 95px;
}

.topic-run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
  margin-top: 38px;
}

.topic-run .line-number {
  line-height: 1.55;
}

.quiz-scene .code-lines {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

.topic-try {
  margin: 18px 4px 0;
  font-size: 1.05rem;
}

.topic-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.topic-info-card {
  min-height: 220px;
  padding: 25px;
  border: 2px solid var(--line);
  border-top: 7px solid var(--orange);
  border-radius: 25px;
  background: var(--white);
  box-shadow: 0 10px 25px rgba(35, 68, 114, 0.08);
}

.topic-info-card:nth-child(2) {
  border-top-color: var(--blue);
}

.topic-info-card:nth-child(3) {
  border-top-color: #e0b400;
}

.topic-info-card > span:first-child {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 900;
}

.topic-info-card h3 {
  margin: 22px 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.topic-info-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.topic-info-card code,
.quiz-scene code {
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
}

.symbols-later {
  margin-top: 55px;
  padding-top: 35px;
  border-top: 2px dashed #c6d7ed;
}

.symbols-later > h3 {
  max-width: 620px;
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.quiz-scene {
  min-height: 110px;
  margin: 22px 0;
  padding: 18px;
  border-radius: 17px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 1rem;
  font-weight: 800;
}

.quiz-scene kbd {
  display: inline-grid;
  min-width: 44px;
  min-height: 38px;
  place-items: center;
  margin: 3px;
  padding: 5px 10px;
  border: 3px solid var(--blue-dark);
  border-bottom-width: 6px;
  border-radius: 11px;
  background: var(--white);
  color: var(--blue-dark);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 900;
}

.topic-practice .step-activity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-practice .step-activity,
.topic-run .step-activity {
  padding: 23px;
}

.topic-practice .activity-options,
.topic-run .activity-options {
  grid-template-columns: 1fr;
}

.environment-flow {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

.environment-flow span {
  padding: 9px 12px;
  border: 3px solid var(--blue-dark);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.environment-flow b {
  color: var(--orange-dark);
  font-size: 1.3rem;
}

.memory-demo,
.choice-demo,
.loop-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: var(--blue-soft);
}

.memory-label,
.memory-value {
  padding: 13px 17px;
  border: 3px solid var(--blue-dark);
  border-radius: 13px;
  background: var(--white);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
}

.memory-value {
  background: var(--yellow);
}

.memory-demo p {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.topic-card-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.box-cell {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.box-cell .memory-label {
  padding: 4px 10px;
  font-size: 0.8rem;
}

.box-step {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--white);
  color: var(--blue-dark);
  font-weight: 800;
}

.box-compartments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 3px dashed var(--blue-dark);
  border-radius: 16px;
  list-style: none;
}

.box-compartments li {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.box-compartments small,
.box-grid small {
  color: var(--muted);
  font-weight: 900;
}

.box-grid {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(44px, auto));
  gap: 8px;
  align-items: center;
  justify-items: center;
}

.box-grid .memory-value {
  min-width: 44px;
  text-align: center;
}

.box-grid .is-picked {
  background: var(--orange);
  color: var(--white);
}

.function-demo .box-cell small {
  color: var(--muted);
  font-weight: 900;
}

.function-box {
  display: grid;
  min-width: 120px;
  padding: 14px 18px;
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  background: var(--orange);
  color: var(--white);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 900;
  text-align: center;
}

.function-box i {
  font-style: normal;
  font-size: 1.6rem;
}

.function-open-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.function-open {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 3px dashed var(--blue-dark);
  border-radius: 22px;
  background: var(--blue-soft);
}

.function-line {
  display: grid;
  gap: 2px;
}

.function-line code {
  max-width: 100%;
  overflow-x: auto;
  padding: 6px 10px;
  border-radius: 10px;
  background: #132d4b;
  color: #ffd86b;
  white-space: pre;
}

.function-line small {
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.function-open-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}

/* and, or and not pages: the scene word is wider than one sign. */
.scene-compare-logic b,
.scene-compare-not b {
  width: auto;
  padding: 0 8px;
}

.scene-compare-not {
  grid-template-columns: repeat(2, auto);
}

/* Operators pages: values like (2+3) are wider than one digit. */
.scene-operators span {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
}

/* Multi-line quiz scenes (clue lists, a rule and its code line). */
.quiz-scene-lines {
  white-space: pre-line;
}

.compare-table.truth-table th,
.compare-table.truth-table td {
  text-align: center;
}

.compare-table.truth-table thead th {
  text-transform: none;
  letter-spacing: 0;
}

.compare-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-weight: 800;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  background: var(--blue-soft);
  text-align: left;
}

.compare-table thead th {
  background: none;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare-table tbody th {
  border-radius: 14px 0 0 14px;
}

.compare-table tbody td:last-child {
  border-radius: 0 14px 14px 0;
}

.compare-table code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.05rem;
}

.compare-true,
.compare-false {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--white);
}

.compare-true {
  background: var(--blue);
}

.compare-false {
  background: var(--orange-dark);
}

.choice-demo > div {
  display: grid;
  gap: 8px;
  min-width: 210px;
  padding: 17px;
  border: 3px solid var(--blue-dark);
  border-radius: 16px;
  background: var(--white);
  color: var(--blue-dark);
  text-align: center;
}

.choice-demo > div:last-child {
  background: var(--yellow-soft);
}

.choice-demo > b {
  color: var(--orange-dark);
  font-size: 0.72rem;
}

.loop-demo > code {
  flex-basis: 100%;
  padding: 10px;
  border-radius: 12px;
  background: #132d4b;
  color: #ffd86b;
  text-align: center;
}

.loop-demo > span,
.loop-demo > b {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 0.72rem;
}

.loop-demo > b {
  border-radius: 14px;
  background: var(--yellow);
  color: var(--blue-dark);
}

a:focus-visible,
button:focus-visible {
  outline: 4px solid rgba(39, 100, 216, 0.32);
  outline-offset: 4px;
}

@keyframes arm-wave {
  0%,
  100% {
    transform: rotate(-44deg);
  }
  50% {
    transform: rotate(-61deg);
  }
}

@keyframes arm-count {
  0%,
  100% {
    transform: rotate(-165deg);
  }

  50% {
    transform: rotate(-145deg);
  }
}

@keyframes antenna-wave {
  0%,
  100% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

@keyframes cursor-blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

@keyframes answer-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px) rotate(-1deg);
  }
  40% {
    transform: translateX(6px) rotate(1deg);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  52% {
    opacity: 1;
    transform: translate(calc(-50% + var(--confetti-x)), var(--confetti-rise)) scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x)), var(--confetti-fall)) scale(0.88) rotate(var(--confetti-rotate));
  }
}

@keyframes concept-loop-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .topic-card-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .function-open-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }

  .hero-copy {
    max-width: 700px;
  }

  .hero-stage {
    width: min(620px, 100%);
    margin-inline: auto;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-heading > p:last-child {
    margin-top: 18px;
  }

  .step-card {
    min-height: 300px;
    padding-inline: 23px;
  }

  .lesson-preview {
    grid-template-columns: 1fr;
  }

  .concept-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fix PyBot's code */
.step-activity-grid .fix-activity {
  grid-column: 1 / -1;
}

.fix-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.fix-editor-wrap,
.fix-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: #132d4b;
}

.fix-label {
  color: #7f9ab4;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fix-editor {
  width: 100%;
  min-height: 96px;
  padding: 10px;
  resize: vertical;
  border: 2px solid #38516d;
  border-radius: 10px;
  background: #0e243d;
  color: #ffd86b;
  caret-color: var(--yellow);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  tab-size: 4;
}

.fix-editor:focus-visible {
  outline: 3px solid rgba(121, 184, 255, 0.7);
}

.fix-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.fix-restart {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 2px solid #7890a9;
  border-radius: 13px;
  background: transparent;
  color: #d9e6f4;
  font-weight: 900;
  cursor: pointer;
}

.fix-goal,
.fix-output {
  min-height: 44px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-radius: 10px;
  background: #0e243d;
  color: #daecff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.fix-goal {
  border: 2px dashed var(--yellow);
  color: var(--yellow);
}

/* Answers for input(): Python reads them one line at a time. */
.answers-area {
  display: grid;
  gap: 6px;
  padding: 14px 28px;
  border-top: 2px solid #38516d;
  background: #13304f;
}

.answers-label {
  color: #7f9ab4;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.answers-editor {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  resize: vertical;
  border: 2px dashed #6fd39a;
  border-radius: 10px;
  background: #0e243d;
  color: #b8f0cf;
  caret-color: var(--yellow);
  font: inherit;
  font-family: Consolas, "Courier New", monospace;
}

.answers-editor:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.fix-answers {
  border: 2px dashed #6fd39a;
  color: #b8f0cf;
}

.fix-activity.is-complete .fix-output {
  box-shadow: inset 0 0 0 2px #6fd39a;
}

/* Pit stop page */
.scene-checkpoint::before {
  background: var(--yellow-soft);
}

.scene-flag {
  position: absolute;
  right: 6px;
  bottom: 40px;
  z-index: 8;
  width: 96px;
  height: 170px;
}

.scene-flag i {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 170px;
  border-radius: 4px;
  background: var(--blue-dark);
}

.scene-flag b {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 84px;
  height: 58px;
  border: 3px solid var(--blue-dark);
  border-radius: 0 10px 10px 0;
  background: repeating-conic-gradient(var(--blue-dark) 0 25%, var(--white) 0 50%) 0 0 / 26px 26px;
  transform-origin: left center;
  animation: flag-wave 1.6s ease-in-out infinite alternate;
}

@keyframes flag-wave {
  to {
    transform: skewY(-6deg) scaleX(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-flag b {
    animation: none;
  }
}

.checkpoint-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.checkpoint-zones a {
  padding: 2px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  text-decoration: none;
}

.selfcheck-list {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.selfcheck-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

.selfcheck-zone a {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
}

.selfcheck-noticed {
  display: block;
  color: var(--orange-dark);
  font-weight: 700;
}

.selfcheck-noticed[hidden] {
  display: none;
}

.selfcheck-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selfcheck-options button {
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.selfcheck-options button[aria-pressed="true"] {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: var(--white);
}

.selfcheck-options button[data-rating="review"][aria-pressed="true"] {
  background: var(--orange);
}

.selfcheck-result {
  margin-top: 20px;
  padding: 18px 22px;
  border: 3px solid var(--blue);
  border-radius: 20px;
  background: var(--blue-soft);
  font-weight: 700;
}

.selfcheck-result.is-review {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.selfcheck-result[hidden] {
  display: none;
}

.selfcheck-result p {
  margin: 0;
}

.selfcheck-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.selfcheck-links:empty {
  display: none;
}

.selfcheck-links a {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--white);
  color: var(--orange-dark);
  font-weight: 900;
  text-decoration: none;
}

.review-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 2px solid var(--orange);
  border-radius: 14px;
  background: var(--orange-soft);
  font-weight: 900;
}

.review-note p {
  flex: 1 1 240px;
  margin: 0;
}

.review-note button {
  min-height: 44px;
  padding: 6px 16px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-dark);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 760px) {
  .selfcheck-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.new-activities-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 2px solid var(--orange);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--ink);
  font-weight: 900;
}

.new-activities-note::before {
  margin-right: 8px;
  content: "★";
  color: var(--orange-dark);
}

@media (max-width: 760px) {
  .fix-columns,
  .fix-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .fix-restart {
    justify-content: center;
    min-height: 44px;
  }

  .site-header {
    min-height: 76px;
  }

  .course-intro {
    grid-template-columns: 1fr;
    padding-top: 65px;
  }

  .course-rule {
    max-width: 300px;
  }

  .mission-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
  }

  .mission-code {
    display: none;
  }

  .mission-start {
    grid-column: 2;
    justify-self: start;
  }

  .mission-card[data-course-step] .course-step-status {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .mission-card[data-course-step] .mission-start {
    grid-column: 2;
  }

  .foundation-route {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .lesson-hero {
    grid-template-columns: 1fr;
  }

  .topic-hero,
  .about-us,
  .colombia-love {
    grid-template-columns: 1fr;
  }

  .topic-card-grid,
  .topic-run-grid,
  .topic-practice .step-activity-grid {
    grid-template-columns: 1fr;
  }

  .lesson-hero-world {
    background: linear-gradient(180deg, #fffaf2 0 45%, var(--orange) 45% 100%);
  }

  .lesson-hero-language {
    background: linear-gradient(180deg, #f7faff 0 45%, var(--blue-stage) 45% 100%);
  }

  .lesson-hero-thinking {
    background: linear-gradient(180deg, #fffaf2 0 45%, var(--yellow) 45% 100%);
  }

  .lesson-pybot-note {
    max-width: 360px;
  }

  .lesson-pybot-scene {
    margin-inline: auto;
  }

  .rule-card-grid {
    grid-template-columns: 1fr;
  }

  .step-activity-grid {
    grid-template-columns: 1fr;
  }

  .thinking-confidence {
    grid-template-columns: 1fr;
  }

  .rule-card {
    min-height: 0;
  }

  .same-job {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding: 52px 0 65px;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 4.3rem);
  }

  .hero-stage {
    min-height: 580px;
  }

  .speech-bubble {
    left: 14px;
  }

  .step-grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    min-height: 0;
  }

  .local-first {
    grid-template-columns: 1fr;
  }

  .local-icon {
    transform: scale(0.9);
    transform-origin: left center;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }

  .footer-status {
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .site-header,
  .site-footer,
  .hero,
  .learning-loop,
  .lesson-preview,
  .local-first {
    width: min(100% - 24px, 1180px);
  }

  .brand-mark {
    width: 34px;
    height: 31px;
  }

  .picks-main {
    width: min(100% - 32px, 1040px);
    padding-top: 36px;
  }

  .faq-main {
    width: min(100% - 32px, 820px);
    padding-top: 36px;
  }

  .faq-item summary {
    padding: 16px 18px;
    font-size: 1rem;
  }

  .faq-item p {
    padding: 0 18px 16px;
  }

  .faq-link {
    margin: 0 18px 16px;
  }

  .course-main {
    width: min(100% - 24px, 1040px);
  }

  .lesson-main {
    width: min(100% - 24px, 1040px);
    padding-top: 24px;
  }

  .lesson-hero {
    padding: 39px 22px;
    border-radius: 28px;
  }

  .lesson-hero h1 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
  }

  .lesson-pybot-scene {
    width: 300px;
    height: 410px;
  }

  .language-symbol-scene {
    height: 430px;
  }

  .steps-pybot-scene {
    height: 430px;
  }

  .steps-pybot-scene .plan-two {
    right: 0;
  }

  .language-symbol-scene .symbol-brackets {
    left: 0;
  }

  .language-symbol-scene .symbol-braces,
  .language-symbol-scene .symbol-parentheses {
    right: 0;
  }

  .lesson-pybot-figure {
    left: -20px;
    transform: scale(0.76);
  }

  .scene-colombia .lesson-pybot-figure {
    left: -44px;
  }

  .colombia-flag {
    top: 158px;
    left: 233px;
    width: 72px;
    height: 120px;
  }

  .colombia-flag i {
    height: 120px;
  }

  .colombia-flag b {
    width: 62px;
    height: 44px;
  }

  .heart-b {
    display: none;
  }

  .heart-c {
    top: 320px;
    right: 6px;
  }

  .scene-loop-ring {
    bottom: 50px;
    left: 18px;
    width: 250px;
    height: 250px;
  }

  .scene-keys {
    left: 34px;
    width: 200px;
  }

  .lesson-pybot-bubble {
    left: 0;
    width: 218px;
  }

  .question-one {
    top: 95px;
    right: 0;
  }

  .question-two {
    top: 158px;
    right: 35px;
  }

  .app-job-grid {
    grid-template-columns: 1fr;
  }

  .step-activity {
    padding: 24px 18px;
  }

  .thinking-confidence {
    padding: 28px 20px;
  }

  .confidence-path {
    gap: 5px;
  }

  .confidence-path span {
    width: 43px;
    height: 43px;
  }

  .lesson-big-idea {
    align-items: flex-start;
    padding: 26px 22px;
  }

  .big-idea-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .lesson-actions {
    display: grid;
  }

  .lesson-actions .button-primary {
    grid-row: 1;
  }

  .same-job {
    padding: 38px 18px;
  }

  .language-code-card {
    grid-template-columns: 1fr;
  }

  .language-code-card > span,
  .language-code-card p {
    border: 0;
  }

  .course-intro h1 {
    font-size: clamp(3.1rem, 14vw, 4.2rem);
  }

  .mission-card {
    min-height: 128px;
    padding: 20px 17px 20px 18px;
  }

  .mission-number {
    width: 48px;
    height: 48px;
  }

  .hero-actions {
    display: grid;
  }

  .trust-list {
    display: grid;
  }

  .hero-stage {
    min-height: 540px;
    border-radius: 38px;
  }

  .speech-bubble {
    top: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .pybot-wrap {
    transform: scale(0.82);
  }

  .mood-panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .mood-controls {
    gap: 5px;
  }

  .mood-button {
    padding-inline: 6px;
    font-size: 0.7rem;
  }

  .learning-loop {
    padding: 90px 0;
  }

  .lesson-preview {
    padding: 70px 18px;
    border-radius: 30px;
  }

  .window-bar > span:not(.preview-tag) {
    display: none;
  }

  .preview-tag {
    font-size: 0.55rem;
  }

  .code-area {
    padding: 30px 17px;
  }

  .local-first {
    padding: 43px 24px;
    box-shadow: 7px 8px 0 var(--blue-dark);
  }

  .backup-tools {
    padding: 18px;
  }

  .backup-actions button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .meet-main {
    width: min(100% - 24px, 1080px);
    padding-top: 42px;
  }

  .meet-stage {
    min-height: 960px;
    padding-top: 130px;
  }

  .meet-stage .pybot-wrap {
    margin-top: 0;
    transform: scale(0.82);
  }

  .meet-mood-panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .meet-mood-panel .mood-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-progress-tools {
    grid-template-columns: 1fr;
    padding: 20px 18px;
  }

  .page-progress-tools button {
    width: 100%;
  }

  .concept-preview-grid {
    grid-template-columns: 1fr;
  }

  .code-care-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .plan-progress-summary {
    grid-template-columns: 1fr;
  }

  .learner-name-card {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .learner-name-entry {
    grid-template-columns: 1fr;
  }

  .learner-name-entry button {
    width: 100%;
  }

  .runner-actions {
    grid-template-columns: 1fr;
  }

  .stop-button {
    min-height: 44px;
  }

  .environment-flow {
    grid-template-columns: 1fr;
  }

  .environment-flow b {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bug hunters zone */
.scene-bugs::before {
  background: #e7f7ea;
}

.scene-bug-hunt {
  position: absolute;
  right: -8px;
  bottom: 26px;
  z-index: 8;
  width: 130px;
  height: 190px;
}

.scene-magnifier {
  position: absolute;
  top: 0;
  right: 18px;
  width: 92px;
  height: 92px;
  border: 8px solid var(--blue-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16);
  transform: rotate(-18deg);
}

.scene-magnifier::after {
  position: absolute;
  top: 82px;
  left: 31px;
  width: 16px;
  height: 66px;
  border: 3px solid var(--blue-dark);
  border-radius: 8px;
  background: var(--orange);
  content: "";
}

.scene-magnifier i {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 22px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  transform: rotate(-35deg);
}

/* A small ladybug: shell with spots, a head, and two antennae. */
.bug-critter {
  position: absolute;
  right: 54px;
  bottom: 0;
  width: 40px;
  height: 32px;
  border: 3px solid var(--blue-dark);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 30% 40%, var(--blue-dark) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 35%, var(--blue-dark) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 75%, var(--blue-dark) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent 47%, var(--blue-dark) 47% 53%, transparent 53%),
    var(--orange);
  animation: bug-crawl 2.4s ease-in-out infinite alternate;
}

.bug-critter i {
  position: absolute;
  top: 6px;
  left: -13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-dark);
}

.bug-critter i::before,
.bug-critter i::after {
  position: absolute;
  top: -8px;
  left: 2px;
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: var(--blue-dark);
  content: "";
  transform: rotate(-30deg);
}

.bug-critter i::after {
  left: 9px;
  transform: rotate(-60deg);
}

@keyframes bug-crawl {
  to {
    transform: translateX(-18px) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bug-critter {
    animation: none;
  }
}

.bug-story {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 34px;
}

.bug-story-copy p {
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.6;
}

/* A notebook page with the 1947 moth taped on it. */
.bug-notebook {
  position: relative;
  min-height: 210px;
  margin: 0;
  padding: 22px 22px 18px 46px;
  border: 3px solid var(--blue-dark);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 32px, rgba(219, 78, 30, 0.45) 32px 34px, transparent 34px),
    repeating-linear-gradient(var(--white) 0 27px, #c9d9ef 27px 29px);
  box-shadow: 8px 10px 0 rgba(23, 59, 130, 0.15);
  color: var(--blue-dark);
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  transform: rotate(-2deg);
}

.bug-notebook-date {
  display: block;
  font-weight: 700;
}

.bug-notebook-tape {
  position: relative;
  display: block;
  width: 96px;
  height: 60px;
  margin: 12px auto;
  background: rgba(255, 216, 77, 0.55);
  transform: rotate(4deg);
}

.bug-critter-moth {
  top: 13px;
  right: 26px;
  bottom: auto;
  border-radius: 50% 50% 40% 40%;
  background: #b59c7a;
  animation: none;
}

.bug-critter-moth::before,
.bug-critter-moth::after {
  position: absolute;
  top: -12px;
  width: 26px;
  height: 22px;
  border: 3px solid var(--blue-dark);
  border-radius: 50% 50% 20% 50%;
  background: #d8c4a3;
  content: "";
}

.bug-critter-moth::before {
  left: -22px;
  transform: rotate(-20deg);
}

.bug-critter-moth::after {
  right: -22px;
  transform: scaleX(-1) rotate(-20deg);
}

.bug-notebook figcaption {
  font-size: 0.95rem;
  font-weight: 700;
}

.bug-kind-code {
  display: inline-block;
  margin-top: 12px;
}

.bug-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: bug-plan;
}

.bug-plan li {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  counter-increment: bug-plan;
}

.bug-plan li::before {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  content: counter(bug-plan);
  font-weight: 900;
}

.bug-plan b {
  font-size: 1.1rem;
}

.bug-plan span {
  color: var(--muted);
}

/* Bug kinds and detective tools: the same card row as the hunting plan. */
.bug-kinds article {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.bug-kinds article > span {
  font-size: 1.6rem;
}

.bug-kinds b {
  font-size: 1.1rem;
}

.bug-kinds small {
  color: var(--muted);
  font-size: 0.95rem;
}

.bug-example {
  max-width: 560px;
  margin-top: 26px;
  padding: 20px;
  border: 2px dashed var(--orange);
  border-radius: var(--radius-md);
  background: var(--white);
}

.bug-example-title {
  margin: 0 0 12px;
  font-weight: 900;
}

.daily-plan li.is-bug {
  border-color: var(--orange-dark);
  background: var(--orange-soft);
}

.daily-plan li.is-bug > span {
  background: var(--orange);
  color: var(--white);
}

.bug-example-note {
  margin: 12px 0 0;
  color: var(--orange-dark);
  font-weight: 800;
}

.trace-table {
  width: 100%;
  max-width: 620px;
  margin-top: 30px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.trace-table th,
.trace-table td {
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  text-align: left;
}

.trace-table th {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.trace-table tr:last-child td {
  border-bottom: 0;
}

.trace-table td:last-child {
  color: var(--orange-dark);
  font-weight: 900;
}

.trace-table code {
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 800;
}

/* Tap-the-line cards: each option is a numbered code line. */
.bug-line-options {
  gap: 6px;
  counter-reset: bug-line;
}

.bug-line-options button,
.bug-code-options button {
  font-family: Consolas, "Courier New", monospace;
  white-space: pre;
  overflow-x: auto;
}

.bug-line-options button {
  min-height: 42px;
  white-space: pre-wrap;
  counter-increment: bug-line;
}

.bug-step-options button {
  font-family: inherit;
}

.bug-line-options button::before {
  display: inline-block;
  width: 1.6em;
  color: var(--muted);
  content: counter(bug-line);
}

.bug-wanted {
  margin: 0 0 10px;
}

.bug-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--orange-dark);
  border-radius: 8px;
  background: var(--white);
  color: #b3261e;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .bug-story {
    grid-template-columns: minmax(0, 1fr);
  }

  .bug-notebook {
    max-width: 300px;
  }

  .bug-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .bug-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .scene-bug-hunt {
    right: -14px;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}

/* Picture patterns: simple shapes in a row, before the loops pages. */
.pattern-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.shape {
  display: inline-block;
  flex: none;
  width: 34px;
  height: 34px;
}

.shape-circle {
  border-radius: 50%;
  background: var(--orange);
}

.shape-square {
  border-radius: 5px;
  background: var(--blue);
}

.shape-triangle {
  background: #e3a600;
  clip-path: polygon(50% 4%, 97% 94%, 3% 94%);
}

.shape-star {
  background: var(--blue-dark);
  clip-path: polygon(50% 2%, 62% 37%, 98% 37%, 69% 59%, 80% 95%, 50% 73%, 20% 95%, 31% 59%, 2% 37%, 38% 37%);
}

.shape-blank {
  border: 3px dashed var(--muted);
  border-radius: 8px;
}

.pattern-cell {
  display: inline-grid;
  gap: 3px;
  justify-items: center;
}

.pattern-cell small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.pattern-core {
  display: inline-flex;
  gap: 6px;
  padding: 8px;
  border: 2px dashed var(--blue);
  border-radius: 14px;
  background: var(--white);
}

.activity-options .pattern-row {
  justify-content: flex-start;
  gap: 5px;
}

.activity-options .shape {
  width: 24px;
  height: 24px;
}

.pattern-fix .pattern-row {
  margin: 14px 0;
}

.pattern-shape {
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
}

.pattern-shape:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.pattern-shape:disabled {
  cursor: default;
}

.activity-options .pattern-row {
  display: inline-flex;
  padding: 3px;
  border-radius: 7px;
  background: var(--white);
}

/* Lesson 01: Code in the real world */
.scene-world-orbit span {
  position: absolute;
  z-index: 8;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 3px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 4px 5px 0 rgba(23, 59, 130, 0.16);
  font-size: 1.7rem;
  animation: world-orbit-bob 3.2s ease-in-out infinite;
}

.orbit-game { top: 150px; left: -8px; background: var(--yellow); }
.orbit-space { top: 118px; right: -10px; animation-delay: -0.6s; }
.orbit-music { top: 270px; right: -26px; background: var(--blue-soft); animation-delay: -1.2s; }
.orbit-medicine { bottom: 40px; left: -18px; background: var(--orange-soft); animation-delay: -1.8s; }
.orbit-movie { bottom: 22px; right: 18px; background: var(--yellow-soft); animation-delay: -2.4s; }

@keyframes world-orbit-bob {
  0%,
  100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

.world-day,
.world-hunt {
  padding: 95px 0 0;
}

.day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.day-card {
  position: relative;
  padding: 18px 14px 16px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(35, 68, 114, 0.07);
}

.day-card:nth-child(odd) { border-bottom: 6px solid var(--orange); }
.day-card:nth-child(even) { border-bottom: 6px solid var(--blue); }

.day-time {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blue-dark);
  color: var(--white);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 900;
}

.day-icon {
  display: block;
  margin: 10px 0 4px;
  font-size: 2.1rem;
  line-height: 1.2;
}

.day-card h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.25;
}

.day-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.code-hunt {
  margin-top: 38px;
}

.hunt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.hunt-item {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 16px 10px;
  border: 3px dashed #b9c7d8;
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hunt-item span {
  font-size: 2.6rem;
  line-height: 1.1;
}

.hunt-item b {
  font-size: 0.92rem;
}

.hunt-item:hover:not(:disabled) {
  border-color: var(--blue);
  transform: translateY(-3px);
}

.hunt-item:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 3px;
}

.hunt-item.is-found {
  border: 3px solid var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 4px rgba(39, 100, 216, 0.15);
  cursor: default;
}

.hunt-item.is-found b::after {
  content: " </>";
  color: var(--blue);
  font-family: Consolas, "Courier New", monospace;
}

.hunt-item.is-wrong {
  border-color: var(--orange);
  background: var(--orange-soft);
  animation: answer-shake 380ms ease;
}

.hunt-item:disabled:not(.is-found) {
  opacity: 0.55;
  cursor: default;
}

.hunt-count {
  margin: 16px 0 0;
  font-weight: 800;
}

.hunt-count b {
  color: var(--blue);
  font-size: 1.3rem;
}

.app-jobs .app-job-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-space { --card-accent: var(--blue-dark); }
.app-movie { --card-accent: var(--orange); }
.app-music { --card-accent: #e0b400; }
.app-medicine { --card-accent: var(--orange-dark); }
.app-robot { --card-accent: var(--blue); }

.app-space .app-job-icon,
.app-robot .app-job-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.app-movie .app-job-icon,
.app-medicine .app-job-icon {
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.app-music .app-job-icon {
  background: var(--yellow-soft);
  color: #745900;
}

.app-peek {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--blue-dark);
  color: #fff4c9;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre;
  overflow-x: auto;
}

.world-fact > span {
  display: block;
  margin-bottom: 8px;
  font-size: 2.2rem;
}

.world-runner {
  max-width: 760px;
  margin-top: 38px;
}

@media (max-width: 980px) {
  .day-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app-jobs .app-job-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .day-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-jobs .app-job-grid {
    grid-template-columns: 1fr;
  }

  .scene-world-orbit span {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
  }

  .world-day,
  .world-hunt {
    padding-top: 64px;
  }
}

@media (max-width: 520px) {
  .hunt-grid {
    gap: 8px;
  }

  .hunt-item {
    padding: 12px 4px;
  }

  .hunt-item span {
    font-size: 2rem;
  }

  .hunt-item b {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-world-orbit span {
    animation: none;
  }
}

/* input() answers and turtle drawings */
.answers-area {
  display: grid;
  gap: 6px;
  padding: 14px 28px 16px;
  border-top: 2px solid #38516d;
  background: #17304f;
}

.answers-label,
.fix-answers-label {
  display: grid;
  gap: 2px;
  color: #daecff;
  font-size: 0.86rem;
}

.answers-label b,
.fix-answers-label b {
  color: var(--yellow);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.answers-area textarea,
.fix-answers {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  resize: vertical;
  border: 2px dashed #7199ed;
  border-radius: 10px;
  background: #0e243d;
  color: #ffffff;
  caret-color: var(--yellow);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.5;
}

.answers-area textarea:focus-visible,
.fix-answers:focus-visible {
  outline: 3px solid rgba(121, 184, 255, 0.7);
}

.turtle-canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 10px auto 0;
  border: 3px solid #38516d;
  border-radius: 14px;
  background: var(--white);
}

.fix-results .turtle-canvas {
  max-width: 240px;
  margin: 0 auto;
}

.fix-results .turtle-canvas[data-turtle-goal-canvas] {
  border: 3px dashed var(--yellow);
}

/* Think like a programmer zone: a light bulb idea with small puzzle pieces */
.scene-think::before {
  background: var(--yellow-soft);
}

.scene-idea {
  position: absolute;
  top: 140px;
  right: -20px;
  bottom: 20px;
  z-index: 8;
  width: 118px;
}

/* The bulb: a glowing yellow glass with a filament and a striped base. */
.scene-bulb {
  position: absolute;
  top: 0;
  right: 14px;
  width: 66px;
  height: 66px;
  border: 4px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow:
    0 0 0 8px rgba(255, 216, 77, 0.35),
    5px 6px 0 rgba(23, 59, 130, 0.16);
  animation: bulb-glow 2.2s ease-in-out infinite alternate;
}

.scene-bulb::before {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 16px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  content: "";
  transform: rotate(-35deg);
}

.scene-bulb::after {
  position: absolute;
  top: 58px;
  left: 18px;
  width: 22px;
  height: 20px;
  border: 3px solid var(--blue-dark);
  border-radius: 3px 3px 8px 8px;
  background: repeating-linear-gradient(180deg, var(--white) 0 4px, var(--blue-stage) 4px 7px);
  content: "";
}

.scene-bulb i {
  position: absolute;
  top: 26px;
  left: 20px;
  width: 18px;
  height: 14px;
  border: 3px solid var(--orange-dark);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* Puzzle pieces: a square with one round tab. */
.scene-piece {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 3px solid var(--blue-dark);
  border-radius: 6px;
  box-shadow: 3px 4px 0 rgba(23, 59, 130, 0.16);
  animation: piece-bob 2.6s ease-in-out infinite alternate;
}

.scene-piece::after {
  position: absolute;
  top: 6px;
  right: -12px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--blue-dark);
  border-left-color: transparent;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.scene-piece-a {
  bottom: 34px;
  left: 58px;
  background: var(--orange);
  transform: rotate(-12deg);
}

.scene-piece-b {
  bottom: 0;
  left: 62px;
  background: var(--blue);
  transform: rotate(8deg);
  animation-delay: 0.6s;
}

.scene-piece-c {
  bottom: 76px;
  left: 82px;
  width: 26px;
  height: 26px;
  background: var(--white);
  transform: rotate(18deg);
  animation-delay: 1.2s;
}

@keyframes bulb-glow {
  to {
    box-shadow:
      0 0 0 14px rgba(255, 216, 77, 0.2),
      5px 6px 0 rgba(23, 59, 130, 0.16);
  }
}

@keyframes piece-bob {
  to {
    translate: 0 -6px;
  }
}

@media (max-width: 520px) {
  .scene-idea {
    right: -14px;
    transform: scale(0.8);
    transform-origin: bottom right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-bulb,
  .scene-piece {
    animation: none;
  }
}

/* Clean code zone (zone 11): a small broom with sparkles next to a tidy code card */
.scene-clean::before {
  background: var(--orange-soft);
}

.scene-tidy {
  position: absolute;
  right: -52px;
  bottom: 14px;
  z-index: 8;
  width: 132px;
  height: 200px;
}

.scene-tidy-card {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: 6px;
  width: 124px;
  padding: 10px 10px 12px;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16);
  transform: rotate(4deg);
}

.scene-tidy-card code {
  display: block;
  overflow: hidden;
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.scene-tidy-card i {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: var(--blue-soft);
}

.scene-tidy-card i:nth-of-type(2) {
  width: 70%;
  background: var(--orange-soft);
}

/* The broom: a wooden handle with orange bristles. */
.scene-broom {
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 54px;
  height: 140px;
  transform: rotate(-14deg);
  transform-origin: bottom center;
  animation: broom-sweep 2.4s ease-in-out infinite alternate;
}

.scene-broom::before {
  position: absolute;
  top: 0;
  left: 22px;
  width: 10px;
  height: 100px;
  border: 3px solid var(--blue-dark);
  border-radius: 6px;
  background: #c98a4b;
  content: "";
}

.scene-broom::after {
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 50px;
  height: 44px;
  border: 3px solid var(--blue-dark);
  border-radius: 8px 8px 4px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(23, 59, 130, 0.35) 7px 9px),
    var(--orange);
  content: "";
}

.scene-sparkle {
  position: absolute;
  color: var(--yellow);
  font-size: 1.4rem;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 0 var(--blue-dark), 1px 1px 0 var(--blue-dark), -1px -1px 0 var(--blue-dark);
  animation: sparkle-twinkle 1.6s ease-in-out infinite alternate;
}

.scene-sparkle-a {
  top: 102px;
  right: 8px;
}

.scene-sparkle-b {
  top: 136px;
  right: 44px;
  font-size: 1rem;
  animation-delay: 0.5s;
}

.scene-sparkle-c {
  bottom: 18px;
  right: 6px;
  font-size: 1.15rem;
  animation-delay: 1s;
}

@keyframes broom-sweep {
  to {
    transform: rotate(-4deg);
  }
}

@keyframes sparkle-twinkle {
  from {
    opacity: 0.45;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1.15) rotate(12deg);
  }
}

@media (max-width: 520px) {
  .scene-tidy {
    right: -8px;
    bottom: 6px;
    transform: scale(0.66);
    transform-origin: bottom right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-broom,
  .scene-sparkle {
    animation: none;
  }
}

/* Game projects zone: a gold trophy next to PyBot */
.scene-projects::before {
  background: var(--yellow-soft);
}

.scene-trophy {
  position: absolute;
  right: -26px;
  bottom: 26px;
  z-index: 8;
  display: grid;
  justify-items: center;
  width: 110px;
}

.scene-trophy b {
  position: relative;
  display: grid;
  width: 86px;
  height: 74px;
  place-items: center;
  border: 4px solid var(--blue-dark);
  border-radius: 8px 8px 44px 44px;
  background: linear-gradient(105deg, var(--yellow) 0 58%, #ffe98f 58% 70%, var(--yellow) 70%);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16);
  color: var(--orange);
  font-size: 2.1rem;
  line-height: 1;
  transform-origin: 50% 100%;
  animation: trophy-shine 1.8s ease-in-out infinite alternate;
}

/* The two handles of the cup */
.scene-trophy b::before,
.scene-trophy b::after {
  position: absolute;
  top: 8px;
  width: 22px;
  height: 32px;
  border: 4px solid var(--blue-dark);
  content: "";
}

.scene-trophy b::before {
  left: -26px;
  border-right: 0;
  border-radius: 16px 0 0 16px;
}

.scene-trophy b::after {
  right: -26px;
  border-left: 0;
  border-radius: 0 16px 16px 0;
}

/* Stem and base */
.scene-trophy i {
  position: relative;
  width: 64px;
  height: 18px;
  margin-top: 18px;
  border: 4px solid var(--blue-dark);
  border-radius: 6px;
  background: var(--orange);
}

.scene-trophy i::before {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 16px;
  height: 22px;
  border: 4px solid var(--blue-dark);
  border-bottom: 0;
  background: var(--yellow);
  content: "";
  transform: translateX(-50%);
}

@keyframes trophy-shine {
  to {
    transform: translateY(-4px) rotate(-3deg);
  }
}

/* A step of a project plan names the skill it uses */
.project-skill {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--yellow-soft);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  font-weight: 900;
}

@media (max-width: 520px) {
  .scene-trophy {
    right: 0;
    bottom: 40px;
    transform: scale(0.8);
    transform-origin: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-trophy b {
    animation: none;
  }
}

/* Turtle drawing zone: a little turtle walks next to PyBot and leaves a dashed line. */
.scene-turtle::before {
  background: #e7f7ea;
}

.turtle-buddy {
  position: absolute;
  right: -34px;
  bottom: -26px;
  z-index: 8;
  width: 132px;
  height: 84px;
  transform: scale(1.15);
  transform-origin: bottom right;
}

/* The drawn path: up, a corner, then right to the turtle's pen. */
.turtle-buddy-trail {
  position: absolute;
  right: 118px;
  bottom: 7px;
  width: 210px;
  height: 58px;
}

.turtle-buddy-trail::before,
.turtle-buddy-trail::after {
  position: absolute;
  border-radius: 3px;
  content: "";
}

.turtle-buddy-trail::before {
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 12px, transparent 12px 20px);
  background-size: 20px 5px;
  animation: turtle-trail-x 1.4s linear infinite;
}

.turtle-buddy-trail::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: repeating-linear-gradient(180deg, var(--orange) 0 12px, transparent 12px 20px);
  background-size: 5px 20px;
}

/* The pen tip where the line comes out. */
.turtle-buddy-pen {
  position: absolute;
  bottom: 4px;
  left: 6px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--orange);
}

.turtle-buddy-shell {
  position: absolute;
  bottom: 20px;
  left: 18px;
  z-index: 2;
  overflow: hidden;
  width: 82px;
  height: 52px;
  border: 3px solid var(--blue-dark);
  border-radius: 50% 50% 14px 14px / 90% 90% 22% 22%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35) 0 10px, transparent 11px),
    #3fa35b;
  box-shadow: inset 0 -8px 0 #2b7d43;
}

/* Shell pattern: three plates. */
.turtle-buddy-shell i {
  position: absolute;
  top: 16px;
  width: 20px;
  height: 18px;
  border: 2px solid #1f6635;
  border-radius: 7px;
  background: #7ccf72;
}

.turtle-buddy-shell i:nth-child(1) {
  left: 6px;
  top: 20px;
}

.turtle-buddy-shell i:nth-child(2) {
  left: 28px;
  top: 8px;
}

.turtle-buddy-shell i:nth-child(3) {
  left: 50px;
  top: 20px;
}

.turtle-buddy-head {
  position: absolute;
  bottom: 26px;
  left: 92px;
  z-index: 1;
  width: 36px;
  height: 32px;
  border: 3px solid var(--blue-dark);
  border-radius: 50% 55% 45% 50%;
  background: #8edc8b;
  animation: turtle-head-bob 1.4s ease-in-out infinite;
}

.turtle-buddy-head::before {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-dark);
  content: "";
}

.turtle-buddy-head::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 11px;
  height: 6px;
  border-bottom: 3px solid var(--blue-dark);
  border-radius: 0 0 50% 50%;
  content: "";
}

.turtle-buddy-tail {
  position: absolute;
  bottom: 24px;
  left: 8px;
  width: 18px;
  height: 14px;
  border: 3px solid var(--blue-dark);
  border-radius: 60% 10% 10% 60%;
  background: #8edc8b;
}

.turtle-buddy-leg {
  position: absolute;
  bottom: 6px;
  width: 18px;
  height: 22px;
  border: 3px solid var(--blue-dark);
  border-radius: 8px 8px 10px 10px;
  background: #8edc8b;
  transform-origin: top center;
  animation: turtle-leg-step 0.7s ease-in-out infinite alternate;
}

.turtle-buddy-leg-back {
  left: 30px;
}

.turtle-buddy-leg-front {
  left: 72px;
  animation-delay: -0.7s;
}

@keyframes turtle-trail-x {
  to {
    background-position: 20px 0;
  }
}

@keyframes turtle-head-bob {
  50% {
    transform: translateY(-3px) rotate(4deg);
  }
}

@keyframes turtle-leg-step {
  from {
    transform: rotate(14deg);
  }

  to {
    transform: rotate(-14deg);
  }
}

@media (max-width: 520px) {
  .turtle-buddy {
    right: -10px;
    bottom: -18px;
    transform: scale(0.86);
  }

  .turtle-buddy-trail {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .turtle-buddy-trail::before,
  .turtle-buddy-head,
  .turtle-buddy-leg {
    animation: none;
  }
}

/* Pit stop 2: licence exam */
.scene-exam::before {
  background:
    radial-gradient(circle at center, var(--yellow-soft) 0 62%, transparent 62.5%),
    repeating-conic-gradient(var(--blue-dark) 0 25%, var(--white) 0 50%) 0 0 / 28px 28px;
}

.scene-licence {
  position: absolute;
  right: -30px;
  bottom: 168px;
  z-index: 8;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: 16px 1fr;
  gap: 8px 9px;
  width: 136px;
  height: 104px;
  padding: 0 10px 10px;
  overflow: visible;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 7px 0 rgba(23, 59, 130, 0.18);
  transform: rotate(6deg);
  animation: licence-float 2.6s ease-in-out infinite alternate;
}

.licence-band {
  grid-column: 1 / -1;
  margin: 0 -10px;
  border-bottom: 3px solid var(--blue-dark);
  border-radius: 10px 10px 0 0;
  background: repeating-conic-gradient(var(--blue-dark) 0 25%, var(--white) 0 50%) 0 0 / 12px 12px;
}

/* The photo: a tiny PyBot face */
.licence-photo {
  position: relative;
  width: 44px;
  height: 52px;
  border: 2px solid var(--blue-dark);
  border-radius: 8px;
  background: var(--blue-soft);
}

.licence-photo::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--blue-dark);
  content: "";
  transform: translateX(-50%);
}

.licence-photo::after {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--yellow);
  content: "";
  transform: translateX(-50%);
}

.licence-photo i {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 32px;
  height: 25px;
  border: 2px solid var(--blue-dark);
  border-radius: 9px;
  background: var(--white);
  transform: translateX(-50%);
}

.licence-photo i::before {
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background:
    radial-gradient(circle, #8ff3ff 0 2.4px, transparent 3px) 4px 4px / 8px 8px no-repeat,
    radial-gradient(circle, #8ff3ff 0 2.4px, transparent 3px) 14px 4px / 8px 8px no-repeat,
    var(--blue-dark);
  content: "";
}

.licence-photo i::after {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 9px;
  height: 4px;
  border: 2px solid #8ff3ff;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  content: "";
  transform: translateX(-50%);
}

.licence-lines {
  display: grid;
  align-content: start;
  gap: 7px;
  padding-top: 4px;
}

.licence-lines i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.licence-lines i:first-child {
  width: 100%;
  background: var(--blue);
}

.licence-lines i:nth-child(2) {
  width: 80%;
}

.licence-lines i:nth-child(3) {
  width: 55%;
}

.licence-stamp {
  position: absolute;
  right: -16px;
  bottom: -18px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #b7860b;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: inset 0 0 0 3px var(--yellow), inset 0 0 0 5px #b7860b;
  color: #8a6200;
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(-14deg);
}

@keyframes licence-float {
  to {
    transform: translateY(-6px) rotate(3deg);
  }
}

/* Big idea as a licence stamp */
.exam-stamp {
  position: relative;
  background:
    repeating-conic-gradient(var(--blue-dark) 0 25%, var(--white) 0 50%) 0 0 / 14px 14px repeat-y,
    var(--yellow);
  padding-left: 49px;
}

.exam-stamp .big-idea-mark {
  width: 74px;
  height: 74px;
  border: 4px dashed #b7860b;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px #b7860b;
  color: #b7860b;
  font-size: 2.1rem;
  transform: rotate(-12deg);
  animation: exam-stamp-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes exam-stamp-in {
  from {
    opacity: 0;
    transform: rotate(-30deg) scale(1.8);
  }
}

@media (max-width: 520px) {
  .scene-licence {
    right: -10px;
    bottom: 140px;
    width: 116px;
    height: 92px;
    grid-template-columns: 38px 1fr;
    gap: 6px 7px;
  }

  .licence-photo {
    width: 38px;
    height: 46px;
  }

  .licence-stamp {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .exam-stamp {
    padding-left: 36px;
  }

  .exam-stamp .big-idea-mark {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-licence,
  .exam-stamp .big-idea-mark {
    animation: none;
  }
}

/* In-page question card used instead of browser confirm dialogs. */
.inline-ask {
  --ask-accent: var(--blue);
  --ask-soft: var(--blue-soft);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 640px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 2px solid var(--ask-accent);
  border-radius: 18px;
  background: var(--ask-soft);
  box-shadow: var(--small-shadow);
  color: var(--ink);
  animation: inline-ask-in 0.18s ease-out;
}

button[hidden] {
  display: none !important;
}

.backup-actions .inline-ask {
  flex-basis: 100%;
  margin-top: 0;
}

.page-progress-tools .inline-ask {
  grid-column: 1 / -1;
  margin-top: 0;
}

.inline-ask-tone-warn {
  --ask-accent: var(--orange-dark);
  --ask-soft: var(--orange-soft);
}

.inline-ask-tone-danger {
  --ask-accent: #9b2c2c;
  --ask-soft: #fff1f0;
}

.inline-ask-icon {
  display: inline-flex;
  flex: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ask-accent);
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 900;
}

.inline-ask-body {
  min-width: 0;
}

.inline-ask .inline-ask-note {
  margin: 0 0 6px;
  color: var(--blue-dark);
  font-size: 0.9rem;
  font-weight: 900;
}

.inline-ask .inline-ask-text {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
}

.inline-ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.inline-ask .inline-ask-actions .inline-ask-button {
  display: inline-flex;
  min-height: 44px;
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 2px solid var(--ask-accent);
  border-radius: 14px;
  background: var(--white);
  color: var(--ask-accent);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.inline-ask .inline-ask-actions .inline-ask-primary,
.inline-ask .inline-ask-actions .inline-ask-danger {
  background: var(--ask-accent);
  color: var(--white);
}

.inline-ask .inline-ask-actions .inline-ask-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
}

.inline-ask .inline-ask-actions .inline-ask-button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
  text-decoration: none;
}

.inline-ask .inline-ask-actions .inline-ask-button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

@keyframes inline-ask-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 560px) {
  .inline-ask-actions {
    flex-direction: column;
  }

  .inline-ask .inline-ask-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inline-ask {
    animation: none;
  }
}

/* Dizzy: swirly spinning eyes, an "o" mouth and a wobble. */
.pybot-wrap[data-mood="dizzy"] .eye {
  top: 38px;
  width: 42px;
  height: 42px;
  margin-left: -6px;
  border: 8px solid var(--blue-dark);
  border-right-color: transparent;
  border-radius: 50%;
  background: transparent;
  animation: buddy-dizzy-eyes 0.8s linear infinite;
}

.pybot-wrap[data-mood="dizzy"] .eye span {
  display: none;
}

.pybot-wrap[data-mood="dizzy"] .mouth {
  top: 88px;
  left: calc(50% - 14px);
  width: 28px;
  height: 24px;
  border: 6px solid var(--orange-dark);
  border-radius: 50%;
}

.pybot-wrap[data-mood="dizzy"] .pybot {
  transform-origin: 50% 100%;
  animation: buddy-wobble 1.4s ease-in-out infinite;
}

.pybot-wrap[data-mood="dizzy"] .antenna {
  animation: antenna-wave 0.5s ease-in-out infinite;
}

.pybot-wrap[data-mood="dizzy"] .arm-left {
  transform: rotate(40deg);
}

.pybot-wrap[data-mood="dizzy"] .arm-right {
  transform: rotate(-40deg);
}

@media (prefers-reduced-motion: reduce) {
  .pybot-wrap[data-mood="dizzy"] .eye,
  .pybot-wrap[data-mood="dizzy"] .pybot,
  .pybot-wrap[data-mood="dizzy"] .antenna {
    animation: none;
  }
}

/* The little PyBot companion in the corner of every page. */
.pybot-buddy {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  width: 112px;
  height: 124px;
  pointer-events: none;
}

.pybot-buddy[hidden] {
  display: none;
}

.buddy-body {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 102px;
  height: 117px;
  cursor: pointer;
  pointer-events: auto;
  animation: buddy-float 3.4s ease-in-out infinite;
}

.pybot-buddy .pybot-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 390px;
  margin: 0;
  transform: scale(0.3);
  transform-origin: 0 0;
}

.pybot-buddy .pybot {
  filter: drop-shadow(0 14px 10px rgba(30, 66, 111, 0.22));
}

.pybot-buddy[data-move="hop"] .pybot {
  animation: buddy-hop 0.6s ease-in-out 2;
}

.pybot-buddy[data-move="dance"] .pybot {
  animation: buddy-dance 0.5s ease-in-out 5;
}

.pybot-buddy[data-move="spin"] .pybot {
  animation: buddy-spin 0.9s ease-in-out 1;
}

.pybot-buddy[data-move="look"] .pybot {
  animation: buddy-look 1.8s ease-in-out 1;
}

.pybot-buddy[data-move="nod"] .pybot {
  animation: buddy-nod 0.5s ease-in-out 3;
}

.pybot-buddy[data-move="wave"] .arm-right {
  animation: buddy-wave 0.42s ease-in-out 5;
}

.pybot-buddy[data-move="blink"] .eye {
  animation: buddy-blink 0.5s ease-in-out 2;
}

.buddy-bubble {
  position: absolute;
  right: 6px;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 230px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid var(--blue-dark);
  border-radius: 16px 16px 5px 16px;
  background: var(--white);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.14);
  color: var(--blue-dark);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: 90% 100%;
  transition: opacity 220ms ease, transform 220ms ease;
}

.buddy-bubble.is-visible {
  opacity: 1;
  transform: none;
}

.buddy-hide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--blue-dark);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-dark);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease;
}

.pybot-buddy:hover .buddy-hide,
.buddy-hide:focus-visible {
  opacity: 1;
}

.buddy-body {
  touch-action: none;
  cursor: grab;
}

.pybot-buddy.is-dragging .buddy-body {
  cursor: grabbing;
  animation: none;
  transform: scale(1.08) rotate(-6deg);
}

.pybot-buddy.bubble-right .buddy-bubble {
  right: auto;
  left: 6px;
  border-radius: 16px 16px 16px 5px;
  transform-origin: 10% 100%;
}

.pybot-buddy.bubble-below .buddy-bubble {
  top: calc(100% + 6px);
  bottom: auto;
}

/* The eyes follow the pointer; `translate` adds to each mood's own transform. */
.pybot-buddy .eye {
  translate: var(--look-x, 0) var(--look-y, 0);
}

.pybot-buddy[data-move="peek"] .pybot {
  animation: buddy-peek 1.4s ease-in-out 1;
}

.pybot-buddy[data-move="stretch"] .pybot {
  animation: buddy-stretch 1.2s ease-in-out 1;
  transform-origin: 50% 100%;
}

.pybot-buddy[data-move="stretch"] .arm-left {
  animation: buddy-reach-left 1.2s ease-in-out 1;
}

.pybot-buddy[data-move="stretch"] .arm-right {
  animation: buddy-reach-right 1.2s ease-in-out 1;
}

.pybot-buddy[data-move="scan"] .chest-light,
.pybot-buddy[data-move="scan"] .antenna span {
  animation: buddy-glow 0.35s ease-in-out 6;
}

.pybot-buddy[data-move="flip"] .pybot {
  animation: buddy-flip 1s ease-in-out 1;
}

.pybot-buddy[data-move="wiggle"] .pybot {
  animation: buddy-wiggle 0.18s ease-in-out 6;
}

.pybot-buddy[data-move="sleep"] .eye {
  height: 6px;
  border-radius: 6px;
  transform: translateY(16px);
}

.pybot-buddy[data-move="sleep"] .eye span {
  display: none;
}

.pybot-buddy[data-move="sleep"] .pybot {
  animation: buddy-snore 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.pybot-buddy.is-shaking .buddy-body {
  animation: buddy-shake 0.12s linear infinite;
}

.pybot-buddy.is-shaking .eye,
.pybot-buddy[data-move="dizzy"] .eye {
  top: 38px;
  width: 44px;
  height: 44px;
  margin-left: -7px;
  border: 9px solid var(--blue-dark);
  border-right-color: transparent;
  border-radius: 50%;
  background: transparent;
  animation: buddy-dizzy-eyes 0.7s linear infinite;
}

.pybot-buddy.is-shaking .eye span,
.pybot-buddy[data-move="dizzy"] .eye span {
  display: none;
}

.pybot-buddy[data-move="dizzy"] .mouth {
  left: calc(50% - 14px);
  width: 28px;
  height: 22px;
  border: 6px solid var(--orange-dark);
  border-radius: 50%;
}

.pybot-buddy[data-move="dizzy"] .pybot {
  animation: buddy-wobble 0.9s ease-in-out 4;
  transform-origin: 50% 100%;
}

@keyframes buddy-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(-3px, 2px) rotate(-6deg);
  }
  75% {
    transform: translate(3px, -2px) rotate(6deg);
  }
}

@keyframes buddy-dizzy-eyes {
  to {
    transform: rotate(360deg);
  }
}

@keyframes buddy-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-12deg) translateX(-10px);
  }
  75% {
    transform: rotate(12deg) translateX(10px);
  }
}

.buddy-particle {
  position: absolute;
  top: 10px;
  left: 50%;
  color: var(--orange);
  font-size: 1.05rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  animation: buddy-particle 1.6s ease-out var(--particle-delay, 0ms) 1 forwards;
}

@keyframes buddy-particle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x, 0), -70px) scale(1.15);
  }
}

@keyframes buddy-peek {
  0%,
  100% {
    transform: translateY(0);
  }
  35%,
  55% {
    transform: translateY(120px);
  }
  75% {
    transform: translateY(-20px);
  }
}

@keyframes buddy-stretch {
  0%,
  100% {
    transform: scaleY(1);
  }
  45%,
  60% {
    transform: scaleY(1.12) scaleX(0.95);
  }
}

@keyframes buddy-reach-left {
  0%,
  100% {
    transform: rotate(13deg);
  }
  45%,
  60% {
    transform: rotate(165deg);
  }
}

@keyframes buddy-reach-right {
  0%,
  100% {
    transform: rotate(-44deg);
  }
  45%,
  60% {
    transform: rotate(-165deg);
  }
}

@keyframes buddy-glow {
  0%,
  100% {
    background: var(--yellow);
  }
  50% {
    background: var(--orange);
  }
}

@keyframes buddy-flip {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-60px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

@keyframes buddy-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes buddy-snore {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03, 0.97);
  }
}

@keyframes buddy-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes buddy-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-46px);
  }
}

@keyframes buddy-dance {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg) translateY(-12px);
  }
  75% {
    transform: rotate(8deg) translateY(-12px);
  }
}

@keyframes buddy-spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

@keyframes buddy-look {
  0%,
  100% {
    transform: rotate(0);
  }
  25%,
  40% {
    transform: rotate(-7deg) translateX(-14px);
  }
  60%,
  75% {
    transform: rotate(7deg) translateX(14px);
  }
}

@keyframes buddy-nod {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(4deg) translateY(10px);
  }
}

@keyframes buddy-wave {
  0%,
  100% {
    transform: rotate(-135deg);
  }
  50% {
    transform: rotate(-168deg);
  }
}

@keyframes buddy-blink {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

/* Phones: the companion would cover the lesson, so it and its button stay away. */
@media (max-width: 760px), (max-height: 480px) {
  .buddy-toggle,
  .pybot-buddy {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pybot-buddy *,
  .pybot-buddy *::before,
  .pybot-buddy *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .pybot-buddy {
    display: none;
  }
}

/* Thinking in steps: goal line on PyBot's water algorithm */
.algorithm-listing .algorithm-goal {
  margin: 8px 0 0;
  color: #bfe3ff;
  font-weight: 800;
}

/* Thinking in steps: "Put the steps in order" drag activities */
.order-heading {
  margin-top: 46px;
}

.order-heading h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.order-heading p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.order-grid {
  margin-top: 22px;
}

.order-list {
  margin-top: 12px;
}

.order-list li {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  position: relative;
  border-color: #cbd8e5;
  background: var(--white);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.order-list li:hover,
.order-list li:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.order-list li.is-dragging {
  z-index: 2;
  border-color: var(--blue-dark);
  box-shadow: 0 12px 24px rgba(35, 68, 114, 0.2);
  cursor: grabbing;
}

.order-grip {
  color: #9fb2c6;
  font-size: 1.1rem;
  letter-spacing: -0.2em;
}

.order-check {
  min-height: 48px;
  margin-top: 16px;
  padding: 10px 20px;
  border: 3px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--yellow);
  color: var(--blue-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.order-check.is-wrong {
  animation: answer-shake 330ms ease-in-out;
}

.order-activity.is-complete .order-list li {
  border-color: var(--blue);
  background: var(--blue-soft);
  cursor: default;
}

.order-activity.is-complete .order-grip {
  visibility: hidden;
}

.order-check:disabled {
  border-color: var(--blue);
  background: var(--blue-soft);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .order-check.is-wrong {
    animation: none;
  }
}

/* Join text: small steps with text tiles */
.join-steps {
  display: grid;
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.join-step {
  position: relative;
  padding: 20px 20px 20px 72px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--small-shadow);
}

.join-step h3 {
  margin: 0 0 4px;
  color: var(--ink);
}

.join-step > p {
  margin: 0 0 14px;
  color: var(--muted);
}

.join-step-number {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 900;
}

.join-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--blue-soft);
}

.join-demo + .join-demo {
  margin-top: 10px;
}

.join-demo small {
  flex-basis: 100%;
  color: var(--muted);
  font-weight: 800;
}

.join-demo-bad {
  background: var(--orange-soft);
}

.join-demo-bad small {
  color: var(--orange-dark);
}

.text-tile,
.number-tile {
  padding: 8px 12px;
  border: 3px solid var(--blue-dark);
  border-radius: 10px;
  background: var(--white);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.1rem;
  font-weight: 800;
  white-space: pre;
}

.number-tile {
  border-style: dashed;
}

.text-tile-result {
  background: var(--yellow);
}

.join-op,
.join-arrow {
  color: var(--blue-dark);
  font-size: 1.4rem;
}

.space-mark {
  margin: 0 1px;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--yellow);
  color: var(--orange-dark);
}

.join-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.join-compare .join-demo + .join-demo {
  margin-top: 0;
}

@media (max-width: 560px) {
  .join-step {
    padding: 64px 14px 16px;
  }
}

/* Assignment steps: which side is which, and the old value leaving */
.assign-part {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.assign-tag {
  color: var(--blue-dark);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
}

.assign-swap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.assign-old {
  background: var(--white);
  color: var(--muted);
  text-decoration: line-through;
  opacity: 0.6;
}

/* Rewards and extras: album, diplomas, word list and the grown-ups' guide. */
.extras-strip {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 110px 0 100px;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.extras-card {
  display: grid;
  height: 100%;
  align-content: start;
  gap: 8px;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--small-shadow);
}

.extras-card:hover,
.extras-card:focus-visible {
  border-color: var(--blue);
}

.extras-card b {
  font-size: 1.2rem;
}

.extras-card span:last-child {
  color: var(--muted);
}

.extras-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 1.3rem;
  font-weight: 900;
}

.extras-glossary .extras-icon {
  background: var(--blue-soft);
}

.extras-guide .extras-icon {
  background: var(--orange-soft);
  color: var(--orange-dark);
}

.streak-note {
  display: inline-block;
  margin: 14px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.streak-note[hidden] {
  display: none;
}

.section-heading > p.streak-note:last-child {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 18px 0 0;
  max-width: none;
  color: var(--ink);
  font-size: 0.9rem;
}

.zone-diploma {
  display: inline-block;
  margin: 8px 0 0;
  color: var(--orange-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

.mission-foundation .zone-diploma {
  color: var(--yellow);
}

.reward-toast {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 60;
  display: flex;
  max-width: min(420px, calc(100% - 36px));
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 16px;
  border: 2px solid var(--yellow);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  box-shadow: var(--shadow);
  animation: reward-in 0.35s ease-out;
  transition: opacity 0.5s, transform 0.5s;
}

.reward-toast.is-leaving {
  opacity: 0;
  transform: translateY(12px);
}

.reward-toast-icon {
  font-size: 1.8rem;
}

.reward-toast a {
  color: var(--blue);
}

@keyframes reward-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.extras-main {
  width: min(100% - 48px, 1000px);
  margin: 0 auto;
  padding: 62px 0 90px;
}

.extras-main .meet-intro h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
}

.extras-main .meet-intro .eyebrow {
  justify-content: center;
}

.extras-main h2 {
  margin: 48px 0 18px;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.extras-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 0;
}

.extras-actions button,
.extras-actions a {
  min-height: 46px;
  padding: 10px 18px;
  border: 2px solid var(--blue);
  border-radius: 14px;
  background: var(--white);
  color: var(--blue-dark);
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.extras-actions .is-primary {
  background: var(--blue);
  color: var(--white);
}

/* Album */
.album-streak {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  background: var(--yellow-soft);
}

.album-streak-icon {
  font-size: 2.6rem;
}

.album-streak p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.album-streak small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sticker {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: center;
}

.sticker-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 50%;
  background: var(--line);
  font-size: 2.2rem;
  filter: grayscale(1);
  opacity: 0.45;
}

.sticker b {
  font-size: 0.95rem;
}

.sticker small {
  color: var(--muted);
  font-size: 0.8rem;
}

.sticker.is-earned {
  border: 2px solid var(--yellow);
  box-shadow: var(--small-shadow);
}

.sticker.is-earned .sticker-icon {
  background: radial-gradient(circle, var(--white) 40%, var(--yellow) 41%);
  filter: none;
  opacity: 1;
  transform: rotate(-6deg);
}

.sticker a {
  color: var(--orange-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

/* Diploma */
.diploma-name-field {
  display: grid;
  max-width: 420px;
  gap: 6px;
  margin: 0 auto 24px;
  font-weight: 800;
}

.diploma-name-field input {
  min-height: 46px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  font: inherit;
}

.diploma {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 48px;
  border: 10px double var(--orange);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, var(--yellow-decor) 0 90px, transparent 91px),
    radial-gradient(circle at 100% 0, var(--blue-decor) 0 70px, transparent 71px),
    var(--white);
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
}

.diploma-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.diploma-kicker {
  margin: 26px 0 0;
  color: var(--orange-dark);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.diploma h1 {
  margin: 6px 0 0;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  letter-spacing: -0.04em;
}

.diploma-line {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.diploma-name {
  display: inline-block;
  min-width: 60%;
  margin: 14px 0 0;
  padding: 0 20px 6px;
  border-bottom: 3px solid var(--ink);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
}

.diploma-zone {
  margin: 10px 0 0;
  color: var(--blue-dark);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 900;
}

.diploma-sticker {
  font-size: 3rem;
}

.diploma-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 36px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.diploma-footer b {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
}

.diploma-missing {
  text-align: center;
}

/* Word list */
.glossary-search {
  display: block;
  width: min(100%, 420px);
  min-height: 46px;
  margin: 0 auto 26px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  font: inherit;
}

.glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glossary-term {
  display: grid;
  align-content: start;
  grid-template-columns: 64px 1fr;
  gap: 4px 16px;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

.glossary-drawing {
  display: grid;
  grid-row: span 3;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 18px;
  background: var(--blue-soft);
  font-size: 2.1rem;
}

.glossary-term h2 {
  margin: 0;
  font-size: 1.3rem;
}

.glossary-term .glossary-other {
  margin: 0;
  color: var(--orange-dark);
  font-size: 0.85rem;
  font-weight: 800;
}

.glossary-term p {
  margin: 0;
}

.glossary-term code {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.9rem;
  white-space: pre;
  overflow-x: auto;
}

/* Grown-ups' guide */
.guide-tips {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
}

.guide-list {
  display: grid;
  gap: 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.guide-zone {
  padding: 24px 26px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  break-inside: avoid;
}

.guide-zone header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.guide-zone h2 {
  margin: 0;
  font-size: 1.5rem;
}

.guide-zone .guide-number {
  color: var(--orange-dark);
  font-weight: 900;
}

.guide-time {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-weight: 800;
}

.guide-zone dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 16px 0 0;
}

.guide-zone dt {
  font-weight: 900;
}

.guide-zone dd {
  margin: 4px 0 0;
  color: var(--muted);
}

.guide-zone .guide-challenge {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--yellow-soft);
}

@media (max-width: 760px) {
  .extras-grid,
  .guide-zone dl {
    grid-template-columns: 1fr;
  }

  .extras-main {
    width: min(100% - 32px, 1000px);
    padding-top: 40px;
  }

  .diploma {
    padding: 36px 20px;
    border-width: 7px;
  }

  .diploma-footer {
    flex-direction: column;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .pybot-buddy,
  .reward-toast,
  .extras-actions,
  .diploma-name-field,
  .glossary-search,
  .no-print {
    display: none !important;
  }

  body {
    background: var(--white);
  }

  .extras-main {
    width: 100%;
    padding: 0;
  }

  .diploma-page .meet-intro {
    display: none;
  }

  .diploma {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .glossary-term,
  .guide-zone {
    break-inside: avoid;
  }

  .print-challenges .guide-zone dl > div:not(.guide-challenge),
  .print-challenges .guide-time,
  .print-challenges .guide-tips {
    display: none;
  }

  .print-challenges .guide-zone dl {
    grid-template-columns: 1fr;
  }
}

@page diploma {
  size: landscape;
}

.diploma-page main {
  page: diploma;
}

@media (max-width: 760px) {
  .extras-strip {
    padding: 64px 0 72px;
  }
}

/* The PyBot family: small cards for the sibling sites, quiet on purpose. */
.family-strip {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 64px;
}

.family-strip .section-heading h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.family-card {
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}

.family-card > :not(.family-icon) {
  grid-column: 2;
}

a.family-card:hover,
a.family-card:focus-visible {
  border-color: var(--blue);
}

.family-card > span:not([class]) {
  color: var(--muted);
}

.family-icon {
  display: grid;
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--orange);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
}

.family-english .family-icon {
  background: #c2287e;
  color: var(--white);
}

.family-blocks .family-icon {
  background: #2e9e5b;
  color: var(--white);
}

.family-action {
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 800;
}

.family-card.is-soon .family-action {
  color: var(--muted);
}

@media (max-width: 760px) {
  .family-strip {
    width: min(100% - 32px, 1180px);
    padding: 40px 0 48px;
  }
}

/* Robots from a mold zone: little object cards next to PyBot (what it knows, what it does). */
.scene-objects::before {
  background: var(--yellow-soft);
}

.scene-objects-prop {
  position: absolute;
  right: -14px;
  bottom: 26px;
  z-index: 8;
}

.object-cards {
  display: grid;
  gap: 10px;
}

.object-card {
  display: grid;
  min-width: 150px;
  gap: 4px;
  padding: 10px 12px;
  border: 4px solid var(--blue-dark);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 5px 6px 0 rgba(23, 59, 130, 0.16);
  color: var(--blue-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
}

.object-card b {
  font-size: 1rem;
}

.object-card span:last-child {
  color: var(--orange);
  font-weight: 900;
}

/* The mold is a plan, so its card is dashed with empty spaces. */
.object-card-mold {
  border-style: dashed;
  background: var(--yellow-soft);
}

.object-card-mold span::after {
  content: " = ___";
}

.object-card-mold span:last-child {
  color: var(--blue-dark);
  font-weight: 400;
}

.object-card-card2 {
  transform: translateX(-24px);
}

/* Two robot cards stay small so PyBot's face shows. */
.object-cards .object-card {
  min-width: 132px;
  gap: 2px;
  padding: 6px 10px;
  font-size: 0.8rem;
}

.scene-objects-prop:has(.object-cards) {
  bottom: 4px;
}