.prep-companion{display:flex;gap:28px;align-items:center;border:1px solid #cbd5ca;background:var(--paper);padding:25px 32px;margin:28px 0}.prep-companion>div{flex:1;min-width:0}.prep-companion h2{font-size:23px;margin-bottom:10px}.prep-companion p{font-size:13px;margin-bottom:12px}.prep-companion .eyebrow{margin-bottom:10px}.xiaoyi{margin:0;width:105px;min-width:105px;color:var(--brand);text-align:center}.xiaoyi.large{width:155px;min-width:155px}.xiaoyi svg{display:block;width:100%;height:auto;overflow:visible}.xiaoyi figcaption{font-size:10px;letter-spacing:1px;color:var(--brand)}.agent-coat{fill:currentColor}.agent-face{fill:#efe9d7;stroke:currentColor;stroke-width:2}.agent-lapel{fill:#f9f6ec;opacity:.7}.agent-palette{fill:#ece1c5;stroke:currentColor}.agent-arm,.agent-feet,.agent-brush,.agent-halo,.agent-ear,.agent-brow,.agent-mouth{stroke:currentColor;stroke-width:4;stroke-linecap:round;fill:none}.agent-eyes{fill:currentColor}.agent-mouth{stroke-width:3}.agent-halo{stroke-width:6}.agent-shadow{fill:currentColor;opacity:.1}.agent-thought{fill:currentColor;opacity:0}.agent-body{transform-origin:90px 170px;animation:agent-breathe 5s ease-in-out infinite}.xiaoyi[data-agent-state=speaking] .agent-mouth{animation:agent-speak .45s infinite alternate;transform-origin:90px 85px}.xiaoyi[data-agent-state=thinking] .agent-thought{opacity:1;animation:agent-think 1.8s infinite alternate}.xiaoyi[data-agent-state=thinking] .agent-head{transform:rotate(-5deg);transform-origin:90px 75px}.xiaoyi[data-agent-state=listening] .agent-head{animation:agent-listen 2.5s infinite alternate;transform-origin:90px 75px}.xiaoyi[data-agent-state=pointing] .front{transform:rotate(-22deg);transform-origin:118px 108px}.xiaoyi[data-agent-state=pointing] .agent-brush{transform:rotate(15deg);transform-origin:155px 111px}@keyframes agent-breathe{50%{transform:translateY(-3px)}}@keyframes agent-speak{to{transform:scaleY(1.8)}}@keyframes agent-think{to{opacity:.3}}@keyframes agent-listen{to{transform:rotate(4deg)}}.agent-ribbon{display:flex;gap:22px;align-items:center;background:#e6ece2;border-left:3px solid var(--brand);padding:18px 25px;margin-bottom:24px}.agent-ribbon>div{flex:1;min-width:0}.agent-ribbon p{font-size:12px;margin:8px 0}.agent-ribbon h3{margin:0}.agent-header{display:flex;gap:12px;align-items:center}.agent-header>div{min-width:0}.agent-header h3{font-size:20px;margin-bottom:8px}.agent-header .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:10px}.agent-header small{font-size:10px;line-height:1.8;display:block}.companion-panel{background:var(--paper);border:1px solid #cbd5ca;padding:20px;margin-bottom:24px;text-align:left;min-width:0}.companion-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px;font-size:11px;color:var(--brand)}.companion-top button{font-size:10px;padding:5px 8px}.agent-topic{font-size:11px;color:var(--brand);letter-spacing:1px;margin-top:18px}.agent-conversation{max-height:310px;overflow-y:auto;padding-right:5px;scrollbar-width:thin}.agent-bubble,.user-bubble{font-size:12px;line-height:1.9;padding:13px 14px;background:#edf0e7;margin:12px 0;border-radius:0 10px 10px 10px}.user-bubble{margin-left:28px;background:var(--brand);color:#fff;border-radius:10px 0 10px 10px}.agent-quick{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.agent-quick button{font-size:11px;padding:8px 10px;border-color:#c5d1c3}.companion-panel .field{margin:16px 0}.companion-panel .actions button{font-size:11px;padding:9px}.agent-boundary{font-size:10px;line-height:1.9;display:block;border-top:1px solid var(--line);padding-top:14px;margin:20px 0}.focus-note{font-size:10px;color:var(--brand);line-height:1.8}.agent-lock{font-size:12px;padding:18px;background:#eeeade}.observation-card{padding:15px 0;border-top:1px solid var(--line)}.observation-card strong{font-size:12px}.observation-card p{font-size:12px;margin:10px 0}.observation-card small{font-size:10px;line-height:1.8}.companion-panel details{font-size:11px;line-height:1.8;border-top:1px solid var(--line);padding-top:15px;margin-top:18px}.companion-panel details p{font-size:11px}.companion-panel>button{font-size:11px;margin:7px 0}.art-layout{grid-template-columns:minmax(0,1.9fr) minmax(325px,1fr)}.art-companion-column{min-width:0}.art-companion-column .art-details{padding:8px 10px}.art-companion-column .art-details h2{font-size:20px}.marker.companion-mark{width:30px;height:30px;line-height:26px;background:#ffe9a030;border:2px solid #ffdc7d;color:white;box-shadow:0 0 0 4px #ffdd7025}.narration-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:28px}.narration-stage{background:#303831;color:#fff;border-radius:3px;overflow:hidden;margin-bottom:24px;text-align:left}.stage-label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;font-size:12px;border-bottom:1px solid #ffffff20}.stage-art{height:450px;display:flex;align-items:center;justify-content:center;padding:20px}.stage-image-plane{position:relative;max-height:100%;margin:auto}.stage-image-plane img{display:block;width:100%;height:100%;object-fit:contain}.stage-image-plane #stage-highlight{position:absolute;transform:translate(-50%,-50%);width:60px;height:60px;border:2px solid #f7dfa5;background:#fbe49c18;border-radius:50%;box-shadow:0 0 0 9px #fbe49c15;pointer-events:none}.stage-bottom{display:flex;gap:16px;align-items:center;background:#222b24;min-height:140px;padding:12px 25px}.stage-bottom>div:last-child{flex:1;min-width:0}.stage-bottom .xiaoyi{color:#d2dfb8;width:95px;min-width:95px}.stage-bottom figcaption{color:#d2dfb8}.stage-bottom p{font-size:17px;line-height:1.9;margin:0 0 12px}.stage-bottom small{font-size:10px;color:#c0cabc}.stage-controls{display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px;background:#27342b}.stage-controls button{font-size:11px;background:#eef0e4}.stage-controls button:disabled{opacity:.45}.narration-controls>h2{font-size:23px}.narration-controls .paper{padding:20px}.class-interaction{padding:22px;background:var(--paper);border:1px solid var(--line);margin:24px 0;text-align:left}.class-answer{border-top:1px solid var(--line);padding:15px 0}.class-answer p{font-size:13px;margin-bottom:10px}.class-answer small{font-size:10px;display:block;margin-bottom:10px}.class-answer button{font-size:11px}.project-agent-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin:20px 0;text-align:left}.project-agent-controls .field{min-width:240px;margin:0}.project-answers{text-align:left;background:var(--paper);padding:25px;margin:25px 0}.projector .narration-stage .stage-art{height:520px}.projector .stage-bottom p{font-size:24px}.teacher-agent-gate{font-size:11px}.reflection-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.reflection-comparison figure{margin:0;background:#e5e5dc;padding:10px}.reflection-comparison img{width:100%;height:240px;object-fit:contain}.reflection-comparison figcaption{font-size:10px;text-align:center;margin-top:10px}.reflection-comparison .generated-visual{height:100%;min-height:280px}.reflection-records article{border-top:1px solid var(--line);padding:15px 0}.reflection-records small{font-size:10px}.reflection-records button{font-size:11px;margin-top:10px}.approved-reflection{font-size:12px;border-left:2px solid var(--brand);padding-left:12px}.creative-companion{align-items:flex-start}.creative-companion .field{margin:14px 0}.creative-companion>div>p{font-size:12px}.agent-permission{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px}.agent-permission button{font-size:11px}.narration-controls textarea{min-height:230px}.companion-panel .callout{font-size:11px;padding:12px}.art-companion-column .art-details{display:block}
@media(min-width:1700px){.art-layout{grid-template-columns:minmax(0,2fr) minmax(370px,1fr)}.stage-art{height:500px}.prep-companion h2{font-size:27px}}
@media(max-width:1100px){.art-layout,.narration-layout{grid-template-columns:1fr}.art-companion-column .art-details{display:block}.companion-panel{max-width:none}.stage-art{height:400px}.agent-conversation{max-height:250px}}
@media(max-width:700px){.prep-companion{padding:20px 16px;gap:12px;align-items:flex-start}.prep-companion>.xiaoyi{width:75px;min-width:75px}.prep-companion h2{font-size:19px}.prep-companion p{font-size:11px}.prep-companion .actions button{font-size:11px;padding:8px}.prep-companion small{font-size:10px}.agent-ribbon{gap:12px;padding:15px}.agent-ribbon>.xiaoyi{width:65px;min-width:65px}.agent-ribbon h3{font-size:15px}.agent-ribbon button{font-size:10px}.stage-art{height:330px;padding:15px}.stage-image-plane{width:auto!important;max-width:100%;height:auto;max-height:300px}.stage-bottom{padding:12px;gap:10px}.stage-bottom .xiaoyi{width:65px;min-width:65px}.stage-bottom p{font-size:14px}.stage-label{padding:12px;font-size:11px}.stage-controls{padding:12px}.projector .stage-bottom p{font-size:16px}.projector .narration-stage .stage-art{height:330px}.reflection-comparison{grid-template-columns:1fr}.reflection-comparison .generated-visual{min-height:180px}.reflection-comparison img{height:180px}.companion-panel{padding:18px}.companion-panel .agent-header .xiaoyi{width:85px;min-width:85px}.project-agent-controls .field{min-width:100%;width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.agent-body,.agent-head,.agent-mouth{transform:none!important}}