Skip to content

🤖 Cannot save fiddle #2408

Open
Open
🤖 Cannot save fiddle#2408
@madpixl

Description

@madpixl
madpixl
opened on Apr 29, 2026

Error code

ERRW:1.0:SL0.1:EL1.0:AS

Were you logged in?

Yes

Your username (if logged in)

madpixl

Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Agentic DevOps + SAFe Transformation Guide</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
<style>:root{--bg:#07090f;--panel:#0d1220;--card:#111827;--card2:#0f1f35;--text:#dde6f0;--muted:#7a90a8;--accent:#00d4ff;--accent2:#7b61ff;--green:#22d98a;--yellow:#f5c842;--red:#ff5c72;--blue:#4a9eff;--border:#1c2d46;--sidebar-w:290px;--mono:'IBM Plex Mono',monospace;--head:'Syne',sans-serif;--body:'DM Sans',sans-serif}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--body);background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px;line-height:1.7}.sidebar{width:var(--sidebar-w);position:fixed;top:0;left:0;bottom:0;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;z-index:100}.sidebar-header{padding:22px 18px 14px;border-bottom:1px solid var(--border)}.brand{font-family:var(--head);font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}.brand-sub{font-size:11px;color:var(--muted);margin-top:3px}.nav-group{padding:10px 0}.nav-group-label{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:6px 18px 4px}.nav a{display:block;padding:7px 18px;color:#6d8aaa;text-decoration:none;font-size:12px;line-height:1.4;border-left:2px solid transparent;transition:all .15s}.nav a:hover,.nav a.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,212,255,.05)}.nav-num{font-family:var(--mono);font-size:10px;color:var(--muted);margin-right:6px}.content{margin-left:var(--sidebar-w);padding:40px 44px 80px;max-width:1060px;width:100%}.page-title{font-family:var(--head);font-size:32px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:6px}.page-sub{font-size:14px;color:var(--muted);margin-bottom:8px}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}.tag{font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}.topic{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:22px;overflow:hidden;scroll-margin-top:30px}.topic-header{padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;user-select:none;transition:background .15s}.topic-header:hover{background:rgba(255,255,255,.02)}.topic-header-left{flex:1}.topic-num{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:3px}.topic-title{font-family:var(--head);font-size:16px;font-weight:700;color:#e8f0fa;line-height:1.3}.topic-q{font-size:12px;color:var(--muted);margin-top:3px;font-style:italic}.chevron{font-size:16px;color:var(--muted);transition:transform .2s;flex-shrink:0;margin-top:2px}.topic.open .chevron{transform:rotate(180deg)}.topic-body{display:none;padding:0 22px 22px;border-top:1px solid var(--border)}.topic.open .topic-body{display:block}.topic-intro{font-size:13px;color:var(--muted);margin:14px 0}.answer-banner{margin:16px 0 14px;padding:13px 16px;border-radius:9px;background:rgba(0,212,255,.07);border-left:3px solid var(--accent);font-size:14px;font-weight:500;color:#c8e8ff}.answer-banner--tbd{background:rgba(245,200,66,.07);border-left-color:var(--yellow);color:#fde68a}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:12px 0}.card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:14px 16px}.card-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:7px}.card ul{padding-left:16px;color:var(--text);font-size:13px}.card ul li{margin-bottom:4px}.card p{font-size:13px;color:var(--text)}.prompt-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--accent2);margin-bottom:6px;letter-spacing:.08em}.prompt-box{background:#07111f;border:1px solid #1a3a5c;border-radius:9px;padding:14px 16px;margin:12px 0;font-family:var(--mono);font-size:12px;color:#8ecfff;line-height:1.7;white-space:pre-wrap}.agent-flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0;padding:13px 16px;background:var(--card2);border-radius:9px;border:1px solid #1a3050}.agent-step{background:#0e2040;border:1px solid #244068;border-radius:6px;padding:5px 11px;font-size:12px;color:#90c8ff;font-family:var(--mono);white-space:nowrap}.agent-arrow{color:var(--accent);font-size:14px;font-weight:bold}.agent-divider{color:var(--muted);font-size:11px;margin:0 4px}.agent-decision{background:#1a0e2e;border:1px solid #3d2a6e;border-radius:6px;padding:5px 11px;font-size:12px;color:#c4b0ff;font-family:var(--mono)}.links-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.ref-link{display:inline-flex;align-items:center;gap:5px;background:#0d1e33;border:1px solid #1c3a5c;border-radius:6px;padding:4px 11px;font-size:12px;color:var(--blue);text-decoration:none;font-family:var(--mono);transition:all .15s}.ref-link:hover{background:#13294a;color:var(--accent);border-color:var(--accent)}.sl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border)}.vsm-outer{margin:16px 0 0;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.vsm-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}.vsm-toolbar label{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.vsm-toolbar select{background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:11px;padding:3px 8px;cursor:pointer}.vsm-hover-label{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto;transition:color .2s}.vsm-scroll{overflow-x:auto;padding:0 16px 0}.vsm-grid{display:flex;min-width:700px;padding:12px 0 8px;gap:0}.vsm-labels{display:flex;flex-direction:column;flex-shrink:0;width:80px;gap:4px;padding-top:52px}.vsm-row-label{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;height:44px;font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-right:1px solid var(--border)}.vsm-row-label--user-active{color:var(--green)}.vsm-row-label--user-wait{color:var(--yellow)}.vsm-row-label--deliv-active{color:var(--blue)}.vsm-row-label--deliv-wait{color:var(--red)}.vsm-stages{display:flex;flex:1;gap:6px;padding-left:6px}.vsm-stage{display:flex;flex-direction:column;flex:1;min-width:90px;gap:4px;cursor:pointer;border-radius:6px;padding:4px;transition:background .15s;position:relative}.vsm-stage:hover{background:rgba(255,255,255,.03)}.vsm-stage.is-hovered{background:rgba(0,212,255,.04)}.vsm-process-box{background:#162338;border:1.5px solid #2a5a8a;border-radius:6px;padding:6px 4px;text-align:center;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}.vsm-stage--ai .vsm-process-box{background:#0d2a3a;border-color:var(--accent);box-shadow:0 0 8px rgba(0,212,255,.15)}.vsm-process-name{font-family:var(--head);font-size:9px;font-weight:700;color:#c8dff0;line-height:1.3}.vsm-stage--ai .vsm-process-name{color:var(--accent)}.vsm-connector{position:absolute;right:-9px;top:20px;font-size:13px;color:#2a4a6e;z-index:2;pointer-events:none}.vsm-stage:last-child .vsm-connector{display:none}.vsm-bar-row{height:44px;display:flex;align-items:flex-end;position:relative;border-radius:4px;overflow:hidden}.vsm-bar-row--user-active{background:rgba(34,217,138,.06)}.vsm-bar-row--user-wait{background:rgba(245,200,66,.06)}.vsm-bar-row--deliv-active{background:rgba(74,158,255,.06)}.vsm-bar-row--deliv-wait{background:rgba(255,92,114,.06)}.vsm-bar{border-radius:3px 3px 0 0;display:flex;align-items:center;justify-content:center;transition:width .4s ease,height .4s ease;min-height:4px;width:70%;margin:0 auto}.vsm-bar--user-active{background:var(--green)}.vsm-bar--user-wait{background:var(--yellow)}.vsm-bar--deliv-active{background:var(--blue)}.vsm-bar--deliv-wait{background:var(--red)}.vsm-bar--zero{background:rgba(122,144,168,.2);min-height:3px}.vsm-bar-label{font-family:var(--mono);font-size:8px;font-weight:600;color:#07090f;white-space:nowrap}.vsm-bar-label--ext{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;color:var(--muted)}.vsm-stage-footer{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px;min-height:28px}.vsm-eff-pill{font-family:var(--mono);font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px}.vsm-eff-pill--good{background:rgba(34,217,138,.15);color:var(--green)}.vsm-eff-pill--warn{background:rgba(245,200,66,.15);color:var(--yellow)}.vsm-eff-pill--bad{background:rgba(255,92,114,.15);color:var(--red)}.vsm-bottleneck-badge{font-family:var(--mono);font-size:7px;font-weight:700;background:var(--red);color:#07090f;padding:2px 5px;border-radius:3px;white-space:nowrap}.vsm-ai-badge{font-family:var(--mono);font-size:7px;color:var(--accent);opacity:.8}.vsm-summary{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;border-top:1px solid var(--border);align-items:center}.vsm-summary-stat{font-family:var(--mono);font-size:11px;padding:4px 12px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}.vsm-summary-stat--good{color:var(--green);border-color:var(--green);background:rgba(34,217,138,.06)}.vsm-summary-stat--warn{color:var(--yellow);border-color:var(--yellow);background:rgba(245,200,66,.06)}.vsm-summary-stat--bad{color:var(--red);border-color:var(--red);background:rgba(255,92,114,.06)}.vsm-summary-meta{font-family:var(--mono);font-size:11px;color:var(--muted)}.vsm-summary-meta strong{color:var(--accent)}.vsm-legend{display:flex;flex-wrap:wrap;gap:16px;padding:10px 16px 14px}.vsm-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-family:var(--mono)}.vsm-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}.vsm-swatch--green{background:var(--green)}.vsm-swatch--blue{background:var(--blue)}.vsm-swatch--yellow{background:var(--yellow)}.vsm-swatch--red{background:var(--red)}.vsm-swatch--ai{background:var(--accent);opacity:.5}.repair-loop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.repair-step{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:13px;position:relative}.repair-step::after{content:'→';position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:14px;z-index:2}.repair-step:nth-child(3)::after,.repair-step:nth-child(6)::after{content:''}.repair-step-num{font-family:var(--mono);font-size:11px;color:var(--accent2);margin-bottom:4px}.repair-step-title{font-size:13px;font-weight:600;color:#dde6f0;margin-bottom:4px}.repair-step-desc{font-size:11px;color:var(--muted)}.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.metric-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:14px;text-align:center}.metric-val{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1;margin-bottom:4px}.metric-val--green{color:var(--green)}.metric-val--yellow{color:var(--yellow)}.metric-val--red{color:var(--red)}.metric-val--blue{color:var(--blue)}.metric-label{font-size:11px;color:var(--muted)}.callout{background:rgba(123,97,255,.07);border:1px solid rgba(123,97,255,.25);border-radius:9px;padding:13px 16px;font-size:13px;color:#c4b8ff;margin:12px 0}.callout strong{color:#a89cff}.page-footer{margin-top:40px;padding:20px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}</style>
</head>
<body>
<div class="sidebar"><div class="sidebar-header"><div class="brand">Agentic DevOps Guide</div><div class="brand-sub">DORA · SAFe · AI Transformation</div></div><div class="nav-group"><div class="nav-group-label">System</div><div class="nav"><a href="#overview">Overview &amp; Value Streams</a><a href="#repair">Agentic Repair Loop</a></div></div><div class="nav-group"><div class="nav-group-label">Topics</div><div class="nav"><a href="#t1"><span class="nav-num">01</span>Code Reviews in AI-First Teams</a><a href="#t2"><span class="nav-num">02</span>AI Before DORA Stability</a><a href="#t3"><span class="nav-num">03</span>Pushing Back on AI Pressure</a><a href="#t4"><span class="nav-num">04</span>The New Developer Role</a><a href="#t5"><span class="nav-num">05</span>DORA at Agent Speed</a><a href="#t6"><span class="nav-num">06</span>AI &amp; Cross-Role Collaboration</a><a href="#t7"><span class="nav-num">07</span>Agent Identity &amp; Traceability</a><a href="#t8"><span class="nav-num">08</span>PR Explosion &amp; Burnout Risk</a><a href="#t9"><span class="nav-num">09</span>AI Burn Rate &amp; Cost Control</a><a href="#t10"><span class="nav-num">10</span>Standard AI Instruction Files</a><a href="#t11"><span class="nav-num">11</span>AI Burnout: Is It Real?</a><a href="#t12"><span class="nav-num">12</span>Intelligent Developer Platforms</a><a href="#t13"><span class="nav-num">13</span>Individual vs Team Metrics</a><a href="#t14"><span class="nav-num">14</span>Are the DORA Keys Still Relevant?</a><a href="#t15"><span class="nav-num">15</span>When the Backlog Disappears</a><a href="#t16"><span class="nav-num">16</span>AI for Code Reviews</a><a href="#t17"><span class="nav-num">17</span>VSM to Track AI Bottlenecks</a><a href="#t18"><span class="nav-num">18</span>Reducing Assessment Fatigue</a><a href="#t19"><span class="nav-num">19</span>Making Assessments Valuable</a><a href="#t20"><span class="nav-num">20</span>AI in Technical Hiring</a><a href="#t21"><span class="nav-num">21</span>Metrics When Lead Time → Zero</a><a href="#t22"><span class="nav-num">22</span>Model Processes Before Automating</a><a href="#t23"><span class="nav-num">23</span>Quality Control at AI Speed</a></div></div></div><div class="content"><div class="page-title">Agentic DevOps &amp; SAFe<br/>Transformation Guide</div><div class="page-sub">Enterprise reference for Product Owners, TPOs, Architects &amp; Technical Leaders</div><div class="tag-row"><span class="tag">DORA 2024</span><span class="tag">SAFe 6.0</span><span class="tag">Agentic AI</span><span class="tag">Value Stream</span><span class="tag">DevOps</span><span class="tag">Platform Engineering</span></div><div class="topic open" id="overview"><div class="topic-header" onclick="toggleTopic(this)"><div class="topic-header-left"><div class="topic-num">SYSTEM OVERVIEW</div><div class="topic-title">Dual Value Stream Map: User Journey vs Delivery Flow</div><div class="topic-q">Where does time go between idea and production — and what does AI actually fix?</div></div><div class="chevron">▾</div></div><div class="topic-body"><p class="topic-intro">Each stage column shows four swimlane rows: user active (green), user wait (yellow), delivery active (blue), delivery gate/wait (red). Bar height is proportional to time. Toggle the view controls to compare Before vs After AI automation.</p><div class="vsm-outer"><div class="vsm-toolbar"><label>VIEW</label><select id="vsm-mode"><option value="both">Both Streams</option><option value="user">User Stream Only</option><option value="delivery">Delivery Stream Only</option></select><label>AI IMPACT</label><select id="vsm-ai"><option value="before">Before AI</option><option value="after">After AI Automation</option></select><span class="vsm-hover-label" id="vsm-hover-label">Hover a stage for details</span></div><div class="vsm-scroll"><div class="vsm-grid" id="vsm-grid"><div class="vsm-labels" id="vsm-labels"></div><div class="vsm-stages" id="vsm-stages"></div></div></div><div class="vsm-summary" id="vsm-summary"></div><div class="vsm-legend"><div class="vsm-legend-item"><span class="vsm-swatch vsm-swatch--green"></span>User active work</div><div class="vsm-legend-item"><span class="vsm-swatch vsm-swatch--blue"></span>Delivery active work</div><div class="vsm-legend-item"><span class="vsm-swatch vsm-swatch--yellow"></span>Wait / queue time</div><div class="vsm-legend-item"><span class="vsm-swatch vsm-swatch--red"></span>Bottleneck / approval gate</div><div class="vsm-legend-item"><span class="vsm-swatch vsm-swatch--ai"></span>✦ AI / Agent-operated stage</div></div></div><div class="metrics-row"><div class="metric-card"><div class="metric-val metric-val--green">70%</div><div class="metric-label">Flow efficiency target</div></div><div class="metric-card"><div class="metric-val metric-val--yellow">2.7×</div><div class="metric-label">PR volume increase (DORA 2024)</div></div><div class="metric-card"><div class="metric-val metric-val--red">~40%</div><div class="metric-label">Time lost in approval queues</div></div><div class="metric-card"><div class="metric-val metric-val--blue">80%</div><div class="metric-label">Reviews AI can automate</div></div></div><div class="callout"><strong>Key principle:</strong> AI doesn't optimize workflows — it <em>reveals</em> system design quality. Toggle "After AI" above and watch how <strong>Review &amp; Validate becomes the new bottleneck</strong> once Build is AI-accelerated. Stabilize flow first. Automate second. Observe always.</div><div class="links-row"><a class="ref-link" href="https://dora.dev/research/" target="_blank">↗ DORA Research</a><a class="ref-link" href="https://scaledagileframework.com/value-streams/" target="_blank">↗ SAFe Value Streams</a><a class="ref-link" href="https://itrevolution.com/articles/value-stream-mapping-for-devops/" target="_blank">↗ VSM for DevOps</a></div></div></div><div class="topic open" id="repair"><div class="topic-header" onclick="toggleTopic(this)"><div class="topic-header-left"><div class="topic-num">AGENTIC CORE</div><div class="topic-title">Self-Healing Agentic Repair Loop</div><div class="topic-q">How does an AI-native system detect problems, reason about them, and repair itself?</div></div><div class="chevron">▾</div></div><div class="topic-body"><div class="answer-banner">A truly agentic system doesn't just flag anomalies — it diagnoses, proposes, executes, verifies, and learns. This is the loop that separates AI-augmented DevOps from AI-native DevOps.</div><div class="repair-loop"><div class="repair-step"><div class="repair-step-num">STEP 01</div><div class="repair-step-title">🔍 Detect</div><div class="repair-step-desc">Observability triggers anomaly alert — latency spike, test failure, or drift from baseline SLO</div></div><div class="repair-step"><div class="repair-step-num">STEP 02</div><div class="repair-step-title">🧠 Diagnose</div><div class="repair-step-desc">AI agent reasons over logs, traces, and change history to identify probable root cause</div></div><div class="repair-step"><div class="repair-step-num">STEP 03</div><div class="repair-step-title">📋 Propose</div><div class="repair-step-desc">Agent generates candidate fix with a confidence score and blast-radius estimate</div></div><div class="repair-step"><div class="repair-step-num">STEP 04</div><div class="repair-step-title">⚡ Execute</div><div class="repair-step-desc">Apply fix (code patch, config change, rollback) within pre-approved scope and change window</div></div><div class="repair-step"><div class="repair-step-num">STEP 05</div><div class="repair-step-title">✅ Verify</div><div class="repair-step-desc">CI pipeline and telemetry confirms the fix resolved the anomaly without introducing regression</div></div><div class="repair-step"><div class="repair-step-num">STEP 06</div><div class="repair-step-title">📚 Learn</div><div class="repair-step-desc">Update runbooks, model context, and team knowledge base with outcome and decision rationale</div></div></div><div class="sl">AGENTIC WORKFLOW</div><div class="agent-flow"><span class="agent-step">Observability Alert</span><span class="agent-arrow">→</span><span class="agent-step">AI Root Cause Analysis</span><span class="agent-arrow">→</span><span class="agent-decision">Confidence ≥ 80%?</span><span class="agent-arrow">→</span><span class="agent-step">Auto-patch + Verify</span><span class="agent-divider">|</span><span class="agent-decision">Confidence &lt; 80%?</span><span class="agent-arrow">→</span><span class="agent-step">Human Review Queue</span><span class="agent-arrow">→</span><span class="agent-step">Learn &amp; Update</span></div><div class="links-row"><a class="ref-link" href="https://opentelemetry.io/" target="_blank">↗ OpenTelemetry</a><a class="ref-link" href="https://dora.dev/research/" target="_blank">↗ DORA Reliability Metrics</a><a class="ref-link" href="https://sre.google/sre-book/table-of-contents/" target="_blank">↗ Google SRE Book</a></div></div></div><div class="topic" id="t1"><div class="topic-header" onclick="toggleTopic(this)"><div class="topic-header-left"><div class="topic-num">TOPIC 01 · Code Quality</div><div class="topic-title">Code Reviews in AI-First Teams</div><div class="topic-q">Should we just ditch code reviews?</div></div><div class="chevron">▾</div></div><div class="topic-body"><div class="answer-banner">No — evolve them. Code reviews shift from human gatekeeping to risk-based validation. AI handles the routine; humans protect the boundary.</div><div class="sl">BEST PRACTICE</div><p>AI should perform 70–90% of review work: linting, security scanning, test coverage gaps, dependency risks, and style compliance. Human review is reserved for changes


Your JavaScript

/* ───────────────────────────────────────────────
   TOGGLE SECTIONS
─────────────────────────────────────────────── */
function toggleTopic(el) {
  el.closest('.topic').classList.toggle('open');
}

/* ───────────────────────────────────────────────
   SIDEBAR ACTIVE LINK ON SCROLL
─────────────────────────────────────────────── */
(function () {
  const links = document.querySelectorAll('.nav a[href^="#"]');
  window.addEventListener('scroll', () => {
    let current = '';
    document.querySelectorAll('[id]').forEach(el => {
      if (window.scrollY >= el.offsetTop - 90) current = el.id;
    });
    links.forEach(a => {
      a.classList.toggle('active', a.getAttribute('href') === '#' + current);
    });
  });
})();

/* ═══════════════════════════════════════════════════════════════════
   VALUE STREAM MAP — DATA OBJECT
   ─────────────────────────────────────────────────────────────────
   Edit ONLY this object to change the diagram. All rendering is
   derived from this data. Each stage:

   label        string   — display name for the process box
   aiOperated   boolean  — true = AI accent colour and badge
   note         string   — shown in hover tooltip
   before / after        — time values in days for each mode
     .userActive   number — user stream: active work time
     .userWait     number — user stream: wait / queue time
     .delivActive  number — delivery stream: active work time
     .delivWait    number — delivery stream: bottleneck / gate time
     .bottleneck   boolean — true = renders red warning badge
═══════════════════════════════════════════════════════════════════ */
const VSM_DATA = {
  stages: [
    {
      label: 'Idea Capture',
      aiOperated: false,
      note: 'Work enters the system. No AI involvement yet. Wait time is driven by prioritisation queues and stakeholder availability.',
      before: { userActive: 1, userWait: 5, delivActive: 1, delivWait: 5, bottleneck: false },
      after:  { userActive: 1, userWait: 3, delivActive: 1, delivWait: 2, bottleneck: false }
    },
    {
      label: 'Review & Prioritize',
      aiOperated: false,
      note: '⚠ BOTTLENECK (Before AI): Approval gates and stakeholder alignment create the longest waits in most delivery systems before AI is introduced.',
      before: { userActive: 2, userWait: 6, delivActive: 2, delivWait: 6, bottleneck: true },
      after:  { userActive: 2, userWait: 4, delivActive: 2, delivWait: 4, bottleneck: false }
    },
    {
      label: 'Design & Spike',
      aiOperated: false,
      note: 'Technical discovery and architecture decisions. AI can assist with spike analysis, ADR drafting, and option evaluation but human judgment owns the decision.',
      before: { userActive: 1, userWait: 4, delivActive: 2, delivWait: 4, bottleneck: false },
      after:  { userActive: 1, userWait: 2, delivActive: 2, delivWait: 2, bottleneck: false }
    },
    {
      label: 'Build & Generate ✦',
      aiOperated: true,
      note: 'AI agents write code, generate tests, create PRs and documentation autonomously. Highest active-work volume. DORA 2024 reports 2.7× PR volume increase at this stage with AI.',
      before: { userActive: 10, userWait: 8,  delivActive: 20, delivWait: 8,  bottleneck: false },
      after:  { userActive: 10, userWait: 1,  delivActive: 20, delivWait: 1,  bottleneck: false }
    },
    {
      label: 'Review & Validate',
      aiOperated: false,
      note: '⚠ NEW BOTTLENECK (After AI): Human review queue overwhelmed by AI-generated PR volume. This is the critical post-AI transformation constraint that must be addressed.',
      before: { userActive: 1, userWait: 5, delivActive: 1, delivWait: 4, bottleneck: false },
      after:  { userActive: 1, userWait: 8, delivActive: 1, delivWait: 7, bottleneck: true }
    },
    {
      label: 'Deploy ✦',
      aiOperated: true,
      note: 'AI-assisted deployment pipeline. GitOps and automated progressive delivery (canary/blue-green) reduce wait states near zero. Human gates reserved for high-risk releases only.',
      before: { userActive: 1, userWait: 3, delivActive: 1, delivWait: 3, bottleneck: false },
      after:  { userActive: 1, userWait: 0, delivActive: 1, delivWait: 0, bottleneck: false }
    },
    {
      label: 'Observe & Learn ✦',
      aiOperated: true,
      note: 'Continuous AI-driven observability. No batch wait — monitoring is always-on. Feeds the agentic repair loop. Quality signals flow back to Build stage to close the learning cycle.',
      before: { userActive: 0, userWait: 0, delivActive: 0, delivWait: 0, bottleneck: false },
      after:  { userActive: 0, userWait: 0, delivActive: 0, delivWait: 0, bottleneck: false }
    }
  ]
};

/* ───────────────────────────────────────────────
   VSM RENDERER — pure DOM/flexbox, zero canvas
─────────────────────────────────────────────── */
(function () {
  const modeEl    = document.getElementById('vsm-mode');
  const aiEl      = document.getElementById('vsm-ai');
  const hoverLbl  = document.getElementById('vsm-hover-label');
  const labelsEl  = document.getElementById('vsm-labels');
  const stagesEl  = document.getElementById('vsm-stages');
  const summaryEl = document.getElementById('vsm-summary');

  const BAR_MAX_H = 36; // px — max bar height in each row cell

  /* ── Compute max value across all stages for a given mode/ai ── */
  function getMaxVal(aiMode, streamMode) {
    let max = 0;
    VSM_DATA.stages.forEach(s => {
      const d = s[aiMode];
      if (streamMode !== 'delivery') max = Math.max(max, d.userActive + d.userWait);
      if (streamMode !== 'user')     max = Math.max(max, d.delivActive + d.delivWait);
    });
    return max || 1;
  }

  /* ── Build a single bar element ── */
  function makeBar(value, maxVal, modClass, labelText) {
    const row = document.createElement('div');
    row.className = 'vsm-bar-row vsm-bar-row--' + modClass;

    const bar = document.createElement('div');
    const pct  = value === 0 ? 0 : Math.max(4, Math.round((value / maxVal) * BAR_MAX_H));
    bar.className = 'vsm-bar vsm-bar--' + (value === 0 ? 'zero' : modClass);
    bar.style.height = pct + 'px';

    if (value > 0 && pct >= 14) {
      const lbl = document.createElement('span');
      lbl.className = 'vsm-bar-label';
      lbl.textContent = value + 'd';
      bar.appendChild(lbl);
    } else if (value > 0) {
      const extLbl = document.createElement('span');
      extLbl.className = 'vsm-bar-label--ext';
      extLbl.textContent = value + 'd';
      row.appendChild(extLbl);
    }
    row.appendChild(bar);
    return row;
  }

  /* ── Render full VSM ── */
  function render() {
    const aiMode  = aiEl.value;     // 'before' | 'after'
    const sMode   = modeEl.value;   // 'both' | 'user' | 'delivery'
    const maxVal  = getMaxVal(aiMode, sMode);
    const showUser  = sMode !== 'delivery';
    const showDeliv = sMode !== 'user';

    /* Build label column */
    labelsEl.innerHTML = '';
    if (showUser) {
      const la = document.createElement('div');
      la.className = 'vsm-row-label vsm-row-label--user-active';
      la.textContent = '▣ Active';
      labelsEl.appendChild(la);

      const lw = document.createElement('div');
      lw.className = 'vsm-row-label vsm-row-label--user-wait';
      lw.textContent = '⧖ Wait';
      labelsEl.appendChild(lw);
    }
    if (showDeliv) {
      const la = document.createElement('div');
      la.className = 'vsm-row-label vsm-row-label--deliv-active';
      la.textContent = '▣ Active';
      labelsEl.appendChild(la);

      const lw = document.createElement('div');
      lw.className = 'vsm-row-label vsm-row-label--deliv-wait';
      lw.textContent = '⧖ Gate';
      labelsEl.appendChild(lw);
    }

    /* Build stage columns */
    stagesEl.innerHTML = '';
    let totalActive = 0, totalWait = 0;

    VSM_DATA.stages.forEach((stage, idx) => {
      const d   = stage[aiMode];
      const col = document.createElement('div');
      col.className = 'vsm-stage' + (stage.aiOperated ? ' vsm-stage--ai' : '');
      col.dataset.idx = idx;

      /* Process box */
      const box = document.createElement('div');
      box.className = 'vsm-process-box';
      const name = document.createElement('div');
      name.className = 'vsm-process-name';
      name.textContent = stage.label;
      box.appendChild(name);
      col.appendChild(box);

      /* Connector arrow */
      const conn = document.createElement('span');
      conn.className = 'vsm-connector';
      conn.textContent = '→';
      col.appendChild(conn);

      /* Bar rows per active stream */
      if (showUser) {
        col.appendChild(makeBar(d.userActive, maxVal, 'user-active'));
        col.appendChild(makeBar(d.userWait,   maxVal, 'user-wait'));
      }
      if (showDeliv) {
        col.appendChild(makeBar(d.delivActive, maxVal, 'deliv-active'));
        col.appendChild(makeBar(d.delivWait,   maxVal, 'deliv-wait'));
      }

      /* Footer: efficiency pill + badges */
      const footer = document.createElement('div');
      footer.className = 'vsm-stage-footer';

      const act = (showUser ? d.userActive : 0) + (showDeliv ? d.delivActive : 0);
      const tot = act + (showUser ? d.userWait : 0) + (showDeliv ? d.delivWait : 0);
      const eff = tot === 0 ? 100 : Math.round((act / tot) * 100);
      const pillMod = eff >= 70 ? 'good' : eff >= 40 ? 'warn' : 'bad';

      const pill = document.createElement('span');
      pill.className = 'vsm-eff-pill vsm-eff-pill--' + pillMod;
      pill.textContent = eff + '% eff.';
      footer.appendChild(pill);

      if (d.bottleneck) {
        const badge = document.createElement('span');
        badge.className = 'vsm-bottleneck-badge';
        badge.textContent = '⚠ BOTTLENECK';
        footer.appendChild(badge);
      }
      if (stage.aiOperated) {
        const aib = document.createElement('span');
        aib.className = 'vsm-ai-badge';
        aib.textContent = '✦ AI';
        footer.appendChild(aib);
      }
      col.appendChild(footer);

      /* Hover events */
      col.addEventListener('mouseenter', () => {
        col.classList.add('is-hovered');
        hoverLbl.textContent = stage.note || stage.label;
      });
      col.addEventListener('mouseleave', () => {
        col.classList.remove('is-hovered');
        hoverLbl.textContent = 'Hover a stage for details';
      });

      stagesEl.appendChild(col);

      /* Accumulate for summary */
      if (showUser)  { totalActive += d.userActive;  totalWait += d.userWait; }
      if (showDeliv) { totalActive += d.delivActive; totalWait += d.delivWait; }
    });

    /* Summary bar */
    const totalDays  = totalActive + totalWait;
    const overallEff = totalDays === 0 ? 100 : Math.round((totalActive / totalDays) * 100);
    const effMod     = overallEff >= 60 ? 'good' : overallEff >= 35 ? 'warn' : 'bad';

    summaryEl.innerHTML = '';

    const stat = document.createElement('span');
    stat.className = 'vsm-summary-stat vsm-summary-stat--' + effMod;
    stat.innerHTML = `Overall Flow Efficiency: ${totalActive}d active / ${totalDays}d total = <strong>${overallEff}%</strong>`;
    summaryEl.appendChild(stat);

    const meta = document.createElement('span');
    meta.className = 'vsm-summary-meta';
    meta.innerHTML = `Target: ≥70% &nbsp;|&nbsp; Industry avg: ~35% &nbsp;|&nbsp; Mode: <strong>${aiEl.options[aiEl.selectedIndex].text}</strong>`;
    summaryEl.appendChild(meta);
  }

  /* ── Control listeners ── */
  modeEl.addEventListener('change', render);
  aiEl.addEventListener('change',   render);

  /* ── Initial render ── */
  render();
})();

Your CSS

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --bg:          #07090f;
  --panel:       #0d1220;
  --card:        #111827;
  --card2:       #0f1f35;
  --text:        #dde6f0;
  --muted:       #7a90a8;
  --accent:      #00d4ff;
  --accent2:     #7b61ff;
  --green:       #22d98a;
  --yellow:      #f5c842;
  --red:         #ff5c72;
  --blue:        #4a9eff;
  --border:      #1c2d46;
  --sidebar-w:   290px;
  --mono:        'IBM Plex Mono', monospace;
  --head:        'Syne', sans-serif;
  --body:        'DM Sans', sans-serif;
}

