:root {
    --bg-primary: #000000;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-indigo: #818cf8;
    --accent-blue: #60a5fa;
    --accent-cyan: #22d3ee;
    --accent-emerald: #34d399;
    --accent-amber: #fbbf24;
    --accent-rose: #fb7185;
    --accent-violet: #a78bfa;
    --gradient-indigo: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-blue: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --gradient-emerald: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --gradient-amber: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --team-ai: #818cf8; --team-ai-bg: rgba(129,140,248,0.08); --team-ai-border: rgba(129,140,248,0.25);
    --team-del: #34d399; --team-del-bg: rgba(52,211,153,0.08); --team-del-border: rgba(52,211,153,0.25);
    --team-api: #60a5fa; --team-api-bg: rgba(96,165,250,0.08); --team-api-border: rgba(96,165,250,0.25);
    --team-wpf: #fb923c; --team-wpf-bg: rgba(251,146,60,0.08); --team-wpf-border: rgba(251,146,60,0.25);
}
body.light {
    --bg-primary: #f5f5f7;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(0, 0, 0, 0.02);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --text-primary: #1a1a2e;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent-indigo: #6366f1;
    --accent-blue: #2563eb;
    --accent-cyan: #0891b2;
    --accent-emerald: #059669;
    --accent-amber: #d97706;
    --accent-rose: #e11d48;
    --accent-violet: #7c3aed;
    --shadow-glow: 0 4px 24px rgba(99, 102, 241, 0.1);
    --team-ai: #6366f1; --team-ai-bg: rgba(99,102,241,0.08); --team-ai-border: rgba(99,102,241,0.2);
    --team-del: #059669; --team-del-bg: rgba(5,150,105,0.08); --team-del-border: rgba(5,150,105,0.2);
    --team-api: #2563eb; --team-api-bg: rgba(37,99,235,0.08); --team-api-border: rgba(37,99,235,0.2);
    --team-wpf: #c2410c; --team-wpf-bg: rgba(194,65,12,0.08); --team-wpf-border: rgba(194,65,12,0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; transition: background .3s, color .3s; }

.bg-grid { position: fixed; inset: 0; background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.12), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(6,182,212,0.08), transparent); z-index: 0; }
.bg-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%); }
.container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 40px 24px 80px; }

/* Logo */
.logo { max-width: 260px; margin: 0 auto 24px; display: block; filter: brightness(1.1); }

