.feedback-lab {
  --signal: #175e70;
  --reference: #893b51;
  min-width: 0;
  margin: 0;
  padding: clamp(16px, 2.1vw, 30px);
  color: #24302c;
  background: #fafaf6;
  border: 1px solid #c6cfc2;
  border-radius: 14px;
  box-shadow: 0 12px 34px -30px #233f3a;
}
.feedback-lab figcaption { margin: 0 0 14px; font-size: clamp(17px, 2vw, 23px); letter-spacing: -.035em; font-weight: 700; }
.feedback-legend, .feedback-settings, .feedback-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.feedback-legend { font-size: 12px; font-weight: 700; }
.feedback-legend span { display: inline-flex; gap: 6px; align-items: center; }
.feedback-legend span:before { content: ""; width: 18px; border-top: 3px solid var(--signal); }
.feedback-legend span:first-child:before { border-top: 2px dashed var(--reference); }
.feedback-lab svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.feedback-lab .fb-axis { font: 19px Manrope, Arial, sans-serif; fill: #4b5d53; }
.feedback-lab .fb-ref { fill: none; stroke: var(--reference); stroke-width: 3; stroke-dasharray: 8 6; }
.feedback-lab .fb-line { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.feedback-lab .fb-guide { stroke: #778c7f; stroke-dasharray: 2 5; }
.feedback-lab .fb-dot { fill: var(--signal); stroke: #fff; stroke-width: 2.5; }
.feedback-lab .fb-readout { font-size: 13px; line-height: 1.6; min-height: 3.2em; padding-top: 10px; margin: 0; color: #39493e; }
.feedback-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px solid #d6ddd2; }
.feedback-settings { gap: 4px; }
.feedback-tools button { font: inherit; font-size: 12px; font-weight: 700; border: 1px solid #c9d2c6; border-radius: 5px; min-height: 42px; padding: 7px 12px; background: #fff; cursor: pointer; color: #30473c; }
.feedback-tools button[aria-pressed=true] { border-color: #315747; background: #315747; color: #fff; }
.feedback-tools button:focus-visible { outline: 3px solid #934258; outline-offset: 2px; }
.feedback-tools [hidden] { display: none; }
.feedback-lab + * { margin-top: 18px; }
@media(max-width:699px) { .feedback-lab {padding: 15px 13px;} .feedback-lab .fb-axis{font-size:29px;} .feedback-legend{font-size:11px;} .feedback-tools button{padding:8px;font-size:11px;} }

/* Keep the full response plot, explanation and transport together. */
.feedback-lab{width:100%;max-width:840px;margin-inline:auto;padding:clamp(14px,1.7vw,23px);border-radius:10px;background:linear-gradient(145deg,#fffefa,#f1f5ed);border-color:#bfcfc4;box-shadow:0 15px 30px -26px #1d4039}
.feedback-lab figcaption{font-size:clamp(17px,1.6vw,21px);line-height:1.2;margin-bottom:10px}
.feedback-lab .feedback-legend{font-size:11px;gap:8px 14px;line-height:1.4}
.feedback-lab svg{height:clamp(140px,25svh,218px);width:100%;max-height:218px;margin-top:8px;background:linear-gradient(0deg,#d9e2d955 1px,transparent 1px),linear-gradient(90deg,#d9e2d944 1px,transparent 1px);background-size:100% 20%,12.5% 100%;border-bottom:1px solid #e0e7dc;border-radius:4px}
.feedback-lab .fb-line{stroke-width:3.5;filter:drop-shadow(0 1px 1px #175e701c)}
.feedback-lab .fb-dot{stroke-width:2.5;filter:drop-shadow(0 0 3px #175e7038)}
.feedback-lab .fb-ref{stroke-width:2.3;stroke-dasharray:7 5}
.feedback-lab .fb-readout{font-size:12px;line-height:1.5;min-height:3em;padding-top:8px;margin-bottom:8px}
.feedback-lab .feedback-tools{padding-top:8px;gap:6px}
.feedback-lab .feedback-tools button{font-size:11px;min-height:44px;padding:7px 10px}
.feedback-lab small{font-size:11px;line-height:1.45;display:block;margin-top:7px}
@media(max-width:699px){
 .feedback-lab{padding:13px 12px;border-radius:8px}
 .feedback-lab figcaption{font-size:17px;margin-bottom:8px}
 .feedback-lab svg{height:clamp(118px,22svh,170px);max-height:170px;margin-top:6px}
 .feedback-lab .fb-readout{font-size:12px;line-height:1.5;min-height:4.5em;padding-top:7px;margin-bottom:5px}
 .feedback-lab .feedback-tools{flex-wrap:nowrap;gap:5px}
 .feedback-lab .feedback-settings{gap:4px;flex-wrap:nowrap}
 .feedback-lab .feedback-transport{gap:4px;flex-wrap:nowrap}
 .feedback-lab .feedback-tools button{font-size:11px;padding-inline:8px}
 .feedback-lab small{font-size:10px;margin-top:6px}
}
@media(max-width:359px){.feedback-lab .feedback-tools button{font-size:10px;padding-inline:6px}.feedback-lab .feedback-legend{font-size:10px}}

