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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions