/* Concept lessons are a separate full-page workspace, isolated from saved lab data. */
#how-dialog.pc-dialog{box-sizing:border-box;width:calc(100vw - 24px);max-width:1480px;height:calc(100dvh - 24px);max-height:none;padding:0;border:1px solid #38535f;border-radius:14px;background:#0c1822;color:#dceaf0;overflow:auto;margin:auto;font-size:1rem}
.pc-dialog *, .pc-dialog *:before,.pc-dialog *:after{box-sizing:border-box}.pc-dialog [hidden]{display:none!important}.pc-dialog button,.pc-dialog select{font:inherit;min-height:40px}.pc-dialog button:focus-visible,.pc-dialog select:focus-visible,.pc-dialog input:focus-visible,.pc-dialog canvas:focus-visible,.pc-dialog summary:focus-visible{outline:3px solid #f3d08c;outline-offset:3px}.pc-dialog p{line-height:1.6;margin:.45rem 0}.pc-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 24px;border-bottom:1px solid #2d4350}.pc-header h2{font-size:1.25rem;margin:4px 0}.pc-header .eyebrow{font-size:.7rem;letter-spacing:.14em}.pc-layout{display:grid;grid-template-columns:210px minmax(0,1fr)}.pc-nav{padding:16px 12px;background:#0a141d;border-right:1px solid #2d4350}.pc-nav p{font-size:.83rem;color:#9eb5c1;padding:0 8px}.pc-nav button{display:flex;gap:10px;text-align:left;border:1px solid transparent;border-radius:8px;background:none;color:#bdd0d9;padding:11px 10px;width:100%;line-height:1.35;margin:3px 0;font-size:.88rem}.pc-nav button span{color:#75d5c5}.pc-nav button[aria-current]{background:#183c40;color:#effffc;border-color:#4ba496}.pc-main{min-width:0;padding:18px 22px 24px}.pc-mobile-nav{display:none}.pc-heading h3{font-size:1.55rem;margin:4px 0}.pc-heading p{color:#b9ccd6;font-size:.97rem;margin-bottom:12px}.pc-heading .eyebrow{font-size:.7rem}.pc-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end;border:1px solid #335359;border-radius:10px;background:#112c32;padding:12px;margin-bottom:16px}.pc-controls #pc-action{width:100%;font-weight:600;color:#d9f9f0}.pc-controls #pc-control-fields{display:flex;align-items:center;flex-wrap:wrap;gap:12px;flex:1;min-width:0}.pc-controls label{margin:0;display:grid;gap:5px;font-size:.88rem;min-width:150px}.pc-controls select{background:#0b1f29;color:#e1f0f4;border:1px solid #557580;border-radius:6px;max-width:100%;padding:6px 10px}.pc-controls .pc-check{display:flex;align-items:center;gap:8px;min-width:0}.pc-controls .pc-check input{width:20px;height:20px;accent-color:#78ddc9}.pc-z{flex:1;min-width:210px!important}.pc-z output{font-variant-numeric:tabular-nums;color:#91efdc}.pc-z input{width:100%;min-height:30px;accent-color:#75ddca}.pc-controls #pc-reset{align-self:end;white-space:nowrap}.pc-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:16px;align-items:start}.pc-hardware,.pc-measurement{min-width:0;background:#0a151f;border:1px solid #304954;border-radius:10px;overflow:hidden}.pc-panel-heading{padding:10px 12px;border-bottom:1px solid #2d4350;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.95rem}.pc-3d{position:relative;width:100%;height:300px;min-height:280px;overflow:hidden;background:#09151e}.pc-3d>canvas{display:block;width:100%;height:100%;touch-action:none}.pc-3d #pc-loading{position:absolute;top:40%;left:10%;width:80%;font-size:.9rem}.pc-3d .optics-label{font-size:.65rem;min-height:25px;padding:3px 6px;max-width:155px}.pc-dialog #pc-diagram svg{display:block;width:100%;height:auto;min-height:280px}.pc-camera-controls{display:flex;gap:6px;flex-wrap:wrap;padding:9px 12px}.pc-component{display:flex;align-items:center;gap:10px;font-size:.86rem;margin:6px 12px}.pc-component select{min-width:0;flex:1;color:#dcebf0;background:#102633;border:1px solid #456472;padding:5px;border-radius:5px}.pc-dialog #pc-part{padding:0 12px;font-size:.85rem;color:#bdd0da;min-height:4.5em}.pc-caption{font-size:.79rem;color:#9fb7c4;line-height:1.5}.pc-hardware>.pc-caption{padding:0 12px 9px}.pc-map-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.87fr);gap:12px;padding:12px}.pc-map-row>div{min-width:0}.pc-map-row canvas{display:block;width:100%;aspect-ratio:1;height:auto;border:1px solid #426170;touch-action:pan-y}.pc-map-row label{font-size:.82rem;display:grid;gap:4px;margin-top:12px}.pc-map-row select{background:#112b35;color:#dfecf0;border:1px solid #527480;padding:4px 8px;border-radius:5px;width:100%}.pc-readouts{font-size:.79rem;line-height:1.4}.pc-readouts #pc-map-summary{font-size:.81rem;line-height:1.5;margin:0 0 8px}.pc-readouts #pc-metrics>div{border-bottom:1px solid #2c4552;padding:6px 0;display:grid;gap:3px}.pc-readouts strong{font-size:1.02rem;color:#a6eddc}.pc-axis-label{display:block;margin:4px 12px 6px;font-size:.78rem;color:#b9cdd6}.pc-dialog #pc-trace,.pc-dialog #pc-profile{display:block;width:calc(100% - 16px);height:auto;margin:0 8px}.pc-axis-ends{display:flex;justify-content:space-between;margin:0 16px 10px;font-size:.78rem;color:#b9cdd6}.pc-evidence{margin:0!important;padding:12px;font-size:.89rem;background:#163139;border-top:1px solid #31505a;min-height:5em}.pc-dialog #pc-busy{padding:70px 24px;min-height:300px;line-height:1.7}.pc-dialog #pc-profile-key{margin:6px 12px}.pc-explanation{margin-top:16px;max-width:88ch}.pc-explanation>p{font-size:1rem}.pc-takeaway{padding:10px 14px;border-left:3px solid #74d9c7;background:#122c34;color:#dcfff6}.pc-explanation details{border-bottom:1px solid #304650;padding:13px 0;font-size:.9rem}.pc-explanation summary{cursor:pointer;font-weight:600;color:#addfd8;line-height:1.5;min-height:30px}.pc-explanation details p{margin-top:12px}.pc-explanation a{color:#9be4d8;text-decoration:underline}.pc-footer{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.pc-footer .button{font-size:.86rem}.pc-dialog #pc-title:focus{outline:none}.pc-dialog .button.small{font-size:.78rem;padding:6px 9px;min-height:36px}.pc-dialog .button:disabled{opacity:.45;cursor:default}#pc-enlarged{width:min(96vw,920px);max-width:none;max-height:96dvh;padding:22px;background:#0b1922;color:#dcebf2;border:1px solid #43636f;border-radius:12px}#pc-large{width:min(100%,70dvh);height:auto;display:block;margin:auto}#pc-enlarged p{line-height:1.6}#pc-enlarged::backdrop,.pc-dialog::backdrop{background:#030a10df}
@media(min-width:1600px){.pc-3d{height:385px}.pc-map-row{grid-template-columns:minmax(0,1.1fr) minmax(135px,.9fr)}}
@media(max-width:1100px){.pc-layout{grid-template-columns:170px minmax(0,1fr)}.pc-nav button{font-size:.8rem;padding:9px 5px}.pc-main{padding:16px}.pc-stage{grid-template-columns:1fr}.pc-measurement{grid-row:1}.pc-map-row{grid-template-columns:minmax(160px,.8fr) minmax(130px,1fr)}.pc-map-row canvas{max-width:280px}.pc-3d{height:360px}.pc-dialog #pc-trace{max-height:220px}.pc-hardware{margin-top:0}}
@media(max-width:700px){#how-dialog.pc-dialog{width:100%;height:100dvh;max-width:none;border-radius:0;border:0}.pc-header{padding:12px;align-items:start}.pc-header h2{font-size:1.05rem}.pc-header .button{font-size:.8rem;padding:7px 10px;flex-shrink:0;max-width:100px}.pc-layout{display:block}.pc-nav{display:none}.pc-main{padding:12px}.pc-mobile-nav{display:grid;gap:6px;color:#b9cdd6;font-size:.85rem;margin-bottom:14px}.pc-mobile-nav select{color:#e0edf2;background:#132b36;border:1px solid #4f6d7a;border-radius:6px;max-width:100%;padding:8px}.pc-heading h3{font-size:1.4rem}.pc-controls{padding:10px}.pc-controls #pc-action{font-size:.9rem}.pc-controls #pc-control-fields{width:100%;flex-basis:100%;align-items:end}.pc-controls label{font-size:.86rem;min-width:0}.pc-controls #pc-reset{font-size:.76rem}.pc-map-row{grid-template-columns:minmax(145px,1fr) minmax(105px,.8fr);gap:10px;padding:10px}.pc-readouts{font-size:.79rem}.pc-readouts strong{font-size:.95rem}.pc-3d{height:320px}.pc-footer{flex-wrap:wrap}.pc-footer #pc-show{order:3;width:100%}.pc-explanation>p{font-size:.95rem}.pc-dialog .pc-caption{font-size:.8rem}}
@media(max-width:380px){.pc-map-row{grid-template-columns:1fr}.pc-map-row canvas{max-width:none}.pc-readouts #pc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pc-readouts #pc-map-summary{font-size:.87rem}.pc-3d{height:290px}}
/* Keep the first action and its image together in a short viewport. */
.pc-controls .pc-z{grid-template-columns:1fr auto}.pc-z input{grid-column:1/-1}.pc-z output{grid-column:2;grid-row:1}.pc-dialog .pc-hardware>.pc-caption{font-size:.8rem}
@media(max-width:700px){.pc-header{padding:10px 12px}.pc-header h2{font-size:1rem;line-height:1.3;margin:4px 0}.pc-header .eyebrow{font-size:.6rem}.pc-header .button{min-height:40px}.pc-mobile-nav{margin-bottom:10px}.pc-heading p{font-size:.87rem;line-height:1.45;margin-bottom:10px}.pc-controls{position:relative}.pc-controls #pc-reset{position:absolute;right:10px;bottom:10px;font-size:.7rem;max-width:130px}.pc-controls #pc-control-fields{padding-bottom:40px}.pc-controls:has(#pc-image) #pc-control-fields{padding-bottom:0}.pc-controls:has(#pc-image) #pc-image{max-width:180px}.pc-controls:has(#pc-image) #pc-control-fields>label:last-of-type{margin-right:130px}}
/* Override the laboratory's page-wide main sizing inside the chapter dialog. */
.pc-dialog .pc-main{width:100%;max-width:none;margin:0;min-width:0}.pc-dialog .pc-nav button{overflow-wrap:anywhere}.pc-dialog .button{white-space:normal}.pc-dialog select{height:auto;min-height:40px;line-height:1.4}.pc-header>div{min-width:0}.pc-footer{flex-wrap:wrap}.pc-dialog #pc-next{width:auto;flex:1}.pc-panel-heading strong{min-width:0}.pc-map-row label{min-width:0}.pc-controls #pc-control-fields>label{max-width:100%}
@media(max-width:1100px){.pc-layout{display:block}.pc-nav{display:none}.pc-mobile-nav{display:grid;gap:6px;margin-bottom:12px}.pc-mobile-nav select{color:#dfeef4;background:#142c35;border:1px solid #4d6c79;padding:8px;border-radius:5px;max-width:100%}}
@media(max-width:700px){.pc-dialog #pc-reset{max-width:115px}.pc-dialog .pc-controls:has(#pc-image) #pc-control-fields>label:last-of-type{margin-right:115px}}
.pc-nav button>span{flex:0 0 1.7em;white-space:nowrap;overflow-wrap:normal}.pc-dialog[data-chapter=paths] .pc-map-row{grid-template-columns:minmax(100px,.48fr) minmax(0,1fr)}.pc-dialog[data-chapter=paths] #pc-trace{min-height:190px}.pc-dialog[data-chapter=paths] .pc-measurement{align-self:stretch}
@media(max-width:380px){.pc-dialog[data-chapter=paths] .pc-map-row{grid-template-columns:minmax(80px,.5fr) minmax(0,1fr)}}
/* Put the signal first in chapters where the signal is the discovery. */
.pc-dialog:is([data-chapter=paths],[data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) #pc-data{display:flex;flex-direction:column}
.pc-dialog:is([data-chapter=paths],[data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) .pc-map-row{order:3;grid-template-columns:minmax(100px,.48fr) minmax(0,1fr)}
.pc-dialog:is([data-chapter=paths],[data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) #pc-trace-label{order:0;margin-top:14px}
.pc-dialog:is([data-chapter=paths],[data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) #pc-trace{order:1}
.pc-dialog:is([data-chapter=paths],[data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) .pc-axis-ends{order:2}
@media(max-width:380px){.pc-dialog:is([data-chapter=packet],[data-chapter=coverage],[data-chapter=sampling],[data-chapter=exposure]) .pc-map-row{grid-template-columns:minmax(80px,.5fr) minmax(0,1fr)}}