:root{--bg:#f4f7fb;--surface:#ffffff;--surface-soft:#f8fafc;--line:#dce4ee;--line-strong:#c7d2df;--text:#172033;--muted:#667085;--navy:#0f2747;--blue:#2563eb;--blue-soft:#eaf1ff;--cyan:#0ea5e9;--green:#059669;--green-soft:#eafaf4;--amber:#d97706;--shadow:0 14px 40px rgba(31,45,61,.08)}*{box-sizing:border-box}body,html{background:var(--bg)}body{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.appShell{min-height:100vh;display:flex}.sidebar{width:292px;flex:0 0 292px;height:100vh;position:-webkit-sticky;position:sticky;top:0;overflow-y:auto;background:#0c1f38;color:#eef6ff;border-right:1px solid rgba(255,255,255,.07);padding:22px 16px 28px;z-index:20}.brandBlock{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.09)}.brandMark{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);font-weight:800;box-shadow:0 8px 24px rgba(14,165,233,.22)}.brandBlock span,.brandBlock strong{display:block}.brandBlock strong{font-size:14px;letter-spacing:.01em}.brandBlock span{margin-top:3px;color:#9fb1c8;font-size:11px}.sideNav{padding-top:14px}.navLabel{margin:20px 10px 8px;color:#7690ae;font-size:10px;font-weight:800;letter-spacing:.14em}.navItem{width:100%;border:0;background:transparent;color:#bed0e4;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-align:left;font-size:12px;line-height:1.3;margin:2px 0}.navItem:hover{background:rgba(255,255,255,.06);color:white}.navItem.active{background:#173b68;color:white;box-shadow:inset 3px 0 0 #38bdf8}.navIndex{width:30px;min-width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.07);font-size:11px;font-weight:800}.navItem.active .navIndex{background:#2563eb}.mainArea{min-width:0;flex:1 1}.topbar{height:70px;position:-webkit-sticky;position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);justify-content:space-between;padding:0 28px}.topbar,.topbarLeft{display:flex;align-items:center}.topbarLeft{gap:12px}.topbarLeft span,.topbarLeft strong{display:block}.topbarLeft span{color:#8492a6;font-size:10px;font-weight:800;letter-spacing:.12em}.topbarLeft strong{margin-top:3px;font-size:14px}.menuButton{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:white}.statusPill{background:#edf8f4;color:#087b58;border:1px solid #c9ebdf;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:7px}.statusDot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.1)}.pageBody{padding:28px;max-width:1560px;margin:0 auto}.contentStack{display:grid;grid-gap:20px;gap:20px}.heroPanel{min-height:245px;background:linear-gradient(135deg,#0f2747,#143866 58%,#0f5f7e);color:white;border-radius:20px;padding:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}.heroPanel:after{content:"";width:360px;height:360px;border:70px solid rgba(255,255,255,.05);border-radius:50%;position:absolute;right:-130px;top:-150px}.chapterHeader h1,.heroPanel h1{margin:7px 0 10px;font-size:clamp(26px,3vw,42px);letter-spacing:-.035em}.heroPanel p{max-width:780px;margin:0;color:#d1dfef;line-height:1.7;font-size:14px}.eyebrow{color:#59c8ff;font-size:10px;font-weight:900;letter-spacing:.15em}.heroStats{min-width:300px;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;z-index:1}.heroStats div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.heroStats span,.heroStats strong{display:block}.heroStats strong{font-size:24px}.heroStats span{margin-top:4px;color:#c7d6e8;font-size:10px}.grid2{grid-template-columns:1fr 1fr;grid-gap:20px}.grid2,.gridLesson{display:grid;gap:20px}.gridLesson{grid-template-columns:minmax(290px,.72fr) minmax(520px,1.55fr);grid-gap:20px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:0 8px 26px rgba(31,45,61,.045)}.panelTitle{display:flex;align-items:center;gap:12px;padding:20px 22px 16px;border-bottom:1px solid #edf1f5}.calloutPanel h2,.panelTitle h2,.simulationTitle h2{margin:0;font-size:18px;letter-spacing:-.02em}.panelTitle p,.simulationTitle p{margin:4px 0 0;color:var(--muted);font-size:12px}.badge{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-weight:900}.outcomeList{margin:0;padding:20px 24px 24px 44px;color:#43506a}.outcomeList li{padding:5px 0 5px 5px;font-size:13px;line-height:1.5}.calloutPanel{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#fff,#f6f9ff)}.calloutPanel p{margin:7px 0 0;color:var(--muted);font-size:13px}.workflowDots{display:flex;align-items:center;min-width:340px}.workflowDots span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-size:12px;font-weight:800}.workflowDots i{height:2px;flex:1 1;background:#bfd1ef}.chapterHeader{background:white;border:1px solid var(--line);border-radius:17px;padding:24px 26px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.chapterHeader .eyebrow{color:var(--blue)}.chapterHeader h1{font-size:30px;margin:6px 0 7px}.chapterHeader p{margin:0;color:var(--muted);font-size:13px;max-width:750px}.practicalHeader{border-top:3px solid #059669}.practicalHeader .eyebrow{color:#059669}.chapterMeta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chapterMeta span{padding:8px 10px;background:#f5f7fa;border:1px solid var(--line);border-radius:9px;font-size:11px;font-weight:700;color:#516176;white-space:nowrap}.syllabusPanel{overflow:hidden}.topicList{padding:8px 18px 18px}.topicRow{display:grid;grid-template-columns:46px 1fr;grid-gap:9px;gap:9px;padding:11px 3px;border-bottom:1px dashed #e5eaf0}.topicRow:last-child{border-bottom:0}.topicRow strong{color:var(--blue);font-size:11px;padding-top:2px}.topicRow p{margin:0;color:#49576c;font-size:12px;line-height:1.55}.simulationColumn{min-width:0}.simulationPanel{overflow:hidden}.simulationTitle{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:21px 22px 17px;border-bottom:1px solid #edf1f5}.simulationTitle .eyebrow{color:var(--blue)}.labChip,.liveChip{border-radius:999px;padding:7px 9px;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.liveChip{background:#ecfdf3;color:#047857;border:1px solid #c5eddc}.labChip{background:#edf6ff;color:#1765b0;border:1px solid #cde3fa}.controlGrid{padding:18px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px 22px;gap:16px 22px;background:#fbfcfe;border-bottom:1px solid #edf1f5}.controlGrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.controlGrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.controlGrid.one{grid-template-columns:1fr}.controlGrid label{color:#617086;font-size:11px;display:grid;grid-gap:8px;gap:8px}.controlGrid b{color:#19253a;font-size:12px}input[type=range]{width:100%;accent-color:var(--blue)}.resultStrip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #edf1f5}.resultStrip.four{grid-template-columns:repeat(4,1fr)}.resultStrip div{padding:15px 18px;border-right:1px solid #edf1f5;min-width:0}.resultStrip div:last-child{border-right:0}.resultStrip span,.resultStrip strong{display:block}.resultStrip span{color:#7b8798;font-size:10px}.resultStrip strong{margin-top:5px;font-size:14px;overflow-wrap:anywhere}.vizCard{padding:16px 18px 20px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(160px,.8fr);grid-gap:15px;gap:15px;align-items:center}.simSvg{width:100%;height:auto;min-height:180px;background:#fbfdff;border:1px solid #e7edf4;border-radius:12px}.formulaBox{border:1px solid #dbe8f7;background:#f5f9ff;border-radius:12px;padding:14px;display:grid;grid-gap:8px;gap:8px;color:#45566f;font-size:11px}.formulaBox b{color:#1c3762;font-size:12px}.formulaBox span{background:white;border:1px solid #e4edf7;padding:8px;border-radius:7px}.axis,.dimLine{stroke:#a9b4c3;stroke-width:1.4}.bmd,.curve,.resultantLine,.sfd{fill:none;stroke:#2563eb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.sfd{stroke:#0ea5e9;fill:rgba(14,165,233,.08)}.bmd{stroke:#7c3aed;stroke-width:3}.point{fill:#f97316;stroke:white;stroke-width:2}.svgLabel{fill:#7b8798;font-size:11px}.svgValue{fill:#334155;font-size:11px;font-weight:700}.forceLine,.loadLine{stroke:#2563eb;stroke-width:3;stroke-linecap:round}.forceLine.secondary{stroke:#0ea5e9}.beamLine{stroke:#24364e;stroke-width:8;stroke-linecap:round}.support{fill:#60748c}.roller{fill:white;stroke:#60748c;stroke-width:3}.loadHead{fill:#2563eb}.angleArc,.torqueArc{fill:none;stroke:#f59e0b;stroke-width:3}.blockShape,.sectionFill{fill:#d8e7f7;stroke:#245a91;stroke-width:2}.movingBlock{fill:#fde68a;stroke:#d97706;stroke-width:2}.centroidLine{stroke:#f97316;stroke-width:2;stroke-dasharray:6 5}.shaftBody{fill:#d9e2ec}.shaftBody,.shaftEnd{stroke:#65758a;stroke-width:2}.shaftEnd{fill:#c8d3df}.energyViz{min-height:220px}.track{position:relative;height:120px;border-bottom:6px solid #64748b;background:linear-gradient(#fbfdff,#f0f5fa);border-radius:10px;overflow:hidden}.block{position:absolute;bottom:6px;width:55px;height:45px;background:#b9d7f7;border:2px solid #2563eb;border-radius:8px;display:grid;place-items:center;transition:left .2s ease;font-weight:800}.forceArrow{position:absolute;left:15px;top:20px;color:#2563eb;font-weight:900}.segmented{margin:17px 20px 0;display:inline-flex;background:#f0f4f8;border:1px solid var(--line);padding:3px;border-radius:10px}.segmented button{border:0;background:transparent;padding:7px 12px;border-radius:7px;color:#5c6b7d;font-size:11px;font-weight:700}.segmented button.selected{background:white;color:var(--blue);box-shadow:0 2px 8px rgba(31,45,61,.08)}.beamCharts{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;padding:16px}.beamCharts .vizCard{display:block;padding:12px;position:relative}.chartLabel{position:absolute;top:10px;left:12px;z-index:2;font-size:9px;font-weight:900;color:#8290a3;letter-spacing:.12em}.numberGrid{padding:18px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px;background:#fbfcfe;border-bottom:1px solid #edf1f5}.numberField{display:grid;grid-gap:6px;gap:6px;color:#65748b;font-size:11px}.numberField>div{display:flex;align-items:center;border:1px solid var(--line);background:white;border-radius:9px;overflow:hidden}.numberField input{min-width:0;width:100%;border:0;outline:0;padding:10px;color:#1f2b40;background:white}.numberField small{padding:0 10px;border-left:1px solid var(--line);color:#708097;white-space:nowrap}.recordBox{margin:0 18px 18px;border:1px solid #d7e1ed;border-radius:12px;overflow:hidden}.recordBox>div{padding:12px 14px;background:#f8fafc;border-bottom:1px solid #e5ebf2}.recordBox b,.recordBox span{display:block}.recordBox b{font-size:12px}.recordBox span{margin-top:3px;color:#7c899a;font-size:10px}.recordBox textarea{width:100%;min-height:95px;resize:vertical;border:0;outline:0;padding:12px 14px;color:#344054}.machineViz{margin:16px 18px;min-height:190px;background:linear-gradient(#f9fbfd,#eef3f8);border:1px solid #e1e8f0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}.machineViz>span{position:absolute;bottom:10px;color:#7a8798;font-size:10px}.platen{width:170px;height:24px;border:2px solid #58687b;background:#98a6b5}.platen.top{border-radius:8px 8px 2px 2px}.platen.bottom{border-radius:2px 2px 8px 8px}.specimen{background:#c8c2b7;border:2px solid #81796d}.specimen.cube{width:75px;height:75px}.specimen.cylinder{width:68px;height:88px;border-radius:34px/10px}.machineJaw{fill:#64748b}.testPiece{fill:#cbd5e1;stroke:#475569;stroke-width:2}.forceBoard{margin:16px 18px;min-height:230px;display:grid;place-items:center;background:#fbfdff;border:1px solid #e3eaf2;border-radius:12px;padding:18px}.boardRing{width:150px;height:150px;border:3px solid #7d8fa5;position:relative;place-items:center;background:radial-gradient(circle,#fff 0 7%,#edf4fb 8% 100%)}.boardRing,.boardRing span{border-radius:50%;display:grid}.boardRing span{width:24px;height:24px;background:#24364e;color:white;place-items:center;font-size:10px;z-index:2}.rope{position:absolute;width:2px;height:80px;background:#2563eb;transform-origin:bottom center;bottom:75px;left:74px}.rope.r1{transform:rotate(90deg)}.rope.r2{transform:rotate(-35deg);background:#0ea5e9}.rope.r3{transform:rotate(205deg);background:#f59e0b}.forceBoard p{margin:10px 0 0;color:#6d7c90;font-size:11px;text-align:center}.frictionRig{margin:16px 18px;padding:38px 22px;background:#fbfdff;border:1px solid #e3eaf2;border-radius:12px}.surface{height:8px;background:#707d8d;position:relative}.rigBlock{position:absolute;left:10%;bottom:8px;width:85px;height:55px;display:grid;place-items:center;background:#cfd8e3;border:2px solid #667788;border-radius:6px;font-size:10px;font-weight:800}.springScale{position:absolute;left:38%;bottom:20px;color:#2563eb;font-size:11px;font-weight:800}.beamRig{margin:18px;height:185px;border:1px solid #e3eaf2;border-radius:12px;background:#fbfdff;position:relative}.labBeam{position:absolute;top:85px;left:12%;right:12%;height:8px;background:#314459;border-radius:5px}.labBeam span{top:-48px;transform:translateX(-50%);color:#2563eb;font-size:11px}.labBeam span,.spring{position:absolute;font-weight:800}.spring{top:105px;color:#55677d;font-size:10px}.spring:before{content:"";display:block;width:3px;height:36px;margin:0 auto 5px;background:repeating-linear-gradient(180deg,#60748b 0 3px,transparent 3px 6px)}.spring.left{left:10%}.spring.right{right:10%}.sidebarOverlay{display:none}@media (max-width:1180px){.gridLesson{grid-template-columns:1fr}.syllabusPanel{order:2}.simulationColumn{order:1}.heroPanel{align-items:flex-start;flex-direction:column}}@media (max-width:900px){.sidebar{position:fixed;left:-310px;transition:left .22s ease;box-shadow:0 20px 55px rgba(0,0,0,.22)}.sidebar.sidebarOpen{left:0}.sidebarOverlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);border:0;z-index:15}.menuButton{display:grid;place-items:center}.grid2{grid-template-columns:1fr}.calloutPanel{align-items:flex-start;flex-direction:column}.workflowDots{width:100%;min-width:0}.topbar{padding:0 18px}.pageBody{padding:18px}}@media (max-width:680px){.statusPill{display:none}.chapterHeader,.heroPanel{padding:22px}.heroStats{min-width:0;width:100%}.chapterHeader{align-items:flex-start;flex-direction:column}.chapterMeta{justify-content:flex-start}.controlGrid,.controlGrid.three,.controlGrid.two,.numberGrid,.resultStrip,.resultStrip.four{grid-template-columns:1fr}.resultStrip div{border-right:0;border-bottom:1px solid #edf1f5}.resultStrip div:last-child{border-bottom:0}.beamCharts,.vizCard{grid-template-columns:1fr}.heroPanel h1{font-size:28px}}