.chapter-hero {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(280px,.65fr);
  gap: clamp(36px,6vw,84px);
  align-items: end;
  padding: clamp(66px,8vw,108px) 0 72px;
}
.chapter-hero h1 {
  margin: 14px 0 22px;
  max-width: 900px;
  font-size: clamp(3.1rem,7.6vw,7rem);
  line-height: .88;
  letter-spacing: -.065em;
}
.chapter-hero h1 em { color: var(--accent); font-style: normal; font-weight: 650; }
.chapter-hero .lead { max-width: 820px; margin: 0; color: var(--muted); font-size: clamp(1rem,1.6vw,1.18rem); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 720;
  letter-spacing: .035em;
}
.chapter-index {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb,var(--accent) 7%,var(--panel)), var(--panel));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chapter-index::after {
  content:"";
  position:absolute;
  width:150px;height:150px;right:-58px;bottom:-72px;
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:50%;
}
.index-code { display:block; margin-bottom:28px; color:var(--accent); font-size:.72rem; font-weight:850; letter-spacing:.12em; }
.chapter-index strong { display:block; font-size:1.25rem; letter-spacing:-.025em; }
.chapter-index p { margin:10px 0 0; color:var(--muted); font-size:.88rem; }

.content-section { padding: 60px 0; }
.section-heading.compact { max-width:850px; margin-bottom:30px; }
.section-heading.compact h2 { font-size:clamp(2rem,4.4vw,3.75rem); }
.concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.concept-card, .model-card {
  position:relative;
  min-width:0;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
}
.concept-no { color:var(--accent); font-size:.72rem; font-weight:850; letter-spacing:.12em; }
.concept-card h3 { margin:16px 0 8px; font-size:1.22rem; }
.concept-card p, .model-card p { margin:0; color:var(--muted); font-size:.91rem; }
.equation {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
  margin-top:20px;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg-elevated) 72%,transparent);
  font-family:"Cambria Math","STIX Two Math",Georgia,serif;
  font-size:1.23rem;
  font-variant-numeric: lining-nums tabular-nums;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
.eq-stack { display:grid; gap:6px; justify-items:center; }
.equation.large { min-height:118px; font-size:1.7rem; }

.feedback-section { padding: 62px 0 76px; }
.feedback-loop {
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(170px,1.15fr) auto minmax(150px,1fr) auto minmax(160px,1fr) auto;
  align-items:center;
  gap:10px;
}
.loop-node {
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
.loop-node span { color:var(--accent); font-size:.7rem; font-weight:850; }
.loop-node strong { margin-top:7px; font-size:.95rem; }
.loop-node small { margin-top:4px; color:var(--muted); }
.loop-arrow { color:var(--accent); font-size:1.7rem; font-weight:300; }
.loop-return { color:var(--accent-2); font-size:2rem; }
.feedback-note { max-width:880px; margin:20px 0 0; color:var(--muted); }
.feedback-note strong { color:var(--text); }

.lab-section {
  padding:78px 0 84px;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,transparent),transparent 24%,transparent 76%,color-mix(in srgb,var(--accent-2) 3%,transparent));
}
.lab-heading { margin-bottom:34px!important; }
.lab-shell { display:grid; grid-template-columns:270px minmax(0,1fr); gap:12px; align-items:start; }
.lab-controls {
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  gap:22px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel-solid);
}
.control-group { min-width:0; }
.control-label { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:10px; }
.control-label label { font-size:.78rem; font-weight:750; }
.control-label output { color:var(--accent); font-size:.75rem; font-weight:800; font-variant-numeric:tabular-nums; }
.control-group input[type="range"] { width:100%; accent-color:var(--accent); }
.range-scale { display:flex; justify-content:space-between; margin-top:3px; color:var(--muted); font-size:.63rem; }
.lab-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:2px; }
.lab-button {
  min-height:42px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  font-weight:760;
  cursor:pointer;
}
.lab-button.primary { background:var(--accent); color:#07131c; border-color:transparent; }
.lab-main { display:grid; gap:12px; min-width:0; }
.panel { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); overflow:hidden; }
.panel-head, .plot-panel figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.panel-head > div, .plot-panel figcaption { min-width:0; }
.panel-head span, .plot-panel figcaption span { display:block; color:var(--muted); font-size:.68rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.panel-head strong, .plot-panel figcaption strong { display:block; margin-top:3px; font-size:.92rem; }
.status-dot { display:flex!important; align-items:center; gap:7px; white-space:nowrap; }
.status-dot i { width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-3) 12%,transparent); }
.status-dot b { color:var(--muted); font-size:.68rem; font-weight:750; }
.mechanics-svg { width:100%; min-height:260px; background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elevated) 45%,transparent),transparent); }
.mechanics-svg .track { stroke:var(--line-strong); stroke-width:3; }
.mechanics-svg .zero-line { stroke:var(--line); stroke-width:1; stroke-dasharray:5 6; }
.mechanics-svg .wall line { stroke:var(--muted); stroke-width:3; }
.mechanics-svg .spring { fill:none; stroke:var(--accent); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.mass-block rect { fill:url(#massGrad); stroke:color-mix(in srgb,var(--text) 18%,transparent); stroke-width:2; }
.mass-text { fill:#07131c; font-size:28px; font-weight:900; }
.svg-label { fill:var(--muted); font:600 15px system-ui,sans-serif; }
.position-label { fill:var(--text); font-weight:750; }
.force-vector line { stroke:var(--warm); stroke-width:5; stroke-linecap:round; }
.force-vector path { fill:var(--warm); }
.telemetry-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.telemetry-grid > div { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:7px; padding:14px 16px; border-right:1px solid var(--line); }
.telemetry-grid > div:last-child { border-right:0; }
.telemetry-grid span { color:var(--accent); font-size:.72rem; font-weight:850; }
.telemetry-grid strong { justify-self:end; font-size:1rem; font-variant-numeric:tabular-nums; }
.telemetry-grid small { color:var(--muted); font-size:.64rem; }
.plot-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0; }
.plot-panel { margin:0; min-width:0; }
.plot-panel figcaption { display:block; }
.plot-svg { width:100%; height:auto; min-height:250px; }
.axis { stroke:var(--line-strong); stroke-width:1; }
.grid-line { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.axis-label { fill:var(--muted); font:600 13px system-ui,sans-serif; }
.trace { fill:none; stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.trace-x { stroke:var(--accent); }
.trace-v { stroke:var(--accent-2); }
.trace-phase { stroke:var(--accent-3); }
.phase-marker { fill:var(--text); stroke:var(--bg); stroke-width:2; }
.legend { display:flex; gap:18px; padding:0 18px 17px; color:var(--muted); font-size:.7rem; }
.legend span { display:flex; align-items:center; gap:7px; }
.legend i { width:18px; height:2px; display:inline-block; }
.legend-x { background:var(--accent); }.legend-v { background:var(--accent-2); }
.plot-note { min-height:54px; margin:0; padding:0 18px 18px; color:var(--muted); font-size:.73rem; }

.model-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:12px; }
.model-card { min-height:260px; }
.model-card.key-card { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); }
.model-label { color:var(--accent); font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.model-card .equation { margin-bottom:18px; }
.assumption-list { display:grid; gap:8px; margin:22px 0; padding:0; list-style:none; }
.assumption-list li { position:relative; padding-left:17px; font-size:.86rem; }
.assumption-list li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.takeaway-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.takeaway-grid article { padding:22px; border-top:1px solid var(--line-strong); }
.takeaway-grid span { color:var(--accent); font-size:.68rem; font-weight:850; }
.takeaway-grid strong { display:block; margin:14px 0 7px; font-size:.95rem; }
.takeaway-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.next-section {
  margin-top:58px;
  margin-bottom:82px;
  padding:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent-2) 8%,var(--panel)),var(--panel));
}
.next-section h2 { margin:8px 0 5px; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.045em; }
.next-section p { margin:0; max-width:720px; color:var(--muted); }
.next-arrow { color:var(--accent); font-size:3rem; font-weight:200; }
.chapter-shells { height:0; overflow:hidden; }
.chapter-menu-link.is-active { border-color:color-mix(in srgb,var(--accent) 44%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--panel)); }
.chapter-menu-link.is-active span { color:var(--text); }

