/* Learning screens: canonical 이샘코딩 design-system tokens. */
.lp-detail,
.lp-classroom,
.lp-player-page {
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all;
}
.lp-detail h1,.lp-detail h2,.lp-detail h3,
.lp-classroom h1,.lp-classroom h2,.lp-classroom h3,
.lp-player-page h1,.lp-player-page h2,.lp-player-page h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.lp-detail a:not(.btn),.lp-classroom a:not(.btn),.lp-player-page a:not(.btn) { color: inherit; }
.lp-detail a:not(.btn):hover,.lp-classroom a:not(.btn):hover,.lp-player-page a:not(.btn):hover { color: var(--brand-hover); }
.lp-detail .eyebrow,.lp-classroom .eyebrow,.lp-player-page .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
}
.lp-detail { padding-bottom: 96px; }
.lp-breadcrumb { display:flex;align-items:center;gap:var(--space-4);padding-top:var(--space-8);font-size:var(--fs-caption);color:var(--text-muted);flex-wrap:wrap; }
.lp-detail-heading { padding-top:var(--space-9);padding-bottom:var(--space-8); }
.lp-heading-copy { max-width:820px; }
.lp-labels { display:flex;gap:var(--space-4);align-items:center;margin:var(--space-6) 0 var(--space-5); }
.lp-labels .chip { font-size:var(--fs-caption); }
.lp-text-label { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-heading-copy h1 { margin:0 0 var(--space-5);font-size:var(--fs-h1); }
.lp-heading-copy>p { margin:0;color:var(--text-body);font-size:var(--fs-body); }
.lp-detail-meta { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);font-size:var(--fs-body-sm); }
.lp-detail-meta>a { text-decoration:underline;text-underline-offset:3px; }
.lp-stars { display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-bold);color:var(--brand); }
.lp-meta-divider { width:1px;height:16px;background:var(--border-default); }
.lp-demo-disclosure { display:block;margin-top:var(--space-4);font-size:var(--fs-caption);color:var(--text-muted); }
.lp-detail-grid { display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:var(--space-8);align-items:start; }
.lp-detail-main { min-width:0; }
.lp-preview { display:block;border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);transition:border-color var(--dur-fast) var(--ease-out); }
.lp-preview:hover { border-color:var(--blue-200);text-decoration:none; }
.lp-preview-heading { display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);font-size:var(--fs-caption);color:var(--text-muted);border-bottom:1px solid var(--border-default); }
.lp-preview-heading>span:first-child { display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);letter-spacing:var(--ls-caps); }
.lp-preview-heading>span:last-child { color:var(--brand); }
.lp-preview-art { position:relative;height:288px;overflow:hidden;background:var(--surface-inverse); }
.lp-preview-art>.course-art { width:100%;height:100%;min-height:100%;border-radius:0; }
.lp-preview-play { position:absolute;right:var(--space-7);bottom:var(--space-7);display:grid;place-items:center;width:56px;height:56px;background:var(--surface-card);color:var(--brand);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:background var(--dur-fast) var(--ease-out); }
.lp-preview:hover .lp-preview-play { background:var(--brand-subtle); }
.lp-preview-bottom { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-6) var(--space-7); }
.lp-preview-bottom>strong { font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-strong); }
.lp-preview-bottom>span { display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption);white-space:nowrap;color:var(--brand); }
.lp-detail-nav { display:flex;gap:var(--space-8);border-bottom:1px solid var(--border-default);margin-top:var(--space-7);overflow-x:auto;white-space:nowrap; }
.lp-detail-nav>a { display:flex;align-items:center;min-height:56px;padding:var(--space-5) 0;border-bottom:2px solid transparent;font-size:var(--fs-body-sm);font-weight:var(--fw-medium); }
.lp-detail-nav>a[aria-current="location"] { color:var(--brand);border-bottom-color:var(--brand); }
.lp-detail-nav>a:hover { border-bottom-color:var(--blue-200);text-decoration:none; }
.lp-content-section { padding:var(--space-11) 0;border-bottom:1px solid var(--border-default);scroll-margin-top:96px; }
.lp-content-section h2 { margin:var(--space-4) 0 var(--space-7);font-size:var(--fs-h2); }
.lp-body-copy { font-size:var(--fs-body);color:var(--text-body);margin:0; }
.lp-outcomes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8); }
.lp-outcomes>div { padding:var(--space-7) var(--space-5);background:var(--surface-subtle);border:1px solid var(--border-default);border-radius:var(--radius-lg); }
.lp-outcomes>div>span { display:block;margin-bottom:var(--space-6);color:var(--brand);font:var(--fw-medium) var(--fs-caption)/var(--lh-body) var(--font-mono); }
.lp-outcomes strong { display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-bold);color:var(--text-strong); }
.lp-outcomes p { margin:var(--space-3) 0 0;color:var(--text-muted);font-size:var(--fs-body-sm); }
.lp-outcomes p>br { display:none; }
.lp-recommend { display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-7);margin-top:var(--space-7);background:var(--surface-brand-subtle);border-radius:var(--radius-md); }
.lp-recommend-icon { display:flex;flex-shrink:0;color:var(--brand); }
.lp-recommend h3 { margin:0 0 var(--space-3);font-size:var(--fs-h4); }
.lp-recommend p { margin:0;font-size:var(--fs-body-sm);color:var(--text-body); }
.lp-section-title { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5); }
.lp-section-title>.muted { font-size:var(--fs-caption);white-space:nowrap; }
.lp-curriculum { border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card); }
.lp-curriculum-group+details { border-top:1px solid var(--border-default); }
.lp-curriculum-group summary { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);min-height:64px;list-style:none;cursor:pointer;background:var(--surface-subtle); }
.lp-curriculum-group summary::-webkit-details-marker { display:none; }
.lp-curriculum-group summary strong { font-size:var(--fs-body-sm);font-weight:var(--fw-bold); }
.lp-section-number { color:var(--brand);font:var(--fw-medium) var(--fs-caption)/var(--lh-body) var(--font-mono); }
.lp-section-count { margin-left:auto;font-size:var(--fs-caption);color:var(--text-muted);white-space:nowrap; }
.lp-curriculum-group summary>svg { transition:transform var(--dur-base) var(--ease-out); }
.lp-curriculum-group[open] summary>svg { transform:rotate(180deg); }
.lp-curriculum-lesson { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);min-height:56px;font-size:var(--fs-body-sm); }
.lp-curriculum-lesson:hover { background:var(--surface-brand-subtle);text-decoration:none; }
.lp-curriculum-lesson+.lp-curriculum-lesson { border-top:1px solid var(--border-subtle); }
.lp-lesson-icon { display:flex;flex-shrink:0;color:var(--text-muted); }
.lp-curriculum-lesson>span:nth-child(2) { flex:1; }
.lp-free-label { font-size:var(--fs-caption);white-space:nowrap;color:var(--info-text);background:var(--info-subtle);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs); }
.lp-lesson-duration { margin-left:auto;color:var(--text-muted);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;white-space:nowrap; }
.lp-small-note { font-size:var(--fs-caption);color:var(--text-muted);margin:var(--space-4) 0 0; }
.lp-instructor-card { display:flex;align-items:flex-start;gap:var(--space-7);padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-lg); }
.lp-instructor-avatar { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);width:96px;min-height:112px;flex-shrink:0;background:var(--surface-brand-subtle);color:var(--brand);border-radius:var(--radius-md); }
.lp-instructor-avatar>span { font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-h4); }
.lp-instructor-card h3 { font-size:var(--fs-h3);margin:var(--space-2) 0 var(--space-4); }
.lp-instructor-card p { margin:0 0 var(--space-4);font-size:var(--fs-body-sm); }
.lp-instructor-location { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-sample-pill { display:inline-flex;align-items:center;max-width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);background:var(--surface-subtle);border:1px solid var(--border-default);color:var(--text-muted);font-size:var(--fs-caption); }
.lp-review-card { padding:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card); }
.lp-review-top { display:flex;align-items:center;gap:var(--space-4); }
.lp-review-avatar { display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);color:var(--brand);background:var(--surface-brand-subtle);font-size:var(--fs-body-sm);flex-shrink:0; }
.lp-review-top>div { display:flex;flex-direction:column;gap:var(--space-2); }
.lp-review-top strong { font-size:var(--fs-body-sm);font-weight:var(--fw-bold); }
.lp-review-top>div>span { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-review-stars { margin-left:auto;white-space:nowrap;font-size:var(--fs-body-sm);letter-spacing:var(--ls-caps);color:var(--brand); }
.lp-review-card>p { margin:var(--space-6) 0 0;font-size:var(--fs-body); }
.lp-faq>details { border-top:1px solid var(--border-default); }
.lp-faq>details>summary { display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6) 0;min-height:64px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);cursor:pointer;list-style:none; }
.lp-faq>details>summary::-webkit-details-marker { display:none; }
.lp-faq>details>summary svg { flex-shrink:0; }
.lp-faq>details[open]>summary svg { transform:rotate(45deg); }
.lp-faq>details>p { margin:0 0 var(--space-6);padding-right:var(--space-8);font-size:var(--fs-body-sm);color:var(--text-muted); }
.lp-refund-note { margin-top:var(--space-8);padding:var(--space-7);background:var(--surface-subtle);border-radius:var(--radius-md);scroll-margin-top:96px; }
.lp-refund-note strong { font-size:var(--fs-body-sm);font-weight:var(--fw-bold); }
.lp-refund-note p { margin:var(--space-3) 0 0;font-size:var(--fs-caption);color:var(--text-muted); }
.lp-price-column { position:sticky;top:96px; }
.lp-price-card { background:var(--surface-card);padding:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-lg); }
.lp-price-eyebrow { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-price-card h2 { margin:var(--space-3) 0 var(--space-7);font-size:var(--fs-h4); }
.lp-old-price { margin-bottom:var(--space-2);font-size:var(--fs-body-sm);color:var(--text-muted);text-decoration:line-through; }
.lp-price { display:flex;align-items:baseline;gap:var(--space-4);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums; }
.lp-price>span { color:var(--brand);font-size:var(--fs-h3); }
.lp-price-facts { display:grid;gap:var(--space-5);margin:var(--space-7) 0;padding:var(--space-7) 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default); }
.lp-price-facts>div { display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-body-sm); }
.lp-price-facts>div>span { display:flex;align-items:center;gap:var(--space-3);color:var(--text-muted); }
.lp-price-facts strong { font-weight:var(--fw-medium); }
.lp-full-btn { width:100%;justify-content:center;min-height:var(--control-h-md);font-size:var(--fs-body-sm);gap:var(--space-3); }
.lp-full-btn+.lp-full-btn { margin-top:var(--space-4); }
.lp-price-foot { margin:var(--space-5) 0 0;font-size:var(--fs-caption);color:var(--text-muted);text-align:center; }
.lp-sidebar-help { display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-7) var(--space-3);color:var(--brand); }
.lp-sidebar-help>div { display:flex;flex-direction:column;gap:var(--space-3); }
.lp-sidebar-help strong { font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-body); }
.lp-sidebar-help a { display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption); }

