quackscore 0.1.0

package/dist/report/generate.js

@@ -0,0 +1,1540 @@
+import { LEVEL_THRESHOLDS } from '../scoring/index.js';
+import { diagLog } from '../shared/diagnostics.js';
+import { buildManagerProfileSummary } from '../shared/profile-summary.js';
+import { normalizeTechnologies } from '../shared/technologies.js';
+import { buildFallbackPRSummary, getLowValuePRSummaryReason } from '../shared/pr-summary.js';
+const DISPLAY_LABELS = {
+    ai: 'AI',
+    ai_coding_optimizations: 'AI Coding',
+    api: 'API',
+    cpp: 'C++',
+    ci_cd: 'CI/CD',
+    css: 'CSS',
+    devops: 'DevOps',
+    dotnet: '.NET',
+    game_dev: 'Game Dev',
+    html: 'HTML',
+    javascript: 'JavaScript',
+    new_development: 'New Development',
+    nodejs: 'Node.js',
+    qa: 'QA',
+    sre: 'SRE',
+    sql: 'SQL',
+    typescript: 'TypeScript',
+    web_frontend: 'Web Frontend',
+    mobile_frontend: 'Mobile Frontend',
+};
+const TECH_PALETTE = ['#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#ec4899'];
+const TYPE_COLORS = ['#10b981', '#f59e0b', '#ef4444', '#3b82f6'];
+const RADAR_FALLBACK_KEYS = ['backend', 'web_frontend', 'devops', 'security', 'ai', 'qa'];
+function pct(value, total) {
+    if (total === 0)
+        return '0.0';
+    return ((value / total) * 100).toFixed(1);
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function formatLabel(value) {
+    return DISPLAY_LABELS[value] ?? value.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+}
+function formatDate(value) {
+    return new Date(value).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+function getRankTitle(level) {
+    if (level >= 12)
+        return 'Distinguished Principal';
+    if (level >= 10)
+        return 'Principal Contributor';
+    if (level >= 8)
+        return 'Lead Contributor';
+    if (level >= 6)
+        return 'Senior Contributor';
+    if (level >= 4)
+        return 'Contributor II';
+    if (level >= 2)
+        return 'Contributor I';
+    return 'Emerging Contributor';
+}
+const LOW_VALUE_CHARACTER_PATTERNS = [
+    /^mostly takes ownership of\b/i,
+    /\ba good example is\b/i,
+    /\borg-scoped report\b/i,
+    /\bstrongest in\b/i,
+    /\barmed with\b/i,
+    /\banalyzed prs?\b/i,
+    /\bpull requests?\b/i,
+    /\blevel\s+\d+\b/i,
+    /\b\d[\d,]*\s*xp\b/i,
+];
+function isLowValueCharacterSummary(summary) {
+    if (!summary)
+        return true;
+    const normalized = summary.replace(/\s+/g, ' ').trim();
+    if (!normalized)
+        return true;
+    return LOW_VALUE_CHARACTER_PATTERNS.some((pattern) => pattern.test(normalized));
+}
+function isLowValuePRSummary(summary) {
+    return getLowValuePRSummaryReason(summary) !== null;
+}
+function getDisplayPRSummary(pr) {
+    const analysis = pr.analysis;
+    if (!analysis || analysis.skipped) {
+        return analysis?.skipReason ?? 'No analysis available for this PR.';
+    }
+    return isLowValuePRSummary(analysis.summary)
+        ? buildFallbackPRSummary(pr)
+        : analysis.summary;
+}
+function compactText(value, maxLength) {
+    const normalized = value.replace(/\s+/g, ' ').trim();
+    if (normalized.length <= maxLength)
+        return normalized;
+    const clipped = normalized.slice(0, maxLength - 3).trimEnd();
+    const breakIndex = Math.max(clipped.lastIndexOf('. '), clipped.lastIndexOf('; '), clipped.lastIndexOf(', '), clipped.lastIndexOf(' '));
+    const safeIndex = breakIndex > 120 ? breakIndex : clipped.length;
+    return `${clipped.slice(0, safeIndex).trimEnd()}...`;
+}
+function renderPillList(items, emptyLabel) {
+    if (items.length === 0)
+        return `<span class="detail-pill muted">${escapeHtml(emptyLabel)}</span>`;
+    return items.map((item) => `<span class="detail-pill">${escapeHtml(formatLabel(item))}</span>`).join('');
+}
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+    if (parts.length === 0)
+        return 'QS';
+    return parts.map((part) => part.charAt(0).toUpperCase()).join('');
+}
+function renderPlayerAvatar(name, avatarUrl) {
+    if (avatarUrl) {
+        return `<div class="avatar"><img class="avatar-image" src="${escapeHtml(avatarUrl)}" alt="${escapeHtml(name)} avatar" /></div>`;
+    }
+    return `<div class="avatar avatar-fallback" aria-hidden="true">${escapeHtml(getInitials(name))}</div>`;
+}
+function renderPlayerName(name) {
+    const [primary, scope, ...rest] = name.split(/\s+@\s+/);
+    if (!scope || rest.length > 0) {
+        return `<h2 class="player-name">${escapeHtml(name)}</h2>`;
+    }
+    return `<div class="player-name player-name-scoped"><span class="player-name-main">${escapeHtml(primary)}</span><span class="player-name-scope-mark" aria-hidden="true">@</span><span class="player-name-scope">${escapeHtml(scope)}</span></div>`;
+}
+function polarPoint(angle, radius, cx, cy) {
+    return { x: cx + Math.cos(angle) * radius, y: cy + Math.sin(angle) * radius };
+}
+function renderRadarChart(areaEntries, areaTotal) {
+    const map = new Map(areaEntries);
+    const keys = Array.from(new Set([...areaEntries.map(([key]) => key), ...RADAR_FALLBACK_KEYS])).slice(0, 6);
+    const items = keys.map((key) => ({ label: formatLabel(key), share: areaTotal === 0 ? 0 : Number(pct(map.get(key) ?? 0, areaTotal)) }));
+    const cx = 160;
+    const cy = 138;
+    const radius = 92;
+    const labelRadius = 118;
+    const grid = [0.25, 0.5, 0.75, 1]
+        .map((level) => `<polygon points="${items.map((_, index) => {
+        const point = polarPoint(-Math.PI / 2 + (index * Math.PI * 2) / items.length, radius * level, cx, cy);
+        return `${point.x.toFixed(2)},${point.y.toFixed(2)}`;
+    }).join(' ')}" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="1" />`)
+        .join('');
+    const axes = items
+        .map((item, index) => {
+        const angle = -Math.PI / 2 + (index * Math.PI * 2) / items.length;
+        const axisEnd = polarPoint(angle, radius, cx, cy);
+        const label = polarPoint(angle, labelRadius, cx, cy);
+        const anchor = label.x < cx - 8 ? 'end' : label.x > cx + 8 ? 'start' : 'middle';
+        return `<line x1="${cx}" y1="${cy}" x2="${axisEnd.x.toFixed(2)}" y2="${axisEnd.y.toFixed(2)}" stroke="rgba(255,255,255,0.12)" stroke-width="1" /><text x="${label.x.toFixed(2)}" y="${label.y.toFixed(2)}" fill="#a3a3a3" font-size="12" font-family="'JetBrains Mono', monospace" text-anchor="${anchor}" dominant-baseline="middle">${escapeHtml(item.label)}</text>`;
+    })
+        .join('');
+    const polygon = items
+        .map((item, index) => {
+        const point = polarPoint(-Math.PI / 2 + (index * Math.PI * 2) / items.length, radius * (item.share / 100), cx, cy);
+        return `${point.x.toFixed(2)},${point.y.toFixed(2)}`;
+    })
+        .join(' ');
+    const markers = items
+        .map((item, index) => {
+        const point = polarPoint(-Math.PI / 2 + (index * Math.PI * 2) / items.length, radius * (item.share / 100), cx, cy);
+        return `<circle cx="${point.x.toFixed(2)}" cy="${point.y.toFixed(2)}" r="3.5" fill="#f59e0b" stroke="#171717" stroke-width="2"><title>${escapeHtml(item.label)}: ${item.share.toFixed(1)}%</title></circle>`;
+    })
+        .join('');
+    return `<svg viewBox="0 0 320 280" role="img" aria-label="Specialization radar chart">${grid}${axes}<polygon points="${polygon}" fill="rgba(245,158,11,0.35)" stroke="#f59e0b" stroke-width="2" />${markers}</svg>`;
+}
+function renderTechDonut(topTechs) {
+    if (topTechs.length === 0)
+        return '<div class="chart-empty">No technology data available yet.</div>';
+    const total = topTechs.reduce((sum, [, value]) => sum + value, 0);
+    let deg = 0;
+    const gradient = topTechs.map(([, value], index) => {
+        const start = deg;
+        deg += (value / total) * 360;
+        return `${TECH_PALETTE[index % TECH_PALETTE.length]} ${start.toFixed(2)}deg ${deg.toFixed(2)}deg`;
+    }).join(', ');
+    const legend = topTechs.map(([key, value], index) => `<div class="tech-legend-row"><div class="tech-legend-label"><span class="tech-legend-dot" style="background:${TECH_PALETTE[index % TECH_PALETTE.length]}"></span><span>${escapeHtml(formatLabel(key))}</span></div><span class="tech-legend-value">${pct(value, total)}%</span></div>`).join('');
+    return `<div class="donut-layout"><div class="donut-chart" style="background:conic-gradient(${gradient})"><div class="donut-hole" aria-hidden="true"></div></div><div class="tech-legend">${legend}</div></div>`;
+}
+function renderContributionTypes(typeEntries, typeTotal) {
+    if (typeEntries.length === 0)
+        return '<p class="empty">No contribution data available yet.</p>';
+    return typeEntries.map(([key, value], index) => {
+        const share = pct(value, typeTotal);
+        return `<div class="type-row"><div class="type-row-head"><span class="type-label">${escapeHtml(formatLabel(key))}</span><span class="type-value">${share}%</span></div><div class="type-track"><div class="type-fill" style="width:${share}%;background:${TYPE_COLORS[index % TYPE_COLORS.length]}"></div></div></div>`;
+    }).join('');
+}
+function renderPRCard(pr, initiallyOpen) {
+    const analysis = pr.analysis;
+    const skipped = !analysis || analysis.skipped;
+    const summary = getDisplayPRSummary(pr);
+    const techs = skipped ? [] : normalizeTechnologies(analysis.technologies);
+    const types = skipped ? [] : analysis.types;
+    return `<details class="pr-entry${skipped ? ' is-skipped' : ''}"${initiallyOpen ? ' open' : ''}><summary class="pr-toggle"><div class="pr-head"><div class="pr-main-head"><div class="pr-icon-box" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><circle cx="4" cy="3" r="2" stroke="#a855f7" stroke-width="1.4"/><circle cx="12" cy="6" r="2" stroke="#a855f7" stroke-width="1.4"/><circle cx="9" cy="13" r="2" stroke="#a855f7" stroke-width="1.4"/><path d="M5.4 4.1l5.1 1.3M5.1 4.7l3.1 6" stroke="#a855f7" stroke-width="1.4" stroke-linecap="round"/></svg></div><div class="pr-title-wrap"><div class="pr-title-row"><strong>${escapeHtml(pr.title)}</strong><span class="repo-chip">${escapeHtml(pr.repo)}</span></div><div class="pr-meta-row"><span class="meta-date">${escapeHtml(formatDate(pr.mergedAt))}</span><span class="meta-plus">+ ${pr.additions.toLocaleString()}</span><span class="meta-minus">- ${pr.deletions.toLocaleString()}</span>${types.map((type) => `<span class="inline-chip subtle">${escapeHtml(formatLabel(type))}</span>`).join('')}</div></div></div><div class="pr-head-side"><div class="pr-tech-preview">${techs.slice(0, 3).map((tech) => `<span class="inline-chip tech">${escapeHtml(formatLabel(tech))}</span>`).join('')}</div><div class="pr-score"><div class="pr-points">${skipped ? 'Skipped' : `+${(pr.points ?? 0).toLocaleString()} XP`}</div><span class="pr-chevron" aria-hidden="true"></span></div></div></div></summary><div class="pr-body"><div class="pr-body-grid"><div class="pr-body-main"><div class="body-block"><h4>Quest Summary</h4><p>${escapeHtml(summary)}</p></div><div class="body-block"><h4>Tech Stack</h4><div class="pr-detail-pills">${renderPillList(techs, 'No technology tags')}</div></div></div><div class="pr-body-side"><div class="pr-stat"><span>Complexity Rating</span><strong>${skipped ? 'N/A' : `${analysis.complexity} / 10`}</strong><div class="mini-progress"><div class="mini-progress-fill" style="width:${skipped ? '0' : `${analysis.complexity * 10}`}%;"></div></div></div><a class="pr-link" href="${escapeHtml(pr.url)}" target="_blank" rel="noopener noreferrer">View Original PR <span aria-hidden="true">&#8599;</span></a></div></div></div></details>`;
+}
+export function generateHTML(data) {
+    const { username, stats, character, prs } = data;
+    const { totalPoints, level, pointsToNextLevel, areas, technologies, types, weeklyContributions, analyzedPRs, totalPRs } = stats;
+    diagLog('Generating HTML report', {
+        username,
+        totalPoints,
+        level,
+        pointsToNextLevel,
+        totalPRs,
+        analyzedPRs,
+        activeWeeks: weeklyContributions.filter((entry) => entry.points > 0).length,
+        prCount: prs.length,
+        characterPresent: Boolean(character),
+    });
+    const sortedPRs = [...prs].sort((left, right) => Date.parse(right.mergedAt) - Date.parse(left.mergedAt));
+    const topTechs = Object.entries(technologies).sort(([, left], [, right]) => right - left).slice(0, TECH_PALETTE.length);
+    const areaEntries = Object.entries(areas).sort(([, left], [, right]) => right - left);
+    const typeEntries = Object.entries(types).sort(([, left], [, right]) => right - left);
+    const areaTotal = areaEntries.reduce((sum, [, value]) => sum + value, 0);
+    const typeTotal = typeEntries.reduce((sum, [, value]) => sum + value, 0);
+    const weekRangeStart = weeklyContributions[0]?.week.slice(5) ?? 'N/A';
+    const weekRangeEnd = weeklyContributions[weeklyContributions.length - 1]?.week.slice(5) ?? 'N/A';
+    const activeWeeks = weeklyContributions.filter((entry) => entry.points > 0).length;
+    const primaryArea = areaEntries[0]?.[0];
+    const totalLinesModified = sortedPRs.reduce((sum, pr) => sum + pr.additions + pr.deletions, 0);
+    const scoredPRs = sortedPRs.filter((pr) => pr.analysis && !pr.analysis.skipped);
+    const averageComplexity = scoredPRs.length === 0 ? 'N/A' : (scoredPRs.reduce((sum, pr) => sum + (pr.analysis?.complexity ?? 0), 0) / scoredPRs.length).toFixed(1);
+    const profileSummary = analyzedPRs === 0
+        ? 'No merged pull requests were found for this profile scope, so there are currently no scored contributions to summarize.'
+        : buildManagerProfileSummary(stats, sortedPRs);
+    const playerRank = character?.title ?? getRankTitle(level);
+    const playerDescription = compactText(isLowValueCharacterSummary(character?.summary) ? profileSummary : character?.summary ?? profileSummary, 600);
+    const currentLevelFloor = LEVEL_THRESHOLDS[level - 1] ?? 0;
+    const nextLevelThreshold = LEVEL_THRESHOLDS[level] ?? LEVEL_THRESHOLDS[LEVEL_THRESHOLDS.length - 1] + LEVEL_THRESHOLDS[LEVEL_THRESHOLDS.length - 2];
+    const currentLevelXP = Math.max(0, totalPoints - currentLevelFloor);
+    const currentLevelSpan = Math.max(1, nextLevelThreshold - currentLevelFloor);
+    const levelProgress = Math.max(0, Math.min(100, Math.round((currentLevelXP / currentLevelSpan) * 100)));
+    const weeklyChartWidth = 860;
+    const weeklyChartHeight = 260;
+    const paddingTop = 18;
+    const paddingRight = 8;
+    const paddingBottom = 42;
+    const paddingLeft = 42;
+    const innerWidth = weeklyChartWidth - paddingLeft - paddingRight;
+    const innerHeight = weeklyChartHeight - paddingTop - paddingBottom;
+    const weeklyMax = Math.max(1, ...weeklyContributions.map((entry) => entry.points));
+    const weeklyStep = innerWidth / Math.max(weeklyContributions.length, 1);
+    const weeklyBarWidth = Math.max(8, Math.min(18, weeklyStep * 0.62));
+    const weeklyTicks = [...new Set([weeklyMax, Math.round(weeklyMax / 2), 0])].sort((left, right) => right - left);
+    const weeklyGrid = weeklyTicks.map((tick) => {
+        const y = paddingTop + innerHeight - (tick / weeklyMax) * innerHeight;
+        return `<line x1="${paddingLeft}" y1="${y.toFixed(2)}" x2="${weeklyChartWidth - paddingRight}" y2="${y.toFixed(2)}" stroke="rgba(255,255,255,0.1)" stroke-width="1" /><text x="${paddingLeft - 8}" y="${(y + 4).toFixed(2)}" fill="#737373" font-size="10" font-family="'JetBrains Mono', monospace" text-anchor="end">${tick.toLocaleString()}</text>`;
+    }).join('');
+    const weeklyBars = weeklyContributions.map((entry, index) => {
+        const x = paddingLeft + index * weeklyStep + (weeklyStep - weeklyBarWidth) / 2;
+        const rawHeight = (entry.points / weeklyMax) * innerHeight;
+        const barHeight = entry.points === 0 ? 2 : Math.max(8, rawHeight);
+        const y = paddingTop + innerHeight - barHeight;
+        const label = index % 5 === 0 || index === weeklyContributions.length - 1 ? `<text x="${(x + weeklyBarWidth / 2).toFixed(2)}" y="${weeklyChartHeight - 16}" fill="#737373" font-size="10" font-family="'JetBrains Mono', monospace" text-anchor="middle">${escapeHtml(entry.week.slice(5))}</text>` : '';
+        return `<g><rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${weeklyBarWidth.toFixed(2)}" height="${barHeight.toFixed(2)}" rx="4" fill="${entry.points === 0 ? 'rgba(255,255,255,0.12)' : '#f59e0b'}"><title>${escapeHtml(entry.week.slice(5))}: ${entry.points.toLocaleString()} pts</title></rect>${label}</g>`;
+    }).join('');
+    const weeklyChartSvg = `<svg viewBox="0 0 ${weeklyChartWidth} ${weeklyChartHeight}" role="img" aria-label="Weekly XP gains chart">${weeklyGrid}<line x1="${paddingLeft}" y1="${paddingTop + innerHeight}" x2="${weeklyChartWidth - paddingRight}" y2="${paddingTop + innerHeight}" stroke="rgba(255,255,255,0.14)" stroke-width="1" />${weeklyBars}</svg>`;
+    const PRS_PER_PAGE = 10;
+    const prPageCount = Math.ceil(sortedPRs.length / PRS_PER_PAGE);
+    const prPages = Array.from({ length: prPageCount }, (_, pageIndex) => {
+        const pagePRs = sortedPRs.slice(pageIndex * PRS_PER_PAGE, (pageIndex + 1) * PRS_PER_PAGE);
+        return `<div class="pr-page"${pageIndex === 0 ? '' : ' hidden'} data-pr-page="${pageIndex + 1}">${pagePRs.map((pr, entryIndex) => renderPRCard(pr, pageIndex === 0 && entryIndex === 0)).join('')}</div>`;
+    }).join('');
+    const prPaginationControls = prPageCount > 1 ? `<div class="pr-pagination" aria-label="PR pagination"><button class="pr-pagination-btn" type="button" data-pr-nav="prev">Previous</button><div class="pr-pagination-status" data-pr-pagination-status>Page <strong>1</strong> of ${prPageCount}</div><button class="pr-pagination-btn" type="button" data-pr-nav="next">Next</button></div>` : '';
+    const styles = String.raw `
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
+
+:root {
+  color-scheme: dark;
+  --bg: #050505;
+  --panel: rgba(14, 14, 14, 0.94);
+  --panel-soft: rgba(22, 22, 22, 0.72);
+  --border: rgba(245, 158, 11, 0.22);
+  --border-soft: rgba(255, 255, 255, 0.08);
+  --text: #f5f5f5;
+  --muted: #8a8a8a;
+  --muted-strong: #b6b6b6;
+  --amber: #f5b331;
+  --amber-soft: rgba(245, 179, 49, 0.15);
+  --purple: #9333ea;
+  --blue: #6f89ff;
+  --green: #4ade80;
+  --danger: #f87171;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+}
+
+* { box-sizing: border-box; }
+
+html { background: var(--bg); }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 15% 20%, rgba(245, 179, 49, 0.08), transparent 28%),
+    radial-gradient(circle at 85% 5%, rgba(111, 137, 255, 0.06), transparent 20%),
+    linear-gradient(180deg, #060606 0%, #090909 100%);
+}
+
+a { color: inherit; }
+
+.shell {
+  width: min(1320px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 26px 0 40px;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+}
+
+.brand {
+  margin: 0 0 6px;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: clamp(2rem, 2.8vw, 3rem);
+  line-height: 1;
+  letter-spacing: 0.02em;
+  display: inline-block;
+  color: #ffbe1b;
+  text-shadow:
+    0 0 10px rgba(255, 190, 27, 0.45),
+    0 0 24px rgba(255, 174, 0, 0.28),
+    0 2px 0 rgba(84, 44, 0, 0.6);
+}
+
+.brand-note,
+.mono {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+.header-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: flex-end;
+}
+
+.info-card {
+  min-width: 180px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  border: 1px solid var(--border-soft);
+  background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(12, 12, 12, 0.95));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.info-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.info-icon {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.info-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.info-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.info-label {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: #707070;
+}
+
+.info-value {
+  font-size: 1.9rem;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.info-value.active {
+  font-size: 1.15rem;
+  color: var(--green);
+}
+
+.info-value.prs {
+  font-size: 1.15rem;
+  color: #b056ff;
+}
+
+.dashboard {
+  display: grid;
+  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.player-col {
+  position: sticky;
+  top: 18px;
+}
+
+.player-shell {
+  position: relative;
+}
+
+.player-glow {
+  position: absolute;
+  inset: 14px 12px auto;
+  height: 85%;
+  border-radius: 30px;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 42%),
+    radial-gradient(circle at 50% 45%, rgba(245, 179, 49, 0.12), transparent 58%);
+  filter: blur(26px);
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.player-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  background:
+    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.06), transparent 30%),
+    linear-gradient(180deg, rgba(44, 44, 40, 0.96), rgba(16, 16, 18, 0.98));
+  box-shadow:
+    0 0 0 1px rgba(245, 179, 49, 0.08),
+    0 0 28px rgba(245, 179, 49, 0.12),
+    0 0 64px rgba(0, 0, 0, 0.34),
+    var(--shadow),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.player-frame::before {
+  content: "";
+  position: absolute;
+  inset: -22% -16% auto auto;
+  width: 320px;
+  height: 320px;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle, rgba(245, 179, 49, 0.16) 0%, rgba(245, 179, 49, 0.06) 32%, transparent 68%);
+  filter: blur(12px);
+  opacity: 0.5;
+  pointer-events: none;
+  animation: player-ambient-drift 9s ease-in-out infinite;
+}
+
+.player-frame::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.05), transparent 30%),
+    radial-gradient(circle at 24% 72%, rgba(245, 179, 49, 0.08), transparent 24%),
+    radial-gradient(circle at 78% 66%, rgba(255, 239, 178, 0.05), transparent 22%),
+    linear-gradient(120deg, transparent 18%, rgba(245, 179, 49, 0.05) 44%, transparent 72%);
+  background-size: 100% 100%, 100% 100%, 100% 100%, 190% 190%;
+  background-position: center, center, center, 0% 50%;
+  opacity: 0.44;
+  pointer-events: none;
+  animation: player-rune-shimmer 10s ease-in-out infinite;
+}
+
+.player {
+  position: relative;
+  z-index: 1;
+  padding: 26px 28px 24px;
+}
+
+.player::before {
+  content: "";
+  position: absolute;
+  inset: 12% auto auto -16%;
+  width: 220px;
+  height: 220px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(255, 244, 206, 0.06) 0%, rgba(245, 179, 49, 0.025) 38%, transparent 72%);
+  filter: blur(8px);
+  opacity: 0.34;
+  pointer-events: none;
+  animation: player-orbital-glow 8.5s ease-in-out infinite;
+}
+
+.player::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(108deg, transparent 16%, rgba(255, 232, 148, 0.09) 29%, transparent 43%, transparent 58%, rgba(255, 232, 148, 0.06) 72%, transparent 86%);
+  background-size: 220% 220%;
+  background-position: 0% 50%;
+  mix-blend-mode: screen;
+  opacity: 0.42;
+  pointer-events: none;
+  animation: player-sheen 7.2s linear infinite;
+}
+
+.player-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 28px;
+}
+
+.level {
+  display: block;
+  margin-bottom: 8px;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: 3rem;
+  line-height: 0.9;
+  font-weight: 800;
+  color: var(--amber);
+}
+
+.cplx {
+  text-align: right;
+}
+
+.cplx strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 2rem;
+  line-height: 0.9;
+  font-weight: 700;
+}
+
+.avatar {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 18px;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow:
+    inset 0 0 0 3px rgba(255, 255, 255, 0.04),
+    0 16px 36px rgba(0, 0, 0, 0.34);
+  background: linear-gradient(180deg, rgba(54, 54, 56, 0.95), rgba(12, 12, 14, 0.98));
+}
+
+.avatar-fallback {
+  display: grid;
+  place-items: center;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: 2.9rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.player-name {
+  margin: 0 auto 12px;
+  max-width: 320px;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: clamp(1.55rem, 2.45vw, 2.35rem);
+  line-height: 1.08;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  text-align: center;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.player-name-scoped {
+  display: grid;
+  gap: 4px;
+  justify-items: center;
+  line-height: 1;
+}
+
+.player-name-main,
+.player-name-scope,
+.player-name-scope-mark {
+  display: block;
+}
+
+.player-name-main {
+  font-size: clamp(1.325rem, 2vw, 1.925rem);
+  line-height: 1.02;
+  font-weight: 800;
+}
+
+.player-name-scope-mark {
+  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
+  line-height: 0.95;
+  opacity: 0.92;
+}
+
+.player-name-scope {
+  max-width: 100%;
+  font-size: clamp(1.175rem, 1.8vw, 1.775rem);
+  line-height: 1.02;
+  font-weight: 800;
+}
+
+.player-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(245, 179, 49, 0.28);
+  background: rgba(245, 179, 49, 0.08);
+  font-family: "Inter", ui-sans-serif, sans-serif;
+  font-size: 0.92rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #e7bd43;
+}
+
+.player-title::before {
+  content: "\2605";
+  font-size: 0.78rem;
+  line-height: 1;
+}
+
+.player-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin: 22px 0 18px;
+  padding: 22px 0;
+  border-top: 1px solid rgba(245, 179, 49, 0.18);
+  border-bottom: 1px solid rgba(245, 179, 49, 0.18);
+}
+
+.mini {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mini-icon {
+  width: 46px;
+  height: 46px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(180deg, rgba(58, 58, 60, 0.72), rgba(38, 38, 40, 0.42));
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.mini-icon svg {
+  width: 21px;
+  height: 21px;
+}
+
+.mini-icon.lines svg {
+  stroke: #78e0ae;
+}
+
+.mini-icon.prs svg {
+  stroke: #8ca5ff;
+}
+
+.mini span {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.mini strong {
+  display: block;
+  font-size: 1.45rem;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.player-copy {
+  margin: 0;
+  color: #bfbfbf;
+  text-align: center;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-style: italic;
+  font-size: 1rem;
+  line-height: 1.85;
+}
+
+.player-xp-row,
+.player-xp-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.player-xp-row {
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+
+.player-xp {
+  color: var(--amber);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-weight: 700;
+}
+
+.player-next {
+  color: #888;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.84rem;
+}
+
+.track {
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #e5ab2f 0%, #f1cb56 100%);
+  box-shadow: 0 0 18px rgba(245, 179, 49, 0.35);
+}
+
+.main {
+  display: grid;
+  gap: 28px;
+}
+
+.top-panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 28px;
+}
+
+.panel {
+  position: relative;
+  overflow: hidden;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: linear-gradient(180deg, rgba(16, 16, 16, 0.94), rgba(10, 10, 10, 0.98));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  padding: 22px 22px 24px;
+}
+
+.visual-panel::before {
+  content: "";
+  position: absolute;
+  inset: -25% auto auto 48%;
+  width: 260px;
+  height: 260px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(111, 137, 255, 0.09) 0%, rgba(111, 137, 255, 0.03) 38%, transparent 72%);
+  filter: blur(8px);
+  opacity: 0.55;
+  pointer-events: none;
+  animation: ambient-drift 10s ease-in-out infinite;
+}
+
+.visual-panel::after {
+  content: "";
+  position: absolute;
+  inset: auto auto -90px -70px;
+  width: 220px;
+  height: 220px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(245, 179, 49, 0.09) 0%, rgba(245, 179, 49, 0.02) 42%, transparent 72%);
+  filter: blur(10px);
+  opacity: 0.45;
+  pointer-events: none;
+  animation: ambient-drift 12s ease-in-out infinite reverse;
+}
+
+.panel-head,
+.panel-chart,
+.panel-note,
+.weekly-note {
+  position: relative;
+  z-index: 1;
+}
+
+.panel-ornament {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 0;
+  pointer-events: none;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 5rem;
+  line-height: 1;
+  letter-spacing: -0.12em;
+  color: rgba(255, 255, 255, 0.07);
+  opacity: 0.9;
+  animation: ornament-float 7s ease-in-out infinite;
+}
+
+.panel-ornament.tech {
+  color: rgba(255, 255, 255, 0.08);
+}
+
+.panel-head,
+.pr-headline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.panel-head.compact {
+  margin-bottom: 24px;
+}
+
+.panel-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.panel-icon {
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.panel-icon.radar {
+  color: var(--amber);
+}
+
+.panel-icon.tech {
+  color: #6480ff;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+
+.panel-title,
+.pr-title {
+  margin: 0;
+  font-family: "Cinzel", ui-serif, Georgia, serif;
+  font-size: 1.65rem;
+}
+
+.panel-note,
+.weekly-note,
+.pr-total {
+  color: var(--muted);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.85rem;
+}
+
+.panel-chart {
+  min-height: 288px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.panel-chart svg {
+  width: 100%;
+  height: auto;
+  max-height: 288px;
+}
+
+.donut-layout {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(140px, 220px) minmax(160px, 1fr);
+  align-items: center;
+  gap: 18px;
+}
+
+.donut-chart {
+  width: min(230px, 100%);
+  aspect-ratio: 1;
+  margin: 0 auto;
+  border-radius: 50%;
+  position: relative;
+}
+
+.donut-hole {
+  position: absolute;
+  inset: 22%;
+  border-radius: 50%;
+  background: #0f0f0f;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.tech-legend {
+  display: grid;
+  gap: 10px;
+}
+
+.tech-legend-row,
+.tech-legend-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.tech-legend-row {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.95rem;
+}
+
+.tech-legend-label {
+  justify-content: flex-start;
+  color: #c8cffd;
+}
+
+.tech-legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 0;
+}
+
+.tech-legend-value {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.chart-empty,
+.empty {
+  color: var(--muted);
+}
+
+.type-list {
+  display: grid;
+  gap: 18px;
+}
+
+.type-row {
+  display: grid;
+  gap: 10px;
+}
+
+.type-row-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.type-label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #d3d3d3;
+}
+
+.type-value {
+  color: #8f8f8f;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+
+.type-track,
+.mini-progress {
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: #2a2a2a;
+}
+
+.type-fill,
+.mini-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.type-fill {
+  min-width: 36px;
+  box-shadow: 0 0 14px rgba(255, 255, 255, 0.06);
+}
+
+.weekly-chart svg {
+  width: 100%;
+  height: auto;
+}
+
+.pr-panel {
+  margin-top: 28px;
+  padding-top: 18px;
+}
+
+.pr-list {
+  display: grid;
+  gap: 12px;
+}
+
+.pr-entry {
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background: rgba(20, 20, 20, 0.96);
+  overflow: hidden;
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+
+.pr-entry[open] {
+  border-color: rgba(245, 179, 49, 0.42);
+  background: rgba(35, 35, 35, 0.97);
+  box-shadow: inset 0 0 0 1px rgba(245, 179, 49, 0.04);
+}
+
+.pr-toggle {
+  list-style: none;
+  cursor: pointer;
+  padding: 14px 16px;
+}
+
+.pr-toggle::-webkit-details-marker,
+.pr-toggle::marker {
+  display: none;
+}
+
+.pr-main-head {
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 1 auto;
+}
+
+.pr-icon-box {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  border-radius: 8px;
+  border: 1px solid rgba(168, 85, 247, 0.28);
+  background: rgba(168, 85, 247, 0.08);
+  margin-top: 1px;
+}
+
+.pr-icon-box svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pr-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.pr-title-wrap,
+.pr-score,
+.pr-body-main,
+.pr-body-side {
+  display: grid;
+  gap: 10px;
+}
+
+.pr-title-row,
+.pr-meta-row,
+.pr-head-side,
+.pr-pagination,
+.pr-detail-pills {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.pr-title-row strong {
+  font-size: 0.98rem;
+  line-height: 1.35;
+}
+
+.repo-chip,
+.inline-chip,
+.detail-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 4px 9px;
+  font-size: 0.72rem;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+
+.repo-chip {
+  color: #9b9b9b;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.inline-chip.subtle,
+.detail-pill {
+  background: rgba(255, 255, 255, 0.06);
+  color: #c9c9c9;
+}
+
+.inline-chip.tech {
+  background: rgba(111, 137, 255, 0.11);
+  color: #9db0ff;
+  border: 1px solid rgba(111, 137, 255, 0.24);
+}
+
+.detail-pill.muted {
+  color: var(--muted);
+}
+
+.pr-meta-row {
+  color: #888;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.76rem;
+  gap: 8px;
+}
+
+.meta-date::before {
+  content: "\1F4C5";
+  margin-right: 6px;
+  opacity: 0.7;
+}
+
+.meta-plus {
+  color: #62d497;
+}
+
+.meta-minus {
+  color: #f08484;
+}
+
+.pr-head-side {
+  justify-content: flex-end;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.pr-score {
+  justify-items: end;
+  align-content: start;
+  gap: 8px;
+}
+
+.pr-points {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--amber);
+}
+
+.pr-chevron {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border-right: 1.5px solid #868686;
+  border-bottom: 1.5px solid #868686;
+  transform: rotate(45deg);
+  transition: transform 160ms ease, border-color 160ms ease;
+}
+
+.pr-entry[open] .pr-chevron {
+  transform: rotate(-135deg);
+  border-color: #9f9f9f;
+}
+
+.pr-body {
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 16px;
+}
+
+.pr-body-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
+  gap: 20px;
+}
+
+.body-block h4 {
+  margin: 0 0 8px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.76rem;
+  color: var(--muted);
+}
+
+.body-block p {
+  margin: 0;
+  color: #d3d3d3;
+  line-height: 1.7;
+}
+
+.pr-body-main {
+  gap: 18px;
+}
+
+.pr-body-side {
+  align-content: start;
+}
+
+.pr-stat {
+  padding: 14px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.pr-stat span {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-size: 0.77rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.pr-stat strong {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1.15rem;
+  color: var(--amber);
+}
+
+.mini-progress-fill {
+  background: linear-gradient(90deg, #e5ab2f 0%, #f1cb56 100%);
+}
+
+.pr-link,
+.pr-pagination-btn {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text);
+  border-radius: 12px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.pr-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 14px;
+  font-weight: 600;
+}
+
+.pr-headline {
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.pr-heading-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pr-heading-icon {
+  color: var(--amber);
+  font-size: 1.1rem;
+}
+
+.pr-title {
+  font-size: 1.8rem;
+}
+
+.pr-total strong {
+  color: var(--amber);
+}
+
+@keyframes ambient-drift {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(-10px, 8px, 0) scale(1.08);
+  }
+}
+
+@keyframes player-ambient-drift {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 0.34;
+  }
+  50% {
+    transform: translate3d(-18px, 14px, 0) scale(1.12);
+    opacity: 0.62;
+  }
+}
+
+@keyframes player-rune-shimmer {
+  0%, 100% {
+    background-position: center, center, center, 0% 50%;
+    opacity: 0.34;
+  }
+  50% {
+    background-position: center, center, center, 100% 50%;
+    opacity: 0.56;
+  }
+}
+
+@keyframes player-orbital-glow {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 0.22;
+  }
+  50% {
+    transform: translate3d(18px, -10px, 0) scale(1.14);
+    opacity: 0.4;
+  }
+}
+
+@keyframes player-sheen {
+  0% {
+    background-position: 220% 50%;
+    opacity: 0.18;
+  }
+  50% {
+    opacity: 0.42;
+  }
+  100% {
+    background-position: -20% 50%;
+    opacity: 0.18;
+  }
+}
+
+@keyframes ornament-float {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.78;
+  }
+  50% {
+    transform: translate3d(-4px, 6px, 0);
+    opacity: 1;
+  }
+}
+
+.pr-pagination {
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  gap: 18px;
+}
+
+.pr-pagination-btn {
+  min-width: 96px;
+  justify-content: center;
+  padding: 10px 18px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+
+.pr-pagination-status {
+  flex: 1 1 auto;
+  text-align: center;
+  color: #8b8b8b;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.95rem;
+}
+
+.pr-pagination-status strong {
+  color: var(--amber);
+}
+
+.pr-pagination-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.page-footer {
+  margin-top: 22px;
+  color: #777;
+  text-align: center;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 1080px) {
+  .header,
+  .dashboard,
+  .top-panels,
+  .pr-body-grid,
+  .donut-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .header,
+  .pr-head,
+  .panel-head,
+  .pr-headline {
+    flex-direction: column;
+  }
+
+  .player-col {
+    position: static;
+  }
+}
+
+@media (max-width: 720px) {
+  .shell {
+    width: min(100vw - 20px, 1320px);
+    padding-top: 18px;
+  }
+
+  .player,
+  .panel {
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+
+  .player-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .player-name {
+    font-size: 1.85rem;
+  }
+
+  .mini strong {
+    font-size: 1.3rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation: none !important;
+    transition: none !important;
+  }
+}`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${escapeHtml(username)} - Quackscore Report</title>
+<style>
+${styles}
+</style>
+</head>
+<body>
+  <div class="shell">
+    <header class="header">
+      <div>
+        <h1 class="brand">&#129414; Quackscore</h1>
+        <p class="brand-note">Player Profile Analysis</p>
+      </div>
+      <div class="header-cards">
+        <div class="info-card"><div class="info-content"><span class="info-icon" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M1 9.5h2.2l1.6-5 2.5 8 2.1-6h2.1l1.5 3H15" stroke="#4ade80" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span><div class="info-copy"><span class="info-label">Status</span><strong class="info-value active">Active</strong></div></div></div>
+        <div class="info-card"><div class="info-content"><span class="info-icon" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><circle cx="3" cy="3" r="2" stroke="#a855f7" stroke-width="1.5"/><circle cx="13" cy="6" r="2" stroke="#a855f7" stroke-width="1.5"/><circle cx="10" cy="13" r="2" stroke="#a855f7" stroke-width="1.5"/><path d="M4.5 4.2l7 1.7M4.2 4.7l4.6 6.1" stroke="#a855f7" stroke-width="1.5" stroke-linecap="round"/></svg></span><div class="info-copy"><span class="info-label">Analyzed PRs</span><strong class="info-value prs">${analyzedPRs}</strong></div></div></div>
+      </div>
+    </header>
+    <section class="dashboard">
+      <aside class="player-col">
+        <div class="player-shell">
+          <div class="player-glow" aria-hidden="true"></div>
+          <section class="player-frame">
+            <div class="player">
+              <div class="player-top"><div><span class="level">${level}</span><span class="mono">Level</span></div><div class="cplx"><strong>${escapeHtml(averageComplexity)}</strong><span class="mono">CPLX</span></div></div>
+              ${renderPlayerAvatar(username, character?.avatarUrl)}
+              <div style="text-align:center">${renderPlayerName(username)}<span class="player-title">${escapeHtml(playerRank)}</span></div>
+              <div class="player-stats"><div class="mini"><div class="mini-icon lines" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3 13L13 3M6 13l-3-3M13 10l-3 3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div><span class="mono">Lines</span><strong>${totalLinesModified.toLocaleString()}</strong></div></div><div class="mini"><div class="mini-icon prs" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M8 2l4 1.5v4.2c0 2.2-1.4 4.2-4 5.8-2.6-1.6-4-3.6-4-5.8V3.5L8 2z" stroke-width="1.5" stroke-linejoin="round"/></svg></div><div><span class="mono">PRs</span><strong>${analyzedPRs}</strong></div></div></div>
+              <p class="player-copy">"${escapeHtml(playerDescription)}"</p>
+              <div class="player-xp-row"><span class="player-xp">${totalPoints.toLocaleString()} XP</span><span class="player-next">${nextLevelThreshold.toLocaleString()} XP</span></div>
+              <div class="track"><div class="fill" style="width:${levelProgress}%"></div></div>
+            </div>
+          </section>
+        </div>
+      </aside>
+      <div class="main">
+        <div class="top-panels">
+          <section class="panel visual-panel"><div class="panel-head"><div class="panel-title-row"><span class="panel-icon radar">&#9889;</span><h2 class="panel-title">Specialization Radar</h2></div></div><div class="panel-chart">${renderRadarChart(areaEntries, areaTotal)}</div></section>
+          <section class="panel visual-panel"><span class="panel-ornament tech" aria-hidden="true">&#60;/&#62;</span><div class="panel-head"><div class="panel-title-row"><span class="panel-icon tech">&#60;/&#62;</span><h2 class="panel-title">Tech Stack</h2></div></div><div class="panel-chart">${renderTechDonut(topTechs)}</div></section>
+        </div>
+        <section class="panel"><div class="panel-head compact"><div><h2 class="panel-title">Contribution Types</h2></div></div><div class="type-list">${renderContributionTypes(typeEntries, typeTotal)}</div></section>
+        <section class="panel"><div class="panel-head"><div><div class="mono">Activity</div><h2 class="panel-title">Weekly XP Gains</h2></div><div class="weekly-note">${activeWeeks} active weeks between ${escapeHtml(weekRangeStart)} and ${escapeHtml(weekRangeEnd)}</div></div><div class="weekly-chart">${weeklyChartSvg}</div></section>
+      </div>
+    </section>
+    <section class="panel pr-panel"><div class="pr-headline"><div class="pr-heading-wrap"><span class="pr-heading-icon" aria-hidden="true">&#9876;</span><h2 class="pr-title">Quest Log (Pull Requests)</h2></div><div class="pr-total">Total Quests: <strong>${prs.length}</strong></div></div><div class="pr-list">${prPages || '<p class="empty">No pull requests available.</p>'}</div>${prPaginationControls}</section>
+    <div class="page-footer">Quackscore report . ${analyzedPRs} PRs analyzed . generated from local profile data</div>
+  </div>
+  <script>
+    (function() {
+      const pages = Array.from(document.querySelectorAll('[data-pr-page]'));
+      if (pages.length <= 1) return;
+
+      const prevButton = document.querySelector('[data-pr-nav="prev"]');
+      const nextButton = document.querySelector('[data-pr-nav="next"]');
+      const status = document.querySelector('[data-pr-pagination-status]');
+      let currentPage = 0;
+
+      const render = () => {
+        pages.forEach((page, index) => {
+          page.hidden = index !== currentPage;
+        });
+        if (prevButton) prevButton.disabled = currentPage === 0;
+        if (nextButton) nextButton.disabled = currentPage === pages.length - 1;
+        if (status) status.innerHTML = 'Page <strong>' + (currentPage + 1) + '</strong> of ' + pages.length;
+      };
+
+      if (prevButton) {
+        prevButton.addEventListener('click', () => {
+          if (currentPage === 0) return;
+          currentPage -= 1;
+          render();
+        });
+      }
+
+      if (nextButton) {
+        nextButton.addEventListener('click', () => {
+          if (currentPage >= pages.length - 1) return;
+          currentPage += 1;
+          render();
+        });
+      }
+
+      render();
+    })();
+  </script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=generate.js.map