@media (max-width: 980px) {
  .chapter-hero { grid-template-columns:1fr; gap:28px; }
  .chapter-index { max-width:620px; }
  .concept-grid, .model-grid { grid-template-columns:1fr 1fr; }
  .concept-grid > :last-child, .model-grid > :last-child { grid-column:1/-1; }
  .feedback-loop { grid-template-columns:1fr auto 1fr; }
  .loop-arrow:nth-of-type(3), .loop-arrow:nth-of-type(5) { display:none; }
  .loop-node:nth-of-type(5), .loop-node:nth-of-type(7), .loop-return { margin-top:8px; }
  .lab-shell { grid-template-columns:1fr; }
  .lab-controls { position:static; grid-template-columns:1fr 1fr; }
  .lab-actions { align-self:end; }
  .plot-grid { grid-template-columns:1fr; }
  .takeaway-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .chapter-hero { padding-top:50px; padding-bottom:48px; }
  .chapter-hero h1 { font-size:clamp(2.65rem,14vw,4.8rem); }
  .content-section, .feedback-section { padding:46px 0; }
  .concept-grid, .model-grid, .takeaway-grid { grid-template-columns:1fr; }
  .concept-grid > :last-child, .model-grid > :last-child { grid-column:auto; }
  .feedback-loop { grid-template-columns:1fr; }
  .loop-arrow { transform:rotate(90deg); justify-self:center; }
  .loop-arrow:nth-of-type(3), .loop-arrow:nth-of-type(5) { display:block; }
  .loop-return { transform:none; }
  .lab-section { padding:52px 0 58px; }
  .lab-controls { grid-template-columns:1fr; }
  .mechanics-svg { min-height:230px; }
  .telemetry-grid { grid-template-columns:1fr 1fr; }
  .telemetry-grid > div:nth-child(2) { border-right:0; }
  .telemetry-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .plot-svg { min-height:215px; }
  .next-section { align-items:flex-end; padding:22px; }
}

.inline-math {
  font-family:"Cambria Math","STIX Two Math",Georgia,serif;
  white-space:nowrap;
}

@media (max-width: 420px) {
  .equation { padding-inline:12px; font-size:1.02rem; }
  .equation.large { font-size:1.32rem; }
}

@media (max-width: 360px) {
  .section-heading.compact h2 { font-size:1.78rem; }
}