* { box-sizing: border-box; }
html, body, #atlas-stage { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(circle at 50% 43%, rgba(102, 45, 38, 0.2), transparent 34%),
    radial-gradient(circle at 50% 46%, rgba(209, 179, 133, 0.06), transparent 57%),
    #020202;
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#atlas-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #93897d;
  font: 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: opacity 280ms ease;
}
#atlas-loading.is-hidden { opacity: 0; pointer-events: none; }
#atlas-loading i {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(229, 193, 139, 0.3);
  border-top-color: #e5c18b;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

body.is-teaching { background: radial-gradient(ellipse at 50% 35%, #18312966, transparent 58%), #060a09; }
.teaching-pin { position: absolute; z-index: 2; display: flex; gap: 6px; align-items: center; background: none; color: var(--pin-color); border: 0; padding: 4px; cursor: pointer; font: 10px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transform: translate(-12px, -50%); }
.teaching-pin[hidden] { display: none; }
.teaching-pin i { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #07110eef; border: 1px solid var(--pin-color); font-size: 8px; font-style: normal; box-shadow: 0 0 0 4px #111b1560; }
.teaching-pin span { background: #07100dec; padding: 5px 7px; border: 1px solid #a0baaa25; border-radius: 4px; white-space: nowrap; }
.teaching-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 12px), -50%); }
.teaching-pin[aria-pressed='true'] i { background: var(--pin-color); color: #060a09; box-shadow: 0 0 16px #d6c19b44; }
.teaching-pin.is-context span { border-color: #e29a88; }
.teaching-pin:focus-visible { outline: 2px solid #f2e3c8; outline-offset: 3px; }
@media(max-width:430px) { .teaching-pin { font-size: 8px; gap: 3px; } .teaching-pin span { padding: 3px; } .teaching-pin i { width: 18px; height: 18px; } }
@media(prefers-reduced-motion:reduce) { #atlas-loading i { animation: none; } }