/* Learning pages keep one navigation layer. Design comparisons stay in the studio. */
body.learning-surface{background:#111827}
body.learning-surface>.studio-bar{display:none}
.learning-shell{min-height:100vh}
.learning-shell .site-nav{padding:18px 3%;gap:28px}
.learning-shell .site-nav .small-cta{display:none}
.learning-shell .site-nav nav{margin-left:auto}
.learning-shell .workspace-page-tools{padding-bottom:16px;margin-bottom:22px}
.learning-shell .workspace-page-tools>span{font-size:10px;letter-spacing:.04em}
.learning-shell .workspace-page-main{padding-top:26px}
.learning-shell .sidebar-note{display:none}
.investigation-shell .lab-layout{display:block;max-width:1640px}
.investigation-shell .lab-sidebar{display:none}
.investigation-shell .workspace-page-main{padding:20px 3% 30px}
.investigation-shell .workspace-page-tools{border:0;padding:0;margin:0 0 18px}
.investigation-shell .workspace-page-tools>span{display:none}
.investigation-shell .site-footer{display:none}
/* The task and tools are peers. Prediction and reflection have no active bench. */
.playground .pg-learning-layout,.playground .pg-bench-column{min-width:0}
.playground [data-pg-guidance-hidden],.playground [data-guided-irrelevant="true"],.playground .pg-bench-column[hidden],.playground .pg-guided-totals[hidden]{display:none!important}
.playground.pg-is-guided>.pg-intro,.playground.pg-is-guided>.pg-safety{display:none}
.playground.pg-is-guided .pg-learning-layout{max-width:820px;margin:0 auto}
.playground[data-guided-phase="observe"] .pg-learning-layout{max-width:none;display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr);gap:26px;align-items:start}
.playground[data-guided-phase="observe"] [data-pg-guidance]{position:sticky;top:18px;min-width:0;max-height:calc(100vh - 36px);overflow:auto;scrollbar-width:thin}
.playground[data-guided-phase="observe"] .pg-bench-column{border-left:1px solid var(--pg-border);padding-left:26px}
.playground[data-guided-phase="observe"] .pg-chem-layout{grid-template-columns:minmax(0,1fr);gap:16px;margin:0}
.playground[data-guided-phase="observe"] .pg-bench{grid-row:1}
.playground[data-guided-phase="observe"] .pg-inventory{grid-row:2}
.playground.pg-is-guided .pg-card{padding:20px;border-radius:10px}
.playground.pg-is-guided .pg-card-head{margin-bottom:8px}
.playground.pg-is-guided .pg-card-head h3{font-size:24px;line-height:1.2}
.playground.pg-is-guided .pg-bench>.pg-card-head .pg-eyebrow{display:none}
.playground.pg-is-guided .pg-vessels{margin:12px 0 10px;max-width:640px;gap:12px}
.playground.pg-is-guided .pg-vessel{padding:10px 5px}
.playground.pg-is-guided .pg-vessel svg{max-height:180px;min-height:0}
.playground.pg-is-guided .pg-vessel-caption{min-height:0}
.playground.pg-is-guided .pg-vessel-metrics{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px}
.playground.pg-is-guided .pg-vessel-metrics b{font-size:22px}
.playground.pg-is-guided .pg-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.playground.pg-is-guided .pg-stock{min-height:72px;padding:10px}
.playground.pg-is-guided .pg-stock-copy strong{font-size:15px}
.playground.pg-is-guided .pg-stock .pg-bottle{width:32px;height:38px}
.playground.pg-is-guided .pg-stock .pg-bottle:before{left:5px}
.playground.pg-is-guided .pg-equipment{margin-top:12px;padding-top:12px}
.playground.pg-is-guided .pg-observation{margin-top:15px;padding:13px 16px}
.playground.pg-is-guided .pg-gene-layout,.playground.pg-is-guided .pg-cross-layout{grid-template-columns:1fr;gap:16px}
.playground.pg-is-guided .pg-garden-art{display:none}
.playground.pg-is-guided .pg-codon-lab{margin-top:16px}
.playground.pg-is-guided .pg-guided-totals{border-top:1px solid var(--pg-border);padding-top:15px;margin-top:15px;font-size:14px;line-height:1.8}
.playground.pg-is-guided .pg-guided-totals strong{font-weight:500}
.playground.pg-guidance-scoped .pg-vessels{display:flex;justify-content:center;margin-left:auto;margin-right:auto;width:100%}
.playground.pg-guidance-scoped .pg-vessel{flex:1;max-width:200px}
@media(min-width:1150px){
 .playground.pg-guidance-scoped:not([data-guided-activity="buffer-challenge"]) .pg-bench{display:grid;grid-template-columns:185px minmax(0,1fr);gap:14px 22px;align-content:start}
 .playground.pg-guidance-scoped:not([data-guided-activity="buffer-challenge"]) .pg-bench>.pg-vessels{grid-column:1;grid-row:1;align-self:start;margin:0}
 .playground.pg-guidance-scoped:not([data-guided-activity="buffer-challenge"]) .pg-bench>.pg-bench-actions{grid-column:1;grid-row:2;align-self:start}
 .playground.pg-guidance-scoped:not([data-guided-activity="buffer-challenge"]) .pg-bench>.pg-equipment{grid-column:2;grid-row:1 / span 3;border:0;padding:0;margin:0;align-self:start}
 .playground.pg-guidance-scoped:not([data-guided-activity="buffer-challenge"]) .pg-bench>.pg-guided-totals{grid-column:2;grid-row:4}
 .playground.pg-guidance-scoped .pg-titration-chart{max-width:510px;margin-left:auto;margin-right:auto}
}
/* Free exploration keeps a clear entry point without another large hero. */
.playground:not(.pg-is-guided) .pg-intro{display:block;padding:0 0 8px}
.playground:not(.pg-is-guided) .pg-intro h1{font-size:42px;margin:7px 0 10px}
.playground:not(.pg-is-guided) .pg-intro p{font-size:17px;max-width:760px}
.playground:not(.pg-is-guided) .pg-intro .pg-eyebrow{display:none}
.playground:not(.pg-is-guided) .pg-safety{display:none}
.playground:not(.pg-is-guided) .pg-tabs{margin:20px 0}
.playground:not(.pg-is-guided) .ag-free{margin:12px 0 20px;padding:16px 20px;border-radius:10px}
.playground:not(.pg-is-guided) .ag-free h2{font-size:22px;margin:0}
.playground:not(.pg-is-guided) .ag-free .ag-label,.playground:not(.pg-is-guided) .ag-free p{display:none}
@media(min-width:1500px){.playground[data-guided-phase="observe"] .pg-chem-layout:has(.pg-inventory:not([hidden])){grid-template-columns:minmax(0,1.4fr) minmax(245px,.8fr)}.playground[data-guided-phase="observe"] .pg-inventory{grid-row:auto;grid-column:2}.playground[data-guided-phase="observe"] .pg-bench{grid-row:1;grid-column:1}.playground.pg-is-guided .pg-stock-grid{grid-template-columns:1fr}}
@media(max-width:1050px){.playground[data-guided-phase="observe"] .pg-learning-layout{grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:18px}.playground[data-guided-phase="observe"] .pg-bench-column{padding-left:18px}.playground.pg-is-guided .pg-stock-grid{grid-template-columns:1fr}.playground.pg-is-guided .pg-vessel svg{max-height:145px}.playground.pg-is-guided .pg-vessel-top strong{font-size:12px}.playground.pg-is-guided .pg-chip{font-size:9px;padding:6px 9px}}
@media(max-width:800px){.playground[data-guided-phase="observe"] .pg-learning-layout{display:flex;flex-direction:column;gap:20px}.playground[data-guided-phase="observe"] [data-pg-guidance]{position:static;max-height:none;overflow:visible;width:100%}.playground[data-guided-phase="observe"] .pg-bench-column{border:0;padding:0;width:100%}.playground.pg-is-guided .pg-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.investigation-shell .workspace-page-main{padding-left:5%!important;padding-right:5%!important}.learning-shell .site-nav{gap:17px;padding:17px 5%}.learning-shell .site-logo{font-size:21px}.learning-shell .site-nav nav{font-size:13px;gap:20px;margin:0}.learning-shell .workspace-page-tools{margin-bottom:18px}.learning-shell .theme-toggle{min-height:40px;font-size:12px;padding:8px 12px}.playground:not(.pg-is-guided) .pg-intro h1{font-size:36px}.playground:not(.pg-is-guided) .ag-free{padding:14px 16px}.playground:not(.pg-is-guided) .ag-free h2{font-size:20px}}
@media(max-width:520px){.playground.pg-is-guided .pg-stock-grid{grid-template-columns:1fr}.playground.pg-is-guided .pg-vessel svg{max-height:150px}.playground.pg-is-guided .pg-card{padding:17px}.playground.pg-is-guided .pg-card-head h3{font-size:23px}.playground.pg-is-guided .pg-vessels{gap:6px}.playground.pg-is-guided .pg-vessel-metrics{flex-direction:column;gap:6px}.playground.pg-is-guided .pg-vessel-metrics b{font-size:20px}}
/* On a phone, put the experiment directly after its instruction, before notes and Next. */
@media(max-width:800px){
 .playground[data-guided-phase="observe"] .pg-learning-layout{gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px}
 .playground[data-guided-phase="observe"] [data-pg-guidance],.playground[data-guided-phase="observe"] .ag-sequential,.playground[data-guided-phase="observe"] .ag-step-content{display:contents}
 .playground[data-guided-phase="observe"] .ag-header{order:0;width:100%;padding-bottom:12px;border-bottom:1px solid var(--border)}
 .playground[data-guided-phase="observe"] .ag-header h2{font-size:25px}
 .playground[data-guided-phase="observe"] .ag-step-content>.ag-resume,.playground[data-guided-phase="observe"] .ag-action-count,.playground[data-guided-phase="observe"] .ag-step-content>h3,.playground[data-guided-phase="observe"] .ag-instruction{order:1;margin:0;width:100%}
 .playground[data-guided-phase="observe"] .ag-step-content>h3{font-size:24px}
 .playground[data-guided-phase="observe"] .ag-instruction{font-size:16px}
 .playground[data-guided-phase="observe"] .pg-bench-column{order:2}
 .playground[data-guided-phase="observe"] .ag-observe-tools{order:3;margin:0;width:100%}
 .playground[data-guided-phase="observe"] .ag-observe-notes{order:4;width:100%;margin:0}
 .playground[data-guided-phase="observe"] .ag-status{order:5;margin:0;width:100%}
 .playground[data-guided-phase="observe"] .ag-navigation{order:6;width:100%;margin:0;padding-top:12px}
 .playground[data-guided-phase="observe"] .ag-expand{order:7}
 .playground[data-guided-phase="observe"] .ag-save{order:8;margin:0;width:100%}
 .playground[data-guided-phase="observe"] .ag-notebook{order:9;width:100%;margin:0}
 .playground[data-guided-phase="observe"] .ag-context{order:10;width:100%;margin:0}
 .playground[data-guided-phase="observe"] .ag-footer{order:11;width:100%;margin:0}
}