@layer theme,base;@layer components{.course{margin:0;padding:0;list-style:none}.course-step{--wp:11px;--wp-c:1rem;--wp-gap:5px;view-timeline:--course-step block;padding-block-end:clamp(3rem,2.5rem + 2.2222vw,4.5rem);padding-inline-start:2.75rem;position:relative}.course-step:last-child{padding-block-end:0}@media (min-width:1024px){.course-step{padding-inline-start:4rem}}.course-waypoint{inset-inline-start:0;top:calc(var(--wp-c) - var(--wp) / 2);width:var(--wp);height:var(--wp);background:var(--canvas);color:var(--lit);box-shadow:0 0 0 4px color-mix(in srgb, var(--lit) 14%, transparent);border:1.5px solid;border-radius:999px;position:absolute}.course-waypoint:after{content:"";background:currentColor;border-radius:999px;width:3px;height:3px;margin:auto;position:absolute;inset:0}.course-track,.course-lit{width:1px;inset-inline-start:calc(var(--wp) / 2 - .5px);top:calc(var(--wp-c) + var(--wp) / 2 + var(--wp-gap));bottom:calc(var(--wp) / 2 + var(--wp-gap) - var(--wp-c));pointer-events:none;position:absolute}.course-track{background:repeating-linear-gradient(to bottom, color-mix(in srgb, var(--edge) 70%, transparent) 0 3px, transparent 3px 7px)}.course-lit{background:var(--lit);transform-origin:top}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.course-lit{animation:linear both course-draw;animation-timeline:--course-step;animation-range:cover 40vh cover calc(100% - 60vh)}.course-waypoint{animation:linear both course-light;animation-timeline:--course-step;animation-range:cover 40vh cover calc(40vh + 1.5rem)}}}}@layer utilities;@keyframes course-draw{0%{scale:1 0}to{scale:1}}@keyframes course-light{0%{color:var(--edge);box-shadow:0 0 0 4px #0000}to{color:var(--lit);box-shadow:0 0 0 4px color-mix(in srgb, var(--lit) 14%, transparent)}}@media (forced-colors:active){.course-lit,.course-waypoint{animation:none}.course-waypoint{forced-color-adjust:none;color:canvastext;box-shadow:none;background:canvas}.course-lit{background:canvastext}.course-track{background:0 0}}@media print{.course-lit,.course-waypoint{animation:none}}
