.course-shell{max-width:var(--max);margin:0 auto;padding:40px 24px 120px}.lesson-shell{max-width:820px}.ring{transform:rotate(-90deg)}.ring-lg{width:88px;height:88px}.ring-sm{width:40px;height:40px}.ring-track{fill:none;stroke:var(--md-surface-variant);stroke-width:4}.ring-fill{fill:none;stroke:var(--md-primary);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.course-hero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding-bottom:40px;border-bottom:1px solid var(--md-outline-variant)}.course-eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--md-primary);font-weight:500;margin-bottom:16px}.course-hero-text h1{font-size:clamp(34px,5vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0 0 16px;color:var(--md-on-surface)}.course-hero-text p{font-size:16px;line-height:1.6;color:var(--md-on-surface-variant);max-width:540px;margin:0}.course-meta{margin-top:28px;display:flex;gap:32px;flex-wrap:wrap}.course-meta div{display:flex;flex-direction:column}.course-meta strong{font-size:24px;font-weight:500;color:var(--md-on-surface);line-height:1.1}.course-meta span{font-size:12px;letter-spacing:.3px;color:var(--md-on-surface-variant)}.course-progress-card{width:240px;background:var(--md-secondary-container);border-radius:var(--shape-xl);padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.course-progress-card .ring-track{stroke:color-mix(in srgb,var(--md-on-secondary-container) 18%,transparent)}.course-progress-card .ring-fill{stroke:var(--md-secondary)}.course-progress-num{margin-top:-62px;margin-bottom:30px;font-size:22px;font-weight:500;color:var(--md-on-secondary-container)}.course-progress-sub{font-size:13px;color:color-mix(in srgb,var(--md-on-secondary-container) 80%,transparent);margin-bottom:20px}.course-progress-sub b{color:var(--md-on-secondary-container)}.continue-cta{width:100%;justify-content:center}.course-reset{margin-top:14px;font-family:Roboto,sans-serif;font-size:12px;font-weight:500;background:none;border:none;color:color-mix(in srgb,var(--md-on-secondary-container) 70%,transparent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.course-reset:hover{color:var(--md-error)}@media(max-width:720px){.course-hero{grid-template-columns:1fr}.course-progress-card{width:100%}}.phase-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.phase-card{background:var(--md-surface);border:1px solid var(--md-outline-variant);border-radius:var(--shape-lg);padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--md-on-surface);transition:box-shadow .2s,background .2s,border-color .2s}.phase-card:hover{box-shadow:0 1px 2px #0000004d,0 2px 6px 2px #0000001a;background:color-mix(in srgb,var(--md-on-surface) 3%,var(--md-surface));text-decoration:none;color:var(--md-on-surface)}.phase-card.complete{border-color:var(--md-primary)}.phase-card-top{display:flex;align-items:center;justify-content:space-between}.phase-card-num{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--md-on-surface-variant)}.status-chip{font-size:11px;font-weight:500;letter-spacing:.3px;padding:3px 10px;border-radius:var(--shape-full);border:1px solid var(--md-outline-variant);color:var(--md-on-surface-variant)}.status-chip[data-status=in-progress]{background:color-mix(in srgb,var(--md-primary) 14%,transparent);border-color:transparent;color:var(--md-secondary)}.status-chip[data-status=done]{background:var(--md-primary);border-color:transparent;color:var(--md-on-primary)}.phase-card-title{font-size:17px;font-weight:500;line-height:1.25;margin:0;color:var(--md-on-surface)}.phase-card-desc{font-size:13px;line-height:1.55;color:var(--md-on-surface-variant);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.phase-card-foot{display:flex;align-items:center;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid var(--md-outline-variant)}.phase-card-count{font-size:13px;color:var(--md-on-surface-variant)}.phase-card-count b{color:var(--md-secondary);font-weight:700}.phase-card-arrow{margin-left:auto;color:var(--md-on-surface-variant);transition:transform .2s,color .2s}.phase-card:hover .phase-card-arrow{transform:translate(3px);color:var(--md-secondary)}.lesson-crumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--md-on-surface-variant);margin-bottom:28px}.lesson-crumb a{display:inline-flex;align-items:center;gap:4px;color:var(--md-secondary);font-weight:500}.lesson-crumb a:hover{text-decoration:none}.lesson-crumb-sep{opacity:.5}.lesson-head{margin-bottom:28px}.lesson-kicker{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--md-primary);font-weight:500;margin-bottom:8px}.lesson-title{font-size:clamp(28px,4vw,40px);font-weight:500;line-height:1.12;margin:0 0 12px;color:var(--md-on-surface)}.lesson-desc{font-size:16px;line-height:1.6;color:var(--md-on-surface-variant);margin:0 0 24px}.lesson-progress{display:flex;align-items:center;gap:14px}.lesson-bar-wrap{flex:1;height:6px;background:var(--md-surface-variant);border-radius:var(--shape-full);overflow:hidden}.lesson-bar{height:100%;background:var(--md-primary);border-radius:var(--shape-full);transition:width .5s ease}.lesson-progress-text{font-size:13px;color:var(--md-on-surface-variant);white-space:nowrap}.lesson-progress-text b{color:var(--md-secondary)}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.filter-btn{font-family:Roboto,sans-serif;font-size:13px;font-weight:500;letter-spacing:.1px;height:32px;padding:0 16px;border-radius:var(--shape-sm);border:1px solid var(--md-outline);background:transparent;color:var(--md-on-surface-variant);cursor:pointer;transition:background .15s,color .15s,border-color .15s}.filter-btn:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent);color:var(--md-on-surface)}.filter-btn.active{background:var(--md-secondary-container);border-color:transparent;color:var(--md-on-secondary-container)}.lessons{display:flex;flex-direction:column;gap:10px}.lesson-item{border:1px solid var(--md-outline-variant);border-radius:var(--shape-lg);background:var(--md-surface);overflow:hidden;transition:border-color .15s,box-shadow .2s}.lesson-item.open{box-shadow:0 1px 2px #0003,0 2px 6px 2px #00000014}.lesson-item.done{border-color:var(--md-primary);background:color-mix(in srgb,var(--md-primary) 6%,var(--md-surface))}.lesson-item-head{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}.lesson-item.open .lesson-item-head{border-bottom:1px solid var(--md-outline-variant)}.topic-check{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--md-outline);background:var(--md-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--md-on-primary);font-size:15px;font-weight:700;transition:background .15s,border-color .15s;padding:0}.topic-check:after{content:""}.topic-check:hover{border-color:var(--md-primary)}.lesson-item.done .topic-check{background:var(--md-primary);border-color:var(--md-primary)}.lesson-item.done .topic-check:after{content:"✓"}.lesson-item-toggle{flex:1;display:flex;align-items:center;gap:14px;background:none;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;min-width:0}.lesson-item-index{flex:none;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--md-on-surface-variant)}.lesson-item-titles{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.lesson-item-title{font-size:15px;font-weight:500;color:var(--md-on-surface);line-height:1.3}.lesson-item.done .lesson-item-title{color:var(--md-on-surface-variant)}.lesson-item-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lesson-chevron{flex:none;color:var(--md-on-surface-variant);transition:transform .2s}.lesson-item.open .lesson-chevron{transform:rotate(180deg)}.topic-tag{font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:2px 8px;border-radius:var(--shape-xs);border:1px solid var(--md-outline-variant);color:var(--md-on-surface-variant);font-weight:500}.topic-tag.core{border-color:var(--md-primary);color:var(--md-secondary)}.topic-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;color:var(--md-on-secondary-container);background:var(--md-secondary-container);padding:2px 8px 2px 6px;border-radius:var(--shape-full)}.topic-badge .material-symbols{font-size:14px}.topic-empty{font-size:13px;color:var(--md-on-surface-variant);padding:10px 14px}.lesson-item-body{padding:16px 20px 22px;display:flex;flex-direction:column;gap:18px;animation:fade .2s ease}.lesson-item-body[hidden]{display:none}.lesson-note{font-size:14px;line-height:1.6;color:var(--md-on-surface-variant);margin:0;max-width:600px}.lesson-note code,.practice-block-prompt code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.875em;background:var(--md-surface-variant);padding:1px 6px;border-radius:var(--shape-xs)}.read-btn{align-self:flex-start}.lesson-selfmark{font-size:13px;color:var(--md-on-surface-variant);margin:0;font-style:italic}.read-block{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;border:1px solid var(--md-outline-variant);border-radius:var(--shape-lg);background:color-mix(in srgb,var(--md-primary) 4%,var(--md-surface))}.read-primary-lead{margin:0;font-size:14px;line-height:1.55;color:var(--md-on-surface-variant);max-width:520px}.read-btn-primary{align-self:flex-start}.read-external-hint{font-size:12px;color:var(--md-on-surface-variant);letter-spacing:.2px}.practice-block{border-radius:var(--shape-lg);padding:18px;background:var(--md-secondary-container)}.practice-block-head{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--md-on-secondary-container);margin-bottom:8px}.practice-block-head .material-symbols{font-size:18px}.practice-block-title{font-size:15px;font-weight:500;margin:0 0 4px;color:var(--md-on-secondary-container)}.practice-block-prompt{font-size:14px;line-height:1.6;margin:0;color:color-mix(in srgb,var(--md-on-secondary-container) 88%,transparent)}.practice-block-prompt code{background:color-mix(in srgb,var(--md-on-secondary-container) 14%,transparent)}.practice-snippet{margin:12px 0 0;padding:14px 16px;background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border-radius:var(--shape-md);overflow-x:auto;font-size:13px;line-height:1.5}.practice-snippet code{font-family:ui-monospace,SF Mono,Menlo,monospace}.slot-empty{text-align:center;padding:56px 24px;border:1px dashed var(--md-outline-variant);border-radius:var(--shape-lg);color:var(--md-on-surface-variant)}.slot-empty .material-symbols{font-size:40px;color:var(--md-outline);margin-bottom:12px}.slot-empty p{max-width:380px;margin:0 auto;font-size:14px;line-height:1.6}.lesson-nav{margin-top:48px;padding-top:28px;border-top:1px solid var(--md-outline-variant);display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.lesson-nav-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--md-on-surface-variant);text-decoration:none;max-width:220px}.lesson-nav-link:hover{text-decoration:none;color:var(--md-secondary)}.lesson-nav-link.next{justify-self:end;text-align:right}.lesson-nav-link span{display:flex;flex-direction:column}.lesson-nav-link small{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--md-on-surface-variant)}.lesson-nav-link span:not(small){font-weight:500;color:var(--md-on-surface)}.lesson-complete{justify-self:center}@media(max-width:640px){.lesson-nav{grid-template-columns:1fr}.lesson-complete{order:-1;justify-self:stretch}.lesson-nav-link.next{justify-self:start;text-align:left}.tab{padding:12px;font-size:13px}.tab span:not(.material-symbols):not(.tab-badge){display:inline}}
