.cl-workspace {
  --cl-blue: #2563eb;
}
.cl-workspace h2 {
  margin-top: 1.5rem;
}
.cl-workspace svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: system-ui, sans-serif;
  font-size: 15px;
}
.cl-apparatus {
  overflow: auto;
  margin: 1rem 0;
  border: 1px solid #64748b;
  border-radius: 12px;
  background: #101827;
}
.cl-apparatus svg {
  min-width: 850px;
  color: #e2e8f0;
}
.cl-bench-bg {
  fill: #172237;
}
.cl-apparatus text {
  fill: #e2e8f0;
}
.cl-optical-axis {
  stroke: #94a3b8;
  stroke-dasharray: 6 5;
  stroke-width: 1.2;
  fill: none;
}
.cl-object {
  stroke: #fbbf24;
  stroke-width: 4;
  fill: none;
}
.cl-image {
  stroke: #efb54e;
  stroke-width: 4;
  fill: none;
}
.cl-lens {
  stroke: #60a5fa;
  stroke-width: 3;
  fill: #60a5fa55;
}
.cl-screen {
  fill: #e5e7eb;
  stroke: #94a3b8;
  stroke-width: 2;
}
.cl-centre {
  stroke: #f43f5e;
  stroke-width: 2;
  fill: none;
}
.cl-stand {
  stroke: #cbd5e1;
  stroke-width: 4;
  fill: none;
}
.cl-ruler {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}
[data-cl-drag] {
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
[data-cl-drag]:focus .cl-lens,
[data-cl-drag]:focus .cl-screen {
  stroke: #fbbf24;
  stroke-width: 5;
}
[data-cl-switch] {
  cursor: pointer;
  outline: none;
}
[data-cl-switch] rect {
  fill: #334155;
  stroke: #64748b;
  stroke-width: 2;
}
[data-cl-switch][aria-checked="true"] rect {
  fill: #166534;
}
[data-cl-switch]:focus rect {
  stroke: #fbbf24;
  stroke-width: 4;
}
[aria-disabled="true"] {
  cursor: wait;
}
.cl-target {
  padding: 0.8rem 1rem;
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  color: #172554;
  font-weight: 600;
}
.cl-insets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0;
}
.cl-position-insets,
.cl-height-insets {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
}
.cl-position-insets svg {
  max-height: 180px;
}
.cl-height-insets {
  display: flex;
}
.cl-height-insets svg {
  width: 50%;
  max-height: 460px;
}
.cl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}
.cl-controls label {
  flex: 1 1 180px;
}
.cl-controls input:not([type="checkbox"]),
.cl-workspace form > label input {
  display: block;
  max-width: 13rem;
  width: 100%;
  padding: 0.6rem;
}
.cl-workspace button {
  margin: 0.5rem 0.5rem 0.5rem 0;
}
.cl-observe {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cl-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}
.cl-workspace table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}
.cl-workspace caption {
  text-align: left;
  font-weight: 600;
  padding: 0.5rem 0;
}
.cl-workspace th,
.cl-workspace td {
  border: 1px solid #cbd5e1;
  padding: 0.6rem;
  text-align: right;
  vertical-align: top;
}
.cl-workspace th {
  background: #eff6ff;
}
.cl-workspace td input {
  width: 7.5rem;
  padding: 0.5rem;
}
.cl-feedback {
  display: inline-flex;
  flex-direction: column;
}
.cl-feedback.accepted {
  color: #166534;
}
.cl-feedback.corrected {
  color: #9a3412;
}
.cl-feedback small {
  font-size: 0.75rem;
}
.cl-graph {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: white;
  color: #0f172a;
}
.cl-graph svg {
  max-width: 900px;
  margin: auto;
}
.cl-graph .minor {
  stroke: #e9eef5;
  stroke-width: 0.6;
}
.cl-graph .major {
  stroke: #cbd5e1;
  stroke-width: 1;
}
.cl-graph .cl-axis {
  stroke: #334155;
  stroke-width: 2;
  fill: none;
}
.cl-fit {
  stroke: #dc2626;
  stroke-width: 2;
}
.cl-graph circle {
  fill: #1d4ed8;
  stroke: white;
  stroke-width: 1;
}
.cl-errorbar {
  stroke: #1d4ed8;
  stroke-width: 1.5;
  fill: none;
}
.cl-evaluation {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 10px;
  color: #0f172a;
}
@media (max-width: 700px) {
  .cl-insets {
    grid-template-columns: 1fr;
  }
  .cl-height-insets svg {
    max-height: none;
  }
  .cl-graph {
    padding: 0.2rem;
  }
  .cl-graph svg {
    min-width: 600px;
  }
  .cl-graph {
    overflow: auto;
  }
}