#zjknit-preview .zj-course-item { border-top:1px solid #dededc; scroll-margin-top:90px; }
#zjknit-preview .zj-course-item:last-child { border-bottom:1px solid #dededc; }
#zjknit-preview .zj-course-link { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) 24px; align-items:center; gap:5px 16px; padding:22px 18px; border-radius:var(--corner); color:var(--ink); transition:color .2s ease; }
#zjknit-preview .zj-course-link::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; background:linear-gradient(108deg,#303132 0%,#1c1c1d 62%,#141414 100%); box-shadow:0 12px 30px rgb(0 0 0 / 15%); transition:opacity .25s ease; }
#zjknit-preview #zj-courses .zj-course-link .zj-program-name { font-size:clamp(17px,1.8cqw,26px); font-weight:500; line-height:1.5; }
#zjknit-preview #zj-courses .zj-course-link .zj-program-description { grid-area:2 / 1; color:inherit; font-size:clamp(13px,1.15cqw,16px); opacity:1; }
#zjknit-preview #zj-courses .zj-course-link .zj-program-arrow { grid-area:1 / 2 / 3; color:var(--brand-red); opacity:1; transform:none; }
#zjknit-preview .zj-course-preview { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s .32s; }
#zjknit-preview .zj-course-preview > div { min-height:0; overflow:hidden; }
#zjknit-preview .zj-course-preview p { margin:0; padding:22px 18px 26px; color:var(--ink); font-size:14px; line-height:1.9; }
#zjknit-preview .zj-course-preview li span { display:inline-block; margin-left:8px; font-size:12px; }
#zjknit-preview .zj-course-item:focus-within .zj-course-preview { grid-template-rows:1fr; opacity:1; visibility:visible; transition-delay:0s; }
#zjknit-preview .zj-course-link:focus-visible { outline:2px solid var(--brand-red); outline-offset:3px; color:#fff; }
#zjknit-preview .zj-course-link:focus-visible::before { opacity:1; }
#zjknit-preview #zj-courses .zj-course-link:focus-visible .zj-program-arrow { color:#fff; }
@media (hover:hover) {
 #zjknit-preview .zj-course-list:has(.zj-course-item:hover) .zj-course-item:not(:hover):not(:focus-within) .zj-course-link { color:#8a8a8a; }
 #zjknit-preview .zj-course-item:hover .zj-course-preview { grid-template-rows:1fr; opacity:1; visibility:visible; transition-delay:0s; }
 #zjknit-preview .zj-course-item:hover .zj-course-link { color:#fff; }
 #zjknit-preview .zj-course-item:hover .zj-course-link::before { opacity:1; }
 #zjknit-preview #zj-courses .zj-course-item:hover .zj-program-arrow { color:#fff; }
}
@media (hover:none) { #zjknit-preview .zj-course-preview { grid-template-rows:1fr; opacity:1; visibility:visible; } }
#zjknit-preview .zj-course-content { padding:124px var(--chapter-gutter) 88px; }
#zjknit-preview .zj-course-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; color:var(--quiet); font-size:12px; }
#zjknit-preview .zj-course-breadcrumb a:hover { text-decoration:underline; text-decoration-color:var(--brand-red); text-underline-offset:5px; }
#zjknit-preview .zj-course-page-heading { padding-bottom:40px; border-bottom:1px solid #dededc; }
#zjknit-preview .zj-course-page-heading h1 { font:500 clamp(30px,3.5cqw,50px)/1.4 var(--sans); letter-spacing:0; animation:none; }
#zjknit-preview .zj-course-page-heading p { max-width:46em; margin-top:22px; color:var(--quiet); font-size:clamp(15px,1.4cqw,19px); line-height:1.9; }
#zjknit-preview .zj-course-page-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(32px,6cqw,96px); padding-top:40px; }
#zjknit-preview .zj-course-category-nav { display:grid; align-content:start; justify-items:start; gap:15px; }
#zjknit-preview .zj-course-category-nav a { max-width:100%; padding:7px 0; font-size:14px; line-height:1.8; color:var(--quiet); border-bottom:1px solid transparent; }
#zjknit-preview .zj-course-category-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--brand-red); }
#zjknit-preview .zj-course-category-nav a:hover { color:var(--ink); }
#zjknit-preview .zj-course-detail-list { list-style:none; margin:0; padding:0; }
#zjknit-preview .zj-course-detail-list li { padding:24px 0; border-bottom:1px solid #dededc; }
#zjknit-preview .zj-course-detail-list li:first-child { padding-top:0; }
#zjknit-preview .zj-course-detail-title { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; }
#zjknit-preview .zj-course-detail-title h2 { font:500 clamp(18px,1.8cqw,26px)/1.6 var(--sans); }
#zjknit-preview .zj-course-detail-list p { margin-top:10px; color:var(--quiet); font-size:14px; line-height:1.9; }
#zjknit-preview .zj-course-pending { color:var(--quiet); font-size:13px; white-space:nowrap; }
#zjknit-preview .zj-course-back { display:inline-flex; gap:14px; align-items:center; margin-top:32px; padding:8px 0; border-bottom:1px solid var(--brand-red); font-size:14px; }
#zjknit-preview .zj-course-back .zj-icon { color:var(--brand-red); }
#zjknit-preview :is(.zj-course-breadcrumb a,.zj-course-category-nav a,.zj-course-back):focus-visible { outline:2px solid var(--brand-red); outline-offset:5px; border-radius:4px; }
@container (max-width:760px) { #zjknit-preview .zj-course-page-body { grid-template-columns:minmax(0,1fr); } #zjknit-preview .zj-course-category-nav { display:flex; flex-wrap:wrap; gap:8px 20px; padding-bottom:24px; border-bottom:1px solid #dededc; } }
@container (max-width:540px) { #zjknit-preview .zj-course-preview p { margin:0; padding:22px 18px 26px; color:var(--ink); font-size:14px; line-height:1.9; } #zjknit-preview .zj-course-link { padding:20px 12px; } #zjknit-preview .zj-course-content { padding-top:108px; } #zjknit-preview .zj-course-page-heading { padding-bottom:28px; } }
@media (prefers-reduced-motion:reduce) { #zjknit-preview :is(.zj-course-preview,.zj-course-link,.zj-course-link::before) { transition:none; } }