/* ═══════════════════════════════════════════════════
   2. RESET
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════
   3. BASE
═══════════════════════════════════════════════════ */
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════
   4. SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.sidebar-header {
  padding: 22px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.brand {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.nav-group { padding: 10px 0; }
.nav-group-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 18px 4px;
}
.nav a {
  display: block;
  padding: 7px 18px;
  color: #6d8aaa;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.nav a:hover,
.nav a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(0,212,255,0.05);
}
.nav-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════════
   5. CONTENT AREA
═══════════════════════════════════════════════════ */
.content {
  margin-left: var(--sidebar-w);
  padding: 40px 44px 80px;
  max-width: 1060px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════
   6. PAGE HEADER
═══════════════════════════════════════════════════ */
.page-title {
  font-family: var(--head);
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 6px;
}
.page-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}
.tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.tag {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════
   7. TOPIC SECTIONS (collapsible)
═══════════════════════════════════════════════════ */
.topic {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 22px;
  overflow: hidden;
  scroll-margin-top: 30px;
}
.topic-header {
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  user-select: none;
  transition: background 0.15s;
}
.topic-header:hover { background: rgba(255,255,255,0.02); }
.topic-header-left { flex: 1; }
.topic-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 3px;
}
.topic-title {
  font-family: var(--head);
  font-size: 16px;
  font-weight: 700;
  color: #e8f0fa;
  line-height: 1.3;
}
.topic-q {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}
.chevron {
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}
.topic.open .chevron { transform: rotate(180deg); }
.topic-body {
  display: none;
  padding: 0 22px 22px;
  border-top: 1px solid var(--border);
}
.topic.open .topic-body { display: block; }
.topic-intro {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0;
}

/* ═══════════════════════════════════════════════════
   8. ANSWER BANNERS
═══════════════════════════════════════════════════ */
.answer-banner {
  margin: 16px 0 14px;
  padding: 13px 16px;
  border-radius: 9px;
  background: rgba(0,212,255,0.07);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  font-weight: 500;
  color: #c8e8ff;
}
.answer-banner--tbd {
  background: rgba(245,200,66,0.07);
  border-left-color: var(--yellow);
  color: #fde68a;
}

/* ═══════════════════════════════════════════════════
   9. GRID LAYOUTS
═══════════════════════════════════════════════════ */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

/* ═══════════════════════════════════════════════════
   10. CARDS
═══════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 16px;
}
.card-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 7px;
}
.card ul { padding-left: 16px; color: var(--text); font-size: 13px; }
.card ul li { margin-bottom: 4px; }
.card p { font-size: 13px; color: var(--text); }

/* ═══════════════════════════════════════════════════
   11. AI PROMPT BOX
═══════════════════════════════════════════════════ */
.prompt-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}
.prompt-box {
  background: #07111f;
  border: 1px solid #1a3a5c;
  border-radius: 9px;
  padding: 14px 16px;
  margin: 12px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #8ecfff;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════
   12. AGENTIC FLOW CHIPS
═══════════════════════════════════════════════════ */
.agent-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
  padding: 13px 16px;
  background: var(--card2);
  border-radius: 9px;
  border: 1px solid #1a3050;
}
.agent-step {
  background: #0e2040;
  border: 1px solid #244068;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  color: #90c8ff;
  font-family: var(--mono);
  white-space: nowrap;
}
.agent-arrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: bold;
}
.agent-divider {
  color: var(--muted);
  font-size: 11px;
  margin: 0 4px;
}
.agent-decision {
  background: #1a0e2e;
  border: 1px solid #3d2a6e;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  color: #c4b0ff;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════
   13. REFERENCE LINKS
═══════════════════════════════════════════════════ */
.links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.ref-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0d1e33;
  border: 1px solid #1c3a5c;
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  font-family: var(--mono);
  transition: all 0.15s;
}
.ref-link:hover {
  background: #13294a;
  color: var(--accent);
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════
   14. SECTION DIVIDER LABEL
═══════════════════════════════════════════════════ */
.sl {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   15. VALUE STREAM MAP — pure flexbox/HTML5, no canvas
═══════════════════════════════════════════════════ */
.vsm-outer {
  margin: 16px 0 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Controls toolbar */
.vsm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vsm-toolbar label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.vsm-toolbar select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}
.vsm-hover-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  transition: color 0.2s;
}

/* Scrollable stage strip */
.vsm-scroll {
  overflow-x: auto;
  padding: 0 16px 0;
}

/* Row header column + stages grid */
.vsm-grid {
  display: flex;
  min-width: 700px;
  padding: 12px 0 8px;
  gap: 0;
}

/* Left label column */
.vsm-labels {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 80px;
  gap: 4px;
  padding-top: 52px; /* align with process boxes */
}
.vsm-row-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  height: 44px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--border);
}
.vsm-row-label--user-active  { color: var(--green); }
.vsm-row-label--user-wait    { color: var(--yellow); }
.vsm-row-label--deliv-active { color: var(--blue); }
.vsm-row-label--deliv-wait   { color: var(--red); }

