/* One device-sized scroll area for the embedded experiment. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.simulation-workspace .workspace-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){
 html:has(body.simulation-active){padding:0}
 body.simulation-active{height:100dvh;overflow:hidden}
 body.simulation-active .app-shell{margin:0;height:100dvh;min-height:0;overflow:hidden}
 body.simulation-active :is(.sidebar,.topbar,.footer,#page-view,#ad-region){display:none!important}
 body.simulation-active #main{padding:0;max-width:none;height:100%;min-height:0;display:flex;align-self:stretch}
 body.simulation-active .simulation-workspace:not(.is-preparing){display:flex;flex:1;flex-direction:column;min-width:0;border:0;border-radius:0;height:100%}
 body.simulation-active .workspace-bar{padding:4px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));padding-top:max(4px,env(safe-area-inset-top));min-height:48px}
 body.simulation-active .simulation-viewport{flex:1;min-height:0;overflow:hidden}
 body.simulation-active .simulation-frame{height:100%;min-height:0;width:100%}
 body.simulation-active #pylab-qwen::part(launcher){bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:850px){
 html{scrollbar-gutter:auto}
 main{padding:22px 18px 30px}.topbar{min-height:60px;padding:8px 14px;gap:8px;flex-wrap:nowrap}
 .topbar-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;flex:1}
 .topbar :is(button,a){min-height:44px}.theme-toggle span{display:none}.theme-toggle{width:44px;padding:7px!important;font-size:18px!important}
 .account-button{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .breadcrumbs{gap:7px;margin-bottom:18px}.breadcrumbs a{display:inline-flex;align-items:center;min-height:40px}
 .lesson-navigation .text-link{min-height:44px}.chapter-banner{padding:22px}.lesson-row{min-height:72px}
 .sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{flex-wrap:wrap;overflow-wrap:anywhere}.footer-topic-links{display:flex;flex-wrap:wrap;gap:8px 16px}.footer-topic-links a{min-height:36px;display:inline-flex;align-items:center}
 body.simulation-active{height:100dvh;overflow:hidden}
 body.simulation-active .app-shell{height:100dvh;min-height:0;overflow:hidden}
 body.simulation-active :is(.sidebar,.topbar,.footer,#page-view,#ad-region){display:none!important}
 body.simulation-active #main{padding:0;max-width:none;height:100%;min-height:0;display:flex;align-self:stretch}
 body.simulation-active .simulation-workspace:not(.is-preparing){display:flex;flex:1;flex-direction:column;min-width:0;border:0;border-radius:0;height:100%}
 body.simulation-active .workspace-bar{display:flex;flex-wrap:nowrap;gap:8px;min-height:46px;padding:2px max(8px,env(safe-area-inset-right)) 2px max(8px,env(safe-area-inset-left));font-size:12px}
 body.simulation-active .workspace-back{order:-1;flex-shrink:0;font-size:0}
 body.simulation-active .workspace-back::before{content:'← Bài học';font-size:12px}
 body.simulation-active .workspace-title{flex:1;white-space:nowrap;font-size:12px;font-weight:500}
 body.simulation-active .workspace-full{font-size:0;min-width:44px;justify-content:center}
 body.simulation-active .workspace-full::before{content:'↗';font-size:22px}
 body.simulation-active .simulation-viewport{flex:1;min-height:0;overflow:hidden}
 body.simulation-active .simulation-frame{height:100%;min-height:0;width:100%}
 body.simulation-active #pylab-qwen::part(launcher){display:none}
 dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:580px){
 .topbar-name{display:none}.topbar::before{content:'The Pylab';font-size:17px;font-weight:650;flex:1;order:1}.topbar .menu-button{order:0}.topbar .theme-toggle{order:2}.topbar .account-button{order:3;font-size:12px;max-width:125px}
 main{padding:20px 12px 28px}.intro h1{font-size:30px}.intro-meta{margin-top:16px}.chapter-grid{gap:12px}.card-visual{height:115px}.card-body{padding:16px}.card-title-row h3{font-size:22px}.chapter-banner h1{font-size:27px}.lesson-heading{margin-bottom:20px}.lesson-heading h1{font-size:26px}
 .sim-grid{grid-template-columns:1fr;gap:10px}.sim-card{display:grid;grid-template-columns:104px minmax(0,1fr)}.sim-preview{height:100%;min-height:150px;background-size:15px 15px}.sim-preview svg{width:52px;height:52px}.sim-index{top:10px;left:9px;font-size:9px;letter-spacing:.04em}.status-tag{top:auto;bottom:9px;right:7px;left:7px;justify-content:center;font-size:9px;padding:3px}.sim-card-content{padding:14px}.sim-card h2{font-size:17px;line-height:1.4}.sim-card p{font-size:12px;margin:7px 0 12px}.sim-link{font-size:12px}.lesson-row{padding:14px 11px}.footer{padding:18px 12px}
}
@media(pointer:coarse){input,select,textarea{font-size:16px}button,.text-link{min-height:44px}}
@media(pointer:coarse) and (max-width:1100px) and (max-height:600px){body.simulation-active .sidebar,body.simulation-active .topbar,body.simulation-active .footer,body.simulation-active #page-view{display:none!important}body.simulation-active .app-shell{margin:0;height:100dvh;min-height:0}body.simulation-active #main{height:100%;padding:0}body.simulation-active .simulation-workspace{height:100%;display:flex;flex-direction:column}body.simulation-active .simulation-viewport{flex:1;min-height:0}body.simulation-active .simulation-frame{height:100%;min-height:0}}