/* The HTML names every stage; motion only emphasizes their connection. */
.course-loop { width:100%; max-width:460px; color:var(--green); container:course-loop / inline-size; }
.course-loop-board { position:relative; width:100%; aspect-ratio:420 / 285; }
.course-loop-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.course-loop-track-soft { stroke:#e4ece4; stroke-width:16; }
.course-loop-track { stroke:#bbcebd; stroke-width:1.5; }
.course-loop-glow,.course-loop-light { opacity:0; stroke-linecap:round; animation:course-loop-travel 9s linear infinite; animation-play-state:paused; }
.course-loop-glow { stroke:#c6a35b; stroke-width:4; stroke-dasharray:5 95; }
.course-loop-light { stroke:#f4dc96; stroke-width:6; stroke-dasharray:.3 99.7; filter:drop-shadow(0 0 4px #c9a056); }
.course-loop.is-loop-enhanced :is(.course-loop-glow,.course-loop-light) { opacity:1; }
.course-loop.is-loop-running :is(.course-loop-glow,.course-loop-light) { animation-play-state:running; }
.course-loop-arrowhead { fill:none; stroke:#728b76; stroke-width:1.6; }
.course-loop-core { position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; min-width:132px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; text-align:center; cursor:pointer; }
.course-loop-core:disabled { color:inherit; opacity:1; cursor:default; }
.course-loop-spark { color:#bb9850; font-size:25px; line-height:1; margin-bottom:8px; }
.course-loop-core strong { font-size:28px; line-height:1.5; font-weight:600; letter-spacing:.04em; }
.course-loop-stage-note { font-size:16px; line-height:1.6; color:#5c7463; margin-top:4px; }
.course-loop-step { position:absolute; transform:translate(-50%,-50%); min-width:126px; padding:12px 16px; border:1px solid #bdcdbf; border-radius:8px; color:#365d49; background:#f8f9f5; box-shadow:0 4px 16px #244b3620; font-family:inherit; font-size:18px; font-weight:550; line-height:1.5; white-space:nowrap; cursor:pointer; transition:color .3s,background .3s,border-color .3s,box-shadow .3s; }
.course-loop-step:hover { border-color:#718d76; box-shadow:0 4px 18px #244b3630; }
.course-loop-step[aria-pressed="true"] { color:white; background:var(--green); border-color:var(--green); box-shadow:0 5px 20px #0f5c5326; }
.course-loop-step-one { left:50%; top:13.333%; }
.course-loop-step-two { left:77.381%; top:66.667%; }
.course-loop-step-three { left:22.619%; top:66.667%; }
.course-loop :is(button):focus-visible { outline:3px solid #987832; outline-offset:4px; }
@keyframes course-loop-travel { to { stroke-dashoffset:-100; } }
@media (max-width:1100px) {
  .course-loop-step { min-width:110px; padding:10px 12px; }
  .course-loop-core strong { font-size:26px; }
}
@container course-loop (max-width:360px) {
  .course-loop-board { aspect-ratio:420 / 335; }
  .course-loop-step { min-width:104px; padding:10px 9px; font-size:17px; }
  .course-loop-core { top:40%; min-width:120px; }
  .course-loop-core strong { font-size:24px; }
  .course-loop-spark { display:none; }
  .course-loop-stage-note { font-size:15px; margin-top:1px; }
  .course-loop-step-two { left:80%; }
  .course-loop-step-three { left:20%; }
}
@media (prefers-reduced-motion:reduce) {
  .course-loop :is(.course-loop-glow,.course-loop-light) { display:none; animation:none; }
  .course-loop-step { transition:none; }
}