.lw6-tuning {
  --lw6t-bg: #f5f5f5;
  --lw6t-fg: #1a1a1a;
  --lw6t-muted: #6a6a6a;
  --lw6t-green: #97BE0D;
  --lw6t-grid: #d8d8d8;
  --lw6t-grid-minor: #ececec;
  --lw6t-card: #ffffff;
  --lw6t-card-border: #e2e2e2;
  --lw6t-legend-border: #d8d8d8;
  --lw6t-legend-border-hover: #bcbcbc;
  --lw6t-legend-border-inactive: #ececec;
  --lw6t-legend-inactive-fg: #9a9a9a;
  --lw6t-legend-inactive-swatch: #c7c7c7;
  --lw6t-legend-check-empty: #b6b6b6;
  --lw6t-legend-check-mark: #ffffff;
  --lw6t-select-border: #cfcfcf;
  --lw6t-select-bg: #ffffff;
  --lw6t-hover-bg: rgba(0,0,0,0.04);
  --lw6t-rig-line: #1a1a1a;
  --lw6t-zero-line: #888;
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lw6t-fg);
  -webkit-font-smoothing: antialiased;
  /* Container queries below key off this element's own width, not the
     viewport, so the layout matches the JS chart sizing even when the embed
     sits in a narrow column on a wide-viewport desktop page. */
  container-type: inline-size;
  container-name: lw6t;
}
.lw6-tuning, .lw6-tuning *, .lw6-tuning *::before, .lw6-tuning *::after { box-sizing: border-box; }

.lw6-tuning.lw6t-dark {
  --lw6t-bg: #0d0d0d;
  --lw6t-fg: #ededed;
  --lw6t-muted: #a8a8a8;
  --lw6t-grid: #2e2e2e;
  --lw6t-grid-minor: #1f1f1f;
  --lw6t-card: #161616;
  --lw6t-card-border: #262626;
  --lw6t-legend-border: #2e2e2e;
  --lw6t-legend-border-hover: #444;
  --lw6t-legend-border-inactive: #232323;
  --lw6t-legend-inactive-fg: #7a7a7a;
  --lw6t-legend-inactive-swatch: #5a5a5a;
  --lw6t-legend-check-empty: #6a6a6a;
  --lw6t-legend-check-mark: #0d0d0d;
  --lw6t-select-border: #2e2e2e;
  --lw6t-select-bg: #161616;
  --lw6t-hover-bg: rgba(255,255,255,0.05);
  --lw6t-rig-line: #d6d6d6;
  --lw6t-zero-line: #5a5a5a;
  background: var(--lw6t-bg);
}

/* Toolbar — theme toggle pinned top-right of the section. */
.lw6-tuning .lw6t-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.lw6-tuning .lw6t-theme-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--lw6t-legend-border);
  color: var(--lw6t-fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lw6-tuning .lw6t-theme-btn:hover { border-color: var(--lw6t-legend-border-hover); background: var(--lw6t-hover-bg); }
.lw6-tuning .lw6t-theme-btn:focus-visible { outline: 2px solid var(--lw6t-green); outline-offset: -2px; }
.lw6-tuning .lw6t-theme-icon {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lw6t-fg);
  box-shadow: inset -3px -3px 0 0 var(--lw6t-bg);
}
.lw6-tuning.lw6t-dark .lw6t-theme-icon {
  box-shadow: inset 3px 3px 0 0 var(--lw6t-bg);
}

/* Chart section card. */
.lw6-tuning .lw6t-chart-section {
  margin-bottom: 40px;
}
.lw6-tuning .lw6t-chart-section:last-of-type { margin-bottom: 0; }

