.hero{display:block;padding:20px 0}.hero h1{font-size:clamp(28px,3vw,42px);margin:0 0 8px}.hero p{max-width:80ch;margin:0;line-height:1.6}
.builderWorkspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:16px;align-items:start}
.builderNavigation{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.builderNavigation button,.builderControls button{font:inherit;padding:10px 13px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
.builderNavigation button[aria-selected=true]{background:var(--teal);color:white}
.builderNavigation button:focus-visible,.builderControls button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.builderStage{min-width:0}.builderStage [role=tabpanel][hidden]{display:none!important}.builderStage .brief{display:block;margin:0}.builderStage .step{margin:0 0 12px}.builderStage .pgrid,.builderStage .fgrid{max-height:none;overflow:visible}
.builderInstruction{margin:0 0 12px;line-height:1.6}.builderPreview{position:sticky;top:16px;min-width:0}.builderPreview .step{margin:0}.builderPreview .edDraw{max-height:60vh;overflow:auto}
.builderControls{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px}.builderControls button:disabled{opacity:.45;cursor:default}
@media(max-width:850px){.builderWorkspace{grid-template-columns:1fr}.builderPreview{position:static;grid-row:2}.builderStage{grid-row:3}.builderPreview .edDraw{max-height:35vh}.builderNavigation{gap:4px}.builderNavigation button{font-size:13px;padding:8px}.builderControls{grid-row:4}}
.builderEnvironment{margin:0 0 12px}
.builderEnvironment .envName{font-family:var(--disp);font-weight:600;font-size:15px;margin:4px 0 10px}
.builderEnvironment .envScene{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:4px;background:var(--bg)}
.builderEnvironment .envCap{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.builderEnvironment .envAsk{margin:0 0 7px;font-size:13.5px;line-height:1.55}
.builderEnvironment .envAsk .k{display:inline-block;min-width:68px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);vertical-align:1px;margin-right:6px}
@media(max-width:850px){.builderEnvironment .envScene{max-height:240px;object-fit:contain}}
.findingFold{border-left:3px solid var(--rule);padding:0 0 0 14px;margin:4px 0 10px}
.findingFold>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:8px 0}
.findingFold>summary::-webkit-details-marker{display:none}
.findingFold>summary::after{content:" +";font-weight:700}
.findingFold[open]>summary::after{content:" \2212"}
.findingFold>summary:hover{color:var(--ink)}
.findingFold>summary:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.findingFold .finding{border-left:0;padding-left:0;margin:0 0 8px}
.envMedicines{margin:0 0 16px}
.envMedicines .med{border:1px solid var(--rule);border-radius:5px;padding:14px 16px;margin:10px 0;background:var(--surface)}
.envMedicines .med.drawable{border-left:3px solid var(--teal)}
.envMedicines .med h4{margin:0 0 9px;font-family:var(--disp);font-size:16px}
.envMedicines .med h4 .role{display:block;font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.envMedicines .med p{margin:0 0 8px;font-size:13.8px;line-height:1.6}
.envMedicines .med .frontier{border-top:1px solid var(--rule);padding-top:9px;margin-top:10px}
.envMedicines .med .disputed{color:var(--muted)}
.envMedicines .medStart{font:inherit;padding:8px 13px;border:1px solid var(--teal);border-radius:5px;background:var(--teal);color:#fff;cursor:pointer}
.envMedicines .medStart:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.envMedicines .routeQ{margin-top:12px}
.routePick{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 9px}
.routePick .routeBtn{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);cursor:pointer}
.routePick .routeBtn.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.routePick .routeBtn:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.routeSum{margin:0 0 10px;font-size:13.3px;line-height:1.55}
.gates{border-top:1px solid var(--rule);padding-top:8px}
.gates .gate{display:grid;grid-template-columns:14px 1fr;gap:3px 8px;margin:0 0 7px;font-size:13px;line-height:1.5}
.gates .gate .mark{font-weight:700;color:var(--teal)}
.gates .gate.skipped{opacity:.52}
.gates .gate.skipped .mark{color:var(--muted)}
.gates .gn{font-weight:600}
.gates .gv{grid-column:2;color:var(--muted);font-size:12.6px}
.builderEnvironment .journeyScene{display:block;width:100%;height:auto;margin:2px 0 6px}
.envChips{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--rule);padding-top:9px;margin-top:10px}
.envChips .chip{margin:0;font-size:12.8px;line-height:1.5;color:var(--muted)}
.envChips .chip .k{display:inline-block;min-width:60px;font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.envMedicines .medTop{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:14px;align-items:start;margin:4px 0 10px}
.envMedicines .medDraw{border:1px solid var(--rule);border-radius:4px;background:var(--bg);padding:6px;display:flex;align-items:center;justify-content:center}
.envMedicines .medDraw svg{width:100%;height:auto;max-height:150px}
.envMedicines .medSays p{margin:0 0 7px;font-size:13.4px;line-height:1.55}
.envMedicines .medSays .shape{color:var(--muted);font-size:12.8px}
.envMedicines .medMore{margin:0 0 10px}
.medFold{border-top:1px solid var(--rule)}
.medFold>summary{cursor:pointer;list-style:none;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 0}
.medFold>summary::-webkit-details-marker{display:none}
.medFold>summary::after{content:" +";font-weight:700}
.medFold[open]>summary::after{content:" \2212"}
.medFold>summary:hover{color:var(--ink)}
.medFold>summary:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.medFold>p{margin:0 0 10px;font-size:13.2px;line-height:1.6}
@media(max-width:700px){.envMedicines .medTop{grid-template-columns:1fr}}

/* Keep the work and its context in a bounded bench. */
.builderWorkspace{align-items:stretch}.builderStage{max-height:70vh;overflow-y:auto;overscroll-behavior:contain;padding:3px 9px 3px 3px;scrollbar-gutter:stable}.builderPreview{position:static;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;padding:3px;scrollbar-gutter:stable}
.builderPreview [hidden]{display:none!important}.builderViewNav{display:flex;gap:6px;position:sticky;top:0;z-index:3;background:var(--paper);padding-bottom:8px}.builderViewNav button{font:inherit;border:1px solid var(--rule);padding:8px 12px;border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}.builderViewNav button[aria-selected=true]{background:var(--teal);color:#fff}.builderViewNav button:focus-visible{outline:3px solid var(--brass)}
#modeStructure .builderPreview .edDraw{max-height:40vh}.builderNavigation{position:sticky;top:0;z-index:4;background:var(--paper);padding:8px 0}.builderControls{position:sticky;bottom:0;background:var(--paper);padding:8px 0}
#builderExperiment textarea{width:100%;min-height:70px;resize:vertical;font:inherit;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:10px}#builderExperiment label{font-size:13px}.experimentSummary{border-left:3px solid var(--brass);padding:10px;background:var(--brass2);font-size:13px}.experimentGaps{font-size:13px;padding-left:20px}.experimentGaps li{margin:8px 0}
#studyJourney{padding:8px 14px!important;margin:8px auto!important}#studyJourney small{display:none!important}#studyJourney p{margin:3px 0 6px!important}.top{padding:12px 0!important}#modeNote{font-size:12px;max-width:none;margin-bottom:12px}
@media(max-width:850px){.builderWorkspace{grid-template-columns:minmax(0,1fr)}.builderPreview{max-height:38vh}.builderStage{max-height:60vh}.builderPreview .edDraw{max-height:25vh}.builderNavigation{position:static}.builderControls{position:static}}

/* A large molecular canvas, with the next decision alongside it. */
.wrap{max-width:1440px}
.builderWorkspace{grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr)}
.builderPreview{grid-column:1;grid-row:2;border:1px solid var(--rule);border-radius:14px;background:var(--surface);padding:16px}
.builderStage{grid-column:2;grid-row:2;border:1px solid var(--rule);border-radius:14px;background:var(--surface);padding:16px}
.builderPreview .step{border:0;padding:0;background:transparent}
.builderPreview .edDraw{background:radial-gradient(ellipse at center,var(--teal2),var(--surface) 72%);border:0;border-radius:12px;min-height:240px}
.builderViewNav{background:var(--surface)}
.builderLearning{margin-top:16px!important;border-top:1px solid var(--rule)!important;padding-top:14px!important}
.builderLearning #live{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.builderLearning #live>.guide,.builderLearning .editLesson{grid-column:1/-1}
.editLesson{margin-top:12px;padding:16px;background:var(--teal2);border-radius:10px;font-size:14px}
.editLesson .lessonLabel{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin:0}
.editLesson h4{font:500 24px var(--serif);margin:6px 0 12px}
.editLesson details{border-top:1px solid var(--rule);padding:8px 0}
.editLesson summary,.builderCatalog summary{cursor:pointer;font-weight:500}
.builderCatalog{margin:14px 0}.builderCatalog summary{padding:10px;border:1px solid var(--rule);border-radius:6px}
.builderCatalog .pgrid{margin-top:10px}
#builder-panel-groups .fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#builder-panel-groups .fcard{padding:8px;min-width:0}
#builder-panel-groups .fcard svg{max-height:65px;width:100%}
#builder-panel-groups .fcard .guide{display:none}
.chargeExplanation{font-size:13px}.chargeExplanation summary{cursor:pointer;color:var(--muted)}
#apply:not(:empty){padding:10px;background:var(--brass2);border-radius:8px;margin-bottom:14px}
.molSite:focus-visible{outline:3px solid var(--brass)}
.edDraw{position:relative;align-items:center}.seedLabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;font:500 32px var(--sans);z-index:1}
#modeStructure .builderPreview .edDraw{max-height:28vh;min-height:180px}
#modeStructure .builderPreview .edDraw svg{max-height:28vh}
#builder-view-panel-molecule:not([hidden]){height:calc(70vh - 78px);display:grid;grid-template-rows:auto minmax(140px,1fr) minmax(180px,1fr);gap:8px}
#builder-view-panel-molecule>#editor,#builder-view-panel-molecule>.builderLearning{overflow-y:auto;min-height:0;scrollbar-gutter:stable}
#builder-view-panel-molecule>.builderLearning{margin-top:0!important}
#builder-view-panel-molecule>h3{margin:0}
@media(max-width:850px){#builder-view-panel-molecule:not([hidden]){height:auto;display:block}#builder-view-panel-molecule>#editor,#builder-view-panel-molecule>.builderLearning{overflow:visible}}
.builderOverview{display:none}
.builderFocused .hero,.builderFocused .top,.builderFocused #studyJourney,.builderFocused .modeSwitch,.builderFocused #modeNote{display:none!important}
.builderFocused .wrap{padding-top:8px;padding-bottom:8px}
.builderFocused .builderOverview{display:block;margin-right:auto}
.builderFocused .builderStage,.builderFocused .builderPreview{height:calc(100dvh - 210px);max-height:none}
.builderFocused #builder-view-panel-molecule:not([hidden]){height:calc(100dvh - 290px);grid-template-rows:auto minmax(150px,1.2fr) minmax(180px,1fr)}
#modeStructure .builderPreview .edDraw{height:24vh;min-height:150px;max-height:none;overflow:hidden}
#modeStructure .builderPreview .edDraw svg{width:100%;height:100%!important;max-height:100%;min-width:0}
.builderFocused .briefBar{position:static}
.builderFocused .builderPreview{overflow:hidden}
.builderLearning .editLesson{grid-row:1;margin:0 0 12px;padding:10px}
.builderLearning .editLesson h4{font-size:19px;margin:3px 0 7px}
.builderLearning .editLesson p{margin:5px 0}
@media(max-width:850px){.builderFocused .builderStage,.builderFocused .builderPreview{height:auto;max-height:55vh}.builderFocused #builder-view-panel-molecule:not([hidden]){height:auto;display:block}.builderControls{flex-wrap:wrap}.builderOverview{flex-basis:100%}}
@media(min-width:851px){
  .builderFocused .wrap{height:100dvh;overflow:hidden}
  .builderFocused #modeStructure{display:flex;flex-direction:column;height:100%}
  .builderFocused .briefBar{flex:none;margin:0}
  .builderFocused .builderWorkspace{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}
  .builderFocused .builderStage,.builderFocused .builderPreview{height:auto;min-height:0}
  .builderFocused .builderPreview{display:flex;flex-direction:column}
  .builderFocused #builder-view-panel-molecule:not([hidden]){height:auto;flex:1;min-height:0;grid-template-rows:auto minmax(120px,1.2fr) minmax(120px,1fr)}
  .builderFocused #builder-view-panel-environment{min-height:0;overflow:auto}
  .builderFocused .builderControls{position:static}
}
@media(max-width:850px){.builderWorkspace{grid-template-columns:minmax(0,1fr)}.builderPreview{grid-column:1;grid-row:2;max-height:52vh}.builderStage{grid-column:1;grid-row:3;max-height:55vh}.builderPreview .edDraw{min-height:180px}.builderControls{grid-row:4}}
.walk{display:flex;gap:6px;align-items:center;margin:2px 0 8px}
.walk button{font:inherit;font-size:13px;padding:6px 11px;border:1px solid var(--rule);border-radius:5px;background:var(--surface);color:var(--ink);cursor:pointer}
.walk .wPlay{flex:1;font-weight:600;border-color:var(--teal);color:var(--teal)}
.walk button:disabled{opacity:.4;cursor:default}
.walk button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
