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

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

.magnet-bin .bin-area {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px;
  border: 2px dashed rgba(109, 59, 191, 0.4);
  border-radius: 12px;
  position: relative;
  touch-action: none;
}
.magnet-bin .bin-tray {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 96px;
}
.magnet-bin .bin-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;
}
.magnet-bin .bin-object:hover {
  transform: scale(1.06);
}
.magnet-bin .bin-object.dragging {
  cursor: grabbing;
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: none;
}
.magnet-bin .bin-object.is-magnetic {
  outline: 2px solid #6d3bbf;
  cursor: default;
}
.magnet-bin .bin-object.is-non {
  opacity: 0.55;
  cursor: default;
}
.magnet-bin .magnet-target {
  width: 92px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  border-radius: 12px;
  background: rgba(109, 59, 191, 0.12);
  position: relative;
  transition: outline 0.2s, transform 0.2s;
}
.magnet-bin .magnet-target.hover {
  outline: 3px solid #fd8c00;
  transform: scale(1.06);
}
.magnet-bin .magnet-target.done {
  outline: 3px solid #22ab24;
}
.magnet-bin .bin-readout p {
  margin: 6px 0 0;
  font-size: 16px;
}
.magnet-bin .bin-readout .count-magnetic {
  color: #6d3bbf;
}
.magnet-bin .bin-readout .count-non {
  color: #3a3645;
}

.magnet-filings .poles-svg {
  border-radius: 12px;
  background: #fbf9ff;
  background: #fbf9ff;
}
html[theme=dark] .magnet-filings .poles-svg {
  background: #2a2540;
}
.magnet-filings .bar-magnet {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.magnet-filings .pole-label {
  font-size: 20px;
  font-weight: 700;
  fill: white;
  text-anchor: middle;
}
.magnet-filings .filing {
  fill: #475569;
  opacity: 0;
  transition: opacity 0.35s;
  fill: #475569;
}
html[theme=dark] .magnet-filings .filing {
  fill: #cbd5e1;
}
.magnet-filings x-slider {
  display: block;
  max-width: 360px;
  margin: 8px auto;
}

.magnet-demo .demo-svg {
  border-radius: 12px;
  background: #faf8ff;
  background: #faf8ff;
}
html[theme=dark] .magnet-demo .demo-svg {
  background: #2a2440;
}
.magnet-demo .demo-bar {
  fill: #7c3aed;
}
.magnet-demo .demo-bar-2 {
  fill: #14b8a6;
}
.magnet-demo .demo-label {
  font-size: 18px;
  font-weight: 700;
  fill: white;
  text-anchor: middle;
  pointer-events: none;
}
.magnet-demo .demo-arrow {
  font-size: 20px;
  fill: #22ab24;
  font-weight: 700;
}
.magnet-demo .demo-arrow.demo-arrow-rep {
  fill: #cd0e66;
}
.magnet-demo x-slider {
  display: block;
  max-width: 380px;
  margin: 8px auto;
}

.compass-figure .compass-svg {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  background: #fdfdfb;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  background: #fdfdfb;
}
html[theme=dark] .compass-figure .compass-svg {
  background: #332d4d;
}
.compass-figure .dial {
  fill: white;
  stroke: #6d3bbf;
  stroke-width: 3px;
}
.compass-figure .dial-inner {
  fill: transparent;
}
.compass-figure .dial-tick {
  stroke: #3a3645;
  stroke-width: 2px;
}
.compass-figure .dial-label {
  font-size: 18px;
  font-weight: 700;
  fill: #3a3645;
  text-anchor: middle;
}
.compass-figure .dial-label.small {
  font-size: 15px;
}
.compass-figure .needle-n {
  fill: #ef4444;
}
.compass-figure .needle-s {
  fill: #3b82f6;
}
.compass-figure .needle-hub {
  fill: #3a3645;
}
.compass-figure x-slider {
  display: block;
  max-width: 320px;
  margin: 10px auto;
}

.compass-controls x-slider {
  margin: 10px auto;
}