/* Header */
.header { text-align: center; margin-bottom: 60px; }
.header .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); font-size: 12px; font-weight: 600; color: var(--accent-indigo); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-emerald); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
.header h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -1.5px; background: linear-gradient(135deg, #f1f5f9 0%, #818cf8 50%, #22d3ee 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; line-height: 1.2; }
.header p { font-size: 16px; color: var(--text-secondary); max-width: 720px; margin: 0 auto; line-height: 1.6; }

/* Team Legend */
.team-legend { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 48px; }
.tl-item { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; }
.tl-ai { background: var(--team-ai-bg); border: 1px solid var(--team-ai-border); color: var(--team-ai); }
.tl-ai .tl-dot { background: var(--team-ai); }
.tl-del { background: var(--team-del-bg); border: 1px solid var(--team-del-border); color: var(--team-del); }
.tl-del .tl-dot { background: var(--team-del); }
.tl-api { background: var(--team-api-bg); border: 1px solid var(--team-api-border); color: var(--team-api); }
.tl-api .tl-dot { background: var(--team-api); }
.tl-wpf { background: var(--team-wpf-bg); border: 1px solid var(--team-wpf-border); color: var(--team-wpf); }
.tl-wpf .tl-dot { background: var(--team-wpf); }

/* Architecture */
.architecture { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.layer { position: relative; padding: 32px; border: 1px solid var(--border-subtle); background: var(--bg-glass); backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.layer:first-child { border-radius: 20px 20px 0 0; }
.layer:last-child { border-radius: 0 0 20px 20px; }
.layer:hover { background: rgba(255,255,255,0.05); }
.layer-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: nowrap; }
.layer-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.layer-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.layer-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Owner badges */
.owner { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.od { width: 7px; height: 7px; border-radius: 50%; }
.ob-ai { background: var(--team-ai-bg); border: 1px solid var(--team-ai-border); color: var(--team-ai); }
.ob-ai .od { background: var(--team-ai); }
.ob-del { background: var(--team-del-bg); border: 1px solid var(--team-del-border); color: var(--team-del); }
.ob-del .od { background: var(--team-del); }
.ob-api { background: var(--team-api-bg); border: 1px solid var(--team-api-border); color: var(--team-api); }
.ob-api .od { background: var(--team-api); }
.ob-wpf { background: var(--team-wpf-bg); border: 1px solid var(--team-wpf-border); color: var(--team-wpf); }
.ob-wpf .od { background: var(--team-wpf); }
.owner.phase-future { border-style: dashed; opacity: 0.6; }
.owner.phase-future::after { content: ' ⟶ FUTURE'; font-size: 8px; letter-spacing: 0.3px; opacity: 0.7; }

/* Vendor badges */
.vendor-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; margin-left: auto; }
.vb-cf { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25); color: #fb923c; }
.vb-gcp { background: rgba(66,133,244,0.1); border: 1px solid rgba(66,133,244,0.25); color: #60a5fa; }
.vb-kong { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: #34d399; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { position: relative; padding: 20px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); transition: all 0.35s cubic-bezier(0.4,0,0.2,1); cursor: pointer; overflow: hidden; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 14px 14px 0 0; opacity: 0; transition: opacity 0.35s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-glow); }
.card:hover::before { opacity: 1; }
.card::after { content: 'Click for details →'; position: absolute; bottom: 8px; right: 12px; font-size: 9px; color: var(--text-muted); opacity: 0; transition: opacity 0.3s ease; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.card:hover::after { opacity: 1; }
.card-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.2px; }
.card p { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.card .tag { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

/* Layer colors */
.layer--users .layer-icon { background: var(--gradient-amber); }
.layer--users .card::before { background: var(--gradient-amber); }
.layer--users .tag { background: rgba(251,191,36,0.12); color: var(--accent-amber); }
.layer--firewall .layer-icon { background: linear-gradient(135deg, #ef4444, #f97316); }
.layer--firewall .card::before { background: linear-gradient(135deg, #ef4444, #f97316); }
.layer--firewall .tag { background: rgba(239,68,68,0.12); color: var(--accent-rose); }
.layer--orchestration .layer-icon { background: var(--gradient-indigo); }
.layer--orchestration .card::before { background: var(--gradient-indigo); }
.layer--orchestration .tag { background: rgba(129,140,248,0.12); color: var(--accent-indigo); }
.layer--ai-gateway .layer-icon { background: var(--gradient-blue); }
.layer--ai-gateway .card::before { background: var(--gradient-blue); }
.layer--ai-gateway .tag { background: rgba(96,165,250,0.12); color: var(--accent-blue); }
.layer--mcp-gateway .layer-icon { background: var(--gradient-cyan); }
.layer--mcp-gateway .card::before { background: var(--gradient-cyan); }
.layer--mcp-gateway .tag { background: rgba(34,211,238,0.12); color: var(--accent-cyan); }
.layer--mcp-servers .layer-icon { background: var(--gradient-emerald); }
.layer--mcp-servers .card::before { background: var(--gradient-emerald); }
.layer--mcp-servers .tag { background: rgba(52,211,153,0.12); color: var(--accent-emerald); }

/* Segments (internal/external) */
.segment { margin-top: 20px; }
.segment:first-of-type { margin-top: 0; }
.seg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.seg-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.seg-label.si { color: var(--accent-cyan); }
.seg-label.se { color: var(--accent-amber); }
.seg-line { flex: 1; height: 1px; }
.seg-line.si { background: linear-gradient(to right, rgba(34,211,238,0.3), transparent); }
.seg-line.se { background: linear-gradient(to right, rgba(251,191,36,0.3), transparent); }
.seg-scope { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.seg-scope.si { background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2); color: var(--accent-cyan); }
.seg-scope.se { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2); color: var(--accent-amber); }

/* Flow connectors */
.flow-connector { display: flex; align-items: center; justify-content: center; padding: 8px 0; position: relative; z-index: 2; }
.flow-connector .arrow { display: flex; flex-direction: column; align-items: center; }
.flow-connector .arrow-line { width: 2px; height: 18px; background: linear-gradient(to bottom, rgba(99,102,241,0.4), rgba(34,211,238,0.4)); animation: arrow-pulse 2s ease-in-out infinite; }
.flow-connector .arrow-head { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid rgba(34,211,238,0.5); }
.flow-connector .arrow-label { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-left: 12px; }
@keyframes arrow-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Side ribbon */
.side-ribbon { position: fixed; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; padding: 20px 10px; background: rgba(168,85,250,0.06); border-left: 1px solid rgba(168,85,250,0.15); border-radius: 12px 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-violet); display: flex; align-items: center; gap: 12px; z-index: 10; }
.side-ribbon .ribbon-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-violet); animation: pulse-dot 2s ease-in-out infinite; writing-mode: horizontal-tb; }

/* Flow diagram */
.flow-diagram { margin-top: 60px; padding: 40px; border-radius: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); }
.flow-diagram h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.flow-diagram .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }
.flow-steps { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 8px; }
.flow-step { flex: 1; min-width: 140px; text-align: center; position: relative; padding: 0 6px; }
.fsn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto 12px; color: #fff; }
.flow-step h4 { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.flow-step p { font-size: 10px; color: var(--text-secondary); line-height: 1.4; }
.fsa { position: absolute; right: -12px; top: 18px; width: 24px; height: 2px; background: rgba(99,102,241,0.3); z-index: 2; }
.fsa::after { content: ''; position: absolute; right: -1px; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid rgba(99,102,241,0.4); }
.flow-step:last-child .fsa { display: none; }
.sa .fsn { background: var(--gradient-amber); }
.sf .fsn { background: linear-gradient(135deg, #ef4444, #f97316); }
.si2 .fsn { background: var(--gradient-indigo); }
.sb .fsn { background: var(--gradient-blue); }
.sc .fsn { background: var(--gradient-cyan); }
.se2 .fsn { background: var(--gradient-emerald); }
.sv .fsn { background: linear-gradient(135deg, #ec4899, #a855f7); }

/* Ownership matrix */
.ownership-matrix { margin-top: 60px; padding: 40px; border-radius: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); }
.ownership-matrix h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.ownership-matrix .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; }
.matrix-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-subtle); }
.matrix-table thead th { padding: 14px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border-subtle); }
.matrix-table tbody td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.matrix-table tbody tr:last-child td { border-bottom: none; }
.matrix-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.cn { font-weight: 700; color: var(--text-primary) !important; white-space: nowrap; }
.mb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.mb.owns { background: rgba(52,211,153,0.12); color: var(--accent-emerald); }
.mb.ops { background: rgba(129,140,248,0.12); color: var(--accent-indigo); }
.mb.cons { background: rgba(96,165,250,0.12); color: var(--accent-blue); }
.mb.wpfc { background: rgba(251,146,60,0.12); color: #fb923c; }

/* Principles */
.principles { margin-top: 60px; }
.principles h2 { font-size: 20px; font-weight: 700; margin-bottom: 24px; text-align: center; }
.principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.principle-card { padding: 24px; border-radius: 16px; background: var(--bg-glass); border: 1px solid var(--border-subtle); transition: all 0.35s ease; }
.principle-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.principle-card .emoji { font-size: 28px; margin-bottom: 14px; display: block; }
.principle-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.principle-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Footer */
.footer { text-align: center; margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.footer p { font-size: 12px; color: var(--text-muted); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-content { background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; transform: scale(0.95) translateY(20px); transition: transform 0.3s ease; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary); font-size: 24px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.modal-content h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.3px; background: linear-gradient(135deg, #f1f5f9, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
#modal-body { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }

/* Scroll animations */
.animate-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.layer:nth-child(1) { animation-delay: .1s; }
.layer:nth-child(2) { animation-delay: .15s; }
.layer:nth-child(3) { animation-delay: .2s; }
.layer:nth-child(4) { animation-delay: .25s; }
.layer:nth-child(5) { animation-delay: .3s; }
.layer:nth-child(6) { animation-delay: .35s; }

/* Responsive */
/* ═══════════════════ SCENARIO FLOWS ═══════════════════ */

/* Scenario container */
.scenario-flows { margin-top: 60px; }
.scenario-flows h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.scenario-flows .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 32px; text-align: center; }

/* Tab navigation */
.scenario-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.scenario-tab { padding: 10px 24px; border-radius: 100px; border: 1px solid var(--border-subtle); background: var(--bg-glass); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: inherit; }
.scenario-tab:hover { border-color: rgba(129,140,248,0.3); color: var(--accent-indigo); background: rgba(99,102,241,0.08); }
.scenario-tab.active { background: rgba(99,102,241,0.15); border-color: rgba(129,140,248,0.5); color: var(--accent-indigo); box-shadow: 0 0 20px rgba(99,102,241,0.15); }

/* Scenario panels */
.scenario-panel { display: none; animation: scenarioFadeIn 0.4s ease; }
.scenario-panel.active { display: block; }
@keyframes scenarioFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Scenario flow track */
.scenario-track { position: relative; padding: 40px 0; }
.scenario-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, rgba(99,102,241,0.0), rgba(99,102,241,0.3), rgba(34,211,238,0.3), rgba(52,211,153,0.3), rgba(99,102,241,0.0)); transform: translateX(-50%); }

/* Scenario step */
.scenario-step { position: relative; display: flex; align-items: flex-start; margin-bottom: 0; padding: 12px 0; }
.scenario-step:last-child { margin-bottom: 0; }

.scenario-step.left { justify-content: flex-start; padding-right: 55%; }
.scenario-step.right { justify-content: flex-end; padding-left: 55%; }

.scenario-step .step-content { position: relative; padding: 20px 24px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); max-width: 100%; transition: all 0.3s ease; }
.scenario-step .step-content:hover { border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.scenario-step .step-number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; z-index: 3; box-shadow: 0 0 12px rgba(99,102,241,0.4); }

.scenario-step .step-content h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.scenario-step .step-content p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.scenario-step .step-content .step-layer { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 8px; }

/* Step color variants */
.step-user .step-number { background: var(--gradient-amber); }
.step-user .step-layer { background: rgba(251,191,36,0.12); color: var(--accent-amber); }
.step-firewall .step-number { background: linear-gradient(135deg, #ef4444, #f97316); }
.step-firewall .step-layer { background: rgba(239,68,68,0.12); color: var(--accent-rose); }
.step-orchestration .step-number { background: var(--gradient-indigo); }
.step-orchestration .step-layer { background: rgba(129,140,248,0.12); color: var(--accent-indigo); }
.step-memory .step-number { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.step-memory .step-layer { background: rgba(139,92,246,0.12); color: var(--accent-violet); }
.step-skill .step-number { background: linear-gradient(135deg, #f59e0b, #10b981); }
.step-skill .step-layer { background: rgba(245,158,11,0.12); color: var(--accent-amber); }
.step-gateway .step-number { background: var(--gradient-blue); }
.step-gateway .step-layer { background: rgba(96,165,250,0.12); color: var(--accent-blue); }
.step-mcp .step-number { background: var(--gradient-cyan); }
.step-mcp .step-layer { background: rgba(34,211,238,0.12); color: var(--accent-cyan); }
.step-model .step-number { background: linear-gradient(135deg, #6366f1, #06b6d4); }
.step-model .step-layer { background: rgba(99,102,241,0.12); color: var(--accent-indigo); }
.step-observe .step-number { background: linear-gradient(135deg, #ec4899, #a855f7); }
.step-observe .step-layer { background: rgba(236,72,153,0.12); color: #f472b6; }
.step-response .step-number { background: var(--gradient-emerald); }
.step-response .step-layer { background: rgba(52,211,153,0.12); color: var(--accent-emerald); }

/* Bidirectional flow connector */
.flow-connector-bi { display: flex; align-items: center; justify-content: center; padding: 6px 0; position: relative; z-index: 2; gap: 12px; }
.flow-connector-bi .arrow-bi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flow-connector-bi .arrow-bi .arrow-line { width: 2px; height: 12px; }
.flow-connector-bi .arrow-down .arrow-line { background: linear-gradient(to bottom, rgba(99,102,241,0.4), rgba(34,211,238,0.4)); animation: arrow-pulse 2s ease-in-out infinite; }
.flow-connector-bi .arrow-down .arrow-head { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(34,211,238,0.5); }
.flow-connector-bi .arrow-up .arrow-line { background: linear-gradient(to top, rgba(52,211,153,0.4), rgba(251,191,36,0.4)); animation: arrow-pulse 2s ease-in-out infinite 1s; }
.flow-connector-bi .arrow-up .arrow-head { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid rgba(251,191,36,0.5); }
.flow-connector-bi .arrow-labels { display: flex; flex-direction: column; gap: 2px; }
.flow-connector-bi .arrow-label-down,
.flow-connector-bi .arrow-label-up { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.flow-connector-bi .arrow-label-down { color: var(--accent-cyan); }
.flow-connector-bi .arrow-label-up { color: var(--accent-amber); }

/* Animated data flow dots on the center line */
.scenario-track .data-dot { position: absolute; left: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); animation: dataDotFlow 3s ease-in-out infinite; z-index: 4; }
@keyframes dataDotFlow { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.data-dot.d1 { background: var(--accent-indigo); animation-delay: 0s; }
.data-dot.d2 { background: var(--accent-cyan); animation-delay: 1s; }
.data-dot.d3 { background: var(--accent-emerald); animation-delay: 2s; }

/* Horizontal flow (data pipeline) */
.hflow-container { padding: 32px; border-radius: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); margin-top: 32px; }
.hflow-container h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.hflow-container .hflow-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; text-align: center; }
.hflow-track { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 16px 0; position: relative; }
.hflow-node { flex: 0 0 auto; text-align: center; padding: 16px 20px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); min-width: 130px; transition: all 0.3s ease; }
.hflow-node:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.hflow-node .hf-icon { font-size: 24px; margin-bottom: 8px; display: block; }
.hflow-node h4 { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.hflow-node p { font-size: 10px; color: var(--text-secondary); line-height: 1.4; }
.hflow-arrow { flex: 0 0 auto; display: flex; align-items: center; padding: 0 4px; }
.hflow-arrow .ha-line { width: 32px; height: 2px; background: linear-gradient(to right, rgba(99,102,241,0.3), rgba(34,211,238,0.4)); position: relative; }
.hflow-arrow .ha-line::after { content: ''; position: absolute; right: -1px; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid rgba(34,211,238,0.4); }
.hflow-arrow .ha-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; display: block; text-align: center; margin-top: 4px; white-space: nowrap; }

/* Swimlane diagram */
.swimlane-container { margin-top: 32px; padding: 32px; border-radius: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); }
.swimlane-container h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.swimlane-container .sl-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; text-align: center; }
.swimlanes { display: grid; grid-template-columns: 120px 1fr; gap: 0; }
.swimlane-label { padding: 16px 12px; border-right: 2px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.swimlane-label .sl-icon { font-size: 16px; }
.swimlane-row { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swimlane-row:last-child { border-bottom: none; }
.sl-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-subtle); background: var(--bg-card); white-space: nowrap; }
.sl-action .sl-a-icon { font-size: 14px; }
.sl-arrow-right { color: var(--text-muted); font-size: 16px; }

/* Loop/feedback flow */
.feedback-loop { margin-top: 32px; padding: 32px; border-radius: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); position: relative; overflow: hidden; }
.feedback-loop h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.feedback-loop .fl-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; text-align: center; }
.loop-nodes { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.loop-node { padding: 16px 20px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); text-align: center; min-width: 120px; position: relative; z-index: 2; transition: all 0.3s ease; }
.loop-node:hover { border-color: rgba(255,255,255,0.12); transform: scale(1.03); }
.loop-node .ln-icon { font-size: 22px; margin-bottom: 6px; display: block; }
.loop-node h4 { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.loop-node p { font-size: 10px; color: var(--text-secondary); }
.loop-arrow { font-size: 18px; color: var(--accent-indigo); animation: loopPulse 1.5s ease-in-out infinite; }
@keyframes loopPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.loop-return { display: flex; justify-content: center; margin-top: 16px; }
.loop-return-line { display: flex; align-items: center; gap: 8px; padding: 6px 20px; border-radius: 100px; border: 1px dashed rgba(251,191,36,0.3); background: rgba(251,191,36,0.04); }
.loop-return-line span { font-size: 10px; color: var(--accent-amber); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }

@media (max-width: 768px) {
    .container { padding: 24px 16px 60px; }
    .layer { padding: 20px; }
    .cards { grid-template-columns: 1fr; }
    .flow-steps { flex-direction: column; align-items: center; }
    .flow-step { min-width: unset; width: 100%; }
    .fsa { display: none !important; }
    .side-ribbon { display: none; }
    .layer-header { flex-wrap: wrap; }
    .owner { margin-top: 4px; }
    .vendor-badge { margin-top: 4px; }
    /* Scenario flows responsive */
    .scenario-step.left, .scenario-step.right { padding-left: 60px; padding-right: 0; justify-content: flex-start; }
    .scenario-step .step-number { left: 20px; transform: translate(-50%, -50%); }
    .scenario-track::before { left: 20px; }
    .scenario-tabs { gap: 4px; }
    .scenario-tab { padding: 8px 14px; font-size: 11px; }
    .hflow-track { flex-direction: column; }
    .hflow-arrow { transform: rotate(90deg); padding: 4px 0; }
    .swimlanes { grid-template-columns: 1fr; }
    .swimlane-label { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .loop-nodes { flex-direction: column; }
    .loop-arrow { transform: rotate(90deg); }
}