.lw6-tuning .lw6t-chart-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.lw6-tuning .lw6t-view-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lw6-tuning .lw6t-view-mini-label {
  color: var(--lw6t-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.lw6-tuning .lw6t-switch {
  display: inline-flex;
  border: 1px solid var(--lw6t-select-border);
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
}
.lw6-tuning .lw6t-seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lw6t-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lw6-tuning .lw6t-seg + .lw6t-seg { border-left: 1px solid var(--lw6t-select-border); }
.lw6-tuning .lw6t-seg:hover:not(.lw6t-active) { background: var(--lw6t-hover-bg); color: var(--lw6t-fg); }
.lw6-tuning .lw6t-seg.lw6t-active { background: var(--lw6t-green); color: #000; }
.lw6-tuning .lw6t-seg:focus-visible { outline: 2px solid var(--lw6t-green); outline-offset: -2px; }

.lw6-tuning .lw6t-target-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--lw6t-fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lw6-tuning .lw6t-swatch-band {
  display: inline-block;
  width: 26px; height: 12px;
  background: rgba(151,190,13,0.16);
  border-top: 1px solid rgba(151,190,13,0.6);
  border-bottom: 1px solid rgba(151,190,13,0.6);
}

.lw6-tuning .lw6t-plot {
  width: 100%;
  background: var(--lw6t-card);
  
  padding: 8px 4px 6px;
  overflow: hidden;
}
.lw6-tuning .lw6t-plot svg { display: block; }

.lw6-tuning .lw6t-grid-major { stroke: var(--lw6t-grid); stroke-width: 1; shape-rendering: crispEdges; }
.lw6-tuning .lw6t-grid-minor { stroke: var(--lw6t-grid-minor); stroke-width: 1; shape-rendering: crispEdges; }
.lw6-tuning .lw6t-grid-zero  { stroke: var(--lw6t-zero-line); stroke-width: 1; shape-rendering: crispEdges; }
.lw6-tuning .lw6t-frame { fill: none; stroke: var(--lw6t-grid); stroke-width: 1; shape-rendering: crispEdges; }

.lw6-tuning .lw6t-band {
  fill: rgba(151,190,13,0.20);
  stroke: rgba(151,190,13,0.65);
  stroke-width: 1;
}

.lw6-tuning .lw6t-trace-mire {
  fill: none;
  stroke: var(--lw6t-green);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lw6-tuning .lw6t-trace-rig {
  fill: none;
  stroke: var(--lw6t-rig-line);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lw6-tuning .lw6t-axis-label { fill: var(--lw6t-muted); font-size: 11px; }
.lw6-tuning .lw6t-axis-title { fill: var(--lw6t-muted); font-size: 12px; }

.lw6-tuning .lw6t-overlay { cursor: crosshair; }
.lw6-tuning .lw6t-cursor  { stroke: var(--lw6t-green); stroke-dasharray: 3 3; stroke-width: 1; }
.lw6-tuning .lw6t-marker-mire { fill: var(--lw6t-card); stroke: var(--lw6t-green); stroke-width: 2; }
.lw6-tuning .lw6t-marker-rig  { fill: var(--lw6t-card); stroke: var(--lw6t-rig-line); stroke-width: 2; }
.lw6-tuning .lw6t-tip-bg { fill: var(--lw6t-card); stroke: var(--lw6t-green); stroke-width: 1; }
.lw6-tuning .lw6t-tip-head { fill: var(--lw6t-muted); font-size: 11px; font-weight: 600; }
.lw6-tuning .lw6t-tip-line { fill: var(--lw6t-fg); font-size: 12px; font-weight: 500; }

/* Footer with trace legend on the left, smoothing dropdown on the right. */
.lw6-tuning .lw6t-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.lw6-tuning .lw6t-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.lw6-tuning .lw6t-legend-item {
  appearance: none;
  background: transparent;
  border: 1px solid var(--lw6t-legend-border);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lw6t-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.lw6-tuning .lw6t-legend-item:hover { background: var(--lw6t-hover-bg); border-color: var(--lw6t-legend-border-hover); }
.lw6-tuning .lw6t-legend-item.lw6t-inactive {
  color: var(--lw6t-legend-inactive-fg);
  border-color: var(--lw6t-legend-border-inactive);
}
.lw6-tuning .lw6t-legend-check {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  border: 1px solid var(--lw6t-green);
  background: var(--lw6t-green);
  position: relative;
  flex-shrink: 0;
}
.lw6-tuning .lw6t-legend-check::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 7px;
  border: solid var(--lw6t-legend-check-mark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lw6-tuning .lw6t-legend-item.lw6t-inactive .lw6t-legend-check {
  background: transparent;
  border-color: var(--lw6t-legend-check-empty);
}
.lw6-tuning .lw6t-legend-item.lw6t-inactive .lw6t-legend-check::after { display: none; }
.lw6-tuning .lw6t-swatch-mire {
  display: inline-block;
  width: 26px; height: 3px;
  background: var(--lw6t-green);
  border-radius: 1px;
  flex-shrink: 0;
}
.lw6-tuning .lw6t-swatch-rig {
  display: inline-block;
  width: 26px; height: 0;
  border-top: 2px dashed var(--lw6t-rig-line);
  flex-shrink: 0;
}
.lw6-tuning .lw6t-legend-item.lw6t-inactive .lw6t-swatch-mire { background: var(--lw6t-legend-inactive-swatch); }
.lw6-tuning .lw6t-legend-item.lw6t-inactive .lw6t-swatch-rig { border-top-color: var(--lw6t-legend-inactive-swatch); }

.lw6-tuning .lw6t-smoothing-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lw6-tuning .lw6t-smoothing-mini-label {
  color: var(--lw6t-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.lw6-tuning select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--lw6t-select-bg);
  color: var(--lw6t-fg);
  border: 1px solid var(--lw6t-select-border);
  border-radius: 4px;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2397BE0D' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.lw6-tuning select:hover { border-color: var(--lw6t-green); }
.lw6-tuning select:focus { outline: none; border-color: var(--lw6t-green); }

/* Explainer block — sits above the chart, mirrors the original report. */
.lw6-tuning .lw6t-explainer {
  margin: 0 0 32px;
  padding: 24px 28px;
  background: var(--lw6t-card);
  border: 1px solid var(--lw6t-card-border);
  border-left: 3px solid var(--lw6t-green);
  border-radius: 4px;
}
.lw6-tuning .lw6t-explainer-label {
  color: var(--lw6t-green);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lw6-tuning .lw6t-explainer-h2 {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--lw6t-fg);
}
.lw6-tuning .lw6t-explainer-p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 720px;
  color: var(--lw6t-fg);
}
.lw6-tuning .lw6t-explainer-p:last-child { margin-bottom: 0; }

/* Mobile layer. Short labels are hidden by default and swapped in below the
   breakpoint; touch-action lets the page still scroll vertically when the
   user scrubs horizontally across the chart. */
.lw6-tuning .lw6t-label-short { display: none; }
.lw6-tuning .lw6t-overlay { touch-action: pan-y; }

@container lw6t (max-width: 600px) {
  .lw6-tuning .lw6t-label-full { display: none; }
  .lw6-tuning .lw6t-label-short { display: inline; }
  .lw6-tuning .lw6t-toolbar { margin-bottom: 10px; }
  .lw6-tuning .lw6t-explainer {
    padding: 18px 20px;
    margin-bottom: 22px;
  }
  .lw6-tuning .lw6t-explainer-h2 { font-size: 18px; margin-bottom: 10px; }
  .lw6-tuning .lw6t-explainer-p { font-size: 14px; line-height: 1.55; }
  .lw6-tuning .lw6t-chart-header { gap: 10px; }
  .lw6-tuning .lw6t-target-legend { margin-left: 0; }
  .lw6-tuning .lw6t-chart-footer { gap: 10px; margin-top: 14px; }
  .lw6-tuning .lw6t-seg { padding: 6px 10px; }
  .lw6-tuning .lw6t-chart-section { margin-bottom: 24px; }
}
