:root{--comm-good:#2f7652;--comm-warm:#9b513f}
.comm-page{display:block;max-width:1200px;padding-top:28px}
.comm-page .el-main{max-width:1200px}
.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}
.alice-live-practice{
  margin-top:30px;
  padding:26px;
  container-type:inline-size;
  border:1px solid rgba(35,79,64,.24);
  border-radius:20px;
  background:linear-gradient(145deg,#f3f8f2,#fffdfa);
  box-shadow:0 16px 34px rgba(38,68,55,.08);
}
.alice-live-head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:start;gap:15px}
.alice-live-head img{width:64px;height:64px;object-fit:cover;border:1px solid var(--sage);border-radius:50%}
.alice-live-head small{color:var(--forest);font-size:15px;font-weight:820;letter-spacing:.06em}
.alice-live-head h2{margin:5px 0 0;font:700 28px/1.45 var(--serif)}
.alice-live-head p{margin:5px 0 0;color:var(--muted);font-size:17px;line-height:1.65}
.alice-practice-allowance{
  justify-self:end;
  padding:8px 12px;
  border:1px solid var(--sage);
  border-radius:999px;
  color:var(--forest);
  background:#fff;
  font-size:15px;
  font-weight:850;
  white-space:nowrap;
}
.alice-live-help{margin:14px 0 18px;color:var(--ink-2);font-size:18px;line-height:1.8}
.alice-live-cases{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.alice-live-case{
  min-height:48px;
  padding:10px 15px;
  border:1px solid var(--sage);
  border-radius:12px;
  color:var(--forest);
  background:#fff;
  font-family:inherit;
  font-size:17px;
  font-weight:760;
  cursor:pointer;
}
.alice-live-case:hover{transform:translateY(-1px);background:var(--sage-soft)}
.alice-live-case.selected{
  border-color:var(--forest);
  color:var(--forest)!important;
  background:#edf3ed!important;
  box-shadow:inset 0 0 0 2px rgba(47,94,73,.14);
}
.alice-live-label{display:block;margin-bottom:8px;color:var(--ink);font-size:18px;font-weight:780}
.alice-live-input{
  display:block;
  width:100%;
  min-height:150px;
  padding:16px 17px;
  border:2px solid rgba(35,79,64,.25);
  border-radius:16px;
  color:var(--ink);
  background:#fff;
  font-family:inherit;
  font-size:19px;
  font-weight:500;
  line-height:1.75;
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
}
.alice-live-input:focus{outline:4px solid rgba(54,112,82,.15);border-color:var(--forest)}
.alice-live-send{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:64px;
  margin-top:14px;
  padding:14px 20px;
  border:0;
  border-radius:16px;
  color:#fff;
  background:var(--forest);
  font-family:inherit;
  font-size:19px;
  font-weight:800;
  line-height:1.5;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(35,79,64,.18);
}
.alice-live-send:hover:not(:disabled){transform:translateY(-2px);background:#173e31}
.alice-live-send:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.alice-live-send.ready-cue{animation:commReadyCue 1.15s ease-in-out 3}
.alice-live-status{margin:11px 0 0;color:var(--muted);font-size:16px;line-height:1.7;text-align:center}
.alice-live-status[data-tone="ready"]{color:#225f42;font-weight:720}
.alice-live-status[data-tone="error"]{color:#8a3f31;font-weight:720}
html:not([data-alice-practice-sent]) .comm-page .elder-lesson-exit-next{
  border:1px solid var(--forest);
  color:var(--forest);
  background:#fff;
}
html[data-alice-practice-sent] .alice-live-send:disabled{
  border:1px solid var(--sage);
  color:var(--forest);
  background:#edf3ed;
  box-shadow:none;
  opacity:1;
}
@keyframes commReadyCue{
  50%{transform:translateY(-2px) scale(1.012);box-shadow:0 0 0 7px rgba(47,118,82,.14),0 12px 24px rgba(35,79,64,.2)}
}
@container (max-width:720px){
  .alice-live-head{grid-template-columns:52px minmax(0,1fr)}
  .alice-live-head img{width:52px;height:52px}
  .alice-practice-allowance{grid-column:1/-1;justify-self:start;white-space:normal}
}
@container (max-width:420px){
  .alice-live-head h2{font-size:25px}
  .alice-live-cases{display:grid;grid-template-columns:1fr}
  .alice-live-case{width:100%;text-align:left}
}
.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}
  .alice-live-head{grid-template-columns:52px minmax(0,1fr)}
  .alice-live-head img{width:52px;height:52px}
  .alice-practice-allowance{grid-column:1/-1;justify-self:start;white-space:normal}
  .alice-live-practice{padding:21px}
}
@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,.alice-live-send.ready-cue{animation:none!important}
}