.sound-workspace {
  --sound-ink: #244054;
}
.sound-workspace svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem auto;
  background: #f7fafc;
  border: 1px solid #dce6ed;
  border-radius: 14px;
}
.sound-workspace svg text {
  font:
    15px system-ui,
    sans-serif;
  fill: var(--sound-ink);
}
.sound-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: end;
  margin: 1rem 0;
}
.sound-controls label,
.sound-workspace form label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem;
}
.sound-workspace input[type="number"] {
  width: 11rem;
  max-width: 100%;
}
.sound-workspace button {
  margin: 0.3rem 0;
}
.sound-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}
.sound-workspace table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.sound-workspace th,
.sound-workspace td {
  border: 1px solid #d7e2ea;
  padding: 0.65rem;
  text-align: left;
}
.sound-workspace th {
  background: #edf3f7;
}
.sound-workspace table input[type="number"] {
  min-width: 7rem;
  width: 9rem;
}
.sound-correction {
  background: #fff0cc !important;
  color: #69420b;
}
.sound-safety {
  border-left: 4px solid #ae790d;
  background: #fff7e5;
  padding: 1rem;
}
.sound-ink {
  stroke: #273d4b;
  stroke-width: 1.5;
  fill: none;
}
.sound-speaker {
  fill: #bccddc;
  stroke: #244054;
  stroke-width: 2;
}
.sound-wave {
  fill: none;
  stroke: #648a9f;
  stroke-width: 2;
}
.sound-reference {
  fill: #167b83;
  stroke: #17474c;
  stroke-width: 2;
}
.sound-moving {
  fill: #e9a154;
  stroke: #6e3c14;
  stroke-width: 2;
}
.sound-ruler {
  fill: #fff6d5;
  stroke: #58636b;
  stroke-width: 1.5;
}
.sound-draggable {
  cursor: grab;
  touch-action: none;
}
.sound-draggable:active {
  cursor: grabbing;
}
.sound-draggable:focus {
  outline: none;
}
.sound-draggable:focus-visible > rect {
  stroke: #a12c72;
  stroke-width: 3;
}
.sound-draggable[aria-disabled="true"] {
  cursor: default;
}
.sound-screen {
  fill: #112a3b;
  stroke: #3f6174;
  stroke-width: 2;
}
.sound-grid-minor {
  stroke: #284456;
  stroke-width: 0.5;
}
.sound-grid-major {
  stroke: #577283;
  stroke-width: 1;
}
.sound-trace {
  fill: none;
  stroke-width: 3;
}
.sound-trace-reference {
  stroke: #55e0cc;
}
.sound-trace-moving {
  stroke: #ffbb66;
  stroke-dasharray: 7 3;
  stroke-width: 2.3;
}
.sound-workspace svg .sound-reference-label {
  fill: #086c65;
  font-weight: 600;
}
.sound-workspace svg .sound-moving-label {
  fill: #8b4d0a;
  font-weight: 600;
}
.sound-cursor > path {
  fill: #e6ecf6;
  stroke: #e6ecf6;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.sound-workspace .sound-cursor > text {
  font-weight: 700;
}
.sound-graph-major {
  stroke: #a6bcc9;
  stroke-width: 1;
}
.sound-graph-minor {
  stroke: #e0e9ef;
  stroke-width: 0.6;
}
.sound-fit {
  fill: none;
  stroke: #327a8c;
  stroke-width: 2;
}
.sound-point {
  fill: #a93059;
}
.sound-workspace details {
  margin: 1rem 0;
}
.sound-workspace [data-sound-status],
.sound-workspace [data-sound-phase] {
  min-height: 1.8em;
}
@media (max-width: 650px) {
  .sound-controls {
    display: block;
  }
  .sound-controls label,
  .sound-workspace form label {
    display: flex;
  }
  .sound-workspace {
    overflow-x: auto;
  }
  .sound-workspace svg {
    min-width: 680px;
  }
}

.sound-instrument-dial {
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.sound-instrument-dial:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.sound-instrument-dial[aria-pressed="true"] > rect:first-child {
  stroke: #2563eb;
  stroke-width: 3;
}
.sound-instrument-dial[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}