:where(.learn-hub){&{max-width:1280px;margin:0 auto;padding:80px 24px 96px}& .eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent,#d4a438);margin:0 0 14px;font-size:.68rem;font-weight:600}& .hub-head h1{font-family:var(--font-editorial);letter-spacing:-.015em;color:var(--learn-ink);max-width:24ch;margin:0 0 16px;font-size:clamp(1.75rem,3.5vw,2.4rem);font-weight:700;line-height:1.1}& .lede{color:var(--learn-ink-dim);max-width:56ch;margin:0 0 24px;font-size:1rem;line-height:1.65}& .start-btn{background:var(--color-accent,#d4a438);color:var(--color-forge-navy);letter-spacing:.01em;border-radius:var(--radius-sm,6px);align-items:center;padding:10px 22px;font-size:.875rem;font-weight:700;text-decoration:none;transition:filter .15s;display:inline-flex}& .start-btn:hover{filter:brightness(1.08)}& .catalog-layout{margin-top:48px;display:block}@media (width>=768px){& .catalog-layout{grid-template-columns:220px 1fr;align-items:start;gap:40px;display:grid}}@media (width>=1024px){& .catalog-layout{grid-template-columns:240px 1fr}}& .mobile-filter-btn{border:1px solid var(--learn-line);border-radius:var(--radius-sm,6px);color:var(--learn-ink);cursor:pointer;background:0 0;align-items:center;gap:8px;margin-bottom:16px;padding:9px 16px;font-size:.875rem;font-weight:500;transition:border-color .15s;display:flex}& .mobile-filter-btn:hover{border-color:#d4a43873}@media (width>=768px){& .mobile-filter-btn{display:none}}& .filter-badge{background:var(--color-accent,#d4a438);min-width:18px;height:18px;color:var(--color-forge-navy);border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-size:.72rem;font-weight:700;display:inline-flex}& .filter-sidebar{display:none}& .catalog-layout.filters-open .filter-sidebar{border:1px solid var(--learn-line);border-radius:var(--radius-md,10px);margin-bottom:20px;padding:20px;display:block}@media (width>=768px){& .filter-sidebar{scrollbar-width:thin;scrollbar-color:var(--learn-line) transparent;max-height:calc(100vh - 88px);padding-right:4px;position:sticky;top:72px;overflow-y:auto;display:block!important}& .filter-sidebar::-webkit-scrollbar{width:4px}& .filter-sidebar::-webkit-scrollbar-track{background:0 0}& .filter-sidebar::-webkit-scrollbar-thumb{background:var(--learn-line);border-radius:2px}}& .sidebar-head{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}& .sidebar-title{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--learn-ink-dim);font-size:.73rem;font-weight:600}& .clear-btn{color:var(--color-accent,#d4a438);cursor:pointer;background:0 0;border:none;padding:2px 0;font-size:.78rem;text-decoration:underline #0000;transition:text-decoration-color .15s}& .clear-btn:hover{text-decoration-color:var(--color-accent,#d4a438)}}:where(.learn-hub){& .filter-group{border-top:1px solid var(--learn-line);padding:14px 0}& .filter-group-head{color:var(--learn-ink);cursor:pointer;user-select:none;justify-content:space-between;align-items:center;gap:8px;padding:2px 0;font-size:.85rem;font-weight:600;list-style:none;display:flex}& .filter-group-head::-webkit-details-marker{display:none}& .chevron{color:var(--learn-ink-dim);flex-shrink:0;transition:transform .2s}& details[open] .chevron{transform:rotate(180deg)}& .filter-options{flex-direction:column;gap:8px;margin-top:12px;display:flex}& .filter-opt{cursor:pointer;color:var(--learn-ink-dim);align-items:center;gap:8px;font-size:.875rem;transition:color .12s;display:flex}& .filter-opt:hover{color:var(--learn-ink)}& .filter-opt input[type=checkbox],& .filter-opt input[type=radio]{appearance:none;border:1px solid var(--learn-line);cursor:pointer;background:0 0;border-radius:3px;flex-shrink:0;width:15px;height:15px;transition:border-color .12s,background .12s;position:relative}& .filter-opt input[type=radio]{border-radius:50%}& .filter-opt input[type=checkbox]:checked,& .filter-opt input[type=radio]:checked{background:var(--color-accent,#d4a438);border-color:var(--color-accent,#d4a438)}& .filter-opt input[type=checkbox]:checked:after{content:"";border:2px solid #0d1b2a;border-top:none;border-left:none;width:5px;height:8px;position:absolute;top:2px;left:4px;transform:rotate(45deg)}& .filter-opt input[type=radio]:checked:after{content:"";background:#0d1b2a;border-radius:50%;width:7px;height:7px;position:absolute;top:3px;left:3px}& .opt-label{flex:1}& .opt-count{font-family:var(--font-mono);color:var(--learn-ink-dim);margin-left:auto;font-size:.72rem}}:where(.learn-hub){& .catalog-header{justify-content:space-between;align-items:center;min-height:28px;margin-bottom:16px;display:flex}& .result-count{font-family:var(--font-mono);color:var(--learn-ink-dim);font-size:.78rem}& .track-grid{grid-template-columns:1fr;gap:10px;display:grid}@media (width>=640px){& .track-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){& .track-grid{grid-template-columns:repeat(2,1fr)}}& .track-card{color:inherit;border:1px solid var(--learn-line);border-radius:var(--radius-md,10px);min-height:180px;padding:20px 22px;text-decoration:none;transition:border-color .15s,background .15s;display:block}& .track-card:hover{background:#d4a43806;border-color:#d4a43873}& .card-inner{flex-direction:column;gap:10px;height:100%;display:flex}& .card-badges{flex-wrap:wrap;gap:6px;display:flex}& .level-badge,& .type-badge{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:3px 8px;font-size:.66rem;font-weight:600;line-height:1.4}& .level-beginner{color:#5aad84;background:#2d6a4f33;border:1px solid #2d6a4f4d}& .level-intermediate{color:#6ab4d4;background:#1b49654d;border:1px solid #1b496580}& .level-advanced{color:#d47070;background:#9b222626;border:1px solid #9b22264d}& .type-badge{color:#d4a438b3;background:#d4a43814;border:1px solid #d4a4382e}& .track-card h2{color:var(--learn-ink);margin:0;font-size:.975rem;font-weight:700;line-height:1.3}& .track-desc{color:var(--learn-ink-dim);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;margin:0;font-size:.845rem;line-height:1.6;display:-webkit-box;overflow:hidden}& .track-foot{border-top:1px solid #2a3f5799;margin-top:auto;padding-top:12px}& .track-meta{font-family:var(--font-mono);color:var(--learn-ink-dim);margin:0;font-size:.72rem;display:block}& .dot{opacity:.5}& .track-bar{background:var(--learn-line);border-radius:999px;height:3px;margin-top:8px;overflow:hidden}& .track-bar-fill{background:var(--color-accent,#d4a438);border-radius:999px;width:0;height:100%;transition:width .4s;display:block}& .track-card.track-done .track-meta{color:var(--color-accent,#d4a438)}& .empty-state{text-align:center;padding:48px 0}& .empty-state-msg{color:var(--learn-ink-dim);margin:0 0 16px;font-size:.95rem}& .clear-btn-inline{color:var(--color-accent,#d4a438);border-radius:var(--radius-sm,6px);cursor:pointer;background:0 0;border:1px solid #d4a43859;padding:8px 18px;font-size:.875rem;font-weight:600;transition:border-color .15s,background .15s}& .clear-btn-inline:hover{border-color:var(--color-accent,#d4a438);background:#d4a4380f}@media (prefers-reduced-motion:no-preference){& .track-card{animation:.35s both card-fade-up}& .track-card:first-child{animation-delay:40ms}& .track-card:nth-child(2){animation-delay:80ms}& .track-card:nth-child(3){animation-delay:.12s}& .track-card:nth-child(4){animation-delay:.16s}& .track-card:nth-child(5){animation-delay:.2s}& .track-card:nth-child(6){animation-delay:.24s}& .track-card:nth-child(7){animation-delay:.28s}& .track-card:nth-child(8){animation-delay:.32s}& .track-card:nth-child(9){animation-delay:.36s}}}@keyframes card-fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}:where(.learn-hub){& .about-resource{border:1px solid var(--learn-line);background:#091320;border-radius:10px;max-width:720px;margin-top:56px;padding:28px 30px}& .about-resource h2{font-family:var(--font-editorial);letter-spacing:-.01em;color:var(--learn-ink);margin:0 0 14px;font-size:1.2rem;font-weight:700}& .about-resource p{color:var(--learn-ink-dim);margin:0 0 16px;font-size:.92rem;line-height:1.65}& .about-resource a{color:var(--color-accent,#d4a438);text-underline-offset:2px;text-decoration:underline #d4a43859;transition:text-decoration-color .15s}& .about-resource a:hover{text-decoration-color:var(--color-accent,#d4a438)}& .about-cite{font-family:var(--font-mono);color:var(--learn-ink-dim);background:var(--learn-bg,#0d1b2a);border:1px solid var(--learn-line);border-left:2px solid var(--color-accent,#d4a438);overflow-wrap:anywhere;border-radius:6px;padding:12px 14px;margin:0 0 16px!important;font-size:.78rem!important;line-height:1.6!important}& .about-cite-label{letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent,#d4a438);margin-bottom:5px;font-size:.64rem;font-weight:600;display:block}& .about-cite-text{color:var(--learn-ink)}& .about-educators{margin:0!important;font-size:.86rem!important}& .hub-feeder{border:1px solid var(--learn-line);background:#091320;border-radius:10px;max-width:640px;margin-top:56px;padding:24px 28px}& .hub-feeder .fc-lead{color:var(--learn-ink-dim);margin:0 0 14px;font-size:.92rem;line-height:1.55}& .hub-feeder .fc-form{flex-wrap:wrap;gap:10px;display:flex}& .hub-feeder .fc-input{background:var(--learn-bg,#0d1b2a);border:1px solid var(--learn-line);min-width:220px;color:var(--learn-ink);border-radius:8px;flex:1;padding:10px 12px;font-family:inherit;font-size:.92rem}& .hub-feeder .fc-input:focus-visible{outline-offset:1px;outline:2px solid #d4a438}& .hub-feeder .fc-btn{cursor:pointer;color:#091320;background:#d4a438;border:none;border-radius:8px;padding:10px 20px;font-family:inherit;font-size:.92rem;font-weight:600}& .hub-feeder .fc-btn:disabled{opacity:.6;cursor:default}& .hub-feeder .fc-btn:focus-visible{outline-offset:2px;outline:2px solid #eaeef4}& .hub-feeder .fc-success{color:#22c55e;margin:0;font-size:.92rem}& .hub-feeder .fc-error{color:#ef4444;margin:10px 0 0;font-size:.86rem}& .empty{color:var(--learn-ink-dim);margin-top:56px}& .hub-foot{border-top:1px solid var(--learn-line);flex-wrap:wrap;align-items:center;gap:10px;margin-top:56px;padding-top:28px;display:flex}& .hub-foot-label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--learn-ink-dim);margin-right:4px;font-size:.68rem}& .hub-foot a{font-family:var(--font-mono);color:var(--learn-ink);border:1px solid var(--learn-line);border-radius:var(--radius-sm,6px);align-items:center;min-height:36px;padding:8px 14px;font-size:.78rem;text-decoration:none;transition:border-color .12s,color .12s;display:inline-flex}& .hub-foot a:hover{color:var(--color-accent,#d4a438);border-color:#d4a43880}}