/* Classroom */
.lp-classroom { padding-top:var(--space-11);padding-bottom:96px; }
.lp-classroom-top { display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);margin-bottom:var(--space-8); }
.lp-classroom-top .page-heading { margin:var(--space-4) 0 var(--space-5);font-size:var(--fs-h1); }
.lp-classroom-top>div>p { margin:0;font-size:var(--fs-body);color:var(--text-muted); }
.lp-classroom-top>.btn { font-size:var(--fs-body-sm);flex-shrink:0; }
.lp-learning-banner { display:flex;align-items:center;gap:var(--space-7);padding:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-subtle); }
.lp-banner-mark { display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-md);color:var(--brand);background:var(--surface-brand-subtle);flex-shrink:0; }
.lp-learning-banner>div:nth-child(2)>span { color:var(--brand);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caps); }
.lp-learning-banner h2 { margin:var(--space-4) 0 var(--space-4);font-size:var(--fs-h3); }
.lp-learning-banner p { margin:0;color:var(--text-muted);font-size:var(--fs-body-sm); }
.lp-learning-stats { display:flex;align-items:center;gap:var(--space-7);margin-left:auto; }
.lp-learning-stats>div { display:flex;flex-direction:column;align-items:center;gap:var(--space-3);min-width:104px; }
.lp-learning-stats>div+div { border-left:1px solid var(--border-default);padding-left:var(--space-7); }
.lp-learning-stats strong { color:var(--brand);font-family:var(--font-display);font-size:var(--fs-h1);font-weight:var(--fw-medium);line-height:var(--lh-snug);font-variant-numeric:tabular-nums; }
.lp-learning-stats small { margin-left:var(--space-2);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-regular); }
.lp-learning-stats>div>span { color:var(--text-muted);font-size:var(--fs-caption); }
.lp-classroom-title { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin:var(--space-10) 0 var(--space-7); }
.lp-classroom-title h2 { margin:0;font-size:var(--fs-h3); }
.lp-classroom-title h2>span { margin-left:var(--space-3);color:var(--brand);font-size:var(--fs-h4); }
.lp-enrolled-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7); }
.lp-enrolled-card { min-width:0;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); }
.lp-enrolled-card:hover { border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--shadow-lg); }
.lp-enrolled-art { position:relative;display:block;height:224px;overflow:hidden; }
.lp-enrolled-art>.course-art { width:100%;height:100%;min-height:100%;border-radius:0; }
.lp-enrolled-badge { position:absolute;top:var(--space-5);right:var(--space-5);color:var(--info-text);background:var(--info-subtle);border-radius:var(--radius-xs);padding:var(--space-2) var(--space-3);font-size:var(--fs-caption); }
.lp-enrolled-content { padding:var(--space-7); }
.lp-enrolled-content h3 { min-height:62px;margin:var(--space-3) 0 var(--space-4);font-size:var(--fs-h4); }
.lp-enrolled-teacher { margin:0 0 var(--space-7);color:var(--text-muted);font-size:var(--fs-body-sm); }
.lp-progress-caption { display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);font-size:var(--fs-caption);color:var(--text-muted); }
.lp-progress-caption strong { margin-left:var(--space-2);color:var(--brand); }
.lp-progress-track { height:6px;border-radius:var(--radius-xs);overflow:hidden;background:var(--surface-sunken); }
.lp-progress-track>span { display:block;height:100%;border-radius:var(--radius-xs);background:var(--brand);transition:width var(--dur-base) var(--ease-out); }
.lp-remaining { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 var(--space-7);font-size:var(--fs-caption);color:var(--text-muted); }
.lp-remaining>span { margin-left:auto; }
.lp-next-lesson { margin:var(--space-4) 0 0;font-size:var(--fs-caption);color:var(--text-muted); }
.lp-classroom-tip { display:flex;gap:var(--space-4);padding:var(--space-7);margin-top:var(--space-8);background:var(--surface-subtle);border-radius:var(--radius-md); }
.lp-classroom-tip>span { flex-shrink:0;color:var(--brand); }
.lp-classroom-tip strong { font-size:var(--fs-body-sm);font-weight:var(--fw-bold); }
.lp-classroom-tip p { margin:var(--space-3) 0 0;font-size:var(--fs-body-sm);color:var(--text-muted); }
.lp-empty-classroom { grid-column:1/-1;padding:var(--space-11) var(--space-7);text-align:center;background:var(--surface-subtle);border-radius:var(--radius-lg); }
.lp-empty-classroom>svg { margin:auto;color:var(--brand); }
.lp-empty-classroom h2 { font-size:var(--fs-h3);margin:var(--space-7) 0 var(--space-4); }
.lp-empty-classroom p { font-size:var(--fs-body);color:var(--text-muted);margin-bottom:var(--space-7); }

