/* A persistent lesson surface: change the support, keep the learner in place. */
.demo-workspace:has(.sp-scene),.demo-workspace:has(.sp-report){display:block}
.sp-scene{--sp-ease:cubic-bezier(.22,1,.36,1);padding:24px;border:1px solid #fff;border-radius:28px;background:radial-gradient(ellipse at 35% 40%,#e9fcf966,transparent 65%),#f2f9f8}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
.sp-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.09em;color:#668681}
.sp-top h3{font-size:clamp(1.4rem,2.2vw,1.85rem);letter-spacing:-.045em;line-height:1.18;margin-top:8px}
.sp-sample{font-size:.75rem;color:#668681;text-align:right;line-height:1.4;max-width:125px}
.sp-switcher{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 23px;position:sticky;top:12px;z-index:4;padding:5px;border-radius:99px;background:#f2f9f8e8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 5px 18px #2b5e5607}
.sp-modes{display:grid;grid-template-columns:repeat(3,1fr);position:relative;isolation:isolate;padding:4px;border-radius:99px;background:#e4eeed;border:1px solid #e1eceb;width:440px;max-width:100%}
.sp-modes>i{position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:99px;background:#fff;box-shadow:0 2px 8px #2b565014;transform:translateX(calc(var(--sp-mode)*100%));transition:transform .52s var(--sp-ease)}
.sp-modes button{border:0;background:transparent;min-height:44px;padding:10px 12px;border-radius:99px;color:#6b8b86;font-size:.8125rem;font-weight:600;transition:color .25s}
.sp-modes button[aria-pressed=true]{color:#38a494}
.sp-play{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:#658782;padding:10px 12px;min-height:44px;white-space:nowrap;font-size:.8125rem;border-radius:99px}
.sp-play:hover{background:#e8f5f3}.sp-play>span:first-child{font-size:1.15rem;min-width:15px}
.sp-canvas{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:24px;align-items:center}
.sp-lesson{min-width:0;border:1px solid #fff;border-radius:29px;background:#fff;box-shadow:0 18px 45px #2b5e5612,inset 0 1px 0 #fff;overflow:hidden;padding:22px}
.sp-lesson-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eef5f4;padding-bottom:17px}
.sp-subject{width:40px;height:40px;border-radius:13px;background:#effdfb;color:#49bcab;display:grid;place-items:center;flex-shrink:0;font-size:.9375rem;font-weight:600}
.sp-lesson-top strong,.sp-lesson-top small{display:block}.sp-lesson-top strong{font-size:.9375rem;font-weight:600}.sp-lesson-top small{font-size:.75rem;color:#668681;margin-top:3px}
.sp-lesson-chip{margin-left:auto;font-size:.6875rem;color:#668681;padding:6px 10px;border-radius:99px;background:#f5f9f9;text-align:right;max-width:130px}
.sp-question{padding:24px 0 12px;text-align:center;min-height:135px}.sp-question>span{font-size:.8125rem;color:#668681}.sp-question h4{font-size:clamp(1.5rem,2.7vw,2rem);line-height:1.15;letter-spacing:-.045em;margin-top:10px;font-weight:600}
.sp-model-wrap{position:relative;padding-bottom:42px;margin-top:8px}.sp-model{display:block;width:100%;overflow:visible}
.sp-group{transition:transform .85s var(--sp-ease),opacity .65s var(--sp-ease);transform:translateX(184px)}
.sp-group:not([data-group="0"]){opacity:0}.sp-group-card{fill:#f9fefd;stroke:#e1f3f0;stroke-width:1.5;transition:fill .6s,stroke .6s,stroke-width .6s}.sp-rice{fill:#b3d8d2}.sp-water{fill:#4bdcc7;transition:fill .45s}
.sp-scene[data-mode="1"] .sp-group[data-group="0"]{transform:translateX(0)}
.sp-scene[data-mode="1"] .sp-group[data-group="1"]{transform:translateX(184px);opacity:.12;transition-delay:.09s}
.sp-scene[data-mode="1"] .sp-group[data-group="2"]{transform:translateX(368px);opacity:.12;transition-delay:.18s}
.sp-scene[data-mode="1"]:not([data-phase="0"]) .sp-group{opacity:1}
.sp-scene[data-mode="1"][data-phase="0"] .sp-group[data-group="0"] .sp-group-card{fill:#effdfb;stroke:#a7f0e5;stroke-width:2.5}
.sp-scene[data-mode="2"] .sp-group[data-group="0"] .sp-group-card{fill:#effaf9;stroke:#cdeae6}
.sp-model-callout{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 15px;border-radius:99px;font-size:.8125rem;font-weight:500;line-height:1.3;color:#579b90;background:#f1fcfa;transition:background .5s,color .5s}
.sp-scene[data-mode="2"] .sp-model-callout{background:#effaf9;color:#699891}
.sp-legend{display:flex;justify-content:center;gap:20px;color:#668681;font-size:.75rem;margin:8px 0 18px}
.sp-legend span{display:flex;align-items:center;gap:7px}.sp-legend i{width:9px;height:9px;border-radius:3px;background:#b3d8d2}.sp-legend span:last-child i{border-radius:50%;background:#4bdcc7}
.sp-response,.sp-matching{min-height:101px;text-align:center}.sp-response[hidden],.sp-matching[hidden],.sp-step-dots[hidden]{display:none}
.sp-total,.sp-matching>p{font-size:.875rem;color:#678782;line-height:1.5;margin:0 0 13px}
.sp-answer-row{display:flex;justify-content:center;gap:10px}.sp-answer-row button{border:1px solid #e2efed;background:#f9fefd;padding:13px 30px;border-radius:16px;color:#41726b;font-size:1rem;min-height:48px;transition:background .2s,border-color .2s,transform .25s}
.sp-answer-row button[aria-pressed=true],.sp-choice[aria-pressed=true]{border-color:#71d8c8;background:#effdfb;box-shadow:0 0 0 2px #4bd5c110}
.sp-answer-row button:active,.sp-choice:active{transform:scale(.96)}
.sp-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sp-choice{padding:13px 5px 10px;border:1px solid #e2efed;border-radius:16px;background:#f9fefd;display:flex;flex-direction:column;align-items:center;gap:8px;transition:background .25s,transform .25s,border-color .25s}
.sp-choice>span:last-child{font-size:.6875rem;color:#668681}.sp-mini-row{display:flex;gap:5px;justify-content:center}.sp-mini-rice,.sp-mini-water{display:block;width:15px;height:15px;border-radius:4px;background:#b3d8d2}.sp-mini-water{background:#4bdcc7;border-radius:50%}
.sp-feedback{min-height:2.8em;font-size:.8125rem;line-height:1.4;color:#7b6586;text-align:center;margin:12px 0 0}.sp-feedback.is-correct{color:#39765f}
.sp-guidance{display:flex;flex-direction:column;gap:19px;min-width:0}
.sp-prompt-island{color:#fff;border-radius:30px;background:linear-gradient(145deg,#243f3b,#132522);border:1px solid #ffffff25;box-shadow:0 18px 40px #22494325,inset 0 1px 0 #ffffff16;overflow:hidden}
.sp-person{display:flex;align-items:center;gap:12px;padding:19px 21px;border-bottom:1px solid #ffffff0e}.sp-person .vm-portrait{width:42px;height:42px;box-shadow:0 0 0 1px #ffffff30}.sp-person>div{flex:1;min-width:0}.sp-person strong,.sp-person span:not(.vm-portrait):not(.sp-signal){display:block}.sp-person strong{font-size:.9375rem;font-weight:550}.sp-person>div>span{font-size:.75rem;color:#a3cac4;margin-top:4px}
.sp-signal{display:flex;align-items:center;gap:3px;height:20px}.sp-signal i{width:3px;height:7px;background:#b2f3e9;border-radius:99px}.sp-signal i:nth-child(2){height:16px}.sp-playing .sp-signal i{animation:sp-wave 1s ease-in-out infinite alternate}.sp-signal i:nth-child(2){animation-delay:.2s}.sp-signal i:nth-child(3){animation-delay:.4s}
.sp-prompt-content{padding:23px;position:relative}.sp-prompt-label{display:block;font-size:.6875rem;letter-spacing:.075em;color:#98cdc5;margin-bottom:12px}
.sp-prompt-content h4{font-size:1.55rem;letter-spacing:-.04em;line-height:1.15;color:#f5fefd;font-weight:550;min-height:1.15em}.sp-prompt-content p{font-size:.9375rem;line-height:1.55;color:#c1e0dc;margin-top:11px;min-height:4.65em}
.sp-prompt-content .demo-button{width:100%;background:#e9fcf9;color:#328579;border-color:#e9fcf9;box-shadow:0 1px 2px #0001;font-size:.8125rem;margin-top:18px;min-height:46px}
.sp-step-dots{display:flex;gap:4px;position:absolute;right:23px;top:26px}.sp-step-dots i{width:13px;height:3px;border-radius:99px;background:#ffffff20;transition:background .3s}.sp-step-dots .is-active{background:#baf7ee}
.sp-plan-island{padding:20px 23px;border:1px solid #ffffff;border-radius:24px;background:#ffffffb8;box-shadow:0 10px 30px #26514b09}
.sp-plan-top{display:flex;align-items:center;gap:6px;font-size:.6875rem;color:#668681;margin-bottom:16px}.sp-plan-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}
.sp-plan-kind{display:block;color:#51a99c;font-size:.75rem;font-weight:500;min-height:1.4em}.sp-plan-island h4{font-size:1.15rem;letter-spacing:-.025em;margin-top:7px;color:#315751;font-weight:600}.sp-plan-island p{font-size:.8125rem;color:#668681;line-height:1.55;margin-top:8px;min-height:4.65em}
.sp-scene[data-mode="2"] .sp-plan-kind{color:#70a8a0}
.sp-plan-group{display:flex;align-items:center;gap:9px;padding-top:15px;border-top:1px solid #e9f5f3;margin-top:16px;font-size:.6875rem;color:#759c97}.sp-group-avatars{display:flex;padding-left:5px;flex-shrink:0}.sp-group-avatars .vm-portrait{width:25px;height:25px;border:2px solid #fff;margin-left:-5px}
.sp-footnote{font-size:.6875rem;text-align:center;color:#668681;margin-top:20px;line-height:1.5}
.demo-shell:has(.sp-scene) .demo-story,.demo-shell:has(.sp-report) .demo-story{display:none}.demo-shell:has(.sp-scene) .demo-toolbar,.demo-shell:has(.sp-report) .demo-toolbar{margin-bottom:18px}
.sp-report{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.5fr);gap:23px;border-radius:27px;padding:25px;background:#f1f9f8;border:1px solid #fff}
.sp-report-summary{padding:8px}.sp-report-person{display:flex;align-items:center;gap:13px;margin:24px 0}.sp-report-person .vm-portrait{width:53px;height:53px}.sp-report-person h3{font-size:1.35rem;letter-spacing:-.04em;line-height:1.2}.sp-report-person p{font-size:.8125rem;color:#668681;margin-top:5px}
.sp-evidence-card{padding:24px;border-radius:22px;background:#fff;border:1px solid #fff;box-shadow:0 10px 30px #26494409;text-align:center}.sp-evidence-card>span{font-size:.6875rem;color:#668681;letter-spacing:.07em}.sp-evidence-model{display:flex;flex-direction:column;align-items:center;gap:11px;width:110px;margin:24px auto;padding:20px;border:1px solid #e3f4f1;border-radius:20px;background:#f8fefd}.sp-evidence-model>div{display:flex;gap:8px}.sp-evidence-card strong{font-size:1rem;display:block;color:#497c74}.sp-evidence-card p{font-size:.8125rem;color:#668681;line-height:1.5;margin-top:8px}.sp-report-summary>.demo-button{margin-top:19px;width:100%;background:transparent;border-color:#dff0ed}
.sp-record-island{background:#fff;padding:30px;border:1px solid #fff;border-radius:27px;box-shadow:0 16px 40px #26494410}.sp-record-heading{padding-bottom:16px}.sp-record-heading h3{font-size:1.75rem;font-weight:600;letter-spacing:-.045em;line-height:1.12;margin-top:12px}
.sp-record-row{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:13px;padding:24px 0;border-bottom:1px solid #edf6f5;animation:sp-record-in .5s var(--demo-ease) both}.sp-record-row:nth-of-type(3){animation-delay:.09s}.sp-record-row:nth-of-type(4){animation-delay:.18s}
.sp-record-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e9f5f0;color:#497a69;font-size:.875rem}.sp-record-icon.is-offered{background:#f1f7f6;color:#668681}.sp-record-row strong{font-size:.875rem;color:#3b625c;font-weight:600}.sp-record-row p{font-size:.75rem;color:#668681;line-height:1.5;margin-top:5px}.sp-status{font-size:.6875rem;border-radius:99px;padding:6px 10px;background:#ebf4f0;color:#467963;white-space:nowrap}.sp-status.offered{background:#f2f7f6;color:#668681}.sp-status.delivered{background:#f1fdfb;color:#64a59b}
.sp-confirm{border:1px solid #e2f0ee;background:#f7fefd;border-radius:99px;font-size:.75rem;color:#55978d;min-height:44px;padding:9px 13px}.sp-confirm:disabled{border-color:transparent;background:#ebf4f0;color:#467963;opacity:1;cursor:default}.sp-record-note{font-size:.75rem;line-height:1.7;color:#668681;margin-top:22px}
/* The main chapter control stays mounted and slides, rather than blinking. */
.demo-modes{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);gap:0;min-width:328px}
.demo-modes:before{content:"";position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:99px;background:white;box-shadow:0 2px 6px #264e4817;transform:translateX(calc(var(--demo-mode,0)*100%));transition:transform .48s cubic-bezier(.22,1,.36,1)}
.demo-modes button,.demo-modes button[aria-pressed=true]{background:transparent;box-shadow:none;padding-inline:13px}
.demo-action-dock{transition:box-shadow .3s}.demo-workspace{transition:none}.demo-workspace>*{animation-duration:.55s}
@keyframes sp-wave{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
@keyframes sp-record-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:960px){.sp-canvas{grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);gap:17px}.sp-scene{padding:19px}.sp-lesson{padding:18px}.sp-person{padding:17px}.sp-prompt-content,.sp-plan-island{padding:20px}.sp-report{gap:16px;padding:20px}.sp-record-island{padding:25px}.sp-record-row{grid-template-columns:28px 1fr;gap:11px}.sp-record-row>.sp-status,.sp-record-row>.sp-confirm{grid-column:2;justify-self:start}.sp-record-row>.sp-record-icon{align-self:start}}
@media(max-width:760px){.sp-canvas{grid-template-columns:1fr;gap:18px}.sp-top{gap:10px}.sp-sample{max-width:100px;font-size:.6875rem}.sp-top h3{font-size:1.5rem}.sp-guidance{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sp-lesson{max-width:590px;width:100%;margin:auto}.sp-question{min-height:0;padding-block:22px 12px}.sp-model{max-width:480px;margin:auto}.sp-person{gap:9px}.sp-person .vm-portrait{width:36px;height:36px}.sp-person>div>span{font-size:.6875rem}.sp-signal{display:none}.sp-prompt-content h4{font-size:1.35rem}.sp-prompt-content p{font-size:.875rem;min-height:4.65em}.sp-plan-group{gap:7px;flex-wrap:wrap}.sp-response,.sp-matching{min-height:100px}.sp-top-copy>.sp-eyebrow{font-size:.65rem}.sp-lesson-chip{font-size:.75rem}.sp-report{grid-template-columns:1fr}.sp-report-summary{padding:4px}.sp-evidence-card{text-align:left;display:grid;grid-template-columns:90px 1fr;column-gap:20px;padding:20px}.sp-evidence-card>span{grid-column:1/-1;margin-bottom:14px}.sp-evidence-model{grid-column:1;grid-row:2/4;margin:0;width:90px;padding:16px}.sp-evidence-card>strong{align-self:end;grid-column:2}.sp-evidence-card>p{grid-column:2}.sp-report-person{margin-block:18px}.sp-report-summary>.demo-button{margin-top:15px}.sp-record-row{grid-template-columns:31px 1fr auto}.sp-record-row>.sp-status,.sp-record-row>.sp-confirm{grid-column:auto;justify-self:auto}}
@media(max-width:560px){.sp-scene{padding:13px;border-radius:22px}.sp-top{align-items:start;margin-bottom:19px}.sp-top h3{font-size:1.4rem;max-width:240px}.sp-top-copy>.sp-eyebrow{font-size:.6rem;letter-spacing:.065em}.sp-sample{display:none}.sp-switcher{flex-direction:column;align-items:stretch;gap:0;margin-bottom:15px;border-radius:27px;top:8px}.sp-modes{width:100%;padding:4px}.sp-modes button{font-size:.75rem;padding-inline:4px}.sp-play{align-self:center;min-height:44px;padding:6px 12px;font-size:.75rem}.sp-lesson{padding:16px 12px;border-radius:24px}.sp-lesson-top{gap:9px;padding-inline:3px;padding-bottom:15px}.sp-lesson-top strong{font-size:.875rem}.sp-lesson-chip{font-size:.65rem;max-width:97px;padding:6px 8px}.sp-question>span{font-size:.75rem}.sp-question h4{font-size:1.6rem}.sp-model-wrap{margin-top:12px;padding-bottom:43px}.sp-model-callout{font-size:.75rem}.sp-total,.sp-matching>p{font-size:.8125rem}.sp-feedback{font-size:.75rem;margin-inline:4px}.sp-guidance{display:flex;gap:15px}.sp-person{padding:16px 20px}.sp-person .vm-portrait{width:40px;height:40px}.sp-person>div>span{font-size:.75rem}.sp-signal{display:flex}.sp-prompt-island{border-radius:25px}.sp-prompt-content{padding:20px}.sp-prompt-content p{min-height:3.1em;font-size:.9375rem;margin-top:9px}.sp-prompt-content h4{font-size:1.5rem}.sp-prompt-content .demo-button{margin-top:15px}.sp-plan-island{padding:19px 20px;border-radius:22px}.sp-plan-island p{min-height:0}.sp-plan-top{margin-bottom:13px}.sp-plan-group{margin-top:15px;padding-top:13px}.sp-footnote{font-size:.65rem;margin-top:17px}.sp-choice{gap:8px;padding:13px 3px 11px}.sp-choice>span:last-child{font-size:.6rem}.sp-choices{gap:6px}.sp-mini-row{gap:4px}.sp-report{padding:13px;border-radius:22px}.sp-record-island{padding:22px 17px;border-radius:23px}.sp-record-heading h3{font-size:1.6rem}.sp-record-row{grid-template-columns:28px 1fr;gap:10px;padding-block:21px}.sp-record-row>.sp-status,.sp-record-row>.sp-confirm{grid-column:2;justify-self:start}.sp-record-note{font-size:.6875rem}.demo-modes{min-width:0;width:100%}.demo-action-dock .demo-button{font-size:.8125rem}.demo-bottom{bottom:12px}.demo-shell:has(.sp-scene) .demo-toolbar,.demo-shell:has(.sp-report) .demo-toolbar{margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){.sp-scene *,.sp-report *,.demo-modes:before{animation:none!important;transition:none!important}}

.demo-shell .demo-toolbar:after{display:none}
.demo-workspace :is(h3,h4):focus{outline:none}
@media(min-width:1001px){.demo-shell .demo-toolbar .demo-sample{display:block}}