body:has(.geometry-lab) { --page-width: 100%; }

.geometry-lab {
  --lab-ink: #163e53;
  --lab-blue: #1b648a;
  --lab-paper: #eaf5f9;
  --lab-line: #bacfd9;
  color: var(--lab-ink);
}
.geometry-lab [hidden] { display: none; }
.geometry-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block: clamp(22px, 2.8vw, 44px) 24px;
}
.geometry-kicker {
  margin-bottom: 5px;
  color: var(--lab-blue);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .09em;
}
.geometry-intro h1 { margin-bottom: 4px; }
.geometry-intro p:last-child { margin-bottom: 0; }
.geometry-stamp {
  flex: none;
  padding: 10px 20px;
  border: 2px dashed var(--lab-line);
  border-radius: 12px;
  background: var(--lab-paper);
  font: 700 clamp(24px, 3vw, 42px) Georgia, serif;
  transform: rotate(-5deg);
}
.geometry-stamp span { color: var(--lab-blue); }

.geometry-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 14px);
  margin-bottom: 18px;
}
.geometry-modes a {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.3vw, 18px);
  padding: 10px clamp(8px, 1.5vw, 22px);
  border: 1px solid var(--lab-line);
  border-radius: 14px;
  background: var(--white);
  line-height: 1.4;
}
.geometry-modes a:hover { background: var(--lab-paper); }
.geometry-modes a[aria-current] { background: var(--lab-ink); border-color: var(--lab-ink); color: white; }
.geometry-modes strong, .geometry-modes small { display: block; }
.geometry-modes strong { font-size: clamp(17px, 2vw, 24px); }
.geometry-modes small { font-size: 15px; }
.geometry-mode-number {
  color: var(--lab-blue);
  font: 700 clamp(20px, 3vw, 38px) Georgia, serif;
}
.geometry-modes a[aria-current] .geometry-mode-number { color: #ffd479; }

.geometry-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(275px, 24%);
  align-items: start;
  gap: clamp(12px, 1.5vw, 24px);
}
.geometry-bench {
  border: 1px solid var(--lab-line);
  border-radius: 18px;
  background: var(--white);
}
.geometry-bench-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 10px clamp(10px, 1.6vw, 22px);
}
.geometry-bench-bar strong { font-size: 20px; }
.geometry-bench-bar span { color: var(--lab-blue); font-size: 15px; }
.geometry-reset { margin-inline-start: auto; }
.geometry-paper {
  display: grid;
  justify-items: center;
  background: var(--lab-paper);
  border-block: 1px solid var(--lab-line);
}
.geometry-paper svg { display: block; width: min(100%, 1000px, max(560px, 63vh)); height: auto; }
.geometry-origin { fill: #fff; fill-opacity: .55; stroke: #567886; stroke-width: 2; stroke-dasharray: 7 5; }
.geometry-piece { fill: #5dadd1; fill-opacity: .85; stroke: #174d69; stroke-width: 2.5; }
.geometry-origin, .geometry-guide, .geometry-trace, .geometry-orbit, .geometry-point { pointer-events: none; }
.geometry-lab[data-experiment="translation"] .geometry-piece,
.geometry-handle { cursor: grab; touch-action: none; }
.geometry-lab[data-dragging] :is(.geometry-piece, .geometry-handle) { cursor: grabbing; }
.geometry-guide, .geometry-trace { fill: none; stroke-width: 2; }
.geometry-guide { stroke: #a54726; stroke-dasharray: 8 5; }
.geometry-trace { stroke: #1b648a; }
.geometry-lab[data-experiment="translation"] .geometry-trace { stroke: #a54726; stroke-dasharray: 7 4; }
.geometry-orbit { fill: none; stroke: #5a879b; stroke-width: 2; stroke-dasharray: 4 5; }
.geometry-center { fill: var(--lab-ink); }
.geometry-point circle, .geometry-knob { fill: #ffd479; stroke: var(--lab-ink); stroke-width: 2; }
.geometry-knob-icon { fill: none; stroke: var(--lab-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.geometry-point-label {
  fill: var(--lab-ink);
  stroke: var(--lab-paper);
  stroke-width: 4;
  paint-order: stroke;
  font: 700 19px Georgia, serif;
  text-anchor: middle;
}

.geometry-controls { padding: 10px clamp(10px, 1.6vw, 22px) 14px; }
.geometry-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; margin-bottom: 8px; }
.geometry-readout output { font-weight: 800; font-variant-numeric: tabular-nums; }
.geometry-key { font-size: 15px; color: var(--lab-blue); }
.geometry-key i { display: inline-block; width: 18px; margin-inline-end: 5px; border-top: 2px dashed #567886; vertical-align: middle; }
.geometry-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.geometry-buttons input { flex: 1 1 100px; min-width: 70px; max-width: 290px; height: 44px; accent-color: var(--lab-blue); }
.geometry-fold-controls { gap: 6px 16px; }
.geometry-button {
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--lab-line);
  border-radius: 9px;
  background: var(--lab-paper);
  color: var(--lab-ink);
  font-size: 16px;
  font-weight: 700;
}
.geometry-button:hover { background: #d8edf4; }
.geometry-button[aria-pressed="true"], .geometry-check { background: var(--lab-blue); color: white; }
.geometry-check:hover, .geometry-button[aria-pressed="true"]:hover { background: var(--lab-ink); }
.geometry-notebook {
  padding: clamp(16px, 1.8vw, 28px);
  border: 1px solid #e3d0a5;
  border-radius: 18px;
  background: #fff7df;
}
.geometry-notebook h2 { margin-bottom: 6px; }
.geometry-notebook h3 { margin-bottom: 4px; font-size: 19px; }
.geometry-notebook p { margin-bottom: 10px; }
.geometry-observation { border-block: 1px dashed #c6ac76; padding-block: 12px 2px; margin-bottom: 12px; }
.geometry-feedback { margin: 8px 0 0; font-weight: 700; }
.geometry-notebook .geometry-feedback:empty { margin: 0; }

@media (max-width: 760px) {
  .geometry-workspace { grid-template-columns: minmax(0, 1fr); }
  .geometry-stamp { display: none; }
}
@media (max-width: 440px) {
  .geometry-mode-number { display: none; }
  .geometry-modes a { justify-content: center; text-align: center; }
}