/* Stages area */
.vsm-stages {
  display: flex;
  flex: 1;
  gap: 6px;
  padding-left: 6px;
}

/* Single stage column */
.vsm-stage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 90px;
  gap: 4px;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
  transition: background 0.15s;
  position: relative;
}
.vsm-stage:hover { background: rgba(255,255,255,0.03); }
.vsm-stage.is-hovered { background: rgba(0,212,255,0.04); }

/* Process box (top of column) */
.vsm-process-box {
  background: #162338;
  border: 1.5px solid #2a5a8a;
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vsm-stage--ai .vsm-process-box {
  background: #0d2a3a;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0,212,255,0.15);
}
.vsm-process-name {
  font-family: var(--head);
  font-size: 9px;
  font-weight: 700;
  color: #c8dff0;
  line-height: 1.3;
}
.vsm-stage--ai .vsm-process-name { color: var(--accent); }

/* Connector arrow between process boxes */
.vsm-connector {
  position: absolute;
  right: -9px;
  top: 20px;
  font-size: 13px;
  color: #2a4a6e;
  z-index: 2;
  pointer-events: none;
}
.vsm-stage:last-child .vsm-connector { display: none; }

/* Bar rows */
.vsm-bar-row {
  height: 44px;
  display: flex;
  align-items: flex-end;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.vsm-bar-row--user-active  { background: rgba(34,217,138,0.06); }
.vsm-bar-row--user-wait    { background: rgba(245,200,66,0.06); }
.vsm-bar-row--deliv-active { background: rgba(74,158,255,0.06); }
.vsm-bar-row--deliv-wait   { background: rgba(255,92,114,0.06); }

.vsm-bar {
  border-radius: 3px 3px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease, height 0.4s ease;
  min-height: 4px;
  width: 70%;
  margin: 0 auto;
}
.vsm-bar--user-active  { background: var(--green); }
.vsm-bar--user-wait    { background: var(--yellow); }
.vsm-bar--deliv-active { background: var(--blue); }
.vsm-bar--deliv-wait   { background: var(--red); }
.vsm-bar--zero         { background: rgba(122,144,168,0.2); min-height: 3px; }

.vsm-bar-label {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  color: #07090f;
  white-space: nowrap;
}
.vsm-bar-label--ext {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
}

/* Efficiency + bottleneck badges */
.vsm-stage-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  min-height: 28px;
}
.vsm-eff-pill {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}
.vsm-eff-pill--good   { background: rgba(34,217,138,0.15); color: var(--green); }
.vsm-eff-pill--warn   { background: rgba(245,200,66,0.15); color: var(--yellow); }
.vsm-eff-pill--bad    { background: rgba(255,92,114,0.15); color: var(--red); }

.vsm-bottleneck-badge {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  background: var(--red);
  color: #07090f;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.vsm-ai-badge {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--accent);
  opacity: 0.8;
}

/* Summary bar */
.vsm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.vsm-summary-stat {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.vsm-summary-stat--good  { color: var(--green); border-color: var(--green); background: rgba(34,217,138,0.06); }
.vsm-summary-stat--warn  { color: var(--yellow); border-color: var(--yellow); background: rgba(245,200,66,0.06); }
.vsm-summary-stat--bad   { color: var(--red); border-color: var(--red); background: rgba(255,92,114,0.06); }
.vsm-summary-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.vsm-summary-meta strong { color: var(--accent); }

/* Legend */
.vsm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px 14px;
}
.vsm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
}
.vsm-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vsm-swatch--green  { background: var(--green); }
.vsm-swatch--blue   { background: var(--blue); }
.vsm-swatch--yellow { background: var(--yellow); }
.vsm-swatch--red    { background: var(--red); }
.vsm-swatch--ai     { background: var(--accent); opacity: 0.5; }

