.spatial-paths {
  --spatial-ink: #f7eff8;
  position: relative;
  isolation: isolate;
  margin: clamp(1.5rem, 4vw, 4rem) 0 2rem;
  overflow: hidden;
  color: var(--spatial-ink);
  background: radial-gradient(ellipse at 50% 35%, #38233b, #18121e 60%, #110e16);
  border: 1px solid #b891b733;
  border-radius: 1.5rem;
}
.spatial-stage-art { position: relative; height: clamp(340px, 41vw, 540px); }
.spatial-paths canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; transition: opacity .5s ease; }
.spatial-paths.is-live canvas { opacity: 1; }
.spatial-paths canvas.is-dragging { cursor: grabbing !important; }
.spatial-fallback { position: absolute; inset: 0; display: flex; gap: 6%; align-items: center; justify-content: center; pointer-events: none; }
.spatial-fallback span { width: 19%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #f9e9fb88; background: radial-gradient(circle at 30% 20%, #f7d8e3, #b875a2 60%, #38223d); box-shadow: 0 25px 50px #0008, inset -4px -6px 14px #0004; transform: rotateX(18deg) rotateY(-12deg); }
.spatial-fallback span:nth-child(2) { background: radial-gradient(circle at 30% 20%, #e8e1fa, #ab98cf 60%, #2d233e); transform: translateY(-1rem) rotateY(12deg); }
.spatial-fallback span:nth-child(3) { background: radial-gradient(circle at 30% 20%, #fff1dc, #c1a58c 60%, #342639); }
.spatial-paths.is-live .spatial-fallback { opacity: 0; }
.spatial-toolbar { position: absolute; z-index: 2; top: 1rem; left: 1.25rem; right: 1.25rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; pointer-events: none; }
.spatial-toolbar p { margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.spatial-toolbar button { pointer-events: auto; background: #ffffff12; border: 1px solid #e9cde344; color: inherit; min-height: 44px; border-radius: 99px; padding: .5rem 1rem; font: inherit; font-size: .78rem; cursor: pointer; }
.spatial-instruction { position: absolute; left: 1.25rem; right: 1.25rem; bottom: .75rem; margin: 0; text-align: center; font-size: .75rem; color: #dbcfdf; pointer-events: none; }
.spatial-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #ffffff19; border-top: 1px solid #ffffff19; }
.spatial-links a { display: grid; gap: .4rem; padding: 1.1rem clamp(.7rem, 2vw, 1.6rem); text-decoration: none; color: inherit; background: #19111f; transition: background .25s ease, color .25s ease; }
.spatial-links a:hover, .spatial-links a.is-selected { background: #3a223e; }
.spatial-links a > span:first-child { font-size: .65rem; letter-spacing: .12em; color: #c9b6ce; }
.spatial-links strong { font-size: clamp(.9rem, 1.5vw, 1.2rem); font-weight: 600; line-height: 1.3; }
.spatial-links small { font-size: .75rem; color: #d8c9df; }
.spatial-links a:last-child { background: #211b22; }
.spatial-links a:last-child:hover { background: #3b3038; }
.spatial-paths :focus-visible { outline: 3px solid #f1c5e0; outline-offset: -4px; }
.spatial-paths[data-departure] { animation: spatial-departure .28s ease both; }
.spatial-paths.motion-off .spatial-stage-art { display: none; }
.spatial-paths.motion-off .spatial-links { border-top: 0; }
.spatial-paths.motion-off .spatial-toolbar { position: static; padding: 1rem; }
.spatial-paths.motion-off .spatial-toolbar button { display: none; }
.spatial-intro { position: fixed; inset: 0; z-index: 10000; background: #100e13; color: #f4e7ef; display: grid; align-content: center; justify-items: center; gap: 1.5rem; pointer-events: none; animation: spatial-intro-exit .4s 1.5s ease both; }
.spatial-intro-mark { display: flex; align-items: center; gap: .35rem; }
.spatial-intro-mark i { width: .5rem; height: 2.8rem; display: block; background: #e6a4c5; transform: skew(-16deg); animation: spatial-mark .5s ease both; }
.spatial-intro-mark i:nth-child(2) { height: 3.4rem; animation-delay: .12s; }
.spatial-intro-mark i:nth-child(3) { animation-delay: .24s; }
.spatial-intro-mark strong { margin-left: .7rem; font: 750 clamp(2.8rem, 8vw, 5rem)/1 system-ui, sans-serif; letter-spacing: -.07em; }
.spatial-cadence { font: .75rem/1.5 system-ui, sans-serif; letter-spacing: .2em; }
.spatial-cadence b { display: inline-block; margin: 0 1rem; opacity: 0; animation: spatial-mark .3s .45s both; }
.spatial-cadence em { display: inline-block; font-style: normal; opacity: 0; animation: spatial-mark .3s .85s both; }
.spatial-intro button { position: absolute; right: 1.5rem; bottom: 1.5rem; min-height: 44px; border: 1px solid #d8bad855; border-radius: 99px; padding: .5rem 1rem; color: inherit; background: #ffffff0d; font: .8rem system-ui, sans-serif; cursor: pointer; pointer-events: auto; }
.academy-hero-photo.has-spatial-portrait { position: relative; }
.academy-hero-photo.has-spatial-portrait > img { opacity: 0; }
.spatial-portrait-canvas { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; border-radius: inherit; }
.spatial-voice { position: absolute; bottom: 6rem; left: 1rem; z-index: 2; border-radius: 99px; background: #1c1322d9; color: #fff; border: 1px solid #e8c6df; min-height: 44px; padding: .6rem 1rem; cursor: pointer; font: inherit; }
.spatial-embed { margin: 0; background: #100e13; color: #f7eff8; font-family: system-ui, sans-serif; }
.spatial-embed main { width: min(1180px, calc(100% - 2rem)); margin: 1rem auto; }
.spatial-embed h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); letter-spacing: -.05em; margin: 0; }
.spatial-embed .spatial-paths { margin-top: 1rem; }
@keyframes spatial-mark { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }
@keyframes spatial-intro-exit { to { opacity: 0; visibility: hidden; } }
@keyframes spatial-departure { to { opacity: .65; transform: scale(.985); } }
@media (max-width: 600px) {
  .spatial-paths { border-radius: 1rem; }
  .spatial-toolbar { left: .8rem; right: .8rem; }
  .spatial-toolbar p { font-size: .58rem; letter-spacing: .06em; }
  .spatial-stage-art { height: 340px; }
  .spatial-links { grid-template-columns: 1fr; }
  .spatial-links a { grid-template-columns: 1fr auto; align-items: center; gap: .15rem .7rem; padding: .8rem 1rem; min-height: 60px; }
  .spatial-links a > span:first-child { grid-column: 1 / -1; }
  .spatial-links strong { font-size: .95rem; }
  .spatial-links small { font-size: .69rem; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .spatial-intro, .spatial-stage-art { display: none !important; }
  .spatial-paths, .spatial-paths * { animation: none !important; transition: none !important; }
  .spatial-toolbar { position: static; padding: .8rem; }
}

/* Main-site embed: scoped to preserve the Academy's existing presentation. */
.spatial-embed-main { background: #f5f3ed; color: #191619; font-family: Arial, sans-serif; }
.spatial-embed-main main { display: flow-root; width: 100%; margin: 0; }
.spatial-embed-main .spatial-paths-main {
  --spatial-ink: #191619;
  margin: 0;
  background: radial-gradient(ellipse at 50% 35%, #fffdf9, #f5f3ed 70%);
  border-color: #d7cfd2;
}
.spatial-paths-main .spatial-stage-art { height: clamp(360px, 42vw, 500px); }
.spatial-paths-main .spatial-toolbar { color: #861c50; }
.spatial-controls { display: flex; gap: .45rem; pointer-events: auto; }
.spatial-paths-main .spatial-toolbar button { display: inline-flex; align-items: center; justify-content: center; background: #fffdf9; border-color: #b9a3af; color: #861c50; }
.spatial-paths-main .spatial-toolbar button:disabled { cursor: default; color: #6a6266; border-color: #d7cfd2; }
.spatial-paths-main .spatial-toolbar button[hidden] { display: none; }
.spatial-paths-main .spatial-instruction { color: #5c4b54; }
.spatial-paths-main .spatial-links { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #d7cfd2; border-color: #d7cfd2; }
.spatial-paths-main .spatial-links a { min-height: 96px; padding: 1.25rem 1.6rem; background: #fffdf9; }
.spatial-paths-main .spatial-links a:hover, .spatial-paths-main .spatial-links a.is-selected { background: #f0e3e8; }
.spatial-paths-main .spatial-links strong { font: 400 clamp(1.25rem, 2.8vw, 2rem)/1.2 Georgia, serif; color: #861c50; }
.spatial-paths-main .spatial-links a > span:first-child, .spatial-paths-main .spatial-links small { color: #5c4b54; }
.spatial-paths-main .spatial-links small { line-height: 1.5; }
.spatial-paths-main :focus-visible { outline-color: #861c50; }
.spatial-paths-main .spatial-fallback span { width: 24%; max-width: 190px; background: radial-gradient(circle at 30% 20%, #ead5df, #b77594 65%, #861c50); border-color: #861c5077; box-shadow: 0 25px 50px #4a173327, inset -4px -6px 14px #48152c40; }
.spatial-paths-main .spatial-fallback span:nth-child(2) { background: radial-gradient(circle at 30% 20%, #fffdf9, #d7b9c8 65%, #9e6680); }
.spatial-paths-main.motion-off .spatial-toolbar button { display: inline-flex; }
@media (max-width: 600px) {
  .spatial-paths-main .spatial-toolbar { flex-wrap: wrap; gap: .65rem; }
  .spatial-paths-main .spatial-toolbar p { font-size: .6rem; }
  .spatial-paths-main .spatial-toolbar button { padding: .4rem .8rem; font-size: .72rem; }
  .spatial-paths-main .spatial-stage-art { height: 340px; }
  .spatial-paths-main .spatial-links { grid-template-columns: 1fr; }
  .spatial-paths-main .spatial-links a { grid-template-columns: 1fr; padding: 1.1rem 1.25rem; min-height: 96px; }
  .spatial-paths-main .spatial-links small { text-align: left; }
}