/* Lesson player */
.lp-player-page { min-height:80vh;padding-bottom:96px;background:var(--surface-subtle); }
.lp-player-heading { display:flex;align-items:center;gap:var(--space-7);padding-top:var(--space-8);padding-bottom:var(--space-8); }
.lp-back-link { display:flex;align-items:center;gap:var(--space-2);padding-right:var(--space-7);min-height:44px;font-size:var(--fs-body-sm);white-space:nowrap;border-right:1px solid var(--border-default); }
.lp-player-heading>div { min-width:0; }
.lp-player-heading h1 { font-size:var(--fs-h3);margin:var(--space-2) 0 0; }
.lp-player-heading>.lp-sample-pill { margin-left:auto;flex-shrink:0; }
.lp-player-grid { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-7);align-items:start; }
.lp-player-main { min-width:0; }
.lp-demo-video { display:flex;flex-direction:column;position:relative;overflow:hidden;min-height:524px;border-radius:var(--radius-lg);background:var(--surface-inverse);color:var(--text-inverse); }
.lp-video-topline { display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-7);border-bottom:1px solid var(--navy-800);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caps);color:var(--text-inverse-muted); }
.lp-video-topline>span:first-child { display:flex;align-items:center;gap:var(--space-3); }
.lp-video-topline>span:last-child { font-family:var(--font-body);letter-spacing:var(--ls-body);white-space:nowrap; }
.lp-demo-stage { display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:var(--space-8) var(--space-8);min-height:0; }
.lp-demo-lesson-number { color:var(--blue-300);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caps);margin-bottom:var(--space-4); }
.lp-demo-stage h2 { margin:0 0 var(--space-7);font-size:var(--fs-h3);text-align:center;color:var(--text-inverse); }
.lp-demo-editor { flex-shrink:0;width:100%;max-width:620px;border:1px solid var(--navy-800);border-radius:var(--radius-md);overflow:hidden;background:var(--code-bg); }
.lp-editor-bar { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface-inverse-raised);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-inverse-muted); }
.lp-editor-bar>span:first-child { display:flex;gap:var(--space-2); }
.lp-editor-bar i { display:block;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--gray-500); }
.lp-editor-bar>span:nth-child(2) { margin:auto; }
.lp-demo-code { padding:var(--space-6) var(--space-5);font-size:var(--fs-body-sm);line-height:1.9;white-space:nowrap;overflow-x:auto;scrollbar-color:var(--navy-800) var(--navy-900);scrollbar-width:thin; }
.lp-demo-code>div { display:flex;gap:var(--space-5); }
.lp-demo-code>div>span { width:16px;flex-shrink:0;text-align:right;color:var(--code-comment);font-family:var(--font-mono);font-size:var(--fs-caption); }
.lp-demo-code code { font-family:var(--font-mono);color:var(--code-text); }
.lp-demo-code em { color:var(--code-comment);font-style:normal; }
.lp-demo-code b { color:var(--code-keyword);font-weight:var(--fw-regular); }
.lp-demo-code i { color:var(--code-string);font-style:normal; }
.lp-demo-code strong { color:var(--code-function);font-weight:var(--fw-regular); }
.lp-demo-terminal { padding:var(--space-5);min-height:132px;border-top:1px solid var(--navy-800); }
.lp-demo-terminal>span { font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caps);color:var(--text-inverse-muted); }
.lp-demo-terminal p { margin:var(--space-3) 0 0;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--code-text);white-space:pre-line;line-height:1.7; }
.lp-demo-central-play { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--brand);cursor:pointer; }
.lp-demo-central-play:hover { background:var(--brand-subtle); }
.lp-demo-central-play[hidden] { display:none; }
.lp-video-controls { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:var(--surface-inverse-raised);min-height:60px; }
.lp-control-play { display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-inverse);cursor:pointer; }
.lp-control-play:hover,.lp-demo-restart:hover { background:var(--navy-900); }
.lp-demo-time { color:var(--text-inverse-muted);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;white-space:nowrap; }
.lp-video-progress { flex:1;min-width:24px;height:4px;border-radius:var(--radius-xs);overflow:hidden;background:var(--gray-600); }
.lp-video-progress>span { display:block;height:100%;width:0;background:var(--blue-300);transition:width var(--dur-base) var(--ease-out); }
.lp-demo-restart { min-height:44px;padding:var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-inverse-muted);font-size:var(--fs-caption);white-space:nowrap;cursor:pointer; }
.lp-video-quality { padding:var(--space-1) var(--space-2);border:1px solid var(--gray-600);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-inverse-muted); }
.lp-pause-icon { font-size:var(--fs-h3);line-height:1; }
.lp-demo-notice { display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) 0;color:var(--text-muted);font-size:var(--fs-caption); }
.lp-demo-notice>svg { flex-shrink:0;margin-top:2px; }
.lp-current-lesson { display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-5) 0 var(--space-8); }
.lp-current-lesson>div>span { color:var(--brand);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--ls-caps); }
.lp-current-lesson h2 { margin:var(--space-3) 0 0;font-size:var(--fs-h3); }
.lp-complete-btn { flex-shrink:0;min-height:var(--control-h-md);font-size:var(--fs-body-sm);white-space:nowrap; }
.lp-player-tabs { display:flex;gap:var(--space-8);border-bottom:1px solid var(--border-default); }
.lp-player-tabs>button { display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-5) 0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-muted);font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);cursor:pointer; }
.lp-player-tabs>button[aria-selected="true"] { color:var(--brand);border-bottom-color:var(--brand); }
.lp-player-tabs>button>span { padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);background:var(--surface-sunken);font-size:var(--fs-caption); }
.lp-player-panel { padding:var(--space-8) 0 var(--space-4); }
.lp-player-panel[hidden] { display:none; }
.lp-player-panel h3 { margin:0 0 var(--space-4);font-size:var(--fs-h4); }
.lp-player-panel>p,.lp-questions-intro>p { font-size:var(--fs-body-sm);color:var(--text-muted);margin:0 0 var(--space-7); }
.lp-download-card { display:flex;align-items:center;gap:var(--space-5);width:100%;padding:var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);text-align:left;color:var(--text-body);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out); }
.lp-download-card:hover { border-color:var(--blue-200); }
.lp-file-icon { display:grid;place-items:center;flex-shrink:0;width:44px;height:52px;border:1px solid var(--blue-200);border-radius:var(--radius-sm);background:var(--surface-brand-subtle);color:var(--brand);font-family:var(--font-mono);font-size:var(--fs-caption); }
.lp-download-card>span:nth-child(2) { display:flex;flex-direction:column;gap:var(--space-2); }
.lp-download-card strong { font-size:var(--fs-body-sm);font-weight:var(--fw-medium); }
.lp-download-card small { color:var(--text-muted);font-size:var(--fs-caption); }
.lp-download-card>svg { margin-left:auto;flex-shrink:0;color:var(--brand); }
.lp-next-link { display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-7);margin-top:var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card); }
.lp-next-link:hover { border-color:var(--blue-200);text-decoration:none; }
.lp-next-link>span { display:flex;flex-direction:column;gap:var(--space-3); }
.lp-next-link small { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-next-link strong { font-size:var(--fs-body-sm);font-weight:var(--fw-medium); }
.lp-next-link>svg { flex-shrink:0;color:var(--brand); }
.lp-player-sidebar { position:sticky;top:96px;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card); }
.lp-player-sidebar-heading { padding:var(--space-7);border-bottom:1px solid var(--border-default); }
.lp-player-sidebar-heading>div:first-child { display:flex;align-items:center;gap:var(--space-4); }
.lp-player-sidebar-heading h2 { margin:0;font-size:var(--fs-h4); }
.lp-player-sidebar-heading>div:first-child>span { font-size:var(--fs-caption);color:var(--text-muted); }
.lp-player-sidebar-heading>strong { display:block;margin:var(--space-7) 0 var(--space-3);font-size:var(--fs-body-sm);color:var(--brand);font-weight:var(--fw-medium); }
.lp-player-lesson-list { max-height:660px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent; }
.lp-player-lesson { display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5);border-left:3px solid transparent;transition:background var(--dur-fast) var(--ease-out); }
.lp-player-lesson+.lp-player-lesson { border-top:1px solid var(--border-subtle); }
.lp-player-lesson:hover { background:var(--surface-subtle);text-decoration:none; }
.lp-player-lesson.is-current { border-left-color:var(--brand);background:var(--surface-brand-subtle); }
.lp-player-lesson-status { display:flex;flex-shrink:0;margin-top:var(--space-2);color:var(--text-muted); }
.lp-player-lesson.is-current .lp-player-lesson-status,.lp-player-lesson.is-complete .lp-player-lesson-status { color:var(--brand); }
.lp-player-lesson>span:last-child { min-width:0; }
.lp-player-lesson strong { display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-body); }
.lp-player-lesson.is-current strong { color:var(--brand); }
.lp-player-lesson small { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-3);font-size:var(--fs-caption);color:var(--text-muted); }
.lp-player-lesson em { color:var(--brand);font-size:var(--fs-caption);font-style:normal; }
.lp-player-help { display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-7);min-height:56px;border-top:1px solid var(--border-default);background:var(--surface-subtle);font-size:var(--fs-body-sm); }
.lp-question-form { display:grid;gap:var(--space-4);padding:var(--space-7);margin-bottom:var(--space-7);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card); }
.lp-question-form label { font-size:var(--fs-body-sm);color:var(--text-body);font-weight:var(--fw-medium); }
.lp-question-form input,.lp-question-form textarea { width:100%;min-height:var(--control-h-md);box-sizing:border-box;padding:var(--space-4) var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body-sm);line-height:var(--lh-body);resize:vertical; }
.lp-question-form input::placeholder,.lp-question-form textarea::placeholder { color:var(--text-muted); }
.lp-question-form input:focus,.lp-question-form textarea:focus { border-color:var(--brand);outline:none;box-shadow:var(--focus-ring); }
.lp-question-form textarea { margin-bottom:var(--space-3); }
.lp-question-form .btn { justify-self:end;min-height:var(--control-h-md);font-size:var(--fs-body-sm); }
.lp-question { display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-7) 0;border-bottom:1px solid var(--border-default); }
.lp-question-avatar { display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--surface-brand-subtle);color:var(--brand);font-family:var(--font-mono);font-size:var(--fs-body-sm); }
.lp-question>div { min-width:0; }
.lp-question strong { font-size:var(--fs-body-sm);font-weight:var(--fw-bold);overflow-wrap:anywhere; }
.lp-question p { margin:var(--space-3) 0;font-size:var(--fs-body-sm);color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere; }
.lp-question>div>span { color:var(--text-muted);font-size:var(--fs-caption); }
.lp-question-status { margin-left:auto;white-space:nowrap;padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);background:var(--info-subtle);color:var(--info-text);font-size:var(--fs-caption); }
.lp-player-lock { display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-8); }
.lp-player-lock>span { color:var(--blue-300); }
.lp-player-lock h2 { margin:var(--space-7) 0 var(--space-4);font-size:var(--fs-h3);color:var(--text-inverse); }
.lp-player-lock p { margin:0 0 var(--space-7);font-size:var(--fs-body-sm);color:var(--text-inverse-muted); }
.lp-player-lock>.btn { min-height:var(--control-h-md);font-size:var(--fs-body-sm); }
.lp-player-page .lp-player-lock>a:last-child { margin-top:var(--space-5);font-size:var(--fs-body-sm);color:var(--blue-200);text-decoration:underline;text-underline-offset:3px; }

