.skills-analyzer { font-family: system-ui, -apple-system, sans-serif; max-width: 960px; margin: 0 auto; color: #1a202c; }
.skills-analyzer h1 { color: #2b6cb0; border-bottom: 3px solid #4299e1; padding-bottom: 12px; }
.skills-analyzer h2 { color: #2c5282; }
.skills-analyzer .step { display: none; }
.skills-analyzer .step.active { display: block; }
.skills-analyzer .q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 640px) { .skills-analyzer .q-grid { grid-template-columns: 1fr; } }
.skills-analyzer .opt-btn { padding: 14px; border: 2px solid #cbd5e0; background: white; border-radius: 8px; cursor: pointer; text-align: left; transition: all 0.2s; font-size: 0.95em; }
.skills-analyzer .opt-btn:hover { border-color: #4299e1; background: #ebf8ff; }
.skills-analyzer .opt-btn.selected { border-color: #4299e1; background: #bee3f8; font-weight: 600; }
.skills-analyzer .skill-rate { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.skills-analyzer .skill-label { width: 180px; font-weight: 600; font-size: 0.9em; }
.skills-analyzer .skill-bar-bg { flex: 1; height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; }
.skills-analyzer .skill-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4299e1, #48bb78); transition: width 0.5s; }
.skills-analyzer .nav-btns { display: flex; gap: 12px; margin-top: 20px; justify-content: flex-end; }
.skills-analyzer .nav-btn { padding: 10px 24px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; font-size: 1em; }
.skills-analyzer .nav-btn.next { background: #4299e1; color: white; }
.skills-analyzer .nav-btn.prev { background: #e2e8f0; color: #4a5568; }
.skills-analyzer .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.skills-analyzer .result-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin: 12px 0; background: white; }
.skills-analyzer .result-card h3 { color: #2b6cb0; margin-top: 0; }
.skills-analyzer .score-badge { display: inline-block; padding: 4px 16px; border-radius: 20px; font-weight: 700; font-size: 1.1em; margin: 4px 0; }
.skills-analyzer .score-high { background: #c6f6d5; color: #276749; }
.skills-analyzer .score-medium { background: #fefcbf; color: #975a16; }
.skills-analyzer .score-low { background: #fed7d7; color: #c53030; }
.skills-analyzer .rec-list { padding-left: 20px; }
.skills-analyzer .rec-list li { margin-bottom: 10px; }
.skills-analyzer .progress-bar { display: flex; gap: 4px; margin: 16px 0; }
.skills-analyzer .progress-seg { height: 4px; flex: 1; background: #e2e8f0; border-radius: 2px; }
.skills-analyzer .progress-seg.done { background: #4299e1; }

Profile: ${roleNames[state.role] || 'Not specified'}
Goal: ${goalNames[state.goal] || 'Not specified'}
AI Readiness Score: ${avgLabel}

${recHtml}

let state = { role: '', skills: {}, goal: '' };

function selectRole(role, el) {

function rateSkill(el, key, val) {

const bar = el.closest('.skill-rate').nextElementSibling ? el.closest('div').previousElementSibling.querySelector('.skill-bar-fill') : null;
if (bar) bar.style.width = (val * 33.3) + '%';

const skillRate = el.parentElement ? el.closest('div[class="skill-rate"]') : null;

function selectGoal(goal, el) {

function nextStep(n) {

const roleNames = {

const goalNames = {

const avgSkill = Object.values(state.skills).reduce((a,b) => a+b, 0) / Object.keys(state.skills).length;
const totalSkills = Object.keys(state.skills).length;
let scoreClass = avgSkill < 1.5 ? 'score-low' : avgSkill < 2.2 ? 'score-medium' : 'score-high';
let avgLabel = avgSkill < 1.5 ? 'Building Foundation' : avgSkill  `
${r}
`).join('');

let weakSkills = [];
if ((state.skills.ai_lit || 0) < 2) weakSkills.push('AI Literacy');
if ((state.skills.prompt || 0) < 2) weakSkills.push('Prompt Engineering');
if ((state.skills.data || 0) < 2) weakSkills.push('Data Fluency');
if ((state.skills.ml || 0) < 2) weakSkills.push('ML Technical Skills');

const weakHtml = weakSkills.length ? `
Priority areas to develop: ${weakSkills.join(', ')}
` : '
Your technical foundation is solid — focus on application and advanced topics.
`;

state.role = role;
el.closest(‚.q-grid‘).querySelectorAll(‚.opt-btn‘).forEach(b => b.classList.remove(’selected‘));
el.classList.add(’selected‘);
}

state.skills[key] = val;
el.closest(‚div‘).querySelectorAll(‚.opt-btn‘).forEach(b => b.classList.remove(’selected‘));
el.classList.add(’selected‘);

// Actually find the bar — it’s in the previous .skill-rate div

}

state.goal = goal;
el.closest(‚.q-grid‘).querySelectorAll(‚.opt-btn‘).forEach(b => b.classList.remove(’selected‘));
el.classList.add(’selected‘);
}

document.querySelectorAll(‚.step‘).forEach(s => s.classList.remove(‚active‘));
document.getElementById(’step-‚ + n).classList.add(‚active‘);
document.querySelectorAll(‚.progress-seg‘).forEach((s,i) => s.classList.toggle(‚done‘, i s.classList.remove(‚active‘));
document.getElementById(’step-‚ + n).classList.add(‚active‘);
document.querySelectorAll(‚.progress-seg‘).forEach((s,i) => s.classList.toggle(‚done‘, i s.classList.remove(‚active‘));
document.getElementById(’step-4′).classList.add(‚active‘);
document.querySelectorAll(‚.progress-seg‘).forEach(s => s.classList.add(‚done‘));

engineering: ‚Software Engineering‘, data: ‚Data Science‘, product: ‚Product Management‘,
marketing: ‚Marketing‘, operations: ‚Operations‘, student: ‚Student/Career Changer‘,
executive: ‚Executive/Leadership‘, other: ‚Technical Role‘
};

career: ‚Career Growth‘, switch: ‚Career Switch to AI/ML‘, business: ‚Business AI Adoption‘,
founder: ‚Building an AI Product‘, knowledge: ‚General AI Literacy‘, education: ‚Academic Path‘
};

document.getElementById(‚results-content‘).innerHTML = `

`;
}