.chain-chapter { margin-top:96px; }
.chain-index {
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-3) 8%,var(--panel)),var(--panel));
}
.chain-index::after { border-color:color-mix(in srgb,var(--accent-3) 30%,transparent); }

.chain-model-grid,
.chain-spectrum-grid,
.continuum-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.chain-model-grid article,
.chain-spectrum-grid article,
.continuum-grid article {
  min-width:0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
}
.chain-model-grid h3 { margin:14px 0 8px; }
.chain-model-grid p,
.chain-spectrum-grid p,
.continuum-grid p {
  margin:9px 0 0;
  color:var(--muted);
  font-size:.84rem;
}
.chain-primary {
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)) !important;
}
.chain-modal-card {
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 6%,var(--panel)),var(--panel)) !important;
}
.chain-dispersion-card {
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-3) 7%,var(--panel)),var(--panel)) !important;
}
.continuum-correction {
  background:linear-gradient(145deg,color-mix(in srgb,var(--warm) 5%,var(--panel)),var(--panel)) !important;
}
.chain-equation {
  min-height:94px;
  overflow-x:auto;
  justify-content:flex-start;
  font-size:clamp(.92rem,1.35vw,1.12rem);
}
.chain-equation.large { font-size:clamp(1.02rem,1.65vw,1.28rem); }
.chain-note {
  margin-top:12px;
  padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--accent-2) 30%,var(--line));
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent-2) 4%,var(--panel));
  color:var(--muted);
  font-size:.82rem;
}
.chain-note strong { color:var(--text); }

