:root{
  --ink:#1e2f2a; --muted:#4f635c; --paper:#f3f7f4; --card:#fffdf8;
  --line:#c9d9d1; --teal:#0f766e; --teal-deep:#0b4f49; --amber:#c47b2d;
  --leaf:#3d8b6e; --shadow:0 12px 40px rgba(15,60,50,.08);
  --code-bg:#0f1f1c; --code-fg:#e7f5ef;
  /* 正文两侧浅灰边距：原 18px → 1/4 */
  --main-pad-x:4.5px;
  --main-pad-y:16px;
  --main-pad-bottom:40px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto; scrollbar-gutter:stable}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #d7efe6 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #f7e7c8 0%, transparent 50%),
    linear-gradient(180deg,#eef6f2 0%, var(--paper) 40%, #e8f2ec 100%);
  line-height:1.85;
}
.wrap{
  display:grid; grid-template-columns:min(320px,34vw) minmax(0,1fr); min-height:100vh;
  transition:grid-template-columns .22s ease;
  position:relative;
}
/* 收起：侧栏不占位、无蓝/灰空隙，只留悬浮箭头 */
.wrap.is-sidebar-collapsed{grid-template-columns:minmax(0,1fr)}
.sidebar{
  position:sticky; top:0; height:100vh; overflow:auto;
  padding:28px 18px 40px;
  background:linear-gradient(180deg, rgba(255,253,248,.95), rgba(232,244,238,.92));
  border-right:1px solid var(--line);
  z-index:30;
}
.sidebar-inner{min-width:0}
.wrap.is-sidebar-collapsed .sidebar{
  position:absolute;
  left:0; top:0;
  width:0; height:0;
  padding:0; margin:0;
  border:none; background:transparent;
  overflow:visible;
  pointer-events:none;
  z-index:60;
}
.wrap.is-sidebar-collapsed .sidebar-inner{
  display:none !important;
}
.sidebar-toggle{
  position:absolute; top:14px; right:10px; z-index:4;
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  border:1px solid #b9d5ca; background:#e7f5ef; color:var(--teal-deep);
  font-size:1rem; line-height:1; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(15,60,50,.08);
}
.sidebar-toggle:hover{background:#d8eee6}
.sidebar-toggle:active{background:#d8eee6}
.sidebar-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.wrap.is-sidebar-collapsed .sidebar-toggle{
  /* 固定在视口左上角，滚动时始终可见 */
  position:fixed;
  top:calc(var(--main-pad-y) + 10px);
  left:0;
  right:auto;
  transform:none;
  margin:0;
  pointer-events:auto;
  box-shadow:0 4px 14px rgba(15,60,50,.14);
  border-radius:0 10px 10px 0;
  border-left:none;
  z-index:100;
}
.brand{
  font-family:inherit;
  font-size:clamp(0.95rem, 1.05rem + 0.1vw, 1.12rem); line-height:1.35; color:var(--teal-deep);
  padding:8px 42px 18px 10px; border-bottom:1px dashed var(--line); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
  min-width:0;
  white-space:nowrap;
}
.brand > span{
  flex:1 1 auto; min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.brand .brand-logo{width:28px; height:28px; border-radius:8px; box-shadow:none}
.brand a.brand-home{display:inline-flex; line-height:0; border-radius:8px; flex-shrink:0; text-decoration:none}
.brand a.brand-home:hover{opacity:.88}
.brand a.brand-home:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.brand small{display:block; margin-top:8px; font-family:inherit; font-size:.78rem; color:var(--muted)}
.nav a{display:block; text-decoration:none; color:var(--muted); padding:8px 10px; border-radius:10px; font-size:.9rem}
.nav a:hover{background:#dff0e8; color:var(--teal-deep)}
.nav-group{margin:10px 0 6px}
.nav-l1-label{
  display:block; font-size:.78rem; font-weight:700; color:var(--teal-deep);
  padding:8px 10px 4px; letter-spacing:.02em; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-sub{padding-left:6px; margin-bottom:4px}
.nav a.nav-l1{font-weight:600; color:var(--teal-deep)}
.nav a.nav-l2{
  font-size:.78rem; padding:6px 8px 6px 12px; line-height:1.35;
  border-left:2px solid transparent; margin-left:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav a.nav-l2:hover,.nav a.is-current{
  background:#dff0e8; color:var(--teal-deep); border-left-color:var(--leaf);
}
.nav a.nav-l1.is-current{background:#dff0e8}
.main{
  padding:var(--main-pad-y) var(--main-pad-x) var(--main-pad-bottom); max-width:none; min-width:0;
  display:flex; flex-direction:column; min-height:100vh;
}
.pager-stage{flex:1; position:relative; min-width:0; width:100%}
.page{
  display:block; max-width:none; width:100%; margin:0;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  /* 保持可见溢出，避免 clip/hidden 把正文变成不可滚动的裁剪盒 */
  box-shadow:var(--shadow); overflow:visible; min-height:60vh;
}
.cover-inner{overflow:hidden}
/* 封面主图：以 lesson0（3:2）为准，各课显示尺寸一致 */
.cover-hero{
  width:100%;
  aspect-ratio:3 / 2;
  max-height:min(42vw, 420px);
  overflow:hidden;
  background:linear-gradient(120deg,#0f766e,#3d8b6e 40%,#c47b2d);
}
.cover-hero img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.cover-body{padding:22px 28px 28px}
.cover-body h1{display:none} /* 标题已在 chapter-head；封面区不再重复 */
.cover-body .lead{color:var(--muted); margin:0}
.cover-brand{
  display:flex; align-items:flex-start; gap:12px; flex-wrap:nowrap;
}
.cover-brand > span{
  flex:1 1 auto; min-width:0;
  line-height:1.65;
}
.cover-intro{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.7;
  font-size:.98rem;
}
.cover-points{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
}
.cover-points li{
  margin:0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#f7fbf8,#fff);
  color:var(--teal-deep);
  font-size:.92rem;
  line-height:1.45;
}
.cover-points strong{color:var(--teal)}
@media (max-width:720px){
  .cover-points{grid-template-columns:1fr}
}
.mixly-logo{
  width:40px; height:40px; border-radius:10px; display:block; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(15,60,50,.12);
}
/* 封面不再使用徽章与单元卡片 */
.badges,.modes{display:none !important}
.inline-fig{
  margin:1.35em 0 1.5em; padding:0; background:#f7fbf8; border-radius:16px;
  overflow:hidden; border:1px solid var(--line); clear:both;
}
.inline-fig img{
  width:100%; display:block; max-height:320px; object-fit:contain;
  background:#eef6f2; margin:0 auto; border-radius:0; border:0;
}
.inline-fig figcaption{
  padding:8px 16px 12px; font-size:.86rem; color:var(--muted);
  border-top:1px dashed var(--line); line-height:1.45; text-align:center; margin-top:0;
}
.chapter-head{padding:18px 28px 12px; background:linear-gradient(90deg,#e8f6f1,#fff8ea); border-bottom:1px solid var(--line)}
.chapter-head-top{
  display:block; margin:0 0 2px;
}
.chapter-head-top .eyebrow{margin:0}
/* 相对浏览器视口固定：右上角，不随页面滚动 */
.chapter-pager-fixed,
#ailessons-chapter-pager.chapter-pager{
  position:fixed;
  top:auto;
  bottom:18px;
  right:18px;
  left:auto;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(247,251,248,.92);
  border:1px solid #c9d9d1;
  box-shadow:0 6px 20px rgba(15,60,50,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.chapter-pager-fixed[hidden],
#ailessons-chapter-pager[hidden]{display:none !important}
.chapter-pager button{
  border:1px solid #b9d5ca; background:#e7f5ef; color:var(--teal-deep);
  border-radius:999px; padding:5px 14px; font-size:.86rem; font-weight:600;
  font-family:inherit; cursor:pointer; line-height:1.3;
  box-shadow:none;
}
.chapter-pager button:hover:not(:disabled){background:#d8eee6}
.chapter-pager button:active:not(:disabled){background:#d8eee6}
.chapter-pager button:disabled{opacity:.38; cursor:not-allowed}
.chapter-pager .pager-info{
  font-size:.82rem; color:var(--muted); min-width:3.6em; text-align:center; white-space:nowrap;
}
.chapter-pager .pager-info strong{color:var(--teal-deep); font-weight:700}
.eyebrow{margin:0; color:var(--amber); font-size:.78rem}
.chapter-title{margin:6px 0 0; font-family:inherit; font-size:1.55rem; color:var(--teal-deep)}
.chapter-body{padding:8px 28px 32px}
.chapter-body h2{font-family:inherit; color:var(--teal-deep); font-size:1.28rem; margin:1.5em 0 .55em; border-left:4px solid var(--leaf); padding-left:12px}
.chapter-body h3{color:var(--teal); font-size:1.1rem; margin:1.35em 0 .45em}
.chapter-body h4{font-size:1.02rem; margin:1.15em 0 .35em}
.chapter-body p{margin:.7em 0; font-size:1.02rem}
.knowledge{
  background:#eef8f3; border:1px solid #c5e2d4; border-radius:12px;
  padding:10px 14px; font-weight:600; color:var(--teal-deep); margin:.85em 0;
}
.task-line{
  background:#fff8eb; border-left:4px solid var(--amber);
  padding:10px 14px; border-radius:0 12px 12px 0; margin:.85em 0;
}
.tb-list{margin:.4em 0 1em 0; padding-left:1.35em}
.tb-list li{margin:.35em 0; padding-left:.2em}
.compare{margin:1em 0; display:grid; gap:10px}
.compare-bad,.compare-good{margin:0; padding:12px 14px; border-radius:12px; font-size:.95rem}
.compare-bad{background:#fff8eb; border:1px solid #e0c08a}
.compare-good{background:#eef8f3; border:1px solid #b9d5ca}
.unit-motto{background:#e8f6f1; border:1px dashed #b9d5ca; border-radius:12px; padding:10px 14px; color:var(--teal-deep); font-weight:600}
.code-note{font-size:.92rem; color:var(--muted); margin:.4em 0 .8em}
.think-q{margin:1em 0; padding:10px 14px; background:#f7fbf8; border-left:4px solid var(--leaf); border-radius:0 12px 12px 0; font-size:.95rem}
/* lesson1「多轮对话实录」专用排版（从 monolith 迁入，拆页共用） */
.dialogue{
  margin:1em 0 1.4em; padding:14px 16px 16px;
  background:linear-gradient(180deg,#f7fbf8,#fffdf8);
  border:1px solid var(--line); border-radius:16px;
}
.dlg-round{
  margin:12px 0 8px; font-size:.82rem; font-weight:700;
  color:var(--amber); letter-spacing:.04em;
}
.dlg-round:first-child{margin-top:0}
.dlg-line{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px;
  margin:.55em 0; align-items:start;
}
.dlg-who{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; border-radius:8px; font-size:.78rem; font-weight:700;
}
.dlg-stu .dlg-who{background:#e7f5ef; color:var(--teal-deep)}
.dlg-ai .dlg-who{background:#fff4df; color:#8a5a12}
.dlg-text{
  margin:0; padding:8px 12px; border-radius:12px; background:#fff;
  border:1px solid #e2ece6; font-size:.98rem; line-height:1.7;
}
.dlg-note{
  margin:.2em 0 .6em 62px; padding:8px 12px; background:#f0f5f2;
  border-radius:10px; font-size:.92rem; color:var(--muted);
}
.illus-missing{
  margin:1em 0; padding:12px 14px; background:#fff4f0;
  border:1px dashed #e0a090; border-radius:12px; color:#8a4030;
}
.steps-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  margin:1em 0 1.2em;
}
.step-item{
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  margin:0; padding:12px; background:#e8f6f1; border-radius:12px; border:1px solid #b9d5ca;
  min-height:100%;
}
.step-num{
  font-weight:700; color:#fff; background:var(--teal); text-align:center;
  border-radius:999px; padding:4px 12px; font-size:.82rem; white-space:nowrap; width:max-content;
}
.step-title{font-weight:700; color:var(--teal-deep); font-size:.95rem; line-height:1.45}
.step-desc{display:block; margin-top:4px; font-weight:500; color:var(--muted); font-size:.86rem; line-height:1.5}
.quiz{
  margin:1.2em 0 1.6em; padding:14px 16px 16px;
  background:#f7fbf8; border:1px solid var(--line); border-radius:16px;
}
.quiz > h3{margin-top:.2em}
.quiz-list{list-style:none; margin:.4em 0 0; padding:0; counter-reset:q}
.quiz-item{
  counter-increment:q; margin:.55em 0; padding:8px 12px;
  background:#fff; border:1px solid #e2ece6; border-radius:12px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
}
.quiz-item::before{
  content:counter(q) ".";
  font-weight:700; color:var(--teal-deep); flex:0 0 auto;
}
.quiz-q{display:inline; margin:0; font-size:.95rem; line-height:1.55; flex:1 1 12em}
.quiz-opts{
  display:inline-flex; flex-wrap:wrap; gap:2px 12px; align-items:center;
  flex:0 1 auto;
}
.quiz-opt{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.9rem; color:var(--muted); cursor:pointer; white-space:nowrap;
  user-select:none;
}
.quiz-opt input{accent-color:var(--teal)}
.quiz-mark{display:inline-block; font-size:.88rem; font-weight:700; flex:0 0 auto}
.quiz-item.is-correct{border-color:#3d8b6e; background:#eef8f3}
.quiz-item.is-wrong{border-color:#c47b2d; background:#fff8eb}
.quiz-explain{
  flex:1 1 100%; margin:.35em 0 0; padding:8px 10px; border-radius:10px;
  font-size:.88rem; line-height:1.45; color:#3d4f47; background:#f7faf8; border:1px dashed #b9d5ca;
}
.quiz-item.is-wrong .quiz-explain{background:#fff8eb; border-color:#e0c08a; color:#6b4a1a}
.quiz-item.is-correct .quiz-explain{background:#eef8f3; border-color:#9bc4b2; color:#0f5c4a}
.progress-bar{
  margin:6px 12px 10px; padding:6px 10px; border-radius:10px; font-size:.8rem; font-weight:600;
  color:var(--teal-deep); background:#e7f5ef; border:1px solid #b9d5ca;
}
.nav a.nav-l2.is-progress-done::before{
  content:"✓ "; color:#2f7a5c; font-weight:700;
}
.prereq-line{
  margin:.4em 0 .85em; padding:8px 12px; border-radius:12px; font-size:.92rem;
  background:#f3f7f4; border:1px solid var(--line); color:var(--muted);
}
.prereq-line a{color:var(--teal-deep); font-weight:600}
.lesson-card{
  margin:1em 0; padding:12px 14px; border-radius:14px; background:#f7faf8; border:1px solid #b9d5ca;
}
.lesson-card h4{margin:0 0 6px; font-size:1rem; color:var(--teal-deep)}
.lesson-card ul{margin:.35em 0 0; padding-left:1.2em}
.glossary-table{width:100%; border-collapse:collapse; font-size:.92rem; margin:.6em 0 1em}
.glossary-table th,.glossary-table td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.glossary-table th{background:#e7f5ef; color:var(--teal-deep)}
.faq-list details{margin:.45em 0; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
.faq-list summary{cursor:pointer; font-weight:600; color:var(--teal-deep)}
.quiz-check,.code-run,.code-check,.code-reset,.code-load{
  border:1px solid #b9d5ca; background:#e7f5ef; color:var(--teal-deep);
  border-radius:999px; padding:8px 18px; font-size:.95rem; cursor:pointer; font-family:inherit; margin-right:8px
}
.code-load{background:#1f5c4a; border-color:#1f5c4a; color:#e7f5ef; font-weight:600}
.code-load:disabled{opacity:.55; cursor:not-allowed}
.code-check:disabled,.code-reset:disabled,.code-run:disabled,.code-save-image:disabled,.code-maximize:disabled{
  opacity:.55; cursor:not-allowed
}
.code-run.is-running{background:#fde8e6; border-color:#d48a84; color:#8b2e28; font-weight:600}
.code-check{background:#fff4df; border-color:#e0c08a}
.code-save-image{background:#e8f0ff; border-color:#9bb6e0; color:#1f3f7a}
.quiz-hint{margin:.35em 0 .8em; font-size:.88rem; color:var(--muted)}
.code-lab{margin:.85em 0 .5em; padding:10px 12px; background:#f3f7f4; border:1px solid var(--line); border-radius:16px}
.code-lab.lab-passed{border-color:#3d8b6e; box-shadow:0 0 0 1px rgba(61,139,110,.25)}
.lab-title{margin:0 0 6px; font-size:1.02rem; color:var(--teal-deep)}
.lab-picker{
  display:flex; flex-wrap:nowrap; align-items:center; gap:8px 10px;
  margin:0 0 5px; width:100%;
}
.lab-picker label{font-size:.92rem; color:var(--teal-deep); font-weight:600; flex:0 0 auto; white-space:nowrap}
.lab-select{
  flex:1 1 auto; min-width:0; max-width:none; width:auto;
  height:36px; box-sizing:border-box;
  border:1px solid #b9d5ca; border-radius:10px;
  padding:0 12px; font-size:.9rem; font-family:inherit; line-height:1.2;
  background:#fff; color:var(--ink); cursor:pointer;
}
.lab-select:disabled{opacity:.55; cursor:not-allowed}
.lab-picker .lab-actions{
  display:inline-flex; flex-wrap:nowrap; align-items:center; gap:8px;
  margin:0 0 0 auto; flex:0 0 auto;
}
.lab-picker .lab-actions .code-run,
.lab-picker .lab-actions .code-check,
.lab-picker .lab-actions .code-reset,
.lab-picker .lab-actions .code-load{
  height:36px; box-sizing:border-box; margin:0; padding:0 14px;
  font-size:.88rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
}
/* 已并入选题行的按钮，不再在下方再占一行 */
.code-lab > .lab-actions{display:none}
.lab-picker > .lab-actions{display:inline-flex}
.lab-hint{display:none!important}
.py-status{font-size:.88rem; color:var(--muted); margin:.2em 0 .8em}
.lab-ref{display:none !important}
.py-status.is-ok{color:var(--teal)}
.py-status.is-busy{color:var(--amber)}
.code-frame{position:relative}
/* 仅文本编辑器（.code-frame）右上角浮动钮；Mixly 课用 lab-actions 工具条 */
.code-frame > .code-maximize{
  position:absolute; top:10px; right:10px; z-index:2;
  width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #3d5c54; border-radius:8px; background:rgba(15,31,28,.72); color:#e7f5ef;
  cursor:pointer; font-family:inherit
}
.code-frame > .code-maximize:hover{background:rgba(15,118,110,.9)}
.code-input{
  width:100%; min-height:480px; padding:12px 44px 12px 14px; border-radius:12px; border:1px solid #9fc2b4;
  background:var(--code-bg); color:var(--code-fg); font-family:Consolas,"Courier New",monospace; font-size:.9rem; line-height:1.5; resize:vertical; box-sizing:border-box
}
.code-lab.is-maximized{
  position:fixed; inset:0; z-index:10000; margin:0; padding:10px 12px 12px;
  padding-top:max(10px, env(safe-area-inset-top));
  padding-right:max(12px, env(safe-area-inset-right));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  padding-left:max(12px, env(safe-area-inset-left));
  overflow:hidden; border-radius:0; border:0;
  box-shadow:none; background:#f3f7f4;
  display:flex; flex-direction:column; box-sizing:border-box;
  width:100%; height:100dvh; max-width:none;
}
.code-lab.is-maximized .code-input{min-height:calc(100dvh - 160px); flex:1 1 auto}
.code-lab.is-maximized .mixly-iframe-wrap{
  flex:1 1 auto; min-height:0; height:auto; max-height:none;
}
body.lab-maximized{overflow:hidden !important}
/* 最大化编程区时翻页条仍可用，但不挡仿真底部 */
body.lab-maximized #ailessons-chapter-pager,
body.lab-maximized .chapter-pager-fixed{
  z-index:10050;
}
.lab-actions{margin:10px 0}
.lab-progress{
  display:none; margin:0 0 10px; padding:10px 12px;
  background:#fff; border:1px dashed #b9d5ca; border-radius:12px;
}
.lab-progress.is-on{display:block}
.lab-progress-label{
  margin:0 0 8px; font-size:.88rem; color:var(--muted);
}
.lab-progress-track{
  height:8px; border-radius:999px; background:#e7f5ef; overflow:hidden;
}
.lab-progress-bar{
  height:100%; width:35%; border-radius:999px;
  background:linear-gradient(90deg,#3d8b6e,#0f766e,#c47b2d,#0f766e);
  background-size:200% 100%;
  animation:lab-progress-slide 1.1s ease-in-out infinite;
}
.lab-progress.is-determinate .lab-progress-bar{
  animation:none; background:#0f766e; background-size:auto;
  transition:width .25s ease;
}
@keyframes lab-progress-slide{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
.code-output,.code-check-result{
  margin:8px 0 0; padding:10px 12px; border-radius:10px; background:#fff; border:1px dashed #b9d5ca;
  white-space:pre-wrap; font-family:Consolas,monospace; font-size:.86rem; min-height:2.5em
}
.code-lab:has(iframe.mixly-iframe)>.code-output,
.code-lab:has(.mixly-iframe-wrap)>.code-output{display:none!important}
.code-check-result.is-correct{border-color:#3d8b6e; background:#eef8f3; color:#0f766e}
.code-check-result.is-wrong{border-color:#c47b2d; background:#fff8eb; color:#8a5a12}
.pager-bar{display:none !important}
.footer-note{max-width:none; width:100%; margin:14px 0 0; color:var(--muted); font-size:.85rem; text-align:center}

/* 侧栏遮罩（平板抽屉） */
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0; z-index:190;
  margin:0; padding:0; border:0;
  background:rgba(15,40,34,.4);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
html.ailessons-sidebar-lock,
html.ailessons-sidebar-lock body{overflow:hidden !important}

@media (max-width:1024px){
  .wrap,.wrap.is-sidebar-collapsed{grid-template-columns:1fr}
  .sidebar{
    position:fixed; top:0; left:0;
    width:min(320px,86vw); height:100dvh; max-height:100dvh;
    padding:28px 18px 40px;
    padding-top:max(28px, env(safe-area-inset-top));
    padding-bottom:max(40px, env(safe-area-inset-bottom));
    z-index:200;
    transform:translateX(0);
    transition:transform .22s ease;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg, rgba(255,253,248,.98), rgba(232,244,238,.96));
    border-right:1px solid var(--line);
    box-shadow:8px 0 28px rgba(15,60,50,.18);
    pointer-events:auto;
  }
  .wrap:not(.is-sidebar-collapsed) .sidebar-backdrop{display:block}
  .wrap:not(.is-sidebar-collapsed) .sidebar-inner{display:block !important}
  .wrap.is-sidebar-collapsed .sidebar{
    transform:translateX(-100%);
    width:min(320px,86vw); height:100dvh;
    padding:28px 18px 40px;
    border-right:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,253,248,.98), rgba(232,244,238,.96));
    overflow:visible;
    pointer-events:none;
    box-shadow:none;
  }
  .wrap.is-sidebar-collapsed .sidebar-inner{display:none !important}
  .sidebar-toggle{
    width:44px; height:44px; font-size:1.1rem;
    touch-action:manipulation;
  }
  .wrap.is-sidebar-collapsed .sidebar-toggle{
    position:fixed;
    top:max(calc(var(--main-pad-y) + 10px), env(safe-area-inset-top));
    left:0; right:auto;
    transform:none; margin:0; pointer-events:auto;
    border-radius:0 10px 10px 0; border-left:none; z-index:210;
  }
  .wrap:not(.is-sidebar-collapsed) .sidebar-toggle{
    position:absolute; top:14px; right:10px; left:auto;
    pointer-events:auto; z-index:4;
    border-radius:10px; border-left:1px solid #b9d5ca;
  }
  .nav a{padding:12px 12px; min-height:44px; box-sizing:border-box; display:flex; align-items:center}
  .nav a.nav-l2{
    padding:10px 12px 10px 14px; font-size:.85rem; min-height:44px;
    white-space:normal; overflow:visible; text-overflow:unset; line-height:1.4;
  }
  .nav-l1-label{padding:12px 12px 6px; min-height:44px; box-sizing:border-box}
  .modes{grid-template-columns:1fr}
  .mode-card p{white-space:normal}
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chapter-body,.cover-body{padding-left:18px; padding-right:18px}
  .chapter-head{padding:14px 18px 10px}
  .chapter-pager-fixed,
  #ailessons-chapter-pager.chapter-pager{
    bottom:max(18px, env(safe-area-inset-bottom));
    right:max(18px, env(safe-area-inset-right));
    padding:8px 10px;
  }
  .chapter-pager button{
    min-height:44px; padding:10px 16px; font-size:.9rem;
    touch-action:manipulation;
  }
  .quiz-opt{
    min-height:44px; padding:8px 10px; gap:8px;
    white-space:normal; box-sizing:border-box;
    border-radius:10px; background:#f7fbf8;
  }
  .quiz-opt input{width:20px; height:20px; flex:0 0 auto}
  .quiz-opts{gap:8px; width:100%; flex:1 1 100%}
  .quiz-check,.code-run,.code-check,.code-reset,.code-load,.code-save-image{
    min-height:44px; padding:10px 16px; touch-action:manipulation;
  }
  .lab-picker{flex-wrap:wrap}
  .lab-picker .lab-actions{
    margin-left:0; width:100%;
    justify-content:flex-start; flex-wrap:wrap;
  }
  .lab-select,
  .lab-picker .lab-actions .code-run,
  .lab-picker .lab-actions .code-check,
  .lab-picker .lab-actions .code-reset,
  .lab-picker .lab-actions .code-load,
  .lab-picker .lab-actions .code-save-image{
    min-height:44px; height:auto; padding:10px 14px;
  }
  .code-frame > .code-maximize{width:44px; height:44px}
}

/* 摄像头 FAB 与翻页按钮错开 */
body:has(#ailessons-cam-fab) #ailessons-chapter-pager,
body:has(#ailessons-cam-fab) .chapter-pager-fixed{
  bottom:max(72px, calc(env(safe-area-inset-bottom) + 56px));
}

@media (pointer:coarse){
  .sidebar-toggle,
  .code-frame > .code-maximize{width:44px; height:44px}
  .chapter-pager button{min-height:44px; padding:10px 16px}
  .quiz-opt{min-height:44px; padding:8px 10px; gap:8px}
  .quiz-opt input{width:20px; height:20px}
  .quiz-check,.code-run,.code-check,.code-reset,.code-load{
    min-height:44px; touch-action:manipulation;
  }
  .lab-select,
  .lab-picker .lab-actions .code-run,
  .lab-picker .lab-actions .code-check,
  .lab-picker .lab-actions .code-reset,
  .lab-picker .lab-actions .code-load,
  .lab-picker .lab-actions .code-save-image{
    min-height:44px; height:auto;
  }
  .nav a{min-height:44px; padding:10px 12px; box-sizing:border-box}
}

@media (max-width:560px){.steps-grid{grid-template-columns:1fr}}

/* 多课共用：原理图配图 */
.diagram-fig{background:#eef6f2; padding:8px}
.diagram-fig img{max-height:280px; object-fit:contain; background:#f3f7f4}

/* 解题思路 + 图形块讲解 */
.pedagogy-algo,.pedagogy-blocks{margin:1.1rem 0 1.35rem}
.algo-split{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(200px,0.75fr);
  gap:18px 22px;
  align-items:start;
}
.algo-problem{line-height:1.75; color:var(--text,#1a2e26)}
.algo-devices{margin:.35rem 0 .75rem; color:var(--muted,#5a6f66); font-size:.95rem}
.algo-steps{
  margin:.5rem 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.algo-steps li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg,#f3faf6,#eef6f2);
  border:1px solid #cfe0d6; line-height:1.65;
}
.algo-idx{
  flex:0 0 auto; width:1.6rem; height:1.6rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#1f5c4a; color:#e7f5ef; font-size:.85rem; font-weight:700;
  margin-top:.1rem;
}
.algo-flow{
  position:sticky; top:12px;
  padding:12px 10px 14px;
  border-radius:14px;
  background:#f7fbf9;
  border:1px solid #cfe0d6;
  text-align:center;
}
.algo-flow-cap{margin:0 0 8px; font-size:.82rem; color:#5a6f66}
.algo-flow-svg{display:block; margin:0 auto; max-width:100%; height:auto}
.algo-flow-svg .flow-node{fill:#fff; stroke:#1f5c4a; stroke-width:1.6}
.algo-flow-svg .flow-node.is-start{fill:#e7f5ef}
.algo-flow-svg .flow-node.is-end{fill:#fff8eb; stroke:#c47b2d}
.algo-flow-svg .flow-label{
  fill:#1a2e26; font-size:12px; font-family:inherit;
}
.algo-flow-svg .flow-arrow{stroke:#1f5c4a; stroke-width:1.8}
.algo-flow-svg .flow-arrow-head{fill:#1f5c4a}
.algo-flow-empty{color:#7a8f86; font-size:.9rem; padding:24px 8px}
.algo-design-lead{margin:.15rem 0 .55rem; color:#3d5a4e; font-size:.95rem}
.net-concept{
  margin:0 0 1rem; padding:14px 16px; border-radius:12px;
  background:linear-gradient(180deg,#f7fbf9,#eef6f2);
  border:1px solid #cfe0d6; line-height:1.75; color:#1a2e26;
}
.algo-topo{
  position:sticky; top:12px;
  padding:12px 10px 14px;
  border-radius:14px;
  background:#f7fbf9;
  border:1px solid #cfe0d6;
  text-align:center;
}
.algo-topo-cap{margin:0 0 6px; font-size:.82rem; color:#5a6f66; font-weight:600}
.algo-topo-note{margin:0 0 10px; font-size:.8rem; color:#5a6f66; line-height:1.55; text-align:left}
.algo-topo-hint{margin:8px 4px 4px; font-size:.88rem; color:#5a6f66; line-height:1.55}
.algo-topo-svg{display:block; margin:0 auto; max-width:100%; height:auto}
.algo-topo-svg .topo-link{stroke:#1f5c4a; stroke-width:2; fill:none}
.algo-topo-svg .topo-link-label{fill:#5a6f66; font-size:10px; font-family:inherit}
.algo-topo-svg .topo-node{stroke-width:1.8}
.algo-topo-svg .topo-label{fill:#1a2e26; font-size:11px; font-family:inherit; font-weight:600}
.algo-topo-empty{min-height:120px}
.block-guide-lead{line-height:1.7; color:var(--muted,#5a6f66)}
.block-guide-wrap{overflow-x:auto; margin-top:.65rem; border-radius:12px; border:1px solid #cfe0d6}
.block-guide{width:100%; border-collapse:collapse; font-size:.92rem; background:#fff}
.block-guide th,.block-guide td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #e2ebe5}
.block-guide th{background:#e8f3ed; color:#1f5c4a; font-weight:700; white-space:nowrap}
.block-guide tr:last-child td{border-bottom:none}
.block-guide .block-type{margin-top:4px; font-size:.75rem; color:#7a8f86; font-family:Consolas,ui-monospace,monospace; word-break:break-all}
.block-guide td.block-cell{min-width:120px; vertical-align:middle}
.block-visual{display:inline-flex; align-items:center; max-width:100%}
/* 积木截图为 2x 位图：显示高度略小于物理像素，避免放大发糊 */
.block-chip,.block-shot{
  display:block; height:auto; max-width:min(320px,100%);
  image-rendering:auto;
}
.block-shot{
  max-height:56px; width:auto; object-fit:contain;
  background:transparent;
  /* 轻阴影用 box 而非 filter，减少边缘发糊 */
  filter:none;
  box-shadow:0 1px 2px rgba(15,40,34,.10);
  border-radius:2px;
}
.inline-block-ref{
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  flex-wrap:wrap; max-width:100%;
}
.block-shot.inline{
  display:inline-block; max-height:36px; max-width:min(220px,70vw);
  vertical-align:middle; box-shadow:0 1px 2px rgba(15,40,34,.10);
}
.block-chip{
  filter:drop-shadow(0 1px 2px rgba(15,40,34,.10));
}
@media (max-width:900px){
  .algo-split{grid-template-columns:1fr}
  .algo-flow,.algo-topo{position:static}
}
@media (max-width:720px){
  .block-guide th:nth-child(2),.block-guide td:nth-child(2){display:none}
}

/* 知识点讲解 + 微动画 */
.pedagogy-teach{margin:1.1em 0 1.35em}
.teach-lead{margin:0 0 .75rem; color:#3d534b; font-size:.95rem; line-height:1.65}
.teach-concepts{display:flex; flex-direction:column; gap:12px; margin:.4rem 0 1rem}
.teach-concept{
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(160deg,#f3faf7 0%,#eef6f2 100%);
  border:1px solid #c5d9ce;
}
.teach-term{
  margin:0 0 6px; font-size:1.02rem; font-weight:700; color:#0b4f49;
}
.teach-concept p{margin:0 0 .45rem; color:#1a2e26; font-size:.95rem; line-height:1.7}
.teach-concept p:last-child{margin-bottom:0}
.teach-concept strong{color:#0b4f49; font-weight:700}
.teach-points{margin:.75rem 0 0; line-height:1.75}
.teach-bridge{
  margin:1rem 0 0; padding:10px 14px; border-radius:12px;
  background:#fff8eb; border:1px dashed #e0c08a; color:#5a4a2e; font-size:.95rem;
}
.net-knowledge-anim{
  margin:.85rem 0 1rem; padding:14px 14px 10px; border-radius:14px;
  background:linear-gradient(160deg,#f3faf7 0%,#eef4fb 100%);
  border:1px solid #c5d9ce;
}
.nka-title{margin:0 0 4px; font-weight:700; color:#0f766e; font-size:1.02rem}
.nka-caption{margin:0 0 10px; color:#3d5a4e; font-size:.92rem; line-height:1.6}
.nka-stage{overflow:hidden; border-radius:10px; background:rgba(255,255,255,.72)}
.nka-svg{display:block; width:100%; max-width:440px; height:auto; margin:0 auto}
.nka-svg .nka-node circle{stroke-width:1.8}
.nka-svg .nka-host circle{fill:#eef6f2; stroke:#1f5c4a}
.nka-svg .nka-sw circle{fill:#e8f0fa; stroke:#2a5f8f}
.nka-svg .nka-rt circle{fill:#fff4e8; stroke:#c47b2d}
.nka-svg .nka-srv circle{fill:#f0eef8; stroke:#5a4f8a}
.nka-svg .nka-cloud circle{fill:#e8f4ff; stroke:#3d7a9e}
.nka-svg .nka-fw circle{fill:#fde8e6; stroke:#b54a42}
.nka-svg .nka-node text{fill:#1a2e26; font-size:11px; font-weight:600; font-family:inherit}
.nka-svg .nka-wire{stroke:#1f5c4a; stroke-width:2; fill:none}
.nka-svg .nka-dash{stroke-dasharray:5 4}
.nka-svg .nka-pkt{fill:#c47b2d; stroke:#8a5a12; stroke-width:1}
.nka-svg .nka-pkt-t{fill:#fff; font-size:9px; font-weight:700}
.nka-svg .nka-cap{fill:#5a6f66; font-size:11px; font-family:inherit}
.nka-svg .nka-subnet{fill:#e7f5ef; stroke:#b9d5ca; stroke-width:1.5}
.nka-svg .nka-gate{fill:rgba(181,74,66,.18); stroke:#b54a42; stroke-width:1.5}
.nka-svg .nka-layer{stroke:#1f5c4a; stroke-width:1.2}
.nka-svg .nka-layer.l1{fill:#d8eee6}
.nka-svg .nka-layer.l2{fill:#e8f0fa}
.nka-svg .nka-layer.l3{fill:#fff4e8}
.nka-svg .nka-layer.l4{fill:#f0eef8}
.nka-svg .nka-layers text{fill:#1a2e26; font-size:12px; font-weight:600; font-family:inherit}
.nka-svg .nka-wifi-arc{stroke:#2a5f8f; stroke-width:2}
.nka-principle-row{margin:.85rem 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.9rem; color:#5a6f66}
.nka-principle-btn{
  border:1px solid #b9d5ca; background:#e7f5ef; color:#0b4f49;
  border-radius:999px; padding:6px 12px; font:inherit; cursor:pointer;
}
.nka-principle-btn:hover{background:#d8eee6}
.principle-tip{
  margin:1rem 0; padding:12px 14px; border-radius:12px;
  background:#f3faf7; border:1px dashed #b9d5ca; color:#3d534b;
}
.principle-tip p{margin:.35rem 0}
.principle-tip .nka-principle-row{margin:.5rem 0 0}

@keyframes nka-move-x{0%{transform:translateX(0); opacity:1}70%{opacity:1}100%{transform:translateX(210px); opacity:.2}}
@keyframes nka-move-x-short{0%{transform:translateX(0)}100%{transform:translateX(130px)}}
@keyframes nka-ping-out{0%{transform:translateX(0); opacity:1}100%{transform:translateX(200px); opacity:.15}}
@keyframes nka-ping-back{0%{transform:translateX(0); opacity:1}100%{transform:translateX(-200px); opacity:.15}}
@keyframes nka-hop{0%{transform:translateX(0)}40%{transform:translateX(70px)}100%{transform:translateX(250px)}}
@keyframes nka-nat{0%{transform:translate(0,0)}40%{transform:translate(120px,30px)}100%{transform:translate(280px,30px)}}
@keyframes nka-fw{0%{transform:translateX(0); opacity:1}55%{transform:translateX(120px); opacity:1}70%{opacity:.25}100%{transform:translateX(260px); opacity:.15}}
@keyframes nka-route{0%{transform:translateX(0)}33%{transform:translateX(100px)}66%{transform:translateX(210px)}100%{transform:translateX(300px)}}
@keyframes nka-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes nka-blink{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes nka-pkt-slide{0%{transform:translate(90px,60px)}50%{transform:translate(210px,60px)}100%{transform:translate(340px,60px)}}
@keyframes nka-layer-pulse{
  0%,100%{filter:brightness(1)}
  25%{filter:brightness(1.08)}
  50%{filter:brightness(1)}
  75%{filter:brightness(1.06)}
}
.nka-move-x{animation:nka-move-x 2.4s ease-in-out infinite}
.nka-move-x-short{animation:nka-move-x-short 1.8s ease-in-out infinite alternate}
.nka-ping-out{animation:nka-ping-out 1.6s ease-in-out infinite}
.nka-ping-back{animation:nka-ping-back 1.6s ease-in-out infinite .8s}
.nka-hop{animation:nka-hop 2.8s ease-in-out infinite}
.nka-nat-pkt{animation:nka-nat 2.6s ease-in-out infinite}
.nka-fw-pkt{animation:nka-fw 2.4s ease-in-out infinite}
.nka-route-pkt{animation:nka-route 3s linear infinite}
.nka-pulse{animation:nka-pulse 1.6s ease-in-out infinite}
.nka-blink{animation:nka-blink 1.4s ease-in-out infinite}
.nka-pkt-slide{animation:nka-pkt-slide 2.8s ease-in-out infinite}
.nka-layers{animation:nka-layer-pulse 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .nka-svg *{animation:none!important}
}


/* 正文示意：上下叠放的两块真实积木截图 */
.block-stack{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  margin:1em 0; padding:14px 16px;
  background:#eef8f3; border:1px solid #c5e2d4; border-radius:14px;
  max-width:100%; overflow-x:auto;
}
.block-stack .block-shot{
  display:block; height:auto; width:auto;
  max-width:min(100%, 480px);
  border-radius:6px;
}