/* (c) Sredsol, generated by Mathigon Studio */
figure {
  margin: 1.5em 0;
}

figure svg {
  margin: 0 auto;
  display: block;
}

.measure-tables table {
  margin: 0.5em auto;
  border-collapse: collapse;
  width: 100%;
}
.measure-tables table th, .measure-tables table td {
  padding: 4px 10px;
  border-bottom: 1px solid rgba(58, 54, 69, 0.2);
  font-size: 15px;
}
.measure-tables table th {
  font-weight: 700;
}

.ruler-figure .ruler-svg {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  background: #fafaf6;
  background: #fafaf6;
}
html[theme=dark] .ruler-figure .ruler-svg {
  background: #2b2840;
}
.ruler-figure .ruler-body {
  fill: #fcd34d;
  stroke: #d97706;
  stroke-width: 2px;
}
.ruler-figure .ruler-tick {
  stroke: #92400e;
  stroke-width: 2px;
}
.ruler-figure .ruler-tick-label {
  font-size: 13px;
  fill: #92400e;
  text-anchor: middle;
  fill: #92400e;
}
html[theme=dark] .ruler-figure .ruler-tick-label {
  fill: #fcd34d;
}
.ruler-figure .pencil-body {
  fill: #ef4444;
}
.ruler-figure .pencil-tip {
  fill: #fbbf24;
}
.ruler-figure .pencil-g {
  transition: transform 0.5s;
}
.ruler-figure .eye {
  fill: rgba(15, 130, 242, 0.15);
  stroke: #0f82f2;
  stroke-width: 2px;
}
.ruler-figure .eye-label {
  font-size: 16px;
  text-anchor: middle;
}
.ruler-figure .eye-g {
  transition: transform 0.5s;
}
.ruler-figure .ruler-readout {
  font-size: 17px;
  font-weight: 600;
}
.ruler-figure .ruler-readout .ruler-value {
  color: #22ab24;
  margin: 0 3px;
}

.thread-figure .thread-svg {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  background: #fafaf6;
  background: #fafaf6;
}
html[theme=dark] .thread-figure .thread-svg {
  background: #2b2840;
}
.thread-figure .wavy-curve {
  fill: none;
  stroke: #3a3645;
  stroke-width: 2.5px;
  stroke-dasharray: 5 5;
  stroke: #3a3645;
}
html[theme=dark] .thread-figure .wavy-curve {
  stroke: #cbd5e1;
}
.thread-figure .curve-end {
  fill: #cd0e66;
}
.thread-figure .thread {
  fill: none;
  stroke: #b45309;
  stroke-width: 3px;
  stroke-linecap: round;
}
.thread-figure x-slider {
  display: block;
  max-width: 380px;
  margin: 8px auto;
}

.motion-figure .position-svg {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  background: #f0fdf4;
  background: #f0fdf4;
}
html[theme=dark] .motion-figure .position-svg {
  background: #243428;
}
.motion-figure .tree-trunk {
  fill: #92400e;
}
.motion-figure .tree-crown {
  fill: #16a34a;
}
.motion-figure .path-line {
  stroke: #3a3645;
  stroke-width: 3px;
  stroke: #3a3645;
}
html[theme=dark] .motion-figure .path-line {
  stroke: #e2e8f0;
}
.motion-figure .path-tick {
  stroke: #3a3645;
  stroke-width: 2px;
}
.motion-figure .path-label {
  font-size: 11px;
  fill: #3a3645;
  text-anchor: middle;
  fill: #3a3645;
}
html[theme=dark] .motion-figure .path-label {
  fill: #cbd5e1;
}
.motion-figure .girl-head {
  fill: #fb923c;
}
.motion-figure .girl-body {
  stroke: #c2410c;
  stroke-width: 4px;
  stroke-linecap: round;
}
.motion-figure .girl-leg, .motion-figure .girl-arm {
  stroke: #c2410c;
  stroke-width: 4px;
  stroke-linecap: round;
}
.motion-figure .position-readout {
  font-size: 16px;
  font-weight: 600;
}
.motion-figure .position-readout .position-value {
  color: #009ea6;
}
.motion-figure .position-readout .time-value {
  color: #6d3bbf;
  margin: 0 2px;
}
.motion-figure x-slider {
  display: block;
  max-width: 340px;
  margin: 8px auto;
}

.motion-sorter .sorter-area {
  padding: 14px;
  border: 2px dashed rgba(0, 158, 166, 0.45);
  border-radius: 12px;
  position: relative;
  touch-action: none;
}
.motion-sorter .sorter-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 76px;
  margin-bottom: 12px;
}
.motion-sorter .sorter-object {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--c, #ddd);
  color: white;
  transition: transform 0.2s, opacity 0.3s;
}
.motion-sorter .sorter-object:hover {
  transform: scale(1.05);
}
.motion-sorter .sorter-object.dragging {
  cursor: grabbing;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: none;
}
.motion-sorter .sorter-object.sorted-ok {
  opacity: 0.75;
  cursor: default;
  outline: 2px solid #22ab24;
}
.motion-sorter .sorter-object.sorted-wrong {
  outline: 2px solid #cd0e66;
  animation: shake 0.4s;
}
.motion-sorter .sorter-bins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.motion-sorter .sorter-bin {
  padding: 12px 6px;
  text-align: center;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  background: rgba(0, 158, 166, 0.1);
  border: 2px solid rgba(0, 158, 166, 0.35);
  transition: outline 0.15s, transform 0.15s;
}
.motion-sorter .sorter-bin.hover {
  outline: 3px solid #fd8c00;
  transform: scale(1.05);
}
.motion-sorter .sorter-readout {
  margin-top: 10px;
  font-size: 16px;
}
.motion-sorter .sorter-readout .sort-count {
  color: #009ea6;
  margin: 0 2px;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}