.gradient-part-two {
  --gp-navy: #101b35;
  --gp-lime: #c8ff3d;
  --gp-blue: #75cfff;
  --gp-orange: #ff9c55;
  --gp-pink: #ff82c8;
  --gp-ink: #263248;
  --gp-paper: #f5f7fb;
  color: var(--gp-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
}
.gradient-part-two * { box-sizing: border-box; }
.gradient-part-two h2,
.gradient-part-two h3 { line-height: 1.25; }
.gradient-part-two h2 {
  margin: 34px 0 12px;
  color: var(--gp-navy);
  font-size: clamp(22px, 3vw, 30px);
}
.gradient-part-two h3 {
  margin: 0 0 8px;
  color: var(--gp-navy);
  font-size: 18px;
}
.gradient-part-two p { margin: 8px 0 14px; }
.gradient-part-two .gp-hero {
  padding: clamp(22px, 5vw, 42px);
  border-radius: 12px;
  color: white;
  background:
    radial-gradient(circle at 90% 10%, #ff82c833, transparent 30%),
    linear-gradient(135deg, #101b35, #192c50 65%, #254d69);
}
.gradient-part-two .gp-kicker {
  color: var(--gp-lime);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 800;
}
.gradient-part-two .gp-hero h2 {
  color: white;
  margin: 12px 0;
  font-size: clamp(29px, 5vw, 44px);
  letter-spacing: -1px;
}
.gradient-part-two .gp-hero p { color: #e0eafa; }
.gradient-part-two .gp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.gradient-part-two .gp-chip {
  padding: 4px 10px;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}
.gradient-part-two .gp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.gradient-part-two .gp-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  background: white;
}
.gradient-part-two .gp-demo {
  min-height: 125px;
  margin: 12px 0;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
}
.gradient-part-two .gp-code {
  overflow-x: auto;
  padding: 16px;
  border-radius: 7px;
  color: #edf3ff;
  background: #111827;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre;
}
.gradient-part-two .gp-prop { color: #75cfff; }
.gradient-part-two .gp-fn { color: #c8ff3d; }
.gradient-part-two .gp-color { color: #ff9c55; }
.gradient-part-two .gp-value { color: #ff82c8; }
.gradient-part-two .gp-note {
  margin: 16px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--gp-blue);
  border-radius: 0 7px 7px 0;
  background: #eef8ff;
}
.gradient-part-two .gp-challenge {
  padding: 20px;
  margin: 18px 0;
  border-radius: 9px;
  background: var(--gp-paper);
  border: 1px solid #dfe5ef;
}
.gradient-part-two .gp-checklist {
  padding-left: 22px;
}
.gradient-part-two .gp-checklist li { margin: 7px 0; }
.gradient-part-two .gp-footer {
  margin-top: 30px;
  padding: 22px;
  border-radius: 9px;
  color: white;
  background: var(--gp-navy);
}
.gradient-part-two .gp-footer strong { color: var(--gp-lime); }
@media (max-width: 600px) {
  .gradient-part-two .gp-grid { grid-template-columns: 1fr; }
  .gradient-part-two .gp-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-part-two .gp-animated {
    animation: none !important;
  }
}



    @keyframes gp-gradient-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .gradient-part-two .gp-animated {
      background: linear-gradient(120deg,#101b35,#176b87,#8b5cf6,#ff82c8,#ff9c55,#101b35);
      background-size: 300% 300%;
      animation: gp-gradient-shift 8s ease infinite;
    }
  
/* Restore the original lesson's framed teaching layout and table. */
.gradient-part-two{background:#f5f7fb!important;padding:clamp(18px,3vw,38px);border-radius:12px;color:#263248!important}
.gradient-part-two>h2:first-of-type{margin-top:0;font-size:clamp(29px,5vw,44px)}
.gradient-part-two .gp-kicker:first-child{display:inline-block;background:#101b35;padding:8px 12px;border-radius:5px}
.gradient-part-two .gp-chips{background:#101b35;border-radius:8px;padding:12px}
.gradient-part-two .gp-note,.gradient-part-two .gp-challenge{color:#263248}
.gradient-part-two .gp-reference{width:100%;border-collapse:collapse;display:table;min-width:600px}
.gradient-part-two .gp-reference th,.gradient-part-two .gp-reference td{padding:12px;text-align:left;border-bottom:1px solid #dfe5ef}
.gradient-part-two .gp-reference th{background:#101b35;color:#fff}
.gradient-part-two .gp-reference code{white-space:normal;overflow-wrap:anywhere}
.gradient-part-two .gp-footer h3{color:white}

/* Keep the imported lesson within the article column, not the viewport. */
.teaching-content.gradient-part-two{min-width:0;max-width:100%;overflow:hidden}
.teaching-content.gradient-part-two .gradient-part-two{min-width:0;max-width:100%;overflow:hidden}
.teaching-content.gradient-part-two h2,.teaching-content.gradient-part-two p,.teaching-content.gradient-part-two li{overflow-wrap:break-word;text-transform:none;letter-spacing:normal}
.teaching-content.gradient-part-two p{color:#263248;font-weight:400}
.teaching-content.gradient-part-two .gp-kicker{color:#c8ff3d;font-weight:800}
.teaching-content.gradient-part-two .gp-code{max-width:100%;overflow-x:auto;white-space:pre;font-size:12px;letter-spacing:normal;text-transform:none}
.teaching-content.gradient-part-two .gp-grid{min-width:0;max-width:100%}
.teaching-content.gradient-part-two .gp-footer p,.teaching-content.gradient-part-two .gp-hero p{color:#e0eafa}
.teaching-content.gradient-part-two .gp-list-item{margin:3px 0 3px 15px}

/* Repair archive theme inheritance and constrain imported content. */
.article-content.teaching-content.gradient-part-two{background:#f5f7fb!important;color:#263248!important;min-width:0;max-width:100%;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.65}
.article-content.teaching-content.gradient-part-two h2{color:#101b35!important;font-family:inherit;font-weight:750;font-size:clamp(23px,3vw,31px);letter-spacing:-.025em;text-transform:none;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.article-content.teaching-content.gradient-part-two h2::before,.article-content.teaching-content.gradient-part-two h2::after{content:none!important;display:none!important}
.article-content.teaching-content.gradient-part-two h3{color:#101b35!important;font-family:inherit;letter-spacing:normal;text-transform:none}
.article-content.teaching-content.gradient-part-two p,.article-content.teaching-content.gradient-part-two li{color:#263248!important;font-family:inherit;font-weight:400!important;font-size:15px;line-height:1.7;letter-spacing:normal;text-transform:none;white-space:normal;overflow-wrap:anywhere}
.article-content.teaching-content.gradient-part-two .gp-card li{color:#263248!important}
.article-content.teaching-content.gradient-part-two .gp-code,.article-content.teaching-content.gradient-part-two .gp-code *{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;color:#edf3ff}
.article-content.teaching-content.gradient-part-two .gp-code .gp-prop{color:#75cfff}
.article-content.teaching-content.gradient-part-two .gp-code .gp-fn{color:#c8ff3d}
.article-content.teaching-content.gradient-part-two .gp-code .gp-color{color:#ff9c55}
.article-content.teaching-content.gradient-part-two .gp-code .gp-value{color:#ff82c8}
.article-content.teaching-content.gradient-part-two .gp-grid,.article-content.teaching-content.gradient-part-two .gp-card{max-width:100%}
.article-content.teaching-content.gradient-part-two .gp-kicker{color:#c8ff3d!important}
.article-content.teaching-content.gradient-part-two .gp-footer p{color:#e0eafa!important}
@media(max-width:760px){.article-content.teaching-content.gradient-part-two .gp-grid{grid-template-columns:minmax(0,1fr)}}

/* Final isolated lesson surface: override host article typography only within the lesson. */
.teaching-content .gradient-part-two{display:flow-root;width:100%;max-width:100%;min-width:0;overflow:hidden;background:#f5f7fb!important;color:#263248!important;padding:clamp(16px,3vw,34px);font:400 16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}
.teaching-content .gradient-part-two>h2,.teaching-content .gradient-part-two h2{display:block!important;visibility:visible!important;color:#101b35!important;background:transparent!important;opacity:1!important;font:700 clamp(24px,3vw,32px)/1.3 system-ui,-apple-system,"Segoe UI",sans-serif!important;letter-spacing:-.02em!important;text-transform:none!important;margin:30px 0 14px!important;max-width:100%;white-space:normal!important}
.teaching-content .gradient-part-two h2::before,.teaching-content .gradient-part-two h2::after{content:none!important}
.teaching-content .gradient-part-two>p,.teaching-content .gradient-part-two p{color:#263248!important;opacity:1!important;visibility:visible!important;font:400 16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif!important;max-width:100%;white-space:normal!important;overflow-wrap:break-word!important}
.teaching-content .gradient-part-two .gp-card p,.teaching-content .gradient-part-two .gp-card li{color:#263248!important}
.teaching-content .gradient-part-two .gp-code{overflow-x:auto!important;white-space:pre!important;max-width:100%;color:#edf3ff!important}
.teaching-content .gradient-part-two .gp-code *{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important}
.teaching-content .gradient-part-two .gp-code .gp-prop{color:#75cfff!important}
.teaching-content .gradient-part-two .gp-code .gp-fn{color:#c8ff3d!important}
.teaching-content .gradient-part-two .gp-code .gp-color{color:#ff9c55!important}
.teaching-content .gradient-part-two .gp-code .gp-value{color:#ff82c8!important}
.teaching-content .gradient-part-two .gp-kicker{color:#c8ff3d!important;background:#101b35}
.teaching-content .gradient-part-two .gp-chips{background:#101b35}
.teaching-content .gradient-part-two .gp-chip{color:#fff!important}
.teaching-content .gradient-part-two .gp-footer p{color:#e0eafa!important}
.teaching-content .gradient-part-two .gp-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}
.teaching-content .gradient-part-two .gp-card{min-width:0;max-width:100%}
@media(max-width:700px){.teaching-content .gradient-part-two .gp-grid{grid-template-columns:minmax(0,1fr)}}