body {
  font-family: sans-serif;
}

h1 {
  font-size: 1.2em;
  font-weight: normal;
  margin: 0.5em 0;
}

a:hover {
  color: #004499;
}

#myCanvas {
  border: 1px solid #555;
  display: block;
  margin-top: 1em;
  cursor: default;
}

#progress-indicator {
  display: none;
  position: fixed;
  left: 20%;
  top: 10%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: #555;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
}

.codeBlock {
  margin: 0.5em 0; /* tight vertical spacing between blocks */
  line-height: 1.2;
}

pre.codeExample {
  margin: 0; /* remove top/bottom spacing */
  padding: 1em;
  opacity: 0.5;
  font-family: monospace;
  white-space: pre;
}

.advanced-stuff {
  display: none;
}

#advanced-stuff-toggle:checked ~ .advanced-stuff {
  display: block;
}

/* Show the initialization code textarea when advanced docs are visible */
#advanced-stuff-toggle:checked ~ .advanced-stuff #initializationMathJSCode {
  display: block;
}

/* Advanced examples section styling */
.advanced-examples {
  display: none;
}

#advanced-examples-toggle:checked ~ .advanced-examples {
  display: block;
}

/* Examples section styling */
.examples-docs {
  display: none;
}

#examples-toggle:checked ~ .examples-docs {
  display: block;
}

.child-checkbox-label {
  font-size: smaller;
  cursor: pointer;
}

.mathJSCode {
  display: none;
  width: 100%;
  max-width: 1000px;  /* Match canvas width */
  margin-top: 10px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

/* Hide the labels for the code inputs by default */
label[for="nextVertexAndPointMathJSCode"] {
  display: none;
}

#codeExplanation {
    display: none;
    margin: 10px 0;
}

#debugModeDiv {
    display: none;
}

#errorMessage {
    color: red;
    margin: 10px 0;
}
#viewSettings {
  display: none;
  margin-top: 10px;
}

#sliders {
  width: 100%;
  max-width: 1000px;  /* Match canvas width */
  margin-top: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.slider {
  margin: 10px 0;
}

.label-container {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.slider label {
  margin-right: 8px;
}

.value-display {
  font-family: monospace;
  color: #666;
}

.noUi-connect {
  background: #4285F4;
}

.noUi-handle {
  border: 1px solid #4285F4;
  background: #fff;
  cursor: pointer;
}

.noUi-handle:before,
.noUi-handle:after {
  background: #4285F4;
}

.error-message {
  color: black;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin: 5px 0;
}

.error-stack {
  color: #665;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  margin: 5px 0;
  font-size: 0.8em;
}

.error-highlight {
  color: #ff3545;
  background-color: #ffdbde;
  padding: 0 2px;
  border-radius: 2px;
}