/* Keep both preparation studios inside the actual browser viewport. */
@media screen{
 #assistantView:has(#assistantLessonDesignPanel:not([hidden])),
 #assistantView:has(#assistantWorksheetPanel:not([hidden])){height:100dvh!important;min-height:0!important;overflow:hidden!important}
 #assistantView .assistant-page:has(#assistantLessonDesignPanel:not([hidden])),
 #assistantView .assistant-page:has(#assistantWorksheetPanel:not([hidden])){flex:1!important;min-height:0!important;height:auto!important;margin:0 auto;padding:12px 20px!important;display:flex!important;flex-direction:column}
 #assistantView .assistant-main:has(#assistantLessonDesignPanel:not([hidden])),
 #assistantView .assistant-main:has(#assistantWorksheetPanel:not([hidden])){flex:1!important;min-height:0!important;height:100%!important;display:flex!important;overflow:hidden!important}
 #assistantView .assistant-mode-stage:has(#assistantLessonDesignPanel:not([hidden])),
 #assistantView .assistant-mode-stage:has(#assistantWorksheetPanel:not([hidden])){flex:1;min-height:0!important;height:100%!important}
 #assistantView #assistantLessonDesignPanel,#assistantView #assistantWorksheetPanel{height:100%!important;min-height:0!important}
 #assistantView .assistant-lesson-design-shell,#assistantView .assistant-worksheet-shell{height:100%;min-height:0;overflow:hidden}
 body.studio-lesson .app-main,body.studio-worksheet .main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:0;overflow:hidden}
 body.studio-lesson .app-main>header,body.studio-worksheet .main>.topbar{grid-row:1}
 body.studio-lesson #chat,body.studio-worksheet .scroll-area{grid-row:2;min-height:0}
 body.studio-lesson #composer,body.studio-worksheet .composer-wrap{grid-row:3;min-width:0}
 body.studio-lesson #chat:has(#welcome:not([hidden])),body.studio-worksheet .scroll-area:has(#welcome:not([hidden])){padding:16px 24px;container-type:size;container-name:studio-welcome}
 body.studio-lesson #chat>.inner:has(#welcome:not([hidden])),body.studio-worksheet .conversation:has(#welcome:not([hidden])){height:100%;min-height:0;box-sizing:border-box;padding:0;margin:0 auto;max-width:1120px}
 body.has-tool-history #welcome:not([hidden]){height:100%;min-height:0;box-sizing:border-box;padding:0;display:grid;grid-template-rows:minmax(min-content,1fr) auto auto auto;gap:12px}
 body.has-tool-history #welcome .welcome-hero{min-height:0;margin:0;padding:22px 28px;gap:24px;grid-template-columns:minmax(0,1fr) 190px;align-items:center}
 body.has-tool-history #welcome .hero-copy h2{font-size:clamp(27px,3.5dvh,38px);line-height:1.2;margin:12px 0 10px}
 body.has-tool-history #welcome .hero-copy>p{font-size:12px;line-height:1.75;margin:0;max-width:550px}
 body.has-tool-history #welcome .hero-tags{margin-top:13px;gap:6px}
 body.has-tool-history #welcome .hero-tags span{font-size:9px;padding:5px 7px}
 body.has-tool-history #welcome .upload-main{margin-top:13px;padding:9px 14px;min-height:37px;font-size:12px}
 body.has-tool-history #welcome .format-hint{margin-top:8px;font-size:9px}
 body.has-tool-history #welcome .doc-visual,body.has-tool-history #welcome .lesson-preview{min-height:0;padding:14px 16px;max-width:100%;transform:rotate(2deg)}
 body.has-tool-history #welcome .doc-title,body.has-tool-history #welcome .preview-title{font-size:21px;line-height:1.15;margin-top:9px}
 body.has-tool-history #welcome .doc-top,body.has-tool-history #welcome .preview-top{font-size:7px;padding-bottom:7px}
 body.has-tool-history #welcome .doc-mini-title{margin-top:12px}
 body.has-tool-history #welcome .doc-bottom{margin-top:13px;padding-top:8px}
 body.has-tool-history #welcome .preview-sub{margin-bottom:9px}
 body.has-tool-history #welcome .preview-table{margin:9px 0}
 body.has-tool-history #welcome .preview-table span{height:17px;padding:4px}
 body.has-tool-history #welcome .preview-table span:nth-child(-n+3){height:15px}
 body.has-tool-history #welcome .section-heading,body.has-tool-history #welcome .welcome-caption{margin:0;min-width:0}
 body.has-tool-history #welcome .section-heading h3,body.has-tool-history #welcome .welcome-caption h3{margin:0;font-size:13px;line-height:1.5}
 body.has-tool-history #welcome .guide-grid,body.has-tool-history #welcome .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
 body.has-tool-history #welcome .guide-card,body.has-tool-history #welcome .feature{padding:14px 15px;min-width:0}
 body.has-tool-history #welcome .guide-top{margin:0}
 body.has-tool-history #welcome .guide-icon,body.has-tool-history #welcome .feature-icon{width:28px;height:28px;border-radius:9px}
 body.has-tool-history #welcome .guide-icon svg,body.has-tool-history #welcome .feature-icon svg{width:16px;height:16px}
 body.has-tool-history #welcome .guide-step,body.has-tool-history #welcome .feature-num{font-size:13px}
 body.has-tool-history #welcome .guide-card h4,body.has-tool-history #welcome .feature h4{font-size:12px;line-height:1.5;margin:8px 0 5px}
 body.has-tool-history #welcome .guide-card p,body.has-tool-history #welcome .feature p{font-size:11px;line-height:1.65;margin:0}
 body.has-tool-history #welcome .guide-detail,body.has-tool-history #welcome .paste{font-size:10px;line-height:1.5;margin-top:7px}
 body.has-tool-history #welcome .welcome-note,body.has-tool-history #welcome .welcome-bottom{margin:0;font-size:9px;line-height:1.5;min-width:0}
 body.studio-lesson #composer,body.studio-worksheet .composer-wrap{padding:0 24px max(7px,env(safe-area-inset-bottom));background:transparent}
 body.has-tool-history .composer-box{padding:11px 14px;border-radius:17px}
 body.studio-lesson .composer-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center}
 body.studio-lesson #input{grid-column:1;grid-row:1;height:36px;min-height:36px;max-height:140px}
 body.studio-lesson .composer-bottom{display:contents}
 body.studio-lesson .input-help{grid-column:2;grid-row:1}
 body.studio-lesson .hint{grid-column:1/-1;grid-row:2;font-size:9px}
 body.has-tool-history .composer-foot{font-size:9px;line-height:1.5;margin:7px 0 0}
}
@container studio-welcome (max-width:800px){
 body.has-tool-history #welcome .welcome-hero{grid-template-columns:1fr}
 body.has-tool-history #welcome .doc-visual,body.has-tool-history #welcome .lesson-preview{display:none}
}
@container studio-welcome (max-height:510px){
 body.has-tool-history #welcome{gap:9px}
 body.has-tool-history #welcome .welcome-hero{padding:18px 22px;grid-template-columns:1fr}
 body.has-tool-history #welcome .doc-visual,body.has-tool-history #welcome .lesson-preview{display:none}
 body.has-tool-history #welcome .hero-copy h2{font-size:27px;line-height:1.2;margin:9px 0}
 body.has-tool-history #welcome .hero-copy h2 br{display:none}
 body.has-tool-history #welcome .hero-copy>p{font-size:11px;line-height:1.6;max-width:none}
 body.has-tool-history #welcome .hero-copy>p br{display:none}
 body.has-tool-history #welcome .hero-tags{margin-top:9px}
 body.has-tool-history #welcome .upload-main{margin-top:10px;padding:7px 12px;min-height:32px}
 body.has-tool-history #welcome .format-hint{margin-top:6px;font-size:8px}
 body.has-tool-history #welcome .eyebrow,body.has-tool-history #welcome .hero-kicker{font-size:8px;letter-spacing:.09em}
 body.has-tool-history #welcome .guide-card,body.has-tool-history #welcome .feature{padding:11px 12px}
 body.has-tool-history #welcome .guide-icon,body.has-tool-history #welcome .feature-icon{width:24px;height:24px}
 body.has-tool-history #welcome .guide-card h4,body.has-tool-history #welcome .feature h4{margin:6px 0 4px}
 body.has-tool-history #welcome .guide-card p,body.has-tool-history #welcome .feature p{font-size:10px;line-height:1.6}
}
@media screen and (max-width:640px){
 #assistantView .assistant-page:has(#assistantLessonDesignPanel:not([hidden])),#assistantView .assistant-page:has(#assistantWorksheetPanel:not([hidden])){padding:6px!important}
 body.studio-lesson #chat:has(#welcome:not([hidden])),body.studio-worksheet .scroll-area:has(#welcome:not([hidden])){padding:10px 12px}
 body.studio-lesson #composer,body.studio-worksheet .composer-wrap{padding:0 12px max(6px,env(safe-area-inset-bottom))}
 body.has-tool-history #welcome{gap:9px}
 body.has-tool-history #welcome .welcome-hero{padding:16px 18px;grid-template-columns:1fr;border-radius:17px}
 body.has-tool-history #welcome .doc-visual,body.has-tool-history #welcome .lesson-preview{display:none}
 body.has-tool-history #welcome .hero-copy h2{font-size:25px;margin:8px 0}
 body.has-tool-history #welcome .hero-copy h2 br{display:none}
 body.has-tool-history #welcome .hero-copy>p{font-size:11px;line-height:1.6}
 body.has-tool-history #welcome .hero-copy>p br{display:none}
 body.has-tool-history #welcome .hero-kicker,body.has-tool-history #welcome .eyebrow{font-size:7px;letter-spacing:.04em}
 body.has-tool-history #welcome .guide-grid,body.has-tool-history #welcome .feature-grid{grid-template-columns:1fr;gap:7px}
 body.has-tool-history #welcome .guide-card,body.has-tool-history #welcome .feature{display:grid;grid-template-columns:25px minmax(0,1fr);gap:0 10px;padding:10px 12px;position:relative}
 body.has-tool-history #welcome .guide-top,body.has-tool-history #welcome .feature-top{display:contents}
 body.has-tool-history #welcome .guide-icon,body.has-tool-history #welcome .feature-icon{grid-column:1;grid-row:1/4;width:25px;height:25px;align-self:start}
 body.has-tool-history #welcome .guide-step,body.has-tool-history #welcome .feature-num{position:absolute;right:12px;top:11px;font-size:11px}
 body.has-tool-history #welcome .guide-card h4,body.has-tool-history #welcome .feature h4{grid-column:2;margin:0 24px 3px 0;font-size:11px}
 body.has-tool-history #welcome .guide-card p,body.has-tool-history #welcome .feature p{grid-column:2;font-size:10px;line-height:1.5}
 body.has-tool-history #welcome .guide-card p br,body.has-tool-history #welcome .feature p br{display:none}
 body.has-tool-history #welcome .guide-detail,body.has-tool-history #welcome .paste{grid-column:2;font-size:9px;margin-top:4px}
 body.has-tool-history #welcome .section-heading h3,body.has-tool-history #welcome .welcome-caption h3{font-size:12px}
 body.has-tool-history #welcome .welcome-note,body.has-tool-history #welcome .welcome-bottom{font-size:8px}
 body.has-tool-history .composer-box textarea,body.studio-lesson #input{font-size:16px}
 body.has-tool-history .composer-box{padding:10px 12px}
 body.studio-lesson #input{height:32px;min-height:32px}
}

