@import url("site.css");
:root{--ink:#243b4b;--deep:#102d3e;--line:#d5e1e7;--soft:#f0f5f7;--blue:#256e9b;--teal:#15867c;--orange:#bd733b;}
*{box-sizing:border-box}body.labpage{background:#f6f9fa;color:var(--ink)}
.labnav{background:#10283a;color:#e4f0f4;padding:10px 0}.labnav .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}.labnav a{color:#d7f2fc}.labnav small{color:#a3c8d4}
.labhero{background:linear-gradient(115deg,#102c40,#1d4658);color:#fff;padding:45px 0 36px}.labhero .eyebrow{color:#a7d6de}.labhero h1{font:normal clamp(2rem,4.3vw,3rem)/1.14 Georgia,serif;max-width:900px;margin:10px 0 12px}.labhero p{color:#d5e4e9;max-width:850px;font-size:1.04rem}
.labmeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.labmeta span{border:1px solid #67889a;border-radius:99px;padding:4px 12px;font-size:.76rem}
.labmain{max-width:1180px;margin:26px auto 64px;padding:0 20px}.labmain h2{font:normal 1.55rem Georgia,serif;margin:4px 0 14px}.labmain h3{font-size:1.05rem;margin:0 0 9px}.labmain p{line-height:1.7;margin:8px 0 13px}.labmain ul,.labmain ol{line-height:1.7;padding-left:24px}.labmain li{margin:7px 0}
.lead{font-size:1.04rem;color:#49606e}.sectiontag{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:#557787;font-weight:750;margin:0 0 9px}
.labgrid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(350px,1.5fr);gap:18px;align-items:start}
.labcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;box-shadow:0 2px 9px #1a3b4d07;margin-bottom:18px;min-width:0}
.labcard .tip{background:#edf6f4;border-left:3px solid #148579;padding:11px 13px;color:#345d58;border-radius:4px;font-size:.91rem;margin:12px 0}
.control{padding:13px 0;border-bottom:1px solid #e2eaee}.control:last-child{border-bottom:0}.control label{display:flex;gap:10px;align-items:baseline;justify-content:space-between;font-size:.9rem;font-weight:600;margin-bottom:6px}.control output{color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}.control input[type=range]{width:100%;accent-color:var(--teal)}.control select,.control input[type=number]{width:100%;padding:9px 11px;border:1px solid #b5c8d1;border-radius:6px;color:var(--ink);background:#fff;font:inherit}
.inline-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.buttonline{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0 0}
button{font:inherit;border:1px solid #cad9e1;color:#22475e;background:#eff5f7;border-radius:7px;padding:9px 13px;cursor:pointer;font-weight:600;font-size:.88rem}button.primary{background:#146c75;color:white;border-color:#146c75}button:hover{filter:brightness(.95)}button:focus-visible{outline:3px solid #40a3be;outline-offset:2px}
.canvasblock{margin:16px 0 8px}.canvasblock canvas{display:block;width:100%;height:auto;background:white;border:1px solid #e0e8ed;border-radius:7px}
.caption{font-size:.79rem;color:#62747f;line-height:1.55;margin-top:7px}
.metrics{background:#f3f7f9;border-radius:8px;padding:8px 16px;margin:12px 0}
.metric-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid #dce6ea;font-size:.88rem}.metric-row:last-child{border:0}.metric-row strong{font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.equation{font:1.08rem/1.65 Georgia,serif;text-align:center;background:#f2f6f8;border-radius:8px;padding:14px 10px;margin:14px 0;overflow-x:auto;white-space:normal}
.learning{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.learning .labcard{height:100%}
.note{color:#546977;font-size:.89rem}.self-check{padding:13px 0}.self-check label{display:block;font-size:.9rem;margin:8px 0}.feedback{min-height:2em;background:#eef4f7;border-radius:7px;padding:10px 12px;font-size:.88rem}.feedback[data-correct="true"]{background:#e8f5ee;color:#24664c}
details{border-top:1px solid #e0e8ed;padding:12px 0}summary{font-weight:650;cursor:pointer}details p{color:#445968}
.callout{padding:16px 20px;background:#eaf3f6;border:1px solid #d0e3eb;border-radius:9px;margin:18px 0}
.badge-inline{font-size:.76rem;background:#e9f3f0;color:#22665b;border-radius:5px;padding:3px 6px;font-weight:700}
.sitefooter{border-top:1px solid #d7e3e9;margin:32px auto 0;padding:30px 0;font-size:.85rem;color:#6a7b85}
@media(max-width:880px){.labgrid,.learning{grid-template-columns:1fr}.labhero{padding:35px 0 30px}.labmain{padding:0 15px;margin-top:16px}.labcard{padding:17px}.inline-controls{grid-template-columns:1fr}.labnav .wrap{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:620px){.canvasblock{overflow-x:auto;padding-bottom:3px}.canvasblock canvas{min-width:610px;max-width:none}}

/* Nine-chapter conceptual progression, accessible on both narrow and wide displays. */
.lesson-sequence{display:grid;grid-template-columns:1fr .65fr 1fr;gap:12px;margin-top:-23px;margin-bottom:20px}
.lesson-sequence a{background:#fff;border:1px solid #d5e1e7;border-radius:9px;padding:18px;display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.lesson-sequence strong{font-size:.89rem;line-height:1.4;color:#1d5f79}
.lesson-sequence a.center{text-align:center;align-items:center}
.lesson-sequence a:last-child{text-align:right;align-items:flex-end}
.lesson-sequence a:focus-visible,.lesson-sequence a:hover{border-color:#327e93;background:#f0f8f9}
@media(max-width:760px){.lesson-sequence{grid-template-columns:1fr 1fr;gap:8px}.lesson-sequence a.center{grid-row:2;grid-column:span 2}.lesson-sequence a{padding:12px}.lesson-sequence strong{font-size:.81rem}}