.feature-trace { margin: 16px; padding: 17px; border: 1px solid #d7d0ec; border-radius: 7px; background: #faf8fd; color: #263342; }
.feature-trace h3 { margin: 0 0 7px; font-size: 1.05rem; }
.feature-trace p { margin: 7px 0; font-size: .86rem; line-height: 1.5; }
.feature-trace-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; margin: 14px 0; }
.feature-trace-controls label { font-size: .82rem; font-weight: 800; }
.feature-trace-controls input[type="range"] { flex: 1 1 160px; min-width: 100px; }
.feature-trace-controls output { font: 750 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.feature-trace-controls button { min-height: 42px; }
.feature-trace-flow { display: grid; grid-template-columns: minmax(85px,.6fr) repeat(2,minmax(0,1fr)) minmax(95px,.7fr); gap: 9px; align-items: stretch; }
.feature-trace-stage { min-width: 0; padding: 11px; border: 1px solid #ddd8e9; border-radius: 6px; background: #fff; }
.feature-trace-stage > strong { display: block; margin-bottom: 7px; font-size: .76rem; }
.feature-trace-stage > output, .feature-trace-stage > .feature-trace-sum { font: 800 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.feature-trace-vector { display: grid; gap: 4px; font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.feature-trace-vector span { display: block; overflow-wrap: anywhere; }
.feature-trace-vector .signal { color: #235f9e; }
.feature-trace-vector .nuisance { color: #b05f3b; }
.feature-trace-sum { color: #7862b2; }
.feature-trace details { margin-top: 11px; }
.feature-trace summary { cursor: pointer; font-size: .82rem; font-weight: 750; }
.feature-trace-table-wrap { max-width: 100%; overflow-x: auto; }
.feature-trace-table { width: 100%; border-collapse: collapse; font: .77rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.feature-trace-table th, .feature-trace-table td { padding: 7px 8px; border-bottom: 1px solid #e3dfeb; text-align: right; white-space: nowrap; }
.feature-trace-table th:first-child, .feature-trace-table td:first-child { text-align: left; }
.feature-trace .feature-trace-fig { margin-top: 10px; color: #5d6877; font-size: .78rem; }
.feature-trace [hidden] { display: none; }
.function-reading-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.function-reading-route > strong { font-size: .8rem; white-space: nowrap; }
.function-reading-route details { position: relative; }
.function-reading-route summary { padding: 9px 10px; cursor: pointer; font-size: .85rem; font-weight: 750; }
.function-reading-route details > div { display: grid; gap: 5px; }
.function-walkthrough { padding: 13px 16px; border-bottom: 1px solid #d8dde6; background: #fff9ea; }
.function-walkthrough strong { display: block; margin-bottom: 5px; font-size: .9rem; }
.function-walkthrough p { margin: 5px 0; font-size: .85rem; line-height: 1.5; }
.function-sgd-drawer { grid-column: 1 / -1; margin: 0; padding: 0; }
.function-sgd-drawer .lab-controls { padding: 10px 0 0; border: 0; background: transparent; grid-template-columns: minmax(0,1fr); }
.function-next { display: block; margin-top: 10px; font-weight: 800; }
.function-story-checkpoint { margin-top: 24px; padding: 22px; border: 2px solid #bcd1be; border-radius: 8px; background: #f5faf4; }
.function-story-checkpoint h3 { margin: 0 0 9px; }
.function-story-checkpoint p { margin: 9px 0; }
.function-story-checkpoint ul { padding-left: 20px; font-size: .9rem; line-height: 1.7; }
@media (max-width: 700px) {
  .feature-trace { margin: 12px; padding: 13px; }
  .feature-trace-flow { grid-template-columns: minmax(0,1fr); }
  .feature-trace-vector { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .function-reading-route { gap: 4px; }
  .function-story-checkpoint { padding: 16px; }
}