.optics-workspace {
  --optics-ink: #183647;
  --optics-red: #ed3449;
}
.optics-safety {
  padding: 1rem;
  border-left: 4px solid #be6515;
  background: #fff5df;
  color: #442c12;
}
.optics-svg-wrap {
  overflow: auto;
  margin: 1rem 0;
  border: 1px solid #b5c6d0;
  border-radius: 10px;
  background: #f3f8fb;
}
.optics-svg-wrap svg {
  display: block;
  width: 100%;
  min-width: 650px;
  color: var(--optics-ink);
  font:
    15px system-ui,
    sans-serif;
}
.optics-metal {
  fill: #ccd9e2;
  stroke: #466276;
  stroke-width: 3;
}
.optics-rail {
  stroke: #667f8e;
  stroke-width: 6;
}
.optics-beam {
  stroke: #ee3449;
  stroke-width: 3;
  opacity: 0;
}
.optics-beam.is-on {
  opacity: 0.7;
}
.optics-draggable {
  touch-action: none;
  cursor: grab;
  outline: none;
}
.optics-draggable:focus .optics-cursor-line,
.optics-draggable:focus rect {
  stroke: #6736c7;
  stroke-width: 4;
}
.optics-draggable[aria-disabled="true"] {
  cursor: default;
}
.optics-cursor-hit {
  stroke: transparent;
  stroke-width: 28;
  fill: none;
}
.optics-cursor-line {
  fill: none;
  stroke: #04788b;
  stroke-width: 2;
}
.optics-draggable[data-optics-cursor="right"] .optics-cursor-line {
  stroke: #8e48b5;
}
.optics-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.optics-controls input {
  display: block;
  width: 100%;
  max-width: 28rem;
}
.optics-workspace label {
  display: block;
  margin: 0.8rem 0;
}
.optics-workspace input[type="number"] {
  max-width: 12rem;
}
.optics-table-wrap {
  overflow: auto;
  margin: 1rem 0;
}
.optics-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}
.optics-table-wrap td,
.optics-table-wrap th {
  padding: 0.65rem;
  border: 1px solid #afc3ce;
  text-align: left;
}
.optics-table-wrap input {
  width: 8rem;
}
.optics-correction {
  background: #fff0be;
  color: #4b3600;
  padding: 0.3rem;
}
.optics-graph {
  margin: 1.5rem 0;
  overflow: auto;
}
.optics-graph svg {
  display: block;
  width: 100%;
  min-width: 650px;
  font:
    13px system-ui,
    sans-serif;
}
.optics-workspace [data-optics-status] {
  font-weight: 600;
  min-height: 1.5em;
}
.optics-workspace button:disabled {
  opacity: 0.55;
}
.optics-pattern-bg {
  fill: #101b2b;
}
.optics-scale-line {
  stroke: #456477;
  stroke-width: 1;
}
.optics-workspace meter {
  width: 10rem;
}