.viscosity-workspace {
  --viscosity-ink: #244054;
}
.viscosity-workspace svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 740px;
  margin: 1rem auto;
  background: #f7fafc;
  border: 1px solid #dce6ed;
  border-radius: 14px;
}
.viscosity-workspace svg text {
  font:
    16px system-ui,
    sans-serif;
  fill: var(--viscosity-ink);
}
.viscosity-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.viscosity-controls label,
.viscosity-workspace form label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem;
}
.viscosity-workspace input[type="number"] {
  width: 11rem;
  max-width: 100%;
}
.viscosity-workspace input[type="range"] {
  width: 250px;
  max-width: 100%;
}
.viscosity-workspace button {
  margin: 0.3rem 0;
}
.viscosity-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}
.viscosity-workspace table {
  width: 100%;
  border-collapse: collapse;
}
.viscosity-workspace th,
.viscosity-workspace td {
  border: 1px solid #d7e2ea;
  padding: 0.65rem;
  text-align: left;
}
.viscosity-workspace th {
  background: #edf3f7;
}
.viscosity-correction {
  background: #fff0cc !important;
  color: #69420b;
}
.viscosity-safety {
  border-left: 4px solid #ae790d;
  background: #fff7e5;
  padding: 1rem;
}
.viscosity-frame {
  fill: none;
  stroke: #3d647b;
  stroke-width: 22;
  stroke-linejoin: round;
}
.viscosity-metal {
  fill: #c7d2dc;
  stroke: #4a6073;
  stroke-width: 2;
}
.viscosity-ball {
  fill: #727d8c;
  stroke: #273b4c;
  stroke-width: 2;
}
.viscosity-sleeve,
.viscosity-ruler {
  fill: #f6efcf;
  stroke: #58636b;
  stroke-width: 1.5;
}
.viscosity-ink {
  stroke: #273d4b;
  stroke-width: 1.5;
  fill: none;
}
.viscosity-thimble {
  fill: #bfd4e2;
  stroke: #335469;
  stroke-width: 2;
}
.viscosity-reference {
  stroke: #b42d50;
  stroke-width: 2;
  fill: none;
}
.viscosity-draggable {
  cursor: grab;
  touch-action: none;
}
.viscosity-draggable:active {
  cursor: grabbing;
}
.viscosity-draggable:focus {
  outline: none;
}
.viscosity-draggable:focus-visible > rect {
  stroke: #a12c72;
  stroke-width: 4;
}
.viscosity-draggable[aria-disabled="true"] {
  cursor: default;
}
.viscosity-tube {
  fill: #f1f8fc;
  stroke: #466475;
  stroke-width: 5;
}
.viscosity-liquid {
  fill: #dcecb7;
  fill-opacity: 0.7;
}
.viscosity-surface {
  stroke: #547c41;
  stroke-width: 3;
}
.viscosity-band-top rect {
  fill: #477da6;
  fill-opacity: 0.35;
  stroke: #285d85;
  stroke-width: 2;
}
.viscosity-band-middle rect {
  fill: #d19e3d;
  fill-opacity: 0.35;
  stroke: #896417;
  stroke-width: 2;
}
.viscosity-band-bottom rect {
  fill: #aa5f95;
  fill-opacity: 0.35;
  stroke: #79335f;
  stroke-width: 2;
}
.viscosity-timer-box {
  fill: #e5eef4;
  stroke: #61798b;
  stroke-width: 2;
}
.viscosity-workspace .viscosity-timer {
  font:
    28px ui-monospace,
    monospace;
  font-variant-numeric: tabular-nums;
}
.viscosity-workspace details {
  margin: 1rem 0;
}
.viscosity-workspace [data-viscosity-status] {
  min-height: 1.8em;
}
.viscosity-graph svg {
  max-height: none;
}
@media (max-width: 600px) {
  .viscosity-controls {
    display: block;
  }
  .viscosity-controls label {
    display: flex;
  }
  .viscosity-workspace svg {
    min-width: 620px;
  }
  .viscosity-workspace {
    overflow-x: auto;
  }
  .viscosity-workspace form label {
    display: flex;
  }
  .viscosity-workspace table input {
    width: 8rem;
  }
}

.viscosity-sphere-pick {
  cursor: pointer;
  touch-action: manipulation;
}
.viscosity-sphere-pick:focus-visible circle,
.viscosity-sphere-pick[aria-pressed="true"] circle {
  stroke: #b05a12;
  stroke-width: 4;
}
.viscosity-sphere-pick[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}