.engc-card{
  margin-bottom:18px;padding:19px;border:1px solid #d8e3ee;border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,251,255,.96),rgba(249,247,255,.96));
  box-shadow:0 7px 20px rgba(70,90,125,.045)
}
.engc-full{width:100%}
.engc-sec-title{margin:0 0 13px;font-size:clamp(1.22rem,2vw,1.7rem);line-height:1.3;color:#203b60}
.engc-card>p{margin:0 0 12px}
.engc-panel{
  margin:14px 0;padding:14px 16px;border-left:4px solid #7ba7e8;
  background:linear-gradient(115deg,#f4f9ff,#f8f5ff,#f3fbf7);border-radius:10px
}
.engc-panel.example-panel{border-left-color:#31a987;background:linear-gradient(115deg,#effbf7,#f2f8ff,#f8f4ff)}
.engc-panel h3{margin:0 0 8px;font-size:1.03rem;color:#24466f}
.engc-panel p:last-child,.engc-panel ol:last-child,.engc-panel ul:last-child{margin-bottom:0}
.tutorial-section{scroll-margin-top:16px;content-visibility:auto;contain-intrinsic-size:1px 650px}
.main img,.course-content img{max-width:100%;height:auto}
ol,ul{padding-left:1.4rem}
body.dark-view .engc-card{
  background:linear-gradient(135deg,#18263a,#201d34,#172b26);border-color:#34445c
}
body.dark-view .engc-sec-title,body.dark-view .engc-panel h3{color:#cfe5ff}
body.dark-view .engc-panel{
  background:linear-gradient(115deg,#15253a,#1d1b30,#172923);border-left-color:#6099db
}
body.dark-view .engc-panel.example-panel{border-left-color:#49c4a1}
@media(max-width:560px){.engc-card{padding:14px}.engc-panel{padding:12px}}

/* =========================================================
   Topic navigation + coding examples
   ========================================================= */
.topic-jump-nav{
  margin:0 0 18px;padding:16px;border:1px solid #cdddeb;border-radius:14px;
  background:linear-gradient(110deg,#dff2ff 0%,#e9e4ff 56%,#f3e8ff 100%);
}
.topic-jump-nav h2{margin:0 0 10px;font-size:1.1rem;color:#0b2e59}
.topic-jump-links{display:flex;flex-wrap:wrap;gap:8px}
.topic-jump-links a{
  display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:.86rem;
  padding:7px 9px;border:1px solid #9cc9f5;border-radius:999px;background:#fff;color:#0b2e59
}
.topic-jump-links a:hover,.topic-jump-links a:focus-visible{
  background:linear-gradient(100deg,#1e90ff 0%,#8f7cff 55%,#f3e8ff 100%);color:#111827
}
.code-panel{position:relative;border-left-color:#1e90ff!important;background:linear-gradient(135deg,#0c2038,#132c50,#281b48)!important;color:#f7fbff!important}
.code-panel h3{color:#fff!important;padding-right:92px}
.code-panel pre{margin:10px 0 0;padding:15px;overflow:auto;border-radius:10px;background:#081525;color:#eef7ff;line-height:1.55;tab-size:2;white-space:pre}
.code-panel code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.88rem}
.copy-code{position:absolute;right:12px;top:10px;border:1px solid #9bc7ff;border-radius:8px;padding:6px 9px;background:linear-gradient(135deg,#fff,#d9f0ff,#f3e8ff);color:#10213a;font-weight:800;cursor:pointer}
.code-explanation{border-left-color:#7c3aed!important;background:linear-gradient(115deg,#eaf7ff,#eee8ff,#f3e8ff)!important;color:#111827!important}
.code-explanation h3{color:#173a67!important}.code-explanation ol{margin-bottom:0}.code-explanation li{margin:6px 0}
.expected-output{margin-top:10px;padding:10px 12px;border:1px dashed #87bdf1;border-radius:9px;background:rgba(255,255,255,.72)}
.ad-slot:empty{display:none}.ad-slot{margin:18px 0;min-height:0;text-align:center}
.ml-policy-note{margin:9px auto 0;max-width:920px;font-size:.78rem;line-height:1.5;color:#24364f}
body.dark-view .topic-jump-nav{background:linear-gradient(110deg,#15253a,#211b38,#2a2145);border-color:#455a75}
body.dark-view .topic-jump-nav h2{color:#dcecff}
body.dark-view .topic-jump-links a{background:#172235;color:#e8eef7;border-color:#455a75}
body.dark-view .code-explanation{background:linear-gradient(115deg,#15253a,#1d1b30,#221b38)!important;color:#e8eef7!important}
body.dark-view .code-explanation h3{color:#cfe5ff!important}
body.dark-view .expected-output{background:rgba(20,31,49,.7);border-color:#455a75}
body.dark-view .ml-policy-note{color:#b8c5d6}
@media(max-width:560px){.topic-jump-nav{padding:12px}.topic-jump-links a{font-size:.8rem}.code-panel pre{font-size:.8rem;padding:12px}.copy-code{position:static;margin:0 0 8px}.code-panel h3{padding-right:0}}
@media print{.topic-jump-nav,.copy-code,.ad-slot{display:none!important}.code-panel pre{white-space:pre-wrap;background:#fff!important;color:#000!important;border:1px solid #ccc}.code-panel,.code-explanation{background:#fff!important;color:#000!important}}