.lqr {
  --lqr-fg: #1e293b;
  --lqr-fg-light: #64748b;
  --lqr-code-bg: #f1f5f9;
  --lqr-bg: #ffffff;
  --lqr-accent: #2563eb;
  --lqr-primary-bg: #ffffff;
  --lqr-text-font: "Atkinson Hyperlegible Next", system-ui;
  --lqr-code-font: "Space Mono", monospace;

  --lqr-blue: #2563eb;
  --lqr-rose: #dc3f7c;
  --lqr-gold: #b7791f;
  --lqr-green: #228b5a;
  --lqr-border: color-mix(in srgb, var(--lqr-fg) 18%, transparent);
  --lqr-panel: color-mix(in srgb, var(--lqr-code-bg) 76%, var(--lqr-bg));
  --lqr-panel-strong: color-mix(in srgb, var(--lqr-code-bg) 88%, var(--lqr-bg));
  --lqr-muted: var(--lqr-fg-light, #64748b);
  display: grid;
  gap: 0.85rem;
  max-width: 900px;
  margin: 1.5em 0 2rem;
  container-type: inline-size;
}

.lqr-controls,
.lqr-plot-panel,
.lqr-readout,
.lqr-matrix {
  border: 1px solid var(--lqr-border);
  border-radius: 8px;
  background: var(--lqr-panel);
}

.lqr-controls,
.lqr-plot-panel {
  padding: 0.75rem;
}

.lqr-control-head,
.lqr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.lqr h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.lqr-status,
.lqr-readout-label,
.lqr-matrix-label {
  color: var(--lqr-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lqr-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.lqr-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "range range";
  gap: 0.25rem 0.65rem;
  min-width: 0;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
}

.lqr-slider span {
  grid-area: label;
}

.lqr-slider input {
  grid-area: range;
  width: 100%;
  min-width: 0;
  cursor: pointer;
}

#lqr-q1 {
  accent-color: var(--lqr-blue);
}

#lqr-q2 {
  accent-color: var(--lqr-rose);
}

.lqr-slider output {
  grid-area: value;
  justify-self: end;
  min-width: 3.1rem;
  font-family: var(--lqr-code-font, monospace);
  font-size: 0.84rem;
  text-align: right;
}

.lqr-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.lqr-action-row button {
  padding: 0.34rem 0.68rem;
  border: 1px solid var(--lqr-border);
  border-radius: 5px;
  background: var(--lqr-panel-strong);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.lqr-action-row button:hover,
.lqr-action-row button:focus-visible {
  border-color: transparent;
  background: var(--lqr-accent, #2563eb);
  color: var(--lqr-primary-bg, #fff);
}

.lqr-plot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 360;
  border-radius: 6px;
  background: var(--lqr-bg);
}

.lqr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  color: var(--lqr-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.lqr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.lqr-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.22rem;
  border-radius: 999px;
}

.lqr-swatch-state-1 {
  background: var(--lqr-blue);
}

.lqr-swatch-state-2 {
  background: var(--lqr-rose);
}

.lqr-swatch-input {
  background: var(--lqr-gold);
}

.lqr-readout-grid,
.lqr-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.lqr-readout,
.lqr-matrix {
  min-width: 0;
  padding: 0.62rem;
}

.lqr-code {
  margin-top: 0.3rem;
  overflow-x: auto;
  font-family: var(--lqr-code-font, monospace);
  font-size: 0.84rem;
  white-space: nowrap;
}

.lqr-pole-plot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-top: 0.3rem;
  border-radius: 4px;
}

.lqr-pole-axis {
  stroke: color-mix(in srgb, var(--lqr-fg) 28%, transparent);
  stroke-width: 1;
}

.lqr-unit-circle {
  fill: none;
  stroke: color-mix(in srgb, var(--lqr-fg) 50%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.lqr-pole-label {
  fill: var(--lqr-muted);
  font-family: var(--lqr-text-font, system-ui);
  font-size: 11px;
}

.lqr-pole-marker {
  stroke: var(--lqr-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.lqr-matrix > div:last-child {
  margin-top: 0.35rem;
  overflow-x: auto;
}

.lqr-matrix table {
  margin: 0;
  border-collapse: collapse;
  font-family: var(--lqr-code-font, monospace);
  font-size: 0.82rem;
}

.lqr-matrix td {
  min-width: 3.25rem;
  padding: 0.18rem 0.45rem;
  border: 0;
  text-align: right;
}

.lqr-axis,
.lqr-grid-line {
  stroke: color-mix(in srgb, var(--lqr-fg) 22%, transparent);
  stroke-width: 1;
}

.lqr-grid-line {
  stroke-dasharray: 3 5;
}

.lqr-grid-line-zero {
  stroke: color-mix(in srgb, var(--lqr-fg) 42%, transparent);
  stroke-dasharray: none;
  stroke-width: 1.5;
}

.lqr-settling-band {
  stroke: var(--lqr-green);
  stroke-dasharray: 7 5;
  stroke-width: 1.5;
}

.lqr-settling-time-line {
  stroke: var(--lqr-green);
  stroke-dasharray: 3 3;
  stroke-width: 2;
}

.lqr-axis-label,
.lqr-tick-label,
.lqr-settling-band-label,
.lqr-settling-time-label {
  fill: var(--lqr-muted);
  font-family: var(--lqr-text-font, system-ui);
  font-size: 12px;
}

.lqr-settling-band-label,
.lqr-settling-time-label {
  fill: var(--lqr-green);
  font-weight: 700;
}

.lqr-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.lqr-line-state-1 {
  stroke: var(--lqr-blue);
}

.lqr-line-state-2 {
  stroke: var(--lqr-rose);
}

.lqr-line-input {
  stroke: var(--lqr-gold);
}

@container (max-width: 760px) {
  .lqr-slider-grid,
  .lqr-readout-grid,
  .lqr-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lqr-control-head,
  .lqr-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lqr-legend {
    justify-content: flex-start;
  }
}

@container (max-width: 480px) {
  .lqr-slider-grid,
  .lqr-readout-grid,
  .lqr-matrix-grid {
    grid-template-columns: 1fr;
  }

  .lqr-action-row button {
    flex: 1 1 auto;
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lqr {
    --lqr-fg: #c9d1db;
    --lqr-fg-light: #9ca3af;
    --lqr-code-bg: #1f2937;
    --lqr-bg: #111827;
    --lqr-accent: #60c6f0;
    --lqr-primary-bg: #1e293b;
  }
}

html[data-theme="dark"] .lqr {
  --lqr-fg: #c9d1db;
  --lqr-fg-light: #9ca3af;
  --lqr-code-bg: #1f2937;
  --lqr-bg: #111827;
  --lqr-accent: #60c6f0;
  --lqr-primary-bg: #1e293b;
}