@media(max-width:1100px) {
  .lp-detail-grid { grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-7); }
  .lp-outcomes { gap:var(--space-4); }
  .lp-outcomes>div { padding:var(--space-6) var(--space-4); }
  .lp-preview-bottom { flex-wrap:wrap;gap:var(--space-3); }
  .lp-enrolled-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-learning-banner { flex-wrap:wrap; }
  .lp-learning-stats { width:100%;margin-left:0;padding-top:var(--space-7);border-top:1px solid var(--border-default);justify-content:space-around; }
  .lp-learning-stats>div { width:33.333%; }
  .lp-player-grid { grid-template-columns:minmax(0,1fr) 304px; }
  .lp-player-sidebar-heading { padding:var(--space-6); }
  .lp-player-sidebar-heading>div:first-child { flex-wrap:wrap;gap:var(--space-3); }
  .lp-demo-stage { padding:var(--space-7); }
  .lp-current-lesson { flex-wrap:wrap;gap:var(--space-5); }
  .lp-current-lesson>div { width:100%; }
  .lp-video-quality { display:none; }
}
@media(max-width:860px) {
  .lp-detail-grid { display:flex;flex-direction:column; }
  .lp-detail-main { width:100%; }
  .lp-price-column { position:static;order:-1;width:100%; }
  .lp-price-card { display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-5);align-items:start; }
  .lp-price-eyebrow,.lp-price-card h2,.lp-old-price,.lp-price,.lp-price-facts,.lp-price-foot { grid-column:1/-1; }
  .lp-price-card h2 { margin-bottom:var(--space-5); }
  .lp-price-facts { grid-template-columns:1fr 1fr;column-gap:var(--space-7); }
  .lp-price-card .lp-full-btn+.lp-full-btn { margin-top:0; }
  .lp-sidebar-help { display:none; }
  .lp-player-grid { display:flex;flex-direction:column;gap:var(--space-8); }
  .lp-player-main,.lp-player-sidebar { width:100%; }
  .lp-player-sidebar { position:static; }
  .lp-player-lesson-list { max-height:440px; }
  .lp-player-sidebar-heading>div:first-child { flex-wrap:nowrap; }
  .lp-current-lesson { flex-wrap:nowrap; }
  .lp-current-lesson>div { width:auto; }
}
@media(max-width:640px) {
  .lp-detail,.lp-classroom,.lp-player-page { padding-bottom:var(--space-11); }
  .lp-breadcrumb { padding-top:var(--space-7);gap:var(--space-3); }
  .lp-detail-heading { padding-top:var(--space-8);padding-bottom:var(--space-7); }
  .lp-heading-copy h1 { font-size:var(--fs-h2); }
  .lp-detail-meta { gap:var(--space-3);font-size:var(--fs-caption); }
  .lp-heading-copy>p { font-size:var(--fs-body-sm); }
  .lp-detail-grid { gap:var(--space-7); }
  .lp-price-card { padding:var(--space-6);gap:0 var(--space-4); }
  .lp-price-card h2 { font-size:var(--fs-h4); }
  .lp-price-facts { column-gap:var(--space-5);row-gap:var(--space-5);margin:var(--space-6) 0;padding:var(--space-6) 0; }
  .lp-price-facts>div { flex-wrap:wrap;gap:var(--space-2);font-size:var(--fs-caption); }
  .lp-price-facts>div>span { width:100%;gap:var(--space-2); }
  .lp-price-facts strong { padding-left:24px; }
  .lp-price-card .lp-full-btn { padding-left:var(--space-3);padding-right:var(--space-3);font-size:var(--fs-caption);gap:var(--space-2); }
  .lp-preview-heading { padding:var(--space-5);gap:var(--space-3); }
  .lp-preview-art { height:256px; }
  .lp-preview-play { right:var(--space-5);bottom:var(--space-5);width:48px;height:48px; }
  .lp-preview-bottom { padding:var(--space-5); }
  .lp-detail-nav { gap:var(--space-6);justify-content:space-between; }
  .lp-detail-nav>a { font-size:var(--fs-body-sm); }
  .lp-content-section { padding:var(--space-10) 0; }
  .lp-content-section h2 { font-size:var(--fs-h3); }
  .lp-outcomes { grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-7); }
  .lp-outcomes>div { display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-4);padding:var(--space-6); }
  .lp-outcomes>div>span { grid-row:1/3;margin:0; }
  .lp-outcomes p { margin-top:var(--space-2);font-size:var(--fs-body-sm); }
  .lp-recommend { padding:var(--space-6);gap:var(--space-4); }
  .lp-recommend h3 { font-size:var(--fs-h4); }
  .lp-section-title { flex-wrap:wrap;align-items:flex-start;gap:0; }
  .lp-section-title>.muted,.lp-section-title>.lp-sample-pill { margin-bottom:var(--space-6); }
  .lp-section-title>div { width:100%; }
  .lp-section-title h2 { margin-bottom:var(--space-4); }
  .lp-curriculum-group summary { gap:var(--space-3);padding:var(--space-5); }
  .lp-curriculum-group summary strong { flex:1; }
  .lp-section-count { margin-left:0; }
  .lp-curriculum-lesson { display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--space-3);padding:var(--space-5); }
  .lp-lesson-icon { align-self:start;margin-top:var(--space-2); }
  .lp-free-label { grid-column:2;justify-self:start; }
  .lp-curriculum-lesson .lp-lesson-duration { grid-column:3;grid-row:1;align-self:start; }
  .lp-instructor-card { padding:var(--space-6);gap:var(--space-5); }
  .lp-instructor-avatar { width:64px;min-height:88px;gap:var(--space-3); }
  .lp-instructor-avatar>svg { width:32px;height:32px; }
  .lp-instructor-avatar>span { font-size:var(--fs-body-sm); }
  .lp-instructor-card h3 { font-size:var(--fs-h4); }
  .lp-review-card { padding:var(--space-6); }
  .lp-review-top { flex-wrap:wrap; }
  .lp-review-stars { font-size:var(--fs-caption); }
  .lp-review-card>p { font-size:var(--fs-body-sm); }
  .lp-faq>details>summary { padding:var(--space-5) 0; }
  .lp-refund-note { padding:var(--space-6); }
  .lp-classroom { padding-top:var(--space-9); }
  .lp-classroom-top { display:block; }
  .lp-classroom-top .page-heading { font-size:var(--fs-h2); }
  .lp-classroom-top>div>p { font-size:var(--fs-body-sm); }
  .lp-classroom-top>.btn { margin-top:var(--space-6); }
  .lp-learning-banner { padding:var(--space-7);gap:var(--space-5); }
  .lp-banner-mark { display:none; }
  .lp-learning-banner h2 { font-size:var(--fs-h3); }
  .lp-learning-stats { gap:var(--space-3);padding-top:var(--space-6);margin-top:var(--space-3); }
  .lp-learning-stats>div { min-width:0;gap:var(--space-3); }
  .lp-learning-stats>div+div { padding-left:var(--space-3); }
  .lp-learning-stats strong { font-size:var(--fs-h2); }
  .lp-learning-stats small { font-size:var(--fs-body-sm); }
  .lp-learning-stats>div>span { font-size:var(--fs-caption); }
  .lp-classroom-title { flex-wrap:wrap;gap:var(--space-4);margin:var(--space-8) 0 var(--space-6); }
  .lp-classroom-title h2 { font-size:var(--fs-h3); }
  .lp-enrolled-grid { grid-template-columns:1fr; }
  .lp-enrolled-art { height:236px; }
  .lp-enrolled-content h3 { min-height:0;font-size:var(--fs-h3); }
  .lp-enrolled-content { padding:var(--space-7); }
  .lp-remaining { gap:var(--space-2); }
  .lp-classroom-tip { padding:var(--space-6); }
  .lp-player-heading { flex-wrap:wrap;gap:var(--space-5);padding-top:var(--space-7);padding-bottom:var(--space-7); }
  .lp-back-link { order:0;border:0;padding-right:0;font-size:var(--fs-body-sm); }
  .lp-player-heading>.lp-sample-pill { order:1; }
  .lp-player-heading>div { order:2;width:100%; }
  .lp-player-heading h1 { font-size:var(--fs-h3); }
  .lp-demo-video { min-height:500px; }
  .lp-video-topline { padding:var(--space-5);gap:var(--space-3);font-size:var(--fs-caption);letter-spacing:0;flex-wrap:wrap; }
  .lp-video-topline>span:first-child { font-size:var(--fs-caption); }
  .lp-video-topline>span:last-child { font-size:var(--fs-caption); }
  .lp-demo-stage { padding:var(--space-7) var(--space-5); }
  .lp-demo-stage h2 { font-size:var(--fs-h4);margin-bottom:var(--space-6); }
  .lp-editor-bar { padding:var(--space-4);gap:var(--space-3);font-size:var(--fs-caption); }
  .lp-editor-bar>span:first-child { display:none; }
  .lp-editor-bar>span:nth-child(2) { margin-left:0;margin-right:auto; }
  .lp-demo-code { padding:var(--space-5) var(--space-4);font-size:var(--fs-caption);line-height:1.9; }
  .lp-demo-code>div { gap:var(--space-4); }
  .lp-demo-code>div>span { width:12px; }
  .lp-demo-terminal { min-height:140px;padding:var(--space-4); }
  .lp-demo-central-play { width:52px;height:52px; }
  .lp-video-controls { padding:var(--space-2) var(--space-3);gap:var(--space-3); }
  .lp-demo-time { font-size:var(--fs-caption); }
  .lp-demo-restart { font-size:var(--fs-caption);padding:var(--space-2); }
  .lp-video-quality { display:none; }
  .lp-current-lesson { flex-wrap:wrap;gap:var(--space-5);padding:var(--space-4) 0 var(--space-7); }
  .lp-current-lesson>div { width:100%; }
  .lp-current-lesson h2 { font-size:var(--fs-h3); }
  .lp-player-panel { padding-top:var(--space-7); }
  .lp-download-card { gap:var(--space-4);padding:var(--space-5); }
  .lp-file-icon { width:36px;height:44px; }
  .lp-next-link { padding:var(--space-6); }
  .lp-question-form { padding:var(--space-6); }
  .lp-question { flex-wrap:wrap;gap:var(--space-3); }
  .lp-question>div { flex:1;min-width:calc(100% - 52px); }
  .lp-question-status { margin-left:40px; }
  .lp-player-lock { padding:var(--space-7); }
  .lp-player-lock h2 { font-size:var(--fs-h3); }
}
@media(max-width:370px) {
  .lp-detail-nav { gap:var(--space-4); }
  .lp-detail-nav>a { font-size:var(--fs-caption); }
  .lp-price-card { padding:var(--space-5); }
  .lp-price-card .lp-full-btn { white-space:normal; }
  .lp-price-card .lp-full-btn>svg { width:16px;height:16px; }
  .lp-price-facts { column-gap:var(--space-4); }
  .lp-curriculum-group summary { flex-wrap:wrap; }
  .lp-section-count { font-size:var(--fs-caption); }
  .lp-instructor-card { flex-direction:column; }
  .lp-review-stars { margin-left:52px; }
  .lp-learning-banner { padding:var(--space-6); }
  .lp-enrolled-content { padding:var(--space-6); }
  .lp-remaining>span { width:100%;margin-left:20px; }
  .lp-demo-stage { padding-inline:var(--space-4); }
  .lp-video-controls { gap:var(--space-2); }
  .lp-control-play { width:40px; }
}
@media(prefers-reduced-motion:reduce) {
  .lp-preview,.lp-preview-play,.lp-curriculum-group summary>svg,.lp-progress-track>span,.lp-enrolled-card,.lp-video-progress>span,.lp-player-lesson,.lp-download-card { transition:none; }
}

