.course-name { display:flex;align-items:center;gap:12px; }
.course-topic-icon { width:28px;height:28px;flex:0 0 28px;color:#acb9bd;transition:color .25s ease,transform .25s ease; }
.course-select[aria-pressed="true"] .course-topic-icon { color:#d7bc83;transform:translateY(-1px); }
.course-select { position:relative;transition:background .25s ease; }
.course-select[aria-pressed="true"] { background:linear-gradient(105deg,#d7bc8318,transparent 85%); }
.course-select:hover .course-topic-icon { color:#e1c792; }
.course-detail { background:radial-gradient(ellipse at 0 0,#31536855,transparent 65%),linear-gradient(135deg,#162a39,#0b1b28);border-color:#d7bc833b;box-shadow:0 18px 55px #00000020; }
.course-visual-header { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px; }
.course-emblem { width:82px;height:82px;flex:0 0 82px;display:grid;place-items:center;border:1px solid #d7bc8350;background:linear-gradient(135deg,#d7bc8312,transparent);color:#dfc58f;border-radius:50%; }
.course-emblem-icon { width:50px;height:50px; }
.course-progress { display:flex;gap:5px;align-items:center;flex:1;max-width:164px; }
.course-progress-step { flex:1;height:3px;background:#abc3d329;border-radius:2px;transition:background .25s; }
.course-progress-step.is-complete { background:#d7bc83; }
.course-detail .detail-guidance { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@media(max-width:640px) {
 .course-name { gap:10px; }
 .course-topic-icon { width:24px;height:24px;flex-basis:24px; }
 .course-visual-header { margin-bottom:22px; }
 .course-emblem { width:68px;height:68px;flex-basis:68px; }
 .course-emblem-icon { width:42px;height:42px; }
}
@media(prefers-reduced-motion:reduce) {
 .course-topic-icon,.course-select,.course-progress-step { transition:none; }
}
.motion-paused .course-topic-icon,.motion-paused .course-select,.motion-paused .course-progress-step { transition:none; }