.course-motion{z-index:1;background:radial-gradient(circle at 89% 20%,color-mix(in srgb,var(--course-accent) 30%,transparent),transparent 35%),#102542;color:#eff8ff;border:1px solid #4b6d94;border-radius:25px;width:min(1180px,100%);margin:26px auto 0;padding:clamp(20px,3vw,32px);position:relative;box-shadow:0 15px 40px #020a1a59}.course-motion *{box-sizing:border-box}.course-motion-top{justify-content:space-between;align-items:end;gap:18px;display:flex}.course-motion-top>div>span,.course-motion-detail>div:last-child>span{color:#a7dfff;letter-spacing:.1em;font-size:12px;font-weight:850}.course-motion h2{letter-spacing:-.04em;color:#fff;margin:8px 0 0;font-size:clamp(25px,3vw,36px);line-height:1.18}.course-motion-top>a{color:#b5e7ff;white-space:nowrap;align-items:center;gap:7px;font-size:14px;font-weight:800;display:inline-flex}.course-motion-top>a:hover{text-decoration:underline}.course-motion-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 0;display:grid}.course-motion-track button{isolation:isolate;color:#e5f0ff;min-width:0;min-height:120px;font:inherit;text-align:left;cursor:pointer;background:#ffffff0a;border:1px solid #5d7fa2;border-radius:16px;justify-items:start;gap:8px;padding:15px;transition:background .25s,border-color .25s,transform .25s;display:grid;position:relative}.course-motion-track button:hover{background:#ffffff19;transform:translateY(-3px)}.course-motion-track button[aria-pressed=true]{background:color-mix(in srgb,var(--course-accent) 26%,#173550);border-color:#a7e5ff;box-shadow:0 0 0 2px #7bdfff21}.course-motion-bubble{color:#d4f5ff;background:#48bde330;border:1px solid #a5ddf2;border-radius:50%;place-items:center;width:42px;height:42px;transition:transform .28s,box-shadow .28s;display:grid}.course-motion-track button[aria-pressed=true] .course-motion-bubble{animation:.55s both course-motion-bubble;box-shadow:0 0 0 7px #8de1ff1b,0 0 22px #8de1ff55}.course-motion-track small{color:#9acde5;font-size:10px;font-weight:850}.course-motion-track strong{color:#fff;font-size:15px;line-height:1.3}.course-motion-progress{background:#4b6885;border-radius:10px;height:4px;margin:16px 3px}.course-motion-progress span{border-radius:inherit;background:linear-gradient(90deg,var(--course-accent),#87e0fa);height:100%;transition:width .45s cubic-bezier(.16,1,.3,1);display:block}.course-motion-detail{background:#102f4b;border:1px solid #476c8c;border-radius:17px;align-items:center;gap:22px;min-height:133px;padding:19px;animation:.45s both course-motion-enter;display:flex}.course-motion-glyph{background:color-mix(in srgb,var(--course-accent) 34%,#173e59);color:#fff;border:1px solid #95d3e8;border-radius:24px;flex:0 0 88px;place-items:center;width:88px;height:88px;display:grid;position:relative;overflow:hidden}.course-motion-glyph i{border:1px solid #b2f1ff4a;border-radius:23px;animation:8s linear infinite course-motion-orbit;position:absolute;inset:5px}.course-motion-glyph i:last-child{animation-duration:6s;animation-direction:reverse;inset:16px}.course-motion-glyph svg{z-index:1;position:relative}.course-motion-detail h3{color:#fff;margin:7px 0 5px;font-size:22px}.course-motion-detail p{color:#d8e8f7;margin:0;line-height:1.55}.course-motion-detail small{color:#a9daf1;margin-top:8px;font-size:12px;font-weight:750;display:inline-block}@keyframes course-motion-bubble{0%{opacity:.6;transform:scale(.55)}to{opacity:1;transform:scale(1)}}@keyframes course-motion-enter{0%{opacity:.55;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes course-motion-orbit{to{transform:rotate(360deg)}}@media (max-width:720px){.course-motion-top{flex-direction:column;align-items:start}.course-motion-track{gap:8px}.course-motion-track button{min-height:119px;padding:12px}.course-motion-detail{align-items:flex-start}.course-motion-glyph{flex-basis:70px;width:70px;height:70px}}@media (max-width:490px){.course-motion{padding:16px}.course-motion-track{grid-template-columns:1fr}.course-motion-track button{align-items:center;gap:10px;min-height:62px;display:flex}.course-motion-bubble{flex:none;width:38px;height:38px}.course-motion-track small{white-space:nowrap}.course-motion-detail{gap:13px;padding:15px}.course-motion-glyph{border-radius:13px;flex-basis:48px;width:48px;height:48px}.course-motion-detail h3{font-size:19px}}@media (prefers-reduced-motion:reduce){.course-motion *{transition:none!important;animation:none!important;transform:none!important}}html[data-motion=paused] .course-motion *{animation-play-state:paused!important}