.chain-lab-section {
  background:
    radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--accent-3) 7%,transparent),transparent 30%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,transparent),transparent 26%);
}
.chain-lab {
  display:grid;
  grid-template-columns:282px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.chain-controls {
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  gap:18px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel-solid);
}
.chain-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.chain-presets button {
  min-width:0;
  min-height:36px;
  padding:0 6px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--muted);
  font-size:.65rem;
  font-weight:760;
  cursor:pointer;
}
.chain-presets button:hover,.chain-presets button:focus-visible { color:var(--text); border-color:var(--line-strong); }
.chain-main { min-width:0; display:grid; gap:12px; }
.chain-metrics {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
}
.chain-metrics article {
  min-width:0;
  padding:14px 12px;
  border-right:1px solid var(--line);
}
.chain-metrics article:last-child { border-right:0; }
.chain-metrics span { display:block; color:var(--muted); font-size:.62rem; font-weight:760; }
.chain-metrics strong {
  display:inline-block;
  margin-top:5px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.94rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.chain-metrics small { margin-left:4px; color:var(--muted); font-size:.54rem; }

.chain-mechanics svg {
  display:block;
  width:100%;
  min-height:280px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elevated) 45%,transparent),transparent);
}
.chain-axis { stroke:var(--line); stroke-width:1.2; stroke-dasharray:5 6; }
.chain-equilibrium-tick { stroke:color-mix(in srgb,var(--muted) 42%,transparent); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; }
.chain-wall line { stroke:var(--muted); stroke-width:3; }
.chain-spring {
  fill:none;
  stroke:var(--accent-3);
  stroke-width:3.1;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.chain-mass-node circle {
  fill:url(#chainMassGrad);
  stroke:color-mix(in srgb,var(--text) 18%,transparent);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.chain-mass-node text {
  fill:#07131c;
  font:800 10px system-ui,sans-serif;
}
.chain-svg-label { fill:var(--muted); font:600 13px system-ui,sans-serif; }
.chain-mode-label { fill:var(--accent-2); font:800 13px system-ui,sans-serif; }
.chain-geometry-note {
  margin:0;
  padding:0 20px 16px;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.55;
}


.chain-plot-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chain-plot { margin:0; }
.chain-plot figcaption {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.chain-plot figcaption > div > span {
  display:block;
  color:var(--muted);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.chain-plot figcaption strong { display:block; margin-top:3px; font-size:.92rem; }
.chain-plot figcaption p { margin:0; max-width:245px; color:var(--muted); font-size:.69rem; text-align:right; }
.chain-plot svg { display:block; width:100%; min-height:265px; }
.chain-shape-guide,
.chain-disp {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.chain-shape-guide { stroke:var(--accent); stroke-width:2.4; }
.chain-shape-point { fill:var(--accent-2); stroke:var(--bg); stroke-width:1.7; vector-effect:non-scaling-stroke; }
.chain-disp.discrete { stroke:var(--accent); stroke-width:2.6; }
.chain-disp.continuum { stroke:var(--accent-2); stroke-width:2.1; stroke-dasharray:7 6; }
.chain-disp-marker { fill:var(--warm); stroke:var(--bg); stroke-width:2; vector-effect:non-scaling-stroke; }
.chain-disp-projection { stroke:var(--warm); stroke-width:1.1; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
.chain-legend { display:flex; gap:16px; padding:0 18px 16px; color:var(--muted); font-size:.68rem; }
.chain-legend span { display:flex; align-items:center; gap:7px; }
.chain-legend i { display:inline-block; width:18px; height:2px; }
.chain-legend i.discrete { background:var(--accent); }
.chain-legend i.continuum { background:var(--accent-2); }

.chain-interpretation {
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent-3) 5%,var(--panel)),var(--panel));
}
.chain-interpretation > span {
  color:var(--muted);
  font-size:.65rem;
  font-weight:760;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.chain-interpretation strong { display:block; margin-top:7px; font-size:1.04rem; }
.chain-interpretation p { margin:7px 0 0; color:var(--muted); font-size:.79rem; }

.chain-synthesis {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:stretch;
}
.chain-synthesis article {
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel);
}
.chain-synthesis article > span {
  color:var(--accent-2);
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.chain-synthesis article strong { display:block; margin-top:8px; font-size:.98rem; }
.chain-synthesis article p { margin:8px 0 0; color:var(--muted); font-size:.8rem; }
.chain-synthesis > i { align-self:center; color:var(--accent-3); font-size:1.4rem; font-style:normal; }
.chain-bridge {
  margin-top:12px;
  padding:24px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:var(--radius-sm);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 6%,var(--panel)),color-mix(in srgb,var(--accent-3) 4%,var(--panel)));
}
.chain-bridge > span {
  color:var(--accent);
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.chain-bridge strong { display:block; margin-top:8px; font-size:1.06rem; }
.chain-bridge p { margin:8px 0 0; color:var(--muted); font-size:.82rem; }

@media (max-width:1120px) {
  .chain-metrics { grid-template-columns:repeat(3,1fr); }
  .chain-metrics article:nth-child(3n) { border-right:0; }
  .chain-metrics article:nth-child(-n+3) { border-bottom:1px solid var(--line); }
}
@media (max-width:980px) {
  .chain-model-grid,.chain-spectrum-grid,.continuum-grid { grid-template-columns:1fr 1fr; }
  .chain-model-grid > :last-child,.chain-spectrum-grid > :last-child,.continuum-grid > :last-child { grid-column:1/-1; }
  .chain-lab { grid-template-columns:1fr; }
  .chain-controls { position:static; grid-template-columns:1fr 1fr; }
  .chain-controls .lab-actions,.chain-controls .chain-presets { align-self:end; }
  .chain-plot-grid { grid-template-columns:1fr; }
  .chain-synthesis { grid-template-columns:1fr; }
  .chain-synthesis > i { transform:rotate(90deg); justify-self:center; }
}
@media (max-width:760px) {
  .chain-chapter { margin-top:58px; }
  .chain-model-grid,.chain-spectrum-grid,.continuum-grid,.chain-controls { grid-template-columns:1fr; }
  .chain-model-grid > :last-child,.chain-spectrum-grid > :last-child,.continuum-grid > :last-child { grid-column:auto; }
  .chain-metrics { grid-template-columns:1fr 1fr; }
  .chain-metrics article { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .chain-metrics article:nth-child(2n) { border-right:0; }
  .chain-metrics article:nth-child(3n) { border-right:1px solid var(--line); }
  .chain-metrics article:nth-last-child(-n+2) { border-bottom:0; }
  .chain-plot figcaption { display:block; }
  .chain-plot figcaption p { margin-top:7px; text-align:left; }
  .chain-plot svg { min-height:235px; }
  .chain-mechanics svg { min-height:245px; }
}
@media (max-width:430px) {
  .chain-presets { grid-template-columns:1fr; }
  .chain-metrics { grid-template-columns:1fr; }
  .chain-metrics article,.chain-metrics article:nth-child(2n),.chain-metrics article:nth-child(3n) { border-right:0; border-bottom:1px solid var(--line); }
  .chain-metrics article:last-child { border-bottom:0; }
}
@media (max-width:760px) {
  .chain-mass-node text { display:none; }
  .chain-geometry-note { padding-inline:16px; }
}
