/* =========================================================
   Modern C++ — interactive course
   Extends assets/css/style.css (Robotics Corner design system)
   ========================================================= */

.cpp-page {
  --c-sky: #0ea5e9;
  --c-indigo: #4f46e5;
  --c-blue: #0b63c5;
  --c-grad: linear-gradient(100deg, #0ea5e9 0%, #4f46e5 100%);
  --c-grad-soft: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  --code-bg: #0a1222;
  --code-panel: #0f1a2e;
  --code-line: #1c2a44;
  --code-ink: #dbe6f5;
  --code-muted: #8296b3;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cpp-page .grad-text { background: var(--c-grad); -webkit-background-clip: text; background-clip: text; }
.cpp-page .btn-primary {
  background: var(--c-grad);
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .62), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cpp-page .btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cpp-page .eyebrow { color: #4338ca; }
.cpp-page .eyebrow .dot { background: var(--c-grad); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.cpp-page .nav-link:hover, .cpp-page .nav-link.on { color: #4338ca; background: #eef2ff; border-color: #e0e7ff; }
.cpp-page .nav-link.on { border-color: #c7d2fe; }
.cpp-page .icon-tile { background: linear-gradient(140deg, #eff6ff, #e0e7ff); border-color: #dbeafe; color: #4338ca; }

.cpp-page ::selection { background: rgba(79, 70, 229, .18); }

/* ---------- header ---------- */
.cpp-brand { display: inline-flex; align-items: center; gap: 12px; }
.cpp-brand img { height: 40px; width: auto; }
.cpp-brand .brand-div { width: 1px; height: 26px; background: rgba(15, 23, 43, .14); }
.cpp-brand .brand-course {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}
.cpp-brand .brand-course span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #6366f1; margin-top: 3px; }

.badge-cpp {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(14, 165, 233, .12);
  border: 1px solid rgba(14, 165, 233, .28);
  color: #7dd3fc;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
  white-space: nowrap;
}

/* ---------- landing hero ---------- */
.hero-cpp {
  position: relative;
  overflow: hidden;
  padding: 148px 0 72px;
  background:
    radial-gradient(900px 480px at 18% 0%, rgba(191, 219, 254, .55) 0%, rgba(248, 250, 252, 0) 65%),
    radial-gradient(760px 420px at 92% 8%, rgba(221, 214, 254, .5) 0%, rgba(248, 250, 252, 0) 66%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 70%);
}
.hero-cpp .hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 43, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 43, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero-cpp .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none; }
.hero-cpp .orb-a { width: 440px; height: 440px; top: -180px; left: -120px; background: rgba(56, 189, 248, .4); }
.hero-cpp .orb-b { width: 420px; height: 420px; top: -120px; right: -120px; background: rgba(129, 140, 248, .34); }

.hero-cpp-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 54px;
  align-items: center;
}
.hero-copy-cpp { text-align: left; }
.hero-copy-cpp h1 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 5.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--ink);
}
.hero-copy-cpp .hero-lead { margin: 22px 0 0; max-width: 560px; text-align: left; font-size: 17px; }
.hero-copy-cpp .hero-cta { justify-content: flex-start; margin-top: 30px; }
.hero-copy-cpp .hero-chips { justify-content: flex-start; margin-top: 24px; }
.hero-copy-cpp .hero-chips .ic { color: #4f46e5; }
.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}
.hero-note .ic { font-size: 14px; color: var(--emerald-600); }

/* hero code window */
.hero-code {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 34%), var(--code-bg);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 40px 80px -40px rgba(15, 23, 43, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
}
.hero-code::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at 100% 0%, rgba(56, 189, 248, .14), transparent 60%);
  pointer-events: none;
}
.hero-code-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}
.win-dots { display: inline-flex; gap: 6px; }
.win-dots span { width: 9px; height: 9px; border-radius: 50%; background: #334155; }
.win-dots span:nth-child(1) { background: #f87171; opacity: .8; }
.win-dots span:nth-child(2) { background: #fbbf24; opacity: .8; }
.win-dots span:nth-child(3) { background: #34d399; opacity: .8; }
.hero-code-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: #93a9c6;
}
.hero-code-body {
  position: relative;
  padding: 18px 0 14px;
  min-height: 258px;
}
.hero-code pre {
  margin: 0;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--code-ink);
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hero-code pre .ln { display: inline-block; width: 22px; color: #3d4f6b; user-select: none; }
.hero-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  vertical-align: -2px;
  background: #67e8f9;
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.hero-out {
  margin: 12px 14px 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, .22);
  background: rgba(16, 185, 129, .07);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: #86efac;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.hero-out.show { opacity: 1; transform: none; }
.hero-out .out-prompt { color: #34d399; }
.hero-code-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--mono);
  font-size: 10px;
  color: #64748b;
}
.hero-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .1);
  color: #7dd3fc;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.hero-run:hover { background: rgba(56, 189, 248, .18); border-color: rgba(56, 189, 248, .5); }
.hero-run .ic { font-size: 11px; }
.hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 40px -20px rgba(15, 23, 43, .35);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  animation: floaty 6s ease-in-out infinite;
}
.hero-float b { color: #4338ca; font-weight: 600; }
.hero-float-fn { left: -26px; bottom: 64px; }
.hero-float-mem { right: -18px; top: 44px; animation-delay: -3s; }
.hero-float .ic { font-size: 13px; color: #6366f1; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- landing sections ---------- */
.stats-cpp { max-width: 1020px; margin: 58px auto 0; }
.stats-cpp .stat-num { background: var(--c-grad); -webkit-background-clip: text; background-clip: text; }

.syllabus { display: grid; gap: 14px; max-width: 1020px; margin: 0 auto; }
.syl-part {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.syl-part[open] { border-color: rgba(99, 102, 241, .32); box-shadow: 0 18px 44px -34px rgba(15, 23, 43, .4); }
.syl-part summary {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
}
.syl-part summary::-webkit-details-marker { display: none; }
.syl-part summary:hover { background: #fbfcff; }
.syl-num {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  transition: all .3s ease;
}
.syl-part[open] .syl-num { background: var(--c-grad); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .6); }
.syl-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4f46e5; margin-bottom: 3px; }
.syl-title { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.syl-q { display: block; margin-top: 3px; font-size: 12.8px; color: var(--muted); }
.syl-side { display: flex; align-items: center; gap: 12px; }
.syl-count { font-size: 12px; color: var(--faint); white-space: nowrap; }
.syl-part .chev { transform: rotate(-90deg); }
.syl-part[open] .chev { transform: rotate(0deg); color: #4f46e5; background: #eef2ff; }
.syl-body { padding: 0 20px 14px; }
.syl-list { display: grid; gap: 4px; }
.syl-lesson {
  display: grid;
  grid-template-columns: 46px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.syl-lesson:hover { background: #f7f9ff; border-color: #e8edfb; }
.syl-lesson .n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  transition: all .2s ease;
}
.syl-lesson:hover .n { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.syl-lesson.is-done .n { background: var(--emerald-50); border-color: #a7f3d0; color: #047857; }
.syl-lesson-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.syl-lesson-tag { display: block; font-size: 12.3px; color: var(--muted); line-height: 1.45; margin-top: 1px; }
.syl-lesson-topic { display: flex; gap: 5px; flex-wrap: wrap; }
.syl-lesson-topic span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  color: #64748b;
}
.syl-lesson .go { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #4f46e5; opacity: 0; transform: translateX(-3px); transition: all .2s ease; }
.syl-lesson:hover .go { opacity: 1; transform: none; }
.syl-lesson .go .ic { font-size: 13px; }
.syl-lesson.is-done .go { opacity: .75; }

.feature-cpp .icon-tile { background: var(--c-grad-soft); border-color: #dbeafe; color: #4338ca; }
.feature-cpp h3 { font-size: 16px; }

/* syllabus progress */
.syl-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 1020px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.syl-progress-label { display: flex; align-items: baseline; gap: 8px; flex: none; }
.syl-progress-label span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.syl-progress-label b { font-family: var(--mono); font-size: 12px; color: #4338ca; }
.syl-progress .course-progress { flex: 1 1 180px; margin: 0; }
.syl-progress .btn { flex: none; }

/* preview */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.preview-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.preview-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.preview-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--c-grad-soft);
  border: 1px solid #e0e7ff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
}
.preview-head h3 { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.preview-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.preview-snippet .snippet { margin: 0; }
.preview-snippet .editor { max-height: 400px; }

/* quote */
.quote-card {
  position: relative;
  max-width: 900px;
  margin: 44px auto 0;
  padding: 30px 34px;
  border-radius: 20px;
  border: 1px solid #e0e7ff;
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(99, 102, 241, .09), transparent 70%),
    #fff;
}
.quote-card p {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--ink-2);
}
.quote-card span { display: block; margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #818cf8; }

/* hero code line reveal */
.hero-line { display: block; opacity: 0; transform: translateY(3px); animation: heroLine .45s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * .085s); }
@keyframes heroLine { to { opacity: 1; transform: none; } }
.hero-out { min-height: 58px; }
.hero-out.err { border-color: rgba(248, 113, 113, .3); background: rgba(248, 113, 113, .08); color: #fca5a5; }

/* lesson states */
.lesson-loading { display: grid; place-items: center; gap: 14px; padding: 90px 0; color: var(--muted); font-size: 13.5px; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #e0e7ff; border-top-color: #6366f1;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lesson-error { padding: 60px 0; }
.lesson-error h1 { font-family: var(--font-display); font-size: 28px; color: var(--ink); letter-spacing: -.03em; }
.lesson-error p { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.lesson-error .btn { margin-top: 20px; }

.complete-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 200;
  transform: translate(-50%, 16px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #0f172b;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 50px -20px rgba(15, 23, 43, .6);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  max-width: calc(100vw - 40px);
}
.complete-toast.show { opacity: 1; transform: translate(-50%, 0); }

.nav-part-label { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; padding: 10px 7px 3px; }
.nav-part-label:first-child { padding-top: 0; }

#quiz, #practice { scroll-margin-top: 100px; }

@media (max-width: 1023px) {
  .preview-grid { grid-template-columns: 1fr; }
}


.build-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.build-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.build-card .icon-tile { flex: none; }
.build-card h3 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.build-card p { margin-top: 5px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.faq-cpp { max-width: 860px; margin: 0 auto; display: grid; gap: 9px; }

/* =========================================================
   LESSON SHELL
   ========================================================= */
.lesson-body { background: var(--bg); }
.lesson-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 130;
  background: transparent;
  pointer-events: none;
}
.lesson-topbar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-grad);
  box-shadow: 0 0 12px rgba(79, 70, 229, .5);
  transition: width .1s linear;
}

.lesson-shell {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr) 196px;
  gap: 44px;
  align-items: start;
  padding-top: 118px;
  padding-bottom: 80px;
}

/* sidebar */
.course-nav {
  position: sticky;
  top: 100px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.course-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.course-nav-head span { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.course-nav-head b { font-family: var(--mono); font-size: 10.5px; color: #4338ca; font-weight: 600; }
.course-progress { height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-bottom: 16px; }
.course-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-grad); transition: width .6s cubic-bezier(.2, .7, .2, 1); }

.course-nav-list { display: grid; gap: 2px; max-height: calc(100vh - 300px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.course-nav-list a {
  display: grid;
  grid-template-columns: 24px 1fr 14px;
  gap: 8px;
  align-items: center;
  padding: 7px 7px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 12.2px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--body);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.course-nav-list a:hover { background: #f8fafc; color: var(--ink); }
.course-nav-list a.is-current { background: #eef2ff; border-color: #e0e7ff; color: #312e81; font-weight: 600; }
.course-nav-list .nn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  color: #64748b;
}
.course-nav-list a.is-current .nn { background: #fff; border-color: #c7d2fe; color: #4338ca; }
.course-nav-list a.is-done .nn { background: var(--emerald-50); border-color: #a7f3d0; color: #059669; }
.course-nav-list .tick { font-size: 12px; color: var(--emerald-600); opacity: 0; }
.course-nav-list a.is-done .tick { opacity: 1; }
.course-nav-list .tick .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.course-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.course-nav-foot a { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.course-nav-foot a:hover { color: #4338ca; }
.course-nav-foot .ic { font-size: 12px; }
.reset-progress { border: 0; background: none; padding: 0; font-size: 11px; color: #94a3b8; text-decoration: underline; text-underline-offset: 2px; }
.reset-progress:hover { color: #dc2626; }

/* mobile nav */
.mobile-course-nav { display: none; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.mobile-course-nav summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink);
}
.mobile-course-nav summary::-webkit-details-marker { display: none; }
.mobile-course-nav summary .ic { font-size: 16px; color: var(--faint); }
.mobile-course-nav[open] summary .ic { transform: rotate(180deg); }
.mobile-course-nav .course-nav-list { padding: 0 10px 10px; }

/* article */
.lesson-main { min-width: 0; }
.lesson-hero { padding-bottom: 30px; border-bottom: 1px solid var(--line-soft); margin-bottom: 34px; }
.lesson-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #4f46e5; }
.lesson-kicker .sep { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.lesson-kicker .part { color: var(--faint); letter-spacing: .08em; }
.lesson-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--ink);
}
.lesson-hero .lesson-lead { margin: 14px 0 0; max-width: 720px; font-size: 17px; line-height: 1.66; color: var(--body); }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lesson-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.lesson-meta .ic { font-size: 13px; color: #6366f1; }
.lesson-meta .lvl { background: #eef2ff; border-color: #e0e7ff; color: #4338ca; }

.goals {
  margin: 26px 0 0;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid #e0e7ff;
  background: linear-gradient(135deg, #f8faff, #f2f6ff);
}
.goals h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4338ca; }
.goals ul { display: grid; gap: 7px; }
.goals li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.goals li::before { content: "✓"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 1px solid #c7d2fe; color: #4f46e5; font-size: 9px; font-weight: 700; }

/* lesson sections */
.lesson-sec { scroll-margin-top: 100px; }
.lesson-sec + .lesson-sec { margin-top: 46px; }
.lesson-sec > h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--ink);
}
.lesson-sec > h2 .sec-num {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #818cf8;
  padding-top: 5px;
}

/* prose */
.prose { font-size: 16.5px; line-height: 1.75; color: #3f4c61; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 48px 0 6px;
  padding-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--ink);
  scroll-margin-top: 100px;
}
.prose h2 .sec-num {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #818cf8;
  padding-top: 5px;
}
.prose h3 { margin: 30px 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.prose p { margin: 0; }
.prose p + p { margin-top: 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: #4338ca; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(99, 102, 241, .3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: #6366f1; }
.prose ul, .prose ol { margin: 0; padding-left: 0; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: #a5b4fc; }
.prose ol { counter-reset: item; }
.prose ol li { position: relative; padding-left: 26px; counter-increment: item; }
.prose ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: .18em;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4338ca;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
.prose code {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  background: #f6f8fb;
  font-family: var(--mono);
  font-size: .84em;
  color: #be185d;
  white-space: nowrap;
}
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 34px 0; }
.prose blockquote {
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid #c7d2fe;
  color: #475569;
  font-size: 15.5px;
}

/* callouts */
.callout {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14.5px;
  line-height: 1.65;
}
.callout .co-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.callout b.co-title { display: block; margin-bottom: 2px; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.callout p { margin: 0; }
.callout p + p { margin-top: 7px; }
.callout code { white-space: normal; }
.callout.tip { border-color: #d1fae5; background: #f7fefb; }
.callout.tip .co-ic { background: #ecfdf5; color: #059669; }
.callout.tip b.co-title { color: #047857; }
.callout.warn { border-color: #fde68a; background: #fffdf5; }
.callout.warn .co-ic { background: #fffbeb; color: #d97706; }
.callout.warn b.co-title { color: #b45309; }
.callout.note { border-color: #dbeafe; background: #f8fbff; }
.callout.note .co-ic { background: #eff6ff; color: #2563eb; }
.callout.note b.co-title { color: #1d4ed8; }
.callout.deep { border-color: #e0e7ff; background: #f8f9ff; }
.callout.deep .co-ic { background: #eef2ff; color: #4f46e5; }
.callout.deep b.co-title { color: #4338ca; }

/* predict */
.predict {
  margin: 24px 0;
  border: 1px dashed #c7d2fe;
  border-radius: 14px;
  background: #fbfcff;
  overflow: hidden;
}
.predict summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #3730a3;
}
.predict summary::-webkit-details-marker { display: none; }
.predict summary .ask { display: inline-flex; align-items: center; gap: 8px; }
.predict summary .ic { font-size: 15px; color: #6366f1; }
.predict summary .tap { font-size: 11px; font-weight: 600; color: #818cf8; }
.predict[open] summary .tap { display: none; }
.predict .predict-a { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.7; color: var(--body); animation: openBody .25s ease both; }
.predict .predict-a code { white-space: normal; }

/* further reading */
.refs { margin: 34px 0 0; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.refs h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.refs ul { display: grid; gap: 7px; }
.refs li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; font-size: 13.5px; line-height: 1.55; }
.refs li .ic { font-size: 14px; color: #818cf8; margin-top: 2px; }
.refs a { color: #4338ca; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(99, 102, 241, .3); }
.refs a:hover { text-decoration-color: #6366f1; }

/* =========================================================
   CODE RUNNER
   ========================================================= */
.snippet {
  margin: 26px 0;
  border-radius: 16px;
  background: var(--code-bg);
  border: 1px solid rgba(15, 23, 43, .12);
  box-shadow: 0 22px 50px -34px rgba(15, 23, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
  scroll-margin-top: 96px;
}
.snippet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
}
.snippet-file { display: flex; align-items: center; gap: 9px; min-width: 0; }
.snippet-file .win-dots { flex: none; }
.snippet-file .win-dots span { width: 8px; height: 8px; }
.snippet-name { font-family: var(--mono); font-size: 11px; color: #93a9c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snippet-tools { display: flex; align-items: center; gap: 5px; flex: none; }
.code-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
  color: #a9bcd6;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.code-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #e2e8f0; }
.code-btn .ic { font-size: 12px; }
.code-btn.run {
  color: #e0f2fe;
  border-color: rgba(56, 189, 248, .4);
  background: linear-gradient(100deg, rgba(14, 165, 233, .28), rgba(79, 70, 229, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.code-btn.run:hover { border-color: rgba(56, 189, 248, .65); background: linear-gradient(100deg, rgba(14, 165, 233, .4), rgba(79, 70, 229, .42)); }
.code-btn.run[disabled] { opacity: .65; cursor: progress; }
.code-btn.ghost { border-color: transparent; background: transparent; }
.code-btn.ghost:hover { background: rgba(255, 255, 255, .07); }

.editor {
  display: flex;
  max-height: 540px;
  overflow: auto;
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(56, 189, 248, .06), transparent 55%),
    var(--code-bg);
  scrollbar-width: thin;
  scrollbar-color: #2b3d5c transparent;
}
.editor::-webkit-scrollbar { width: 9px; height: 9px; }
.editor::-webkit-scrollbar-thumb { background: #2b3d5c; border-radius: 6px; }
.editor::-webkit-scrollbar-track { background: transparent; }
.gutter {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  padding: 14px 10px 16px 14px;
  border-right: 1px solid rgba(255, 255, 255, .05);
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  text-align: right;
  color: #3f5474;
  user-select: none;
  white-space: pre;
}
.code-layer {
  position: relative;
  flex: none;
  min-width: calc(100% - 48px);
  width: max-content;
}
.code-layer pre {
  margin: 0;
  padding: 14px 20px 16px 14px;
  width: max-content;
  min-width: 100%;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  tab-size: 4;
  color: var(--code-ink);
  white-space: pre;
}
/* Snippets are mounted inside .prose, so neutralise the inline-code styling
   for the editor's own <code> element (otherwise lines collapse). */
.snippet .code-layer pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}
.code-layer textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px 20px 16px 14px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #7dd3fc;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
}
.code-layer textarea::selection { background: rgba(56, 189, 248, .25); }

/* syntax colours */
.tok-kw { color: #c792ea; }
.tok-type { color: #7dd3fc; }
.tok-str { color: #a5e6a4; }
.tok-num { color: #f9c97c; }
.tok-com { color: #5c7392; font-style: italic; }
.tok-pre { color: #f78fb3; }
.tok-fn { color: #82b7ff; }
.tok-std { color: #e6c1ff; }
.tok-op { color: #9fb3cd; }

/* stdin */
.stdin-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); }
.stdin-row label { flex: none; padding-top: 6px; font-family: var(--mono); font-size: 10px; color: #8296b3; }
.stdin-row input {
  flex: 1;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .25);
  color: #dbe6f5;
  font-family: var(--mono);
  font-size: 11.5px;
  outline: none;
}
.stdin-row input:focus { border-color: rgba(56, 189, 248, .5); }

/* console */
.console { border-top: 1px solid rgba(255, 255, 255, .08); background: #070e1a; }
.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #6d82a0;
}
.console-status { display: inline-flex; align-items: center; gap: 7px; }
.console-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; }
.console-status.is-ok .dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .12); }
.console-status.is-err .dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .12); }
.console-status.is-run .dot { background: #38bdf8; animation: pulse 1.1s ease infinite; }
.console-time { color: #4b607e; }
.console-body {
  padding: 12px 16px 14px;
  max-height: 260px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: #d7e2f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}
.console-body:empty { display: none; }
.console-body .c-dim { color: #6d82a0; }
.console-body .c-ok { color: #86efac; }
.console-body .c-err { color: #fca5a5; }
.console-body .c-warn { color: #fcd34d; }
.console-body .c-path { color: #93c5fd; }
.console-actions { display: flex; gap: 8px; padding: 0 14px 12px; }
.console-actions:empty { display: none; }

/* =========================================================
   VISUAL LABS (dark stage)
   ========================================================= */
.viz {
  margin: 28px 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 43, .14);
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(56, 189, 248, .12) 0%, rgba(10, 18, 34, 0) 55%),
    radial-gradient(80% 100% at 100% 100%, rgba(99, 102, 241, .14) 0%, rgba(10, 18, 34, 0) 60%),
    var(--code-bg);
  box-shadow: 0 26px 60px -40px rgba(15, 23, 43, .7);
  color: #dbe6f5;
  scroll-margin-top: 96px;
}
.viz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.viz-kicker { display: inline-flex; align-items: center; gap: 8px; }
.viz-kicker .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); animation: pulse 2s ease infinite; }
.viz-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: none; color: #8aa2c0; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); }
.viz-head { padding: 16px 18px 0; }
.viz-head h4 { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #f1f5f9; }
.viz-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: #8fa3bd; }
.viz-stage { position: relative; padding: 16px 18px 8px; min-height: 180px; }
.viz-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 46px;
  margin: 6px 18px 0;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, .16);
  background: rgba(56, 189, 248, .06);
  font-size: 12.5px;
  line-height: 1.55;
  color: #b9cbe1;
}
.viz-note .ic { flex: none; margin-top: 2px; font-size: 13px; color: #38bdf8; }
.viz-note b { color: #e0f2fe; font-weight: 600; }
.viz-note.is-ok { border-color: rgba(16, 185, 129, .3); background: rgba(16, 185, 129, .08); }
.viz-note.is-ok .ic { color: #34d399; }
.viz-note.is-warn { border-color: rgba(217, 119, 6, .35); background: rgba(217, 119, 6, .09); }
.viz-note.is-warn .ic { color: #fbbf24; }
.viz-note.is-bad, .viz-note.is-err { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .09); }
.viz-note.is-bad .ic, .viz-note.is-err .ic { color: #f87171; }
.viz-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
}
.viz-btns { display: flex; align-items: center; gap: 6px; }
.viz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 31px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #b9cbe1;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.viz-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.viz-btn.primary { color: #e0f2fe; border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .14); }
.viz-btn.primary:hover { background: rgba(56, 189, 248, .24); border-color: rgba(56, 189, 248, .6); }
.viz-btn .ic { font-size: 13px; }
.viz-btn[disabled] { opacity: .35; pointer-events: none; }
.viz-progress { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.viz-progress button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2b3d5c;
  transition: background .25s ease, transform .25s ease;
}
.viz-progress button:hover { background: #64748b; }
.viz-progress button.is-on { background: #67e8f9; transform: scale(1.3); }
.viz-progress button.is-past { background: #3b82f6; }

/* trace */
.trace-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(190px, .85fr); gap: 14px; }
.trace-code {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .22);
  padding: 10px 0;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11.8px;
  line-height: 1.85;
}
.trace-line {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0 12px 0 0;
  border-left: 2px solid transparent;
  color: #93a9c6;
  white-space: pre;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.trace-line .no { flex: none; width: 32px; padding-right: 8px; text-align: right; color: #3f5474; user-select: none; }
.trace-line.is-active { background: rgba(56, 189, 248, .1); border-left-color: #38bdf8; color: #eaf3ff; }
.trace-line.is-active .no { color: #7dd3fc; }
.trace-line.is-done { color: #7c93b2; }
.trace-line .trace-arrow { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #38bdf8; font-size: 9px; opacity: 0; }
.trace-line.is-active .trace-arrow { opacity: 1; }
.trace-side { display: grid; gap: 10px; align-content: start; }
.trace-vars, .trace-out {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}
.trace-vars h5, .trace-out h5 {
  margin: 0;
  padding: 7px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7c93b2;
}
.trace-var {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}
.trace-var:last-child { border-bottom: 0; }
.trace-var .vn { color: #8fa3bd; }
.trace-var .vv { color: #f9c97c; text-align: right; }
.trace-var.is-changed { animation: varFlash .55s ease; }
@keyframes varFlash { 0% { background: rgba(249, 201, 124, .18); } 100% { background: transparent; } }
.trace-empty { padding: 9px 11px; font-family: var(--mono); font-size: 10.5px; color: #4b607e; }
.trace-out-lines { padding: 8px 11px; min-height: 38px; max-height: 120px; overflow: auto; font-family: var(--mono); font-size: 11px; line-height: 1.65; color: #86efac; white-space: pre-wrap; overflow-wrap: anywhere; }
.trace-out-lines .cursor { display: inline-block; width: 6px; height: 11px; background: #86efac; vertical-align: -1px; animation: caret 1s steps(2, start) infinite; }

/* memory */
.mem-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.mem-col { position: relative; padding: 8px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .12); min-height: 120px; }
.mem-col > h5 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #7c93b2;
}
.mem-col.heap-col > h5 { color: #a5b4fc; }
.mem-cells { display: grid; gap: 8px; align-content: start; }
.mem-cell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(180deg, rgba(30, 41, 59, .9), rgba(20, 30, 48, .9));
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
}
.mem-cell .ml { font-family: var(--mono); font-size: 10px; color: #93a9c6; }
.mem-cell .mv { font-family: var(--mono); font-size: 13px; font-weight: 500; color: #dbe6f5; text-align: right; }
.mem-cell .ma { grid-column: 1 / -1; font-family: var(--mono); font-size: 8.5px; color: #4b607e; letter-spacing: .02em; }
.mem-cell.is-active { border-color: rgba(56, 189, 248, .65); box-shadow: 0 0 0 3px rgba(56, 189, 248, .1); background: linear-gradient(180deg, rgba(14, 116, 144, .3), rgba(20, 30, 48, .9)); }
.mem-cell.is-changed .mv { animation: valFlash .7s ease; }
@keyframes valFlash { 0% { color: #fde68a; transform: scale(1.08); } 100% { color: #dbe6f5; transform: none; } }
.mem-cell.is-object { display: block; padding: 9px 11px; border-color: rgba(129, 140, 248, .35); }
.mem-cell.is-object .m-obj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mem-cell .m-fields { display: grid; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.mem-cell .m-field { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: #b9cbe1; }
.mem-cell .m-field b { color: #93c5fd; font-weight: 500; }
.mem-cell.is-ptr { border-style: solid; border-color: rgba(249, 201, 124, .35); }
.mem-cell.is-ptr .mv { color: #f9c97c; font-size: 11px; }
.mem-cell.is-ref { border-color: rgba(167, 139, 250, .4); }
.mem-cell.is-ref .mv { color: #c4b5fd; }
.mem-cell.is-gone { opacity: .35; filter: grayscale(1); }
.mem-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.mem-arrow { stroke: #f9c97c; stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; animation: dash 1.2s linear infinite; }
.mem-arrow.ref { stroke: #a78bfa; }
.mem-arrow.own { stroke: #38bdf8; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.mem-arrow-label { fill: #f9c97c; font-family: var(--mono); font-size: 8.5px; }

/* stack */
.stack-stage { display: grid; grid-template-columns: 1fr 200px; gap: 16px; }
.stack-frames { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 8px; min-height: 150px; }
.frame {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(129, 140, 248, .35);
  background: linear-gradient(180deg, rgba(49, 46, 129, .45), rgba(30, 41, 59, .55));
  animation: frameIn .35s cubic-bezier(.2, .8, .2, 1) both;
}
.frame.is-top { border-color: rgba(56, 189, 248, .7); box-shadow: 0 0 0 3px rgba(56, 189, 248, .08); }
.frame.is-returning { border-color: rgba(52, 211, 153, .6); background: linear-gradient(180deg, rgba(6, 78, 59, .45), rgba(30, 41, 59, .55)); }
@keyframes frameIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.frame-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.frame-head b { font-family: var(--mono); font-size: 11.5px; color: #e0f2fe; font-weight: 500; }
.frame-head span { font-family: var(--mono); font-size: 9px; color: #a5b4fc; }
.frame-locals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.frame-locals span { padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); font-family: var(--mono); font-size: 9.5px; color: #b9cbe1; }
.frame-locals b { color: #f9c97c; font-weight: 500; }
.stack-side { display: grid; align-content: start; gap: 8px; }
.stack-ret {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, .3);
  background: rgba(16, 185, 129, .08);
  font-family: var(--mono);
  font-size: 10.5px;
  color: #86efac;
  min-height: 42px;
}
.stack-ret span { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: #34d399; }
.stack-hint { font-family: var(--mono); font-size: 9.5px; color: #6d82a0; line-height: 1.6; }

/* vector growth */
.vec-stage { display: grid; gap: 14px; }
.vec-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.vec-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(0, 0, 0, .22); font-family: var(--mono); font-size: 10px; color: #8fa3bd;
}
.vec-stat b { font-size: 13px; color: #f1f5f9; font-weight: 500; }
.vec-slots { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 8px; }
.vec-slot {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, .3);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  color: #6d82a0;
  transition: all .35s cubic-bezier(.2, .8, .2, 1);
}
.vec-slot.filled { border-style: solid; border-color: rgba(56, 189, 248, .4); background: rgba(14, 165, 233, .14); color: #e0f2fe; }
.vec-slot.is-new { animation: slotIn .5s cubic-bezier(.2, .9, .2, 1) both; border-color: #67e8f9; background: rgba(103, 232, 249, .22); }
.vec-slot.is-copy { animation: slotCopy .6s ease both; }
@keyframes slotIn { from { opacity: 0; transform: translateY(-8px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes slotCopy { 0% { background: rgba(249, 201, 124, .3); } 100% { background: rgba(14, 165, 233, .14); } }
.vec-cap-label { font-family: var(--mono); font-size: 9.5px; color: #6d82a0; }
.vec-cap-label b { color: #a5b4fc; font-weight: 500; }

/* vtable / dispatch */
.disp-stage { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; }
.disp-left { display: grid; gap: 8px; }
.disp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
  font-family: var(--mono); font-size: 10.5px; color: #b9cbe1;
  transition: all .3s ease;
}
.disp-row.is-active { border-color: rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .1); color: #e0f2fe; }
.disp-row .tag { flex: none; padding: 2px 6px; border-radius: 4px; background: rgba(129, 140, 248, .16); color: #c7d2fe; font-family: var(--font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.disp-row .fnname { margin-left: auto; color: #f9c97c; }
.vtable {
  border-radius: 10px; border: 1px solid rgba(129, 140, 248, .35);
  background: rgba(49, 46, 129, .18); overflow: hidden;
}
.vtable h5 { margin: 0; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-family: var(--mono); font-size: 9px; color: #a5b4fc; letter-spacing: .08em; }
.vtable-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-family: var(--mono); font-size: 10px; color: #b9cbe1; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.vtable-row:last-child { border-bottom: 0; }
.vtable-row b { color: #f9c97c; font-weight: 500; }
.vtable-row.is-active { background: rgba(56, 189, 248, .12); color: #e0f2fe; }

/* lifetime */
.life-stage { display: grid; gap: 7px; }
.life-event {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .18);
  font-family: var(--mono);
  font-size: 10.5px;
  color: #b9cbe1;
  animation: lifeIn .35s ease both;
}
@keyframes lifeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.life-event .kind { font-family: var(--font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.life-event .kind.ctor { color: #34d399; }
.life-event .kind.copy { color: #38bdf8; }
.life-event .kind.move { color: #c4b5fd; }
.life-event .kind.dtor { color: #fca5a5; }
.life-event .what b { color: #e0f2fe; font-weight: 500; }
.life-event .val { color: #6d82a0; font-size: 9px; }
.life-event.is-ctor { border-left: 2px solid #34d399; }
.life-event.is-copy { border-left: 2px solid #38bdf8; }
.life-event.is-move { border-left: 2px solid #c4b5fd; }
.life-event.is-dtor { border-left: 2px solid #f87171; }

/* sort */
.sort-stage { display: grid; gap: 14px; }
.sort-bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding: 4px 2px 0; }
.sort-bar {
  position: relative;
  flex: 1;
  min-width: 12px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(56, 189, 248, .55), rgba(56, 189, 248, .18));
  border: 1px solid rgba(56, 189, 248, .3);
  transition: height .35s ease, background .25s ease, border-color .25s ease, transform .25s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.sort-bar .sv { position: absolute; top: -16px; font-family: var(--mono); font-size: 9px; color: #8fa3bd; }
.sort-bar.is-compare { background: linear-gradient(180deg, rgba(249, 201, 124, .75), rgba(249, 201, 124, .25)); border-color: rgba(249, 201, 124, .7); transform: translateY(-4px); }
.sort-bar.is-swap { background: linear-gradient(180deg, rgba(248, 113, 113, .7), rgba(248, 113, 113, .2)); border-color: rgba(248, 113, 113, .7); }
.sort-bar.is-sorted { background: linear-gradient(180deg, rgba(52, 211, 153, .55), rgba(52, 211, 153, .18)); border-color: rgba(52, 211, 153, .45); }
.sort-bar.is-pivot { box-shadow: 0 0 0 2px rgba(196, 181, 253, .5); }
.sort-iters { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9px; color: #6d82a0; }
.sort-iters b { color: #93c5fd; font-weight: 500; }

/* =========================================================
   QUIZ
   ========================================================= */
.quiz {
  margin: 46px 0 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.quiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.quiz-head h2 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.quiz-head h2 .ic { font-size: 19px; color: #6366f1; }
.quiz-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.quiz-score { flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid #e0e7ff; background: #eef2ff; font-family: var(--mono); font-size: 11px; color: #4338ca; }
.quiz-q { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.quiz-q:last-of-type { border-bottom: 0; }
.quiz-q .qq { display: flex; gap: 9px; font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--ink-2); }
.quiz-q .qn { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; background: #f1f5f9; font-family: var(--mono); font-size: 10px; color: #64748b; }
.quiz-opts { display: grid; gap: 7px; margin-top: 13px; }
.quiz-opt {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fbfcfe;
  text-align: left;
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 450;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.quiz-opt:hover { border-color: #c7d2fe; background: #f8faff; }
.quiz-opt .key {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff;
  font-family: var(--mono); font-size: 9.5px; color: #64748b;
}
.quiz-opt.is-picked { transform: translateX(2px); }
.quiz-opt.is-correct { border-color: #6ee7b7; background: #f0fdf9; }
.quiz-opt.is-correct .key { background: #059669; border-color: #059669; color: #fff; }
.quiz-opt.is-wrong { border-color: #fca5a5; background: #fef7f7; animation: shake .35s ease; }
.quiz-opt.is-wrong .key { background: #dc2626; border-color: #dc2626; color: #fff; }
.quiz-opt.is-dim { opacity: .55; }
.quiz-opt[disabled] { cursor: default; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.quiz-fb { margin-top: 10px; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.6; animation: openBody .25s ease both; }
.quiz-fb.ok { background: #f0fdf9; border: 1px solid #d1fae5; color: #065f46; }
.quiz-fb.no { background: #fef7f7; border: 1px solid #fee2e2; color: #991b1b; }
.quiz-fb b { font-weight: 700; }
.quiz-fb code { background: rgba(255, 255, 255, .6); border: 1px solid rgba(15, 23, 43, .08); color: #9d174d; padding: 1px 4px; border-radius: 4px; font-family: var(--mono); font-size: .9em; white-space: normal; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.quiz-foot p { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.quiz-foot .ic { font-size: 14px; color: #6366f1; }
.quiz-foot .reset-quiz { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: #4f46e5; text-decoration: underline; text-underline-offset: 2px; }

/* challenge */
.challenge { margin: 28px 0 0; border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(135deg, #f8fbff, #fbfaff); padding: 22px; }
.challenge-head { display: flex; align-items: center; gap: 10px; }
.challenge-head .icon-tile { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.challenge-head h2 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.challenge-head .tag { margin-left: auto; background: #fff; border-color: #dbeafe; color: #2563eb; }
.challenge > p { margin-top: 13px; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.challenge ul { margin: 12px 0 0; display: grid; gap: 6px; }
.challenge ul li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 13.8px; line-height: 1.6; color: var(--body); }
.challenge ul li::before { content: "→"; color: #818cf8; font-family: var(--mono); font-size: 12px; }
.challenge .snippet { margin-top: 18px; }
.hint, .solution { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.hint summary, .solution summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #4338ca;
}
.hint summary::-webkit-details-marker, .solution summary::-webkit-details-marker { display: none; }
.hint summary .ic, .solution summary .ic { font-size: 14px; }
.hint[open] summary, .solution[open] summary { border-bottom: 1px solid var(--line-soft); background: #fbfcff; }
.hint .hint-body, .solution .solution-body { padding: 13px 15px; font-size: 13.5px; line-height: 1.7; color: var(--body); }
.hint .hint-body code, .solution .solution-body code { white-space: normal; }

/* complete */
.complete-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 42px 0 0;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.complete-card h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.complete-card p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.complete-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.btn-complete { display: inline-flex; align-items: center; gap: 7px; }
.btn-complete .ic { font-size: 14px; }
.btn-complete.is-done { background: linear-gradient(100deg, #059669, #10b981); box-shadow: 0 10px 24px -10px rgba(16, 185, 129, .6); }

/* pager */
.lesson-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.pager-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pager-link:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(15, 23, 43, .4); }
.pager-link.next { text-align: right; justify-content: flex-end; }
.pager-link .ic { font-size: 16px; color: #818cf8; flex: none; }
.pager-link .pl-kicker { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pager-link .pl-title { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.pager-link.is-empty { visibility: hidden; }

/* rail / TOC */
.lesson-rail { position: sticky; top: 104px; }
.toc { padding-left: 14px; border-left: 1px solid var(--line); }
.toc h5 { margin: 0 0 10px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.toc a {
  display: block;
  padding: 5px 0 5px 10px;
  margin-left: -15px;
  border-left: 2px solid transparent;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.toc a:hover { color: #4338ca; }
.toc a.is-on { color: #312e81; border-left-color: #6366f1; font-weight: 600; }
.toc-foot { margin-top: 18px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.toc-foot p { font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.toc-foot b { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #818cf8; margin-bottom: 4px; }

/* =========================================================
   FOOTER
   ========================================================= */
.cpp-page .footer-logo img { height: 36px; }
.cpp-page .footer-bottom .cpp-mark { color: #67e8f9; font-family: var(--mono); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .lesson-shell { grid-template-columns: 230px minmax(0, 1fr); gap: 34px; }
  .lesson-rail { display: none; }
  .hero-cpp-grid { gap: 38px; }
  .hero-float { display: none; }
}

@media (max-width: 1023px) {
  .hero-cpp { padding-top: 132px; }
  .hero-cpp-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy-cpp { max-width: 700px; }
  .hero-code { max-width: 640px; }
  .lesson-shell { grid-template-columns: 1fr; padding-top: 104px; }
  .course-nav { display: none; }
  .mobile-course-nav { display: block; }
  .lesson-main { max-width: 820px; margin-inline: auto; width: 100%; }
  .build-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .syl-lesson-topic { display: none; }
  .syl-lesson { grid-template-columns: 46px 1fr auto; }
}

@media (max-width: 760px) {
  .hero-cpp { padding: 116px 0 54px; }
  .hero-copy-cpp h1 { font-size: clamp(38px, 10vw, 52px); }
  .hero-copy-cpp .hero-lead { font-size: 15.5px; }
  .hero-copy-cpp .hero-cta .btn { flex: 1 1 auto; }
  .hero-code-body { min-height: 230px; }
  .hero-code pre { font-size: 11.5px; }
  .stats-cpp { margin-top: 40px; }
  .syl-part summary { grid-template-columns: 46px 1fr auto; gap: 13px; padding: 15px; }
  .syl-num { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; }
  .syl-title { font-size: 15.5px; }
  .syl-q { font-size: 12px; }
  .syl-count { display: none; }
  .syl-body { padding: 0 10px 10px; }
  .syl-lesson { padding: 10px 8px; gap: 10px; }
  .syl-lesson .go span { display: none; }
  .syl-lesson .go { opacity: 1; }
  .lesson-hero h1 { font-size: clamp(29px, 8vw, 38px); }
  .lesson-hero .lesson-lead { font-size: 15.5px; }
  .prose { font-size: 15.5px; }
  .prose h2 { margin-top: 40px; font-size: 23px; gap: 8px; }
  .prose h2 .sec-num { font-size: 10.5px; padding-top: 3px; }
  .lesson-sec > h2 { font-size: 23px; gap: 8px; }
  .lesson-sec > h2 .sec-num { font-size: 10.5px; padding-top: 3px; }
  .snippet { margin: 22px 0; border-radius: 14px; }
  .snippet-name { max-width: 110px; }
  .code-btn .lbl { display: none; }
  .code-btn { padding: 6px 8px; }
  .code-btn.run .lbl { display: inline; }
  .code-layer pre, .code-layer textarea { font-size: 11.8px; line-height: 1.7; }
  .gutter { font-size: 11.8px; line-height: 1.7; padding: 12px 8px 14px 10px; }
  .trace-wrap { grid-template-columns: 1fr; }
  .trace-code { font-size: 10.8px; }
  .trace-side { grid-template-columns: 1fr 1fr; }
  .mem-stage { grid-template-columns: 1fr; }
  .stack-stage { grid-template-columns: 1fr; }
  .disp-stage { grid-template-columns: 1fr; }
  .quiz { padding: 18px; }
  .quiz-head { flex-direction: column; gap: 8px; }
  .challenge { padding: 18px; }
  .complete-card { align-items: flex-start; }
  .lesson-pager { grid-template-columns: 1fr; }
  .pager-link.is-empty { display: none; }
  .viz-stage { padding: 14px 14px 6px; }
  .viz-head, .viz-note, .viz-controls { padding-left: 14px; padding-right: 14px; }
  .viz-note { margin-left: 14px; margin-right: 14px; }
  .hero-float { display: none; }
}

@media (max-width: 520px) {
  .hero-code pre { font-size: 10.5px; padding: 0 14px; }
  .hero-code-body { min-height: 210px; }
  .trace-side { grid-template-columns: 1fr; }
  .vec-slot { width: 34px; height: 40px; }
  .sort-bars { height: 120px; }
  .viz-btn { padding: 0 9px; font-size: 11px; }
  .lesson-meta span { font-size: 10.5px; }
  .goals { padding: 16px; }
  .prose h2 { font-size: 21px; }
  .callout { grid-template-columns: 28px 1fr; padding: 14px; }
  .callout .co-ic { width: 27px; height: 27px; font-size: 14px; }
  .quiz-opt { font-size: 13.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float, .hero-caret, .viz-kicker .live-dot, .mem-arrow { animation: none !important; }
}

/* =========================================================
   Cyber Security — extra widgets
   flow · lab-table · cipher · entropy · adversarial · chat
   Extend the C++ design tokens (same geometry language).
   ========================================================= */

/* ---------- FLOW (network lanes + animated edges) ---------- */
.flow-status {
  display: flex; justify-content: center; margin-bottom: 14px;
}
.flow-status-label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 6px 14px; color: #334155;
}
.flow-stage { position: relative; display: flex; flex-direction: column; gap: 44px; padding: 6px 0 18px; }
.flow-lane { display: flex; align-items: center; gap: 12px; }
.flow-lane-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #94a3b8;
}
.flow-lane-nodes { display: flex; flex: 1; align-items: stretch; gap: 18px; }
.flow-node {
  flex: 1; position: relative; min-width: 86px;
  background: #ffffff; border: 1.5px solid #dbe3ee; border-radius: 12px;
  padding: 10px 10px 8px; text-align: center;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.flow-node b { display: block; font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.25; }
.flow-node .fn-sub { display: block; font-family: var(--mono); font-size: 9px; color: #64748b; margin-top: 3px; }
.flow-node .flow-tag {
  display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: #0891b2; margin-top: 5px; min-height: 12px;
}
.flow-node.kind-attacker { border-color: #fecaca; background: #fff5f5; }
.flow-node.kind-attacker b { color: #b91c1c; }
.flow-node.kind-cloud { border-color: #dbeafe; background: #f6faff; }
.flow-node.kind-firewall { border-color: #fde68a; background: #fffbeb; }
.flow-node.kind-robot { border-color: #99f6e4; background: #f0fdfa; }
.flow-node.is-active {
  border-color: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, .12), 0 8px 22px -12px rgba(8, 145, 178, .4);
  transform: translateY(-2px);
}
.flow-node.is-compromised { border-color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, .14); }
.flow-node.is-compromised::after {
  content: '⚠ compromised'; position: absolute; top: -9px; right: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: #ef4444; padding: 2px 6px; border-radius: 999px;
}
.flow-node.is-denied { opacity: .55; }
.flow-node.is-denied::after {
  content: '⌫ blocked'; position: absolute; top: -9px; right: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: #64748b; padding: 2px 6px; border-radius: 999px;
}
.flow-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-edge { fill: none; stroke-width: 2.2; }
.flow-edge.kind-plain { stroke: #bfdbfe; }
.flow-edge.kind-good { stroke: #0891b2; }
.flow-edge.kind-attack { stroke: #ef4444; stroke-dasharray: 5 4; }
.flow-packet { stroke: none; }
.flow-packet.kind-plain, .flow-packet.kind-good { fill: #0891b2; }
.flow-packet.kind-attack { fill: #ef4444; }
.flow-legend {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  font-size: 10.5px; color: #64748b; margin-top: 4px;
}
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend .lg { width: 18px; height: 8px; border-radius: 4px; display: inline-block; }
.lg-good { background: #0891b2; }
.lg-attack { background: repeating-linear-gradient(90deg, #ef4444 0 5px, transparent 5px 9px); }
.lg-blocked { background: #94a3b8; }

/* ---------- TABLE lab ---------- */
.tbl-stage { overflow-x: auto; }
.lab-table {
  width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
}
.lab-table th {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #64748b; text-align: left; padding: 10px 12px; background: #f8fafc;
  border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.lab-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.lab-table tbody tr { transition: background .25s; animation: rowIn .3s ease; }
.lab-table tbody tr:last-child td { border-bottom: none; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } }
.tbl-note { text-align: center; font-size: 10.5px; color: #94a3b8; margin-top: 10px; }
.lab-table tbody tr.tone-bad td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.lab-table tbody tr.tone-bad { background: #fff5f5; }
.lab-table tbody tr.tone-good td:first-child { box-shadow: inset 3px 0 0 #0891b2; }
.lab-table tbody tr.tone-good { background: #f0fdfa; }
.lab-table tbody tr.tone-warn td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ---------- CIPHER playground ---------- */
.cipher-stage { display: flex; flex-direction: column; gap: 14px; }
.cipher-field { display: flex; flex-direction: column; gap: 6px; }
.cipher-field > span {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b;
  display: flex; justify-content: space-between;
}
.cipher-field > span b { font-family: var(--mono); color: #0891b2; }
.cipher-field input[type="text"] {
  font-family: var(--mono); font-size: 13px; color: #0f172a;
  border: 1.5px solid #dbe3ee; border-radius: 10px; padding: 10px 12px;
  background: #fff; outline: none; transition: border-color .2s;
}
.cipher-field input[type="text"]:focus { border-color: #0891b2; }
.cipher-field input[type="range"] { accent-color: #0891b2; height: 26px; cursor: pointer; }
.cipher-strip { display: grid; grid-template-columns: repeat(26, 1fr); gap: 2px; }
.cipher-strip span {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 5px; padding: 3px 0 2px;
}
.cipher-strip i { font-style: normal; font-size: 8.5px; color: #94a3b8; }
.cipher-strip b { font-size: 9.5px; color: #0891b2; font-family: var(--mono); }
.cipher-out-wrap {
  background: var(--code-bg); border-radius: 12px; padding: 12px 14px;
  font-family: var(--mono);
}
.cipher-out-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.cipher-plain { color: var(--code-ink); font-size: 13px; word-break: break-all; line-height: 1.5; }
.cipher-arrow { color: #475569; font-size: 10px; margin: 4px 0; letter-spacing: .08em; }
.cipher-cipher { color: #38bdf8; font-size: 13px; word-break: break-all; line-height: 1.5; }
.cipher-meta { font-size: 11px; color: #64748b; }
.cipher-meta b { color: #0f172a; font-family: var(--mono); }

/* ---------- ENTROPY meter ---------- */
.entropy-stage { display: flex; flex-direction: column; gap: 12px; }
.ent-bar {
  height: 10px; border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.ent-fill { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .3s ease, background .3s ease; background: #0891b2; }
.ent-fill.lvl-low { background: #ef4444; }
.ent-fill.lvl-mid { background: #f59e0b; }
.ent-fill.lvl-fair { background: #84cc16; }
.ent-fill.lvl-high { background: #0891b2; }
.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; border: 1px solid #e2e8f0; color: #64748b;
}
.chip.ok { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.chip.dim { opacity: .6; }
.ent-crack { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #475569; }
.ent-crack span { font-family: var(--mono); font-weight: 700; color: #0f172a; }
.ent-notes { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; line-height: 1.45; }
.ent-badge { display: inline-flex; }

/* ---------- ADVERSARIAL slider ---------- */
.adv-stage { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.adv-grid-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.adv-canvas {
  width: 150px; height: 150px; border-radius: 10px;
  border: 1.5px solid #1c2a44; image-rendering: pixelated;
}
.adv-src { font-family: var(--mono); font-size: 10px; color: #64748b; }
.adv-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.conf-bars { display: flex; flex-direction: column; gap: 5px; }
.conf-row { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 8px; }
.conf-row .cl { font-size: 10.5px; color: #64748b; }
.conf-row .bar { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.conf-row .bar i { display: block; height: 100%; background: #94a3b8; border-radius: inherit; transition: width .25s; }
.conf-row.is-top .bar i { background: #0891b2; }
.conf-row.is-top b { color: #0891b2; }
.conf-row b { font-family: var(--mono); font-size: 10px; color: #64748b; text-align: right; }
.adv-note2 { font-size: 11.5px; color: #475569; line-height: 1.5; }

/* ---------- CHAT lab ---------- */
.chat-stage {
  display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto;
  padding: 4px 2px;
}
.chat-msg { display: flex; flex-direction: column; gap: 3px; }
.chat-msg.from-user { align-items: flex-end; }
.chat-msg.from-bot, .chat-msg.from-sys { align-items: flex-start; }
.chat-msg.revealed { align-items: flex-start; }
.chat-who { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.chat-msg.from-user .chat-who { color: #0891b2; }
.chat-msg.revealed .chat-who { color: #ef4444; }
.chat-bubble {
  max-width: 88%; padding: 9px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: #1e293b;
  background: #ffffff; border: 1px solid #e2e8f0;
}
.chat-msg.from-user .chat-bubble { background: #e0f2fe; border-color: #bae6fd; }
.chat-msg.from-sys .chat-bubble { background: #f8fafc; font-family: var(--mono); font-size: 11px; }
.chat-msg.revealed .chat-bubble {
  background: #fff5f5; border-color: #fecaca; color: #7f1d1d;
  font-family: var(--mono); font-size: 11px;
  animation: rowIn .3s ease;
}
.chat-reveal-row { display: flex; justify-content: center; margin-top: 12px; }
.viz-note.static { cursor: default; }

/* ---------- generic lab additions ---------- */
.entropy-stage .ent-in, .cipher-field .ent-in { font-family: var(--mono); letter-spacing: .02em; }
.entropy-stage input[type="text"] {
  font-family: var(--mono); font-size: 13px; color: #0f172a;
  border: 1.5px solid #dbe3ee; border-radius: 10px; padding: 10px 12px;
  background: #fff; outline: none; transition: border-color .2s; width: 100%;
}
.entropy-stage input[type="text"]:focus { border-color: #0891b2; }
.viz[data-lab] textarea:focus { outline: none; }

/* =========================================================
   Robotics labs — shared widgets (chips, sliders, stats…)
   ========================================================= */
.viz-rob .viz-stage { padding: 14px 16px 12px; }

.rob-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; }
.rob-chip {
  font: 600 11.5px 'Inter Tight', sans-serif; letter-spacing: .02em;
  color: #475569; background: #f1f5f9; border: 1px solid #d7dee9;
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
  transition: all .18s ease; white-space: nowrap;
}
.rob-chip:hover { border-color: #2563eb; color: #2563eb; }
.rob-chip.is-on {
  background: #2563eb; border-color: #2563eb; color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55);
}

.rob-slider { display: grid; gap: 5px; margin: 6px 0 10px; }
.rob-slider-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #475569; }
.rob-slider-head b { font: 700 12.5px 'JetBrains Mono', monospace; color: #0f172a; }
.rob-slider input[type="range"] { width: 100%; accent-color: #2563eb; cursor: pointer; }

.rob-checks { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 10px; }
.rob-check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 500 11.5px 'Inter Tight', sans-serif; color: #475569;
  background: #f8fafc; border: 1px solid #d7dee9; border-radius: 9px; padding: 7px 11px;
  transition: all .18s ease; user-select: none;
}
.rob-check:hover { border-color: #94a3b8; }
.rob-check:has(input:checked) { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.rob-check input { accent-color: #2563eb; width: 14px; height: 14px; cursor: pointer; }

.rob-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.rob-btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font: 600 12px 'Inter Tight', sans-serif; color: #334155;
  background: #fff; border: 1.5px solid #cbd5e1; border-radius: 10px;
  padding: 9px 15px; cursor: pointer; transition: all .18s ease;
}
.rob-btn:hover { border-color: #2563eb; color: #2563eb; transform: translateY(-1px); }
.rob-btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6);
}
.rob-btn.primary:hover { filter: brightness(1.06); color: #fff; }
.rob-btn.small { padding: 6px 11px; font-size: 11px; }
.rob-btn:disabled { opacity: .55; cursor: wait; transform: none !important; }

.rob-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.rob-stat {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px;
  display: grid; gap: 3px;
}
.rob-stat .rs-label { font: 600 9.5px 'Inter Tight', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7c8aa1; }
.rob-stat .rs-val { font: 700 15px 'JetBrains Mono', monospace; color: #0f172a; }
.rob-stat.tone-ok .rs-val { color: #059669; }
.rob-stat.tone-bad .rs-val { color: #dc2626; }
.rob-stat.tone-warn .rs-val { color: #d97706; }
.rob-stat .rs-bar { height: 4px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.rob-stat .rs-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #38bdf8); width: 0; transition: width .35s ease; }

.rob-progress { display: grid; gap: 5px; margin: 4px 0 8px; }
.rob-progress span { font: 500 11px 'Inter Tight', sans-serif; color: #64748b; }
.rob-progress .rp-track { height: 6px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.rob-progress .rp-track i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8); width: 0; transition: width .2s ease; }
.rob-progress.is-done span { color: #059669; font-weight: 600; }

.rob-canvas-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.rob-canvas-card + .rob-canvas-card { margin-top: 10px; }
.rob-canvas-card canvas { display: block; border-radius: 8px; }
.rob-canvas-title {
  font: 600 10.5px 'Inter Tight', sans-serif; letter-spacing: .07em; text-transform: uppercase;
  color: #64748b; padding: 4px 6px 6px;
}
.rob-canvas-title b { color: #0f172a; }

/* triptych: three side-by-side sim panes (Lab 1) */
.rob-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rob-triptych .rob-canvas-card { margin: 0; }
.rob-pane-outcome { font: 600 10.5px 'Inter Tight', sans-serif; color: #64748b; padding: 2px 6px 4px; min-height: 16px; }
.rob-pane-outcome.ok { color: #059669; }
.rob-pane-outcome.bad { color: #dc2626; }
.rob-pane-outcome.warn { color: #d97706; }

@media (max-width: 760px) {
  .rob-triptych { grid-template-columns: 1fr; }
  .rob-stats { grid-template-columns: repeat(2, 1fr); }
}

/* comparison table (trade-offs) */
.rob-table-wrap { overflow-x: auto; margin: 4px 0 6px; }
table.cmp-table {
  width: 100%; border-collapse: collapse; font-size: 12px; color: #334155;
  min-width: 520px;
}
.cmp-table th, .cmp-table td { border: 1px solid #e2e8f0; padding: 9px 12px; text-align: left; vertical-align: top; }
.cmp-table th {
  background: #f8fafc; font: 700 10.5px 'Inter Tight', sans-serif; letter-spacing: .07em;
  text-transform: uppercase; color: #475569;
}
.cmp-table td b { color: #0f172a; }
.cmp-table .col-hl { background: #eff6ff; }
.cmp-table td .dot-red { color: #dc2626; font-weight: 700; }
.cmp-table td .dot-green { color: #059669; font-weight: 700; }

/* bin-sorting interactive */
.rob-bins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rob-bin {
  background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 9px 10px 10px;
  min-height: 150px; transition: all .18s ease; cursor: pointer;
}
.rob-bin h5 { font: 700 11.5px 'Inter Tight', sans-serif; color: #0f172a; padding-bottom: 3px; }
.rob-bin p { font-size: 10px; color: #7c8aa1; line-height: 1.4; }
.rob-bin .rob-bin-items { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.rob-bin .bin-item {
  font: 600 11px 'Inter Tight', sans-serif; color: #1e293b; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 9px; display: flex; justify-content: space-between; gap: 6px;
  animation: binPop .25s ease;
}
.rob-bin .bin-item .bi-res { font-size: 10px; font-weight: 700; }
.rob-bin .bin-item .bi-res.ok { color: #059669; }
.rob-bin .bin-item .bi-res.bad { color: #dc2626; }
.rob-bin.armed { border-color: #2563eb; border-style: solid; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
@keyframes binPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 760px) { .rob-bins { grid-template-columns: 1fr; } }

/* task chip pool for the bin game */
.rob-pool { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.rob-pool .pool-chip {
  font: 600 11.5px 'Inter Tight', sans-serif; color: #1e293b; background: #fff;
  border: 1.5px solid #cbd5e1; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  transition: all .15s ease;
}
.rob-pool .pool-chip:hover { border-color: #2563eb; color: #2563eb; }
.rob-pool .pool-chip.is-armed { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.rob-pool .pool-chip.is-used { opacity: .4; pointer-events: none; }

/* spectrum axis */
.rob-spec { display: grid; gap: 12px; margin: 4px 0; }
.rob-spec-axis { position: relative; height: 66px; border-radius: 10px; background: linear-gradient(90deg, #f1f5f9, #eff6ff 55%, #eff6ff); border: 1px solid #e2e8f0; }
.rob-spec-axis .axis-line { position: absolute; left: 3%; right: 3%; top: 50%; height: 2px; background: linear-gradient(90deg, #94a3b8, #2563eb); }
.rob-spec-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #2563eb; background: #fff;
  cursor: pointer; transition: all .15s ease; z-index: 2;
}
.rob-spec-dot:hover { transform: translate(-50%, -50%) scale(1.25); }
.rob-spec-dot.is-on { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.rob-spec-axis .axis-cap { position: absolute; top: 50%; transform: translateY(-50%); font: 600 9px 'Inter Tight', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #7c8aa1; }
.rob-spec-card {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 13px; font-size: 12px; color: #475569; min-height: 74px;
}
.rob-spec-card b { color: #0f172a; }