/* The shared course graphic stays fully visible in these larger learning cards. */
.lp-preview-art,.lp-enrolled-art { height:auto; }
.lp-preview-art>.course-art,.lp-enrolled-art>.course-art { height:auto;min-height:0;padding-bottom:var(--space-7); }
.lp-preview-art .art-topline,.lp-enrolled-art .art-topline,
.lp-preview-art .art-terminal-header,.lp-enrolled-art .art-terminal-header,
.lp-preview-art .art-terminal-code,.lp-enrolled-art .art-terminal-code,
.lp-preview-art .art-terminal-code i,.lp-enrolled-art .art-terminal-code i { font-size:var(--fs-caption); }
.lp-preview-art .art-terminal,.lp-enrolled-art .art-terminal { border-radius:var(--radius-sm); }
.lp-preview-art .art-terminal-code>span,.lp-enrolled-art .art-terminal-code>span { white-space:normal;overflow-wrap:anywhere;word-break:normal; }
.lp-preview-art .art-topline,.lp-enrolled-art .art-topline { flex-wrap:wrap;gap:var(--space-2) var(--space-4); }

.lp-review-stars{display:inline-flex;align-items:center;gap:var(--space-1)}
.lp-enrolled-labels{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.lp-enrolled-labels .lp-enrolled-badge{position:static;flex-shrink:0}