.sk-torus {
  --sk-v: #222;
  --sk-a: #c0392b;
  --sk-b: #2b6cb0;
  --sk-c: #2f9e5f;
  --sk-U: #e8a33d;
  --sk-L: #8a6fd1;
  --sk-muted: #8c8c8c;
  --sk-border: #e3e3e8;
  --sk-surface: #fff;

  display: block;
  margin: 1.5em 0;
}
.sk-torus__stage {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: 12px;
  padding: 8px;
  max-width: 40rem;
  margin: 0 auto;
}
@media (max-width: 32rem) {
  .sk-torus__stage { grid-template-columns: 1fr; }
}
.sk-torus__stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.sk-torus__3d {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  align-self: center;
  cursor: grab;
  touch-action: none;
}
.sk-torus__3d:active { cursor: grabbing; }

.sk-torus__controls {
  margin: 0.6em auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.sk-torus__controls input[type="range"] { width: 8rem; }
.sk-torus__k { font-variant-numeric: tabular-nums; }

/* 正方形模型：維度超過 k 的單形只留淡淡的影子 */
.sk-torus .sk-cell { transition: opacity 0.25s ease; }
.sk-torus[data-k="0"] .sk-d1,
.sk-torus[data-k="0"] .sk-d2,
.sk-torus[data-k="1"] .sk-d2 { opacity: 0.08; }

.sk-torus .sk-edge { fill: none; stroke-width: 3; stroke-linecap: round; }
.sk-torus .sk-edge-a { stroke: var(--sk-a); }
.sk-torus .sk-edge-b { stroke: var(--sk-b); }
.sk-torus .sk-edge-c { stroke: var(--sk-c); }
.sk-torus .sk-arrow-a { fill: var(--sk-a); }
.sk-torus .sk-arrow-b { fill: var(--sk-b); }
.sk-torus .sk-arrow-c { fill: var(--sk-c); }
.sk-torus .sk-face-U { fill: var(--sk-U); fill-opacity: 0.35; }
.sk-torus .sk-face-L { fill: var(--sk-L); fill-opacity: 0.35; }
.sk-torus .sk-vertex { fill: var(--sk-v); }
.sk-torus .sk-label {
  font: italic 18px serif;
  fill: var(--sk-v);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.sk-torus .sk-hint {
  font: 12px sans-serif;
  fill: var(--sk-muted);
  text-anchor: middle;
}