/* Scoped to the classroom so the workbench and editor keep their own layout. */
.learning{--learn-accent:#b74735;--learn-tint:#f6e4dc;color:#263c3c;font:16px/1.65 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;box-sizing:border-box}.learning *{box-sizing:border-box}.learning [hidden]{display:none!important}.learning[data-color=blue]{--learn-accent:#346e91;--learn-tint:#e1edf5}.learning[data-color=green]{--learn-accent:#247466;--learn-tint:#dfede7}.learning[data-color=ink]{--learn-accent:#63557c;--learn-tint:#e9e3f2}.learning button{font:inherit;min-height:42px;border:1px solid #d5d9d2;border-radius:9px;padding:8px 15px;background:transparent;color:inherit;cursor:pointer;width:auto;white-space:normal;line-height:1.4}.learning button:disabled{opacity:.4;cursor:default}.learning button:hover:not(:disabled){background:var(--learn-tint)}.learning button:focus-visible,.learning a:focus-visible{outline:3px solid var(--learn-accent);outline-offset:4px}.learning .learn-primary{background:var(--learn-accent);border-color:var(--learn-accent);color:#fff}.learning .learn-primary:hover:not(:disabled){background:var(--learn-accent);filter:brightness(.9)}.learning p{margin:0 0 16px}.learning h2{margin:14px 0 22px;font-size:clamp(28px,3.1vw,48px);line-height:1.4;letter-spacing:-.025em;font-weight:650}.learning h3{font-size:23px;line-height:1.5;margin:0 0 18px}.learning .learn-eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--learn-accent);font-size:12px;font-weight:650;margin:0}.learning-open{overflow:hidden}.learning-stage{position:fixed;inset:0;z-index:1000;overflow:auto;background:#f6f5ef}.learning-stage:fullscreen{width:100%;height:100%}.learn-header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 36px;border-bottom:1px solid #dddfd7}.learn-brand{display:flex;align-items:center;gap:14px;font-weight:650;font-size:21px}.learn-brand>span{color:var(--learn-accent);font-size:43px;line-height:1}.learn-brand small{display:block;font-weight:400;font-size:11px;letter-spacing:.18em;color:#78847c}.learn-tools{display:flex;align-items:center;gap:12px}.learn-tools>span{font-size:11px;color:#677c71}.learn-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;min-height:calc(100dvh - 92px);padding:26px 36px;gap:30px}.learn-main{min-width:0;display:flex;flex-direction:column}#learn-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-bottom:1px solid #d9ded4;padding-bottom:22px}#learn-topics button{border:0;text-align:left;padding:12px;font-size:15px}#learn-topics small{margin-right:9px;opacity:.55;font-size:11px}#learn-topics [aria-pressed=true]{background:var(--learn-tint);color:var(--learn-accent)}.learn-content{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,.85fr);align-items:center;gap:24px;flex:1;min-height:400px;padding:40px 8px}.learn-lead{font-size:18px;color:#5b6c65;line-height:1.85}.learn-story ul{padding-left:20px;color:#526a60;font-size:15px;line-height:1.9;margin:20px 0 26px}.learn-story li{padding-left:5px;margin-bottom:12px}.learn-thought{font-size:14px;border-left:3px solid var(--learn-accent);padding:10px 18px;background:#eeefe6;border-radius:0 9px 9px 0}.learn-thought span{display:block;font-size:11px;letter-spacing:.12em;color:var(--learn-accent);margin-bottom:6px}.learn-illustration{margin:0;color:var(--learn-accent);text-align:center}.learn-illustration svg{width:100%;height:auto;max-height:400px}.learn-illustration figcaption{font-size:11px;letter-spacing:.18em;opacity:.7;margin-top:20px}.learn-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d9ded4;padding-top:20px}.learn-footer>span{font-size:12px;color:#697c71}.learn-footer>div{display:flex;flex-wrap:wrap;gap:8px}.learn-footer button{font-size:13px}.learn-side{display:flex;flex-direction:column;gap:20px}.learn-live{padding:24px;border-radius:18px;background:#203e3c;color:#fff}.learn-live>span{font-size:11px;letter-spacing:.12em;color:#a4d8c2}.learn-live strong{display:block;font-size:19px;margin:12px 0 6px}.learn-live #learn-job-name{font-size:12px;opacity:.6;word-break:break-all}.learn-live .learn-percent{font-size:52px;line-height:1.25;font-weight:300;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.learning progress{display:block;width:100%;height:5px;border:0;border-radius:5px;overflow:hidden;appearance:none;background:#56736b;margin:16px 0}.learning progress::-webkit-progress-bar{background:#56736b}.learning progress::-webkit-progress-value{background:#b5dec4}.learning progress::-moz-progress-bar{background:#b5dec4}.learn-live #learn-job-detail{font-size:11px;opacity:.7;margin-bottom:20px}.learn-live #learn-job-error{font-size:12px;color:#ffe1b5}.learn-job-buttons{display:flex;flex-wrap:wrap;gap:8px}.learn-job-buttons button{border-color:#638078;color:#e3ece3;font-size:12px;flex:1}.learn-job-buttons #learn-stop{color:#ffdbcf;border-color:#b98b7a}.learn-job-buttons button:hover:not(:disabled){background:#375b53}.learn-join{border:1px solid #dbdfd4;padding:22px;border-radius:18px;background:#fffef8}.learn-join h3{margin-top:10px;font-size:19px}.learn-join a{display:block;width:136px;margin:20px auto}.learn-join img{display:block;width:136px;height:136px}.learn-join #learn-join-note{font-size:12px;line-height:1.8;color:#667c70;margin-bottom:6px}.learn-join strong{font-size:12px;color:var(--learn-accent)}.learn-footnote{font-size:10px;color:#758579;text-align:center;margin-top:auto!important}#learn-close-session{font-size:12px;color:#748178;border:0}.learn-question{grid-column:1/-1;width:100%;max-width:850px;margin:auto}.learn-question h2{font-size:clamp(25px,2.7vw,39px)}.learn-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.learning .learn-option{padding:20px;border:1px solid #cfd6cb;border-radius:12px;display:flex;align-items:center;gap:14px;min-height:90px;text-align:left;background:#fffef9;font-size:17px;color:#2f4940;position:relative}.learn-letter{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:8px;background:#e9ede4;font-size:15px;font-weight:650}.learn-option small{margin-left:auto;white-space:nowrap;font-size:13px}.learning .learn-option.correct{border:2px solid #3f8063;background:#e4f0e3}.learn-option.correct .learn-letter{background:#35704f;color:#fff}.learning .learn-option.chosen{box-shadow:inset 0 0 0 2px var(--learn-accent)}.learning .learn-option:disabled{opacity:1}.learn-feedback{min-height:86px;color:#526d5e;font-size:15px}.learn-feedback strong{color:var(--learn-accent);font-size:18px}.learn-feedback p{margin-top:10px}.learn-error{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#fff1dc;border:1px solid #d3ac76;border-radius:10px;padding:14px 22px;box-shadow:0 6px 30px #243a361a;max-width:90vw;font-size:13px;z-index:2}.learning-setting{font-size:10px;color:#6b8179;display:flex;align-items:center;gap:5px}.learning-setting input{margin:0}.learn-pulse{animation:learn-glow 2s infinite}.learn-route{stroke-dasharray:7 5;animation:learn-dash 8s linear infinite}@keyframes learn-dash{to{stroke-dashoffset:-96}}@keyframes learn-glow{50%{opacity:.3}}
/* Phone classroom remains in the existing page and keeps its session cookie. */
#mobile-learning{scroll-margin-top:12px;background:#faf9f2;border:1px solid #d8dcd0;padding:22px 18px;border-radius:18px;margin:20px 0}#mobile-learning .learn-mobile-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}#mobile-learning .learn-mobile-heading h2{font-size:23px;margin:4px 0 0}#mobile-learn-connection{font-size:11px;color:#5c7869;white-space:nowrap}#mobile-learning h2{font-size:25px;margin:12px 0 18px}#mobile-learning .learn-lead{font-size:15px}#mobile-learning .learn-story ul{font-size:14px}#mobile-learning .learn-mobile-topic{font-size:12px;color:var(--learn-accent)}#mobile-learning .learn-mobile-lesson{display:flex;flex-direction:column}#mobile-learning .learn-illustration{max-width:250px;align-self:center}#mobile-learning .learn-illustration figcaption{margin-top:0}#mobile-learning .learn-options{grid-template-columns:1fr;gap:10px;margin:20px 0}#mobile-learning .learn-option{width:100%;padding:15px;min-height:64px;font-size:16px}#mobile-learning .learn-wait{font-size:12px;text-align:center;color:#728270;margin:20px 0 0}#mobile-learn-error{font-size:13px;color:#9e492e}#learning-jump{margin-top:10px;background:#ede7d9;color:#4e5f50}
@media(min-width:1550px){.learn-layout{padding:36px 5vw;gap:48px;grid-template-columns:minmax(0,1fr) 320px}.learn-content{gap:46px}.learn-story li{font-size:18px}.learn-lead{font-size:21px}}
@media(max-width:1050px){.learn-layout{grid-template-columns:minmax(0,1fr) 240px;padding:20px;gap:20px}.learn-header{padding:18px 22px}.learn-content{grid-template-columns:1fr;gap:12px;padding:28px 0}.learn-illustration{max-width:280px;margin:auto}.learn-content h2{font-size:30px}.learn-footer{align-items:start;flex-direction:column}.learn-tools>span{display:none}#learn-topics{gap:0}#learn-topics button{font-size:12px;padding:10px 5px}#learn-topics small{margin-right:4px}.learn-live{padding:20px}}
@media(max-width:700px){.learn-header{height:auto;align-items:start;padding:15px;gap:8px}.learn-brand{font-size:16px}.learn-brand>span{font-size:30px}.learn-tools{gap:6px;flex-wrap:wrap;justify-content:end}.learn-tools button{font-size:11px;padding:7px;min-height:36px}.learn-layout{display:flex;flex-direction:column;padding:15px}.learn-content{min-height:0}.learn-side{display:grid;grid-template-columns:1fr;gap:12px}.learn-options{grid-template-columns:1fr}.learn-footer>div{width:100%}.learn-footer button{flex:1}.learn-live .learn-percent{font-size:40px}.learn-join{display:none}.learn-illustration{max-width:220px}.learning .learn-option{font-size:15px;padding:15px}}
@media(prefers-reduced-motion:reduce){.learn-pulse,.learn-route{animation:none}}
/* Audience display: no controls, keyboard input or pointer interaction required. */
.audience-screen{margin:0;background:#f6f5ef;min-height:100dvh}.audience-screen>main{margin:0;padding:0;max-width:none}.display-status{display:flex;gap:24px;align-items:center;color:#6b8075;font-size:12px}.display-status #display-clock{font-size:17px;font-variant-numeric:tabular-nums}.display-welcome{position:relative;min-height:calc(100dvh - 92px);padding:7vh 6vw 55px;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr auto;column-gap:5vw;align-items:center;overflow:hidden}.welcome-copy{grid-area:1/1}.welcome-copy h1{font-size:clamp(42px,5.8vw,88px);line-height:1.22;letter-spacing:-.05em;margin:24px 0 25px;font-weight:650}.welcome-copy h1 span{color:var(--learn-accent)}.learning .welcome-lead{color:#738176;font-size:clamp(16px,1.5vw,23px);line-height:1.9}.welcome-steps{list-style:none;display:flex;gap:28px;padding:0;margin:40px 0}.welcome-steps li{display:flex;align-items:start;gap:12px}.welcome-steps b{font-size:13px;color:var(--learn-accent);padding-top:3px}.welcome-steps span{font-size:16px;font-weight:600}.welcome-steps small{display:block;font-size:11px;font-weight:400;color:#79887b;margin-top:7px}.welcome-art{grid-area:1/2;align-self:center;padding:0 2vw;position:relative}.welcome-art:before{content:'';position:absolute;inset:12%;border-radius:50%;background:#f0e6d8;filter:blur(40px)}.welcome-art svg{position:relative;width:100%;color:var(--learn-accent);transform:rotate(-7deg);animation:welcome-breathe 12s ease-in-out infinite}.welcome-scan{grid-area:2/1/3/3;display:flex;gap:28px;align-items:center;padding:22px 30px;background:#fffcf4;border:1px solid #e1dfd2;border-radius:18px;width:fit-content;min-width:530px;margin-top:8px}.welcome-scan img{width:140px;height:140px}.learning .welcome-scan h2{font-size:28px;margin:8px 0 6px}.welcome-scan p:last-child{font-size:14px;color:#738176;margin:0}.welcome-bottom{position:absolute;right:6vw;bottom:40px;font-size:11px;color:#8a9287;letter-spacing:.12em}.audience-screen .learn-layout{grid-template-columns:minmax(0,1fr) 286px;padding:24px 32px;gap:30px;height:calc(100dvh - 92px);min-height:640px}.audience-screen .learn-content{padding:25px 0;min-height:0}.audience-screen .learn-side{gap:14px;min-height:0}.audience-screen .learn-live{padding:20px 22px}.audience-screen .learn-live strong{font-size:17px}.audience-screen .learn-live p{margin-bottom:8px;font-size:12px}.audience-screen .learn-percent{font-size:43px}.audience-screen .learn-join{padding:17px 20px;display:grid;grid-template-columns:1fr 100px;column-gap:8px}.audience-screen .learn-join .learn-eyebrow{grid-area:1/1;font-size:10px;letter-spacing:.06em}.audience-screen .learn-join h3{grid-area:2/1;font-size:18px;margin:2px 0 8px}.audience-screen .learn-join img{grid-area:1/2/4/3;width:100px;height:100px;align-self:center}.audience-screen .learn-join p:last-child{grid-area:3/1;font-size:10px;line-height:1.7;color:#7c877b;margin:0}.display-participants{padding:4px 2px;min-height:0;flex:1}.participants-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}.learning .participants-heading h3{font-size:13px;margin:0}.participants-heading>span{font-size:10px;color:#7a887b}.participant{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e1e4db;padding:9px 0}.participant img{border-radius:8px;flex-shrink:0;background:#fff}.participant>div{flex:1;min-width:0}.participant strong{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participant small{font-size:10px;color:#8b9689;display:block}.participant>span{font-size:12px;color:#a47055;font-variant-numeric:tabular-nums}.participant b{color:#347b5b}.learning .participants-note{font-size:10px;color:#889584;margin:10px 0 0}.participants-empty{padding:16px 8px;border:1px dashed #d6dccf;border-radius:10px;color:#899481;font-size:12px;text-align:center;line-height:1.9}.audience-screen .learn-footer{font-size:12px;padding-top:17px}.audience-screen .learn-footer>span:last-child{color:var(--learn-accent);white-space:nowrap}#display-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-bottom:1px solid #d9ded4;padding-bottom:19px}#display-topics>span{padding:12px 10px;font-size:14px;color:#788578;border-radius:10px}#display-topics small{font-size:10px;margin-right:9px;opacity:.6}#display-topics .current{background:var(--learn-tint);color:var(--learn-accent)}
/* Phone popup shows questions only; no lecture content is sent to the phone. */
.learning-popup{width:min(94vw,520px);max-width:520px;max-height:92dvh;overflow:auto;border:1px solid #d4dbce;border-radius:20px;padding:20px;background:#faf9f2;color:#263c3c}.learning-popup::backdrop{background:#132f2bcc;backdrop-filter:blur(3px)}.learning-popup .answer-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.answer-toolbar>span{font-size:12px;color:#8a633e}.learning-popup #answer-dismiss{border:0;font-size:12px;padding:6px 10px;min-height:32px;color:#778271}.learning-popup h2{font-size:24px;line-height:1.55;margin:10px 0 20px}.learning-popup .learn-options{grid-template-columns:1fr;gap:10px;margin:20px 0}.learning-popup .learn-option{width:100%;padding:13px;min-height:58px;font-size:15px}.learning-popup .learn-eyebrow{font-size:10px}.learning-popup .learn-feedback{font-size:13px;min-height:0}.learning-popup .learn-feedback strong{font-size:17px}.learning-popup .learn-letter{width:30px;height:30px}.learning-popup #mobile-learn-error{color:#a94d32;font-size:12px}.design-entry-button{display:block;text-align:center;text-decoration:none;color:#fff;background:#176659;border-radius:10px;padding:14px;font-weight:600;font-size:14px}#mobile-learning #mobile-learn-wait{font-size:14px;color:#73806d;margin-bottom:0}#mobile-answer-open{width:100%;margin-top:16px}.classroom-settings form{padding:10px 12px;display:grid;gap:9px}.classroom-settings label{font-size:11px;display:flex;align-items:center;gap:8px}.classroom-settings input{width:64px;margin-left:auto}.classroom-settings form>div{display:flex;gap:8px}.classroom-settings p{font-size:10px;color:#7e8b7b;margin:0}.classroom-settings button{font-size:11px}
@keyframes welcome-breathe{50%{transform:rotate(-3deg) scale(1.025)}}
@media(max-height:850px) and (min-width:1051px){.audience-screen .learn-layout{padding:18px 30px;gap:25px;min-height:580px}.audience-screen .learn-live{padding:14px 18px}.audience-screen .learn-live strong{margin:8px 0 4px}.audience-screen .learn-percent{font-size:35px}.audience-screen progress{margin:10px 0}.audience-screen .learn-join{padding:12px 15px}.audience-screen .participant{padding:6px 0}.audience-screen .learn-content h2{font-size:32px}.audience-screen .learn-story ul{font-size:14px;margin:18px 0}.audience-screen .learn-lead{font-size:16px}.welcome-copy h1{font-size:65px}.welcome-steps{margin:24px 0}.welcome-scan{padding:15px 24px}.welcome-scan img{width:115px;height:115px}.display-welcome{padding-top:35px}}
@media(max-width:1050px){.display-welcome{padding:35px 30px 65px;grid-template-columns:1fr .8fr}.welcome-steps{flex-direction:column;gap:15px}.welcome-bottom{font-size:9px;bottom:20px}.welcome-scan{min-width:0}.audience-screen .learn-layout{height:auto;min-height:calc(100dvh - 92px);grid-template-columns:minmax(0,1fr) 245px}.audience-screen .learn-join{grid-template-columns:1fr 85px}.audience-screen .learn-join img{width:85px;height:85px}.audience-screen .learn-footer{gap:8px}#display-topics>span{font-size:12px;padding:9px 5px}#display-topics small{margin-right:4px}}
@media(max-width:700px){.welcome-copy h1{font-size:43px}.display-welcome{display:block;padding:30px 20px 55px}.welcome-art{display:none}.welcome-scan{gap:15px;padding:16px}.welcome-scan img{width:110px;height:110px}.learning .welcome-scan h2{font-size:22px}.welcome-steps{margin:25px 0}.audience-screen .learn-layout{display:flex;height:auto}.audience-screen .learn-join{display:grid}.display-status{gap:10px;font-size:10px}.display-status #display-clock{font-size:12px}}
@media(prefers-reduced-motion:reduce){.welcome-art svg{animation:none}}

/* Welcome paper-cut QR and character occupy separate columns; no overlap. */
.welcome-art{display:grid;grid-template-columns:minmax(100px,.55fr) minmax(0,1fr);gap:clamp(32px,3.5vw,56px);align-items:center;padding:0;overflow:visible}
.display-welcome{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:3vw}
.welcome-window{min-width:0;position:relative;transform:none;animation:none}
.welcome-window img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 12px #8c24251a)}
.welcome-window img[hidden]{display:none}
.welcome-niulai{position:relative;display:block;width:100%;height:auto;align-self:center;margin:0;transform-origin:50% 85%;animation:niulai-sway 5s ease-in-out infinite}
.welcome-scan{min-width:0;gap:0;padding:18px 28px;margin-top:18px}
@media(max-width:1050px){.display-welcome{grid-template-columns:1fr 1.2fr}.welcome-art{gap:32px;grid-template-columns:minmax(80px,.52fr) minmax(0,1fr)}}
@media(max-width:700px){.welcome-art{display:grid;max-width:560px;margin:25px auto;gap:32px}.welcome-copy h1{font-size:40px}.welcome-scan{margin:18px 0}.welcome-niulai{margin:0}}
@keyframes niulai-sway{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.welcome-art:before{content:none}
@media(prefers-reduced-motion:reduce){.welcome-window,.welcome-niulai{animation:none;transform:none}}
