:root{--comm-good:#2f7652;--comm-warm:#9b513f}
.comm-page{display:block;max-width:1600px;padding-top:28px}
.comm-page .el-main{max-width:none}
.comm-hero{min-height:0;padding:42px 46px}
.comm-hero h1{max-width:none;white-space:nowrap;overflow-wrap:break-word;font-size:clamp(28px,3.4vw,46px)}
.comm-hero p{max-width:none;white-space:normal;overflow-wrap:break-word}
.lesson-tools{
  margin-top:18px;
  padding:12px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,254,250,.8);
}
.lesson-tools p{margin:0;color:var(--muted);font-size:15px}
.scene-card{
  margin-bottom:18px;
  padding:19px 21px;
  border:1px solid var(--clay);
  border-radius:16px;
  background:var(--clay-soft);
}
.scene-card small{color:var(--clay);font-size:14px;font-weight:820}
.scene-card p{margin:6px 0 0;color:var(--ink-2);font-size:18px;line-height:1.8}
.prompt-title{margin:0 0 12px;font:700 22px/1.5 var(--serif)}
.comm-options{display:grid;gap:12px}
.comm-option{
  width:100%;
  min-height:64px;
  padding:16px 18px;
  border:1px solid rgba(35,79,64,.27);
  border-radius:15px;
  color:var(--ink);
  background:#fff;
  cursor:pointer;
  text-align:left;
  font-size:18px;
  font-weight:680;
  line-height:1.7;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.comm-option:hover{transform:translateY(-2px);border-color:var(--forest);background:var(--sage-soft)}
.comm-option:disabled{cursor:default;opacity:.62;transform:none}
.comm-option.selected{opacity:1;color:#fff;border-color:var(--forest);background:var(--forest)}
.comm-option.correct-choice{opacity:1;border-color:var(--comm-good);background:#edf7f0}
.comm-copy{
  margin-top:18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--ink-2);
  font-size:18px;
  line-height:1.9;
}
.comm-copy strong{color:var(--ink)}
[data-focus-key]{
  padding:2px 4px;
  border-radius:7px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
[data-focus-key].focus-on{animation:commFocus .82s ease-in-out 1}
@keyframes commFocus{
  50%{background:#f6deaa;box-shadow:0 0 0 6px rgba(177,138,85,.18)}
}
.comm-result.correct{color:#194f39;background:#deeee0}
.comm-result.rethink{color:#713326;background:var(--clay-soft)}
.comm-result.gentle{color:#31574b;background:var(--sage-soft)}
.comm-teacher{margin-top:22px}
.comm-teacher .el-teacher-head img{width:96px;height:96px;border-radius:24px}
.comm-teacher .el-teacher-body{min-height:185px}
.comm-teacher .el-teacher-body.change{animation:commStage .72s ease-in-out 1}
@keyframes commStage{
  50%{border-color:rgba(189,105,85,.68);background:#fff8f3;box-shadow:0 0 0 7px rgba(189,105,85,.13)}
}
.comm-summary{
  margin-top:18px;
  padding:22px;
  border:1px solid rgba(47,118,82,.25);
  border-radius:18px;
  background:#eef6ef;
}
.comm-summary small{color:var(--comm-good);font-size:14px;font-weight:820;letter-spacing:.06em}
.comm-summary h2{margin:7px 0 8px;font:700 26px/1.45 var(--serif)}
.comm-summary p{margin:0;color:var(--ink-2);font-size:18px;line-height:1.8}
.autoplay-note{margin:13px 0 0;color:var(--muted);font-size:14px}
.lesson-end{
  margin-top:30px;
  padding:21px;
  border:1px solid var(--gold);
  border-radius:16px;
  background:#f6efe3;
}
.lesson-end strong{font-size:19px}
.lesson-end p{margin:6px 0 0;color:var(--ink-2);font-size:17px;line-height:1.8}
@media(max-width:820px){
  .comm-page{padding-top:20px}
  .comm-hero{padding:32px 25px}
  .comm-hero h1,.comm-hero p{white-space:normal!important;overflow-wrap:break-word;word-break:break-word}
  .lesson-tools{align-items:flex-start;flex-direction:column}
  .comm-teacher .el-teacher-head img{width:86px;height:86px}
}
@media(max-width:540px){
  .comm-hero h1{font-size:39px}
  .comm-option{font-size:18px}
  .scene-card,.comm-copy{padding:17px}
}
@media(prefers-reduced-motion:reduce){
  [data-focus-key].focus-on,.comm-teacher .el-teacher-body.change{animation:none!important}
}