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

.fall-stand {
  stroke: #526d7d;
  stroke-width: 12;
  fill: none;
}
.fall-ruler {
  fill: #fff4cf;
  stroke: #596b76;
  stroke-width: 1;
}
.fall-scale-line {
  stroke: #344f61;
  stroke-width: 1;
}
.fall-magnet {
  fill: none;
  stroke: #a4374e;
  stroke-width: 10;
}
.fall-ball {
  fill: #294e66;
  stroke: #122f42;
  stroke-width: 2;
}
.fall-reference {
  fill: none;
  stroke: #087d85;
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
}
.fall-impact {
  stroke: #aa3f31;
  stroke-width: 8;
}
.fall-tray {
  fill: #e2eaf0;
  stroke: #5a7486;
  stroke-width: 3;
}
.fall-timer-box {
  fill: #183647;
  stroke: #637d8b;
  stroke-width: 2;
}
.fall-timer-label {
  fill: #fff;
}
.fall-timer {
  font:
    42px ui-monospace,
    monospace;
  fill: #fff;
}
.fall-workspace [data-fall-magnet-status] {
  fill: #183647;
}
.fall-workspace [data-fall-reference-label] {
  font-size: 13px;
}
.fall-draggable:focus rect {
  stroke: #6736c7;
  stroke-width: 4;
}
.fall-svg-wrap svg {
  min-width: 760px;
}
.fall-switch { cursor: pointer; }
.fall-switch-body { fill: #5d5d5d; }
.fall-switch-on { fill: #3b8f4a; }
.fall-switch-off { fill: #c43d2d; }
.fall-switch:focus { outline: none; }
.fall-switch:focus .fall-switch-body { stroke: #e28920; stroke-width: 4; }
.fall-switch[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }