.ltst-trend-study {
  margin: 22px 0 28px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid #a9b4b0;
  border-radius: 18px;
  background: #f2eee6;
  color: #203634;
  box-shadow: 0 16px 34px rgba(26, 43, 42, .12);
}
.ltst-trend-study * { box-sizing: border-box; }
.ltst-trend-eyebrow { margin: 0; color: #206c65; font: 800 .73rem system-ui; letter-spacing: .12em; text-transform: uppercase; }
.ltst-trend-study h3 { margin: 5px 0 9px; color: #183f3c; font-size: clamp(1.25rem, 2.1vw, 1.68rem); }
.ltst-trend-intro, .ltst-trend-boundary { max-width: 90ch; line-height: 1.5; }
.ltst-trend-intro { margin: 0 0 15px; }
.ltst-trend-controls, .ltst-trend-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 17px; }
.ltst-trend-controls label, .ltst-trend-marks label { display: grid; gap: 6px; min-width: 0; font-size: .86rem; font-weight: 750; }
.ltst-trend-controls select { min-height: 44px; width: 100%; padding: 8px 10px; border: 1px solid #768e87; border-radius: 8px; color: #143a37; background: #fffdf9; }
.ltst-trend-marks input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: #1f786a; }
.ltst-trend-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ltst-trend-panel, .ltst-trend-raw-panel { min-width: 0; margin: 0; padding: 10px; border: 1px solid #aeb9b2; border-radius: 10px; background: #fffdf9; }
.ltst-trend-panel figcaption, .ltst-trend-raw-panel figcaption { padding: 0 2px 8px; color: #204b46; font: 800 .85rem system-ui; }
.ltst-trend-panel canvas, .ltst-trend-raw-panel canvas { display: block; width: 100%; height: 225px; border: 1px solid #c09991; background: #fffdf8; }
.ltst-trend-panel button { margin: 9px 0 0; min-height: 42px; border: 1px solid #2b7569; border-radius: 8px; background: #eef5f0; color: #185248; font-weight: 750; cursor: pointer; }
.ltst-trend-panel.is-inspected { border-color: #1b776a; box-shadow: inset 0 0 0 2px rgba(27, 119, 106, .16); }
.ltst-trend-scale, .ltst-trend-raw-copy { margin: 8px 0 14px; color: #4c625b; font-size: .83rem; line-height: 1.45; }
.ltst-trend-raw { margin: 19px 0; padding: 15px; border: 1px solid #aeb9b2; border-radius: 12px; background: #e9e9e2; }
.ltst-trend-raw h4 { margin: 0 0 5px; color: #1d4640; }
.ltst-trend-raw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ltst-trend-raw-panel canvas { height: 155px; }
.ltst-trend-numeric { margin: 13px 0; max-width: 100%; overflow-x: auto; }
.ltst-trend-numeric summary { cursor: pointer; font-weight: 800; color: #195d53; }
.ltst-trend-numeric table { margin-top: 10px; width: 100%; min-width: 530px; border-collapse: collapse; font: .79rem system-ui; }
.ltst-trend-numeric th, .ltst-trend-numeric td { padding: 7px; border: 1px solid #bac7bf; text-align: left; }
.ltst-trend-question { padding: 14px; border: 1px solid #aabbb0; border-radius: 11px; background: #fffdf9; }
.ltst-trend-question fieldset { padding: 0; margin: 0; border: 0; }
.ltst-trend-question legend { font-weight: 800; margin-bottom: 8px; }
.ltst-trend-question label { display: block; margin: 10px 0; line-height: 1.42; }
.ltst-trend-question input[type=radio] { accent-color: #1f786a; }
.ltst-trend-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.ltst-trend-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid #1c6d63; border-radius: 8px; background: #176b61; color: #fff; font-weight: 750; cursor: pointer; }
.ltst-trend-actions button + button { background: #fffdf9; color: #17584f; }
.ltst-trend-feedback { margin: 12px 0 0; line-height: 1.5; }
.ltst-trend-feedback:empty { display: none; }
.ltst-trend-reveal { margin: 12px 0 0; padding: 11px; border-left: 4px solid #1e7869; background: #edf5ed; line-height: 1.5; }
.ltst-trend-reveal p { margin: 5px 0; }
.ltst-trend-boundary { margin: 16px 0 8px; font-size: .82rem; }
.ltst-trend-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; font-size: .81rem; }
.ltst-trend-links a { color: #0a6256; font-weight: 800; }
.ltst-trend-study button:focus-visible, .ltst-trend-study a:focus-visible, .ltst-trend-study select:focus-visible, .ltst-trend-study input:focus-visible, .ltst-trend-study summary:focus-visible { outline: 3px solid #d9a538; outline-offset: 2px; }
@media (max-width: 720px) {
  .ltst-trend-controls, .ltst-trend-marks, .ltst-trend-panels, .ltst-trend-raw-grid { grid-template-columns: minmax(0, 1fr); }
  .ltst-trend-study { padding: 15px; }
}