.qtdb-interval-study {
  min-width: 0;
  margin: 22px 0 30px;
  padding: clamp(14px, 2vw, 25px);
  border: 1px solid #9db6ac;
  border-radius: 20px;
  background: linear-gradient(160deg, #edf5ee 0%, #f8f7f0 100%);
  color: #1e3934;
  box-shadow: 0 15px 32px rgba(23, 51, 47, .12);
}
.qtdb-interval-study h3 {
  margin: 4px 0 8px;
  color: #153e38;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
}
.qtdb-interval-kicker {
  margin: 0;
  color: #206558;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qtdb-interval-intro,
.qtdb-interval-limits,
.qtdb-interval-source {
  max-width: 84ch;
  line-height: 1.55;
}
.qtdb-interval-intro { margin: 0 0 18px; }
.qtdb-interval-figure { margin: 0; }
.qtdb-interval-plot-frame {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ba9b91;
  border-radius: 12px;
  background: #fffaf3;
  box-shadow: inset 0 0 0 4px #f4e8dc, 0 9px 19px rgba(34, 55, 49, .09);
}
.qtdb-interval-plot {
  display: block;
  width: 100%;
  height: 342px;
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}
.qtdb-interval-paper { fill: #fffaf3; }
.qtdb-interval-grid-minor { stroke: rgba(179, 77, 70, .14); stroke-width: 1; }
.qtdb-interval-grid-major { stroke: rgba(172, 71, 64, .3); stroke-width: 1.2; }
.qtdb-interval-divider { stroke: rgba(116, 76, 66, .42); stroke-width: 1.5; }
.qtdb-interval-trace {
  fill: none;
  stroke: #243c3d;
  stroke-width: 2.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.qtdb-interval-lead-label {
  fill: #153d3b;
  font: 800 17px system-ui, sans-serif;
  paint-order: stroke;
  stroke: #fffaf3;
  stroke-width: 5px;
  pointer-events: none;
}
.qtdb-interval-time {
  fill: #6a504a;
  font: 700 13px ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}
.qtdb-interval-marks { pointer-events: none; }
.qtdb-interval-marker line { stroke-width: 2.8; }
.qtdb-interval-marker text {
  font: 800 13px system-ui, sans-serif;
  paint-order: stroke;
  stroke: #fffaf3;
  stroke-width: 4px;
}
.qtdb-interval-marker-p line { stroke: #5e49a6; }
.qtdb-interval-marker-p text { fill: #5e49a6; }
.qtdb-interval-marker-qrs line { stroke: #146295; }
.qtdb-interval-marker-qrs text { fill: #146295; }
.qtdb-interval-marker-end line { stroke: #ae4e22; }
.qtdb-interval-marker-end text { fill: #a0441a; }
.qtdb-interval-marker-expert line { stroke: #2e7b49; stroke-dasharray: 7 5; }
.qtdb-interval-marker-expert text { fill: #27663a; }
.qtdb-interval-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  margin-top: 10px;
  font-size: .79rem;
  font-weight: 750;
  color: #3f5850;
}
.qtdb-interval-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.qtdb-interval-legend-item[hidden] { display: none; }
.qtdb-interval-swatch { width: 17px; border-top: 3px solid; }
.qtdb-interval-swatch-p { border-color: #5e49a6; }
.qtdb-interval-swatch-qrs { border-color: #146295; }
.qtdb-interval-swatch-end { border-color: #ae4e22; }
.qtdb-interval-swatch-expert { border-color: #2e7b49; border-top-style: dashed; }
.qtdb-interval-figure figcaption {
  margin: 9px 1px 0;
  color: #425d54;
  font-size: .82rem;
  line-height: 1.5;
}
.qtdb-interval-toolbar,
.qtdb-interval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
}
.qtdb-interval-toolbar { margin-bottom: 12px; }
.qtdb-interval-toolbar button,
.qtdb-interval-actions button {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #477367;
  border-radius: 9px;
  background: #fff;
  color: #1c4a3d;
  font: inherit;
  font-size: .87rem;
  font-weight: 750;
  cursor: pointer;
}
.qtdb-interval-toolbar button[aria-pressed="true"],
.qtdb-interval-actions button:first-child {
  border-color: #205e55;
  background: #205e55;
  color: #fff;
}
.qtdb-interval-actions button:disabled { opacity: .56; cursor: not-allowed; }
.qtdb-interval-study button:focus-visible,
.qtdb-interval-study input:focus-visible { outline: 3px solid #aa5e24; outline-offset: 3px; }
.qtdb-interval-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}
.qtdb-interval-slider {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #c5d3c8;
  border-radius: 10px;
  background: #fff;
  color: #24483d;
  font-size: .85rem;
  font-weight: 760;
}
.qtdb-interval-slider input { width: 100%; accent-color: #205e55; }
.qtdb-interval-clock {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #475e57;
  font: 700 .78rem ui-monospace, SFMono-Regular, Consolas, monospace;
}
.qtdb-interval-spans { margin: 15px 0 0; color: #153f37; font-weight: 790; line-height: 1.45; }
.qtdb-interval-question {
  min-width: 0;
  margin: 16px 0 0;
  padding: 13px;
  border: 1px solid #bacac0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .83);
}
.qtdb-interval-question legend { padding: 0 4px; color: #21463c; font-weight: 800; }
.qtdb-interval-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0;
  line-height: 1.42;
  cursor: pointer;
}
.qtdb-interval-choice input { flex: none; margin-top: .27em; accent-color: #205e55; }
.qtdb-interval-feedback {
  min-height: 3em;
  margin: 12px 0;
  font-weight: 650;
  line-height: 1.5;
}
.qtdb-interval-limits {
  padding: 11px 13px;
  border-left: 4px solid #598779;
  background: rgba(255, 255, 255, .62);
  font-size: .84rem;
}
.qtdb-interval-source { margin-bottom: 0; font-size: .78rem; color: #52695e; }
.qtdb-interval-source a { color: #125d6c; text-decoration: underline; }
@media (max-width: 690px) {
  .qtdb-interval-controls { grid-template-columns: 1fr; }
  .qtdb-interval-toolbar button { flex: 1 1 135px; }
  .qtdb-interval-actions button { flex: 1 1 170px; }
  .qtdb-interval-plot { height: 284px; }
  .qtdb-interval-plot-frame { position: relative; }
  .qtdb-interval-plot-frame::before,
  .qtdb-interval-plot-frame::after {
    position: absolute;
    z-index: 1;
    left: 9px;
    padding: 1px 4px;
    background: rgba(255, 250, 243, .88);
    color: #153d3b;
    font: 800 12px system-ui, sans-serif;
    pointer-events: none;
  }
  .qtdb-interval-plot-frame::before { content: "MLII"; top: 22px; }
  .qtdb-interval-plot-frame::after { content: "V5"; top: 52%; }
  .qtdb-interval-lead-label,
  .qtdb-interval-marker text,
  .qtdb-interval-time { display: none; }
  .qtdb-interval-study { border-radius: 14px; }
}