/* ═══════════════════════════════════════════════════
   16. REPAIR LOOP
═══════════════════════════════════════════════════ */
.repair-loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.repair-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px;
  position: relative;
}
.repair-step::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 14px;
  z-index: 2;
}
.repair-step:nth-child(3)::after,
.repair-step:nth-child(6)::after { content: ''; }
.repair-step-num   { font-family: var(--mono); font-size: 11px; color: var(--accent2); margin-bottom: 4px; }
.repair-step-title { font-size: 13px; font-weight: 600; color: #dde6f0; margin-bottom: 4px; }
.repair-step-desc  { font-size: 11px; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   17. HERO METRICS ROW
═══════════════════════════════════════════════════ */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0;
}
.metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px;
  text-align: center;
}
.metric-val {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
.metric-val--green  { color: var(--green); }
.metric-val--yellow { color: var(--yellow); }
.metric-val--red    { color: var(--red); }
.metric-val--blue   { color: var(--blue); }
.metric-label { font-size: 11px; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   18. CALLOUT BOX
═══════════════════════════════════════════════════ */
.callout {
  background: rgba(123,97,255,0.07);
  border: 1px solid rgba(123,97,255,0.25);
  border-radius: 9px;
  padding: 13px 16px;
  font-size: 13px;
  color: #c4b8ff;
  margin: 12px 0;
}
.callout strong { color: #a89cff; }

/* ═══════════════════════════════════════════════════
   19. PAGE FOOTER
═══════════════════════════════════════════════════ */
.page-footer {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   20. SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions