:root{--color-bg:#f8f9fa;--color-surface:#fff;--color-border:#e5e7eb;--color-border-hover:#2563eb;--color-text:#1a1a2e;--color-text-secondary:#4b5563;--color-text-muted:#9ca3af;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-error-bg:#fef2f2;--color-error:#991b1b;--color-warning-bg:#fef3c7;--color-warning:#92400e;--color-info-bg:#eff6ff;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-sm:.84rem;--font-base:.95rem;--font-md:1.05rem;--font-lg:1.2rem;--font-xl:1.5rem;--font-2xl:2rem;--font-3xl:2.6rem;--radius:10px;--radius-sm:8px;--radius-pill:999px;--max-width:880px;--max-width-narrow:600px}body{font-family:var(--font-family);font-size:var(--font-base);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.6}.nav{padding:var(--space-md) var(--space-xl);background:var(--color-text);justify-content:space-between;align-items:center;display:flex}.nav-brand{font-size:var(--font-lg);color:#60a5fa;letter-spacing:-.02em;font-weight:700}.nav-brand:hover{text-decoration:none}.nav-links{gap:var(--space-lg);display:flex}.nav-links a{color:#d1d5db;font-size:var(--font-sm);transition:color .15s}.nav-links a:hover{color:#fff;text-decoration:none}.container{max-width:var(--max-width);padding:var(--space-xl) var(--space-lg);margin:0 auto}.hero{text-align:center;padding:var(--space-2xl) 0 var(--space-xl)}.hero h1{font-size:var(--font-3xl);letter-spacing:-.03em;margin-bottom:var(--space-sm);font-weight:800}.hero-tagline{font-size:var(--font-xl);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.hero-sub{font-size:var(--font-base);color:var(--color-text-muted);max-width:440px;margin:0 auto var(--space-lg);line-height:1.5}.search-bar{gap:var(--space-sm);max-width:var(--max-width-narrow);margin:0 auto var(--space-xl);display:flex}.search-bar input{border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-base);font-family:var(--font-family);outline:none;flex:1;padding:.7rem 1rem;transition:border-color .15s}.search-bar input:focus{border-color:var(--color-primary)}.search-bar button{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-base);font-family:var(--font-family);cursor:pointer;border:none;padding:.7rem 1.25rem;transition:background .15s}.search-bar button:hover{background:var(--color-primary-hover)}.search-results h2{font-size:var(--font-base);color:var(--color-text-muted);margin-bottom:var(--space-md);font-weight:500}.skill-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}.skill-card{padding:var(--space-md) var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s;display:block}.skill-card:hover{border-color:var(--color-border-hover);text-decoration:none;box-shadow:0 2px 12px #2563eb14}.skill-card-header{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.skill-card h3{font-size:var(--font-md);color:var(--color-text);font-weight:600}.skill-card p{font-size:var(--font-sm);color:var(--color-text-secondary);margin-top:var(--space-xs);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;display:-webkit-box;overflow:hidden}.level{border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;padding:.12rem .55rem;font-size:.7rem;font-weight:600;display:inline-block}.level-beginner{color:#065f46;background:#d1fae5}.level-intermediate{color:#92400e;background:#fef3c7}.level-advanced{color:#9d174d;background:#fce7f3}.roles-section{margin-top:var(--space-2xl)}.roles-section>h2{font-size:var(--font-lg);margin-bottom:var(--space-md)}.role-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.role-card{padding:var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s;display:block}.role-card:hover{border-color:var(--color-border-hover);text-decoration:none;box-shadow:0 2px 12px #2563eb14}.role-card h3{font-size:var(--font-md);color:var(--color-text);margin-bottom:var(--space-xs)}.role-card p{font-size:var(--font-sm);color:var(--color-text-secondary);line-height:1.5}.skill-header{align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm);display:flex}.skill-header h1{font-size:var(--font-2xl);letter-spacing:-.02em;font-weight:700}.skill-description{color:var(--color-text-secondary);margin-bottom:var(--space-sm);line-height:1.6}.detail-section{margin-top:var(--space-xl)}.detail-section h2{font-size:var(--font-lg);color:var(--color-text);margin-bottom:var(--space-xs);font-weight:600}.divider{background:var(--color-border);height:1px;margin-bottom:var(--space-md)}.resource-list{padding:0;list-style:none}.resource-list li{font-size:var(--font-base);border-bottom:1px solid #f3f4f6;padding:.6rem 0}.resource-list li:last-child{border-bottom:none}.resource-list span{color:var(--color-text-secondary)}.skill-graph{margin-top:var(--space-sm)}.skill-graph .chain-visual{padding:var(--space-sm) 0;border-bottom:1px solid #f3f4f6;flex-flow:wrap;align-items:center;gap:.35rem;display:flex}.skill-graph .chain-visual:last-child{border-bottom:none}.chain-node{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-sm);padding:.35rem .75rem;transition:border-color .15s;display:inline-block}.chain-node:hover{border-color:var(--color-primary);text-decoration:none}.chain-node-current{border-color:var(--color-primary);background:var(--color-info-bg);font-weight:600}.chain-arrow{color:var(--color-primary);padding:0 .2rem;font-size:1rem;line-height:1}.path-result{margin-top:var(--space-xl)}.path-result-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.path-result-header h2{font-size:var(--font-lg);font-weight:600}.path-step-count{font-size:var(--font-sm);color:var(--color-text-muted);background:var(--color-info-bg);border-radius:var(--radius-pill);padding:.2rem .6rem}.path-header-right{align-items:center;gap:var(--space-md);display:flex}.view-toggle{border-radius:var(--radius-pill);background:#e5e7eb;padding:2px;display:inline-flex}.view-toggle button{color:var(--color-text-secondary);border-radius:var(--radius-pill);cursor:pointer;background:0 0;border:none;padding:.3rem .8rem;font-size:.8rem;font-weight:500;transition:background .15s,color .15s}.view-toggle button.active{color:var(--color-primary);background:#fff;font-weight:600;box-shadow:0 1px 3px #0000001a}.graph-visualization-container{margin-top:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg) 0;justify-content:center;display:flex}.graph-node-group:hover .graph-node-rect{fill:var(--color-info-bg);stroke-width:2.5px}.path-nodes{margin-top:var(--space-md);flex-direction:column;align-items:center;gap:0;display:flex}.path-step{flex-direction:column;align-items:center;display:flex}.path-node{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-width:220px;padding:.75rem 1.5rem;transition:background .15s,border-color .15s;display:flex}.path-node:hover{background:var(--color-info-bg);text-decoration:none}.path-node-name{color:var(--color-text);font-weight:600;font-size:var(--font-base);margin-bottom:.15rem;display:block}.path-node-type{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;display:block}.path-arrow{color:var(--color-primary);justify-content:center;align-items:center;padding:.4rem 0;font-size:1.5rem;line-height:1;display:flex}.path-not-found{text-align:center;padding:var(--space-xl);background:var(--color-warning-bg);border-radius:var(--radius);margin-top:var(--space-xl)}.path-not-found h3{font-size:var(--font-lg);color:var(--color-warning);margin-bottom:var(--space-sm)}.path-not-found p{color:var(--color-warning);font-size:var(--font-sm);line-height:1.5}.path-form{margin:var(--space-lg) 0}.form-row{gap:var(--space-md);margin-bottom:var(--space-md);align-items:flex-end;display:flex}.form-row label{gap:var(--space-xs);font-size:var(--font-sm);color:var(--color-text-secondary);flex-direction:column;flex:1;font-weight:500;display:flex}.form-row .form-arrow{color:var(--color-text-muted);align-items:center;padding-bottom:.5rem;font-size:1.2rem;display:flex}.form-row input,.form-row select{border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-base);font-family:var(--font-family);background:var(--color-surface);color:var(--color-text);cursor:pointer;outline:none;padding:.65rem .9rem;transition:border-color .15s}.form-row input:focus,.form-row select:focus{border-color:var(--color-primary)}.path-form button{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-base);font-family:var(--font-family);cursor:pointer;border:none;padding:.7rem 2rem;transition:background .15s}.path-form button:hover{background:var(--color-primary-hover)}.path-form button:disabled{background:var(--color-text-muted);cursor:not-allowed}.loading-state{text-align:center;padding:var(--space-2xl);color:var(--color-text-muted)}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);width:28px;height:28px;margin:0 auto var(--space-sm);border-radius:50%;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-state{text-align:center;padding:var(--space-xl);background:var(--color-error-bg);border-radius:var(--radius);color:var(--color-error)}.error-state h2{font-size:var(--font-md);margin-bottom:var(--space-sm)}.back-link{margin-bottom:var(--space-lg);color:var(--color-text-muted);font-size:var(--font-sm);transition:color .15s;display:inline-block}.back-link:hover{color:var(--color-primary);text-decoration:none}.empty-state{color:var(--color-text-muted);padding:var(--space-md) 0;font-style:italic}.path-section{margin-top:var(--space-2xl);padding:var(--space-lg);background:var(--color-info-bg);border-radius:var(--radius);text-align:center}.path-section h2{font-size:var(--font-lg);margin-bottom:var(--space-sm)}.path-section a{font-weight:500}.page>h1{font-size:var(--font-2xl);letter-spacing:-.02em;margin-bottom:var(--space-sm);font-weight:700}.role-details .role-meta{color:var(--color-text-muted);font-size:var(--font-base);margin-bottom:var(--space-lg)}.role-details .detail-section{margin-top:var(--space-xl)}.section-sub{color:var(--color-text-secondary);font-size:var(--font-sm);margin-bottom:var(--space-xs)}.required-skills-checklist{gap:var(--space-xs);margin-top:var(--space-sm);flex-direction:column;display:flex}.checklist-item{align-items:center;gap:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.5rem .75rem;display:flex}.checkmark{color:#10b981;font-size:1.1rem;font-weight:700}.checklist-name{color:var(--color-text);flex:1;font-weight:600}.prereq-toggle-header{justify-content:space-between;align-items:center;display:flex}.toggle-button{background:var(--color-surface);border:2px solid var(--color-primary);color:var(--color-primary);border-radius:var(--radius-pill);font-size:var(--font-sm);cursor:pointer;padding:.4rem .9rem;font-weight:500;transition:background .15s,color .15s}.toggle-button:hover{background:var(--color-primary);color:#fff}.learning-path>p{color:var(--color-text-secondary);margin-bottom:0}@media (width<=1024px){.container{padding:var(--space-xl) var(--space-md)}.skill-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.role-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (width<=768px){.nav{gap:var(--space-sm);padding:var(--space-md);text-align:center;flex-direction:column}.nav-links{justify-content:center;gap:var(--space-md);flex-wrap:wrap}.container{padding:var(--space-lg) var(--space-md)}.hero{margin-bottom:var(--space-xl)}.hero h1{font-size:2.2rem}.hero-tagline{font-size:var(--font-lg)}.form-row{gap:var(--space-md);flex-direction:column}.form-row label{width:100%}.form-row select,.form-row input{box-sizing:border-box;width:100%}.form-row .form-arrow{display:none}.skill-grid,.role-grid{grid-template-columns:1fr}.skill-header{align-items:flex-start;gap:var(--space-sm);flex-direction:column}.path-result-header{align-items:flex-start;gap:var(--space-md);flex-direction:column}.path-header-right{flex-wrap:wrap;justify-content:space-between;width:100%}.prereq-toggle-header{align-items:flex-start;gap:var(--space-sm);flex-direction:column}.graph-visualization-container{padding:var(--space-md);-webkit-overflow-scrolling:touch;overflow-x:auto}.graph-svg{min-width:500px}}@media (width<=480px){.hero h1{font-size:1.75rem}.hero-tagline{font-size:var(--font-md)}.search-bar{flex-direction:column}.search-bar button,.path-form button{width:100%}.toggle-button{text-align:center;width:100%}.path-step{width:100%}.path-node{box-sizing:border-box;width:100%}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a2e;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}