@media screen{
 body.studio-lesson #input:placeholder-shown{height:36px!important;min-height:36px}
}
@container studio-welcome (min-height:450px) and (min-width:641px){
 body.has-tool-history #welcome .hero-copy>p{font-size:14px}
 body.has-tool-history #welcome .hero-tags span{font-size:10px}
 body.has-tool-history #welcome .section-heading h3,body.has-tool-history #welcome .welcome-caption h3{font-size:15px}
 body.has-tool-history #welcome .guide-card h4,body.has-tool-history #welcome .feature h4{font-size:14px}
 body.has-tool-history #welcome .guide-card p,body.has-tool-history #welcome .feature p{font-size:12px}
 body.has-tool-history #welcome .guide-detail,body.has-tool-history #welcome .paste{font-size:11px}
}
@container studio-welcome (max-height:470px){
 body.has-tool-history #welcome{gap:7px}
 body.has-tool-history #welcome .welcome-hero{padding:12px 16px}
 body.has-tool-history #welcome .hero-kicker,body.has-tool-history #welcome .eyebrow{display:none}
 body.has-tool-history #welcome .hero-copy h2{font-size:24px;margin:5px 0}
 body.has-tool-history #welcome .hero-copy>p{font-size:10px;line-height:1.5}
 body.has-tool-history #welcome .hero-tags{margin-top:7px}
 body.has-tool-history #welcome .hero-tags span{font-size:8px;padding:3px 5px}
 body.has-tool-history #welcome .guide-card,body.has-tool-history #welcome .feature{padding:8px 10px}
 body.has-tool-history #welcome .guide-card p,body.has-tool-history #welcome .feature p{line-height:1.45}
}