.hybrid-section{padding:76px 0 84px}
.hybrid-demo{--hy-cyan:#0a6a8e;--hy-deep:#0d3047;background:#ffffff;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hybrid-demo-top{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 28px;border-bottom:1px solid var(--line);font-size:.72rem;letter-spacing:.12em;font-weight:700}
.hybrid-demo-top>span:first-child{display:flex;align-items:center;gap:10px;color:var(--muted)}
.hybrid-demo-top i{width:7px;height:7px;border-radius:50%;background:#79e3bc;box-shadow:0 0 12px #79e3bc66}
.hybrid-state{border:1px solid #b9dce9;border-radius:99px;padding:6px 12px;background:#eaf6fb;color:#0a5f7e;letter-spacing:0;font-size:.77rem}
.hybrid-demo-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr)}
.hybrid-scene{min-width:0;position:relative;padding:22px 0 20px;background:radial-gradient(ellipse at 50% 42%,#2fb4df16,transparent 70%);align-self:center}
.hybrid-scene svg{width:100%;height:auto;overflow:visible}
.hybrid-svg-small{font:600 10px ui-sans-serif,system-ui,sans-serif;fill:#506675;letter-spacing:.08em}
.hybrid-svg-strong{font:600 12px ui-sans-serif,system-ui,sans-serif;fill:#16222b;letter-spacing:.025em}
.hybrid-svg-label{font:700 10px ui-sans-serif,system-ui,sans-serif;fill:#0d3047;letter-spacing:.055em}
.hybrid-svg-muted{font:400 12px ui-sans-serif,system-ui,sans-serif;fill:#506675}
.hybrid-svg-count{font:700 21px ui-sans-serif,system-ui,sans-serif;fill:#16222b}
.hybrid-live-text{fill:var(--hy-cyan)}.hybrid-ai-text{fill:var(--hy-deep)}
.hybrid-chip-text{font:700 12px ui-sans-serif,system-ui,sans-serif;fill:#0d3047}
.hybrid-flow-path{stroke-dasharray:5 16;animation:hybrid-flow 2.2s linear infinite}
.hybrid-overflow-path{opacity:0;animation-play-state:paused;transition:opacity .3s}
.hybrid-demo.is-overflow .hybrid-overflow-path{opacity:1;animation-play-state:running}
.hybrid-ai-platform{opacity:.42;transition:opacity .3s}
.hybrid-demo.is-overflow .hybrid-ai-platform{opacity:1}
.hybrid-demo.is-overflow .hybrid-ai-halo{animation:hybrid-halo 2.8s ease-in-out infinite}
.hybrid-scene-legend{display:flex;justify-content:center;gap:24px;color:var(--muted);font-size:.78rem;margin-top:12px}
.hybrid-scene-legend span{display:flex;align-items:center;gap:7px}
.hybrid-scene-legend i{width:7px;height:7px;background:var(--hy-cyan);border-radius:50%}
.hybrid-scene-legend span+span i{background:var(--hy-deep)}
.hybrid-controls{padding:36px 32px 30px;border-left:1px solid var(--line);background:linear-gradient(145deg,#f3f8fb,#ffffff)}
.hybrid-kicker{font-size:.67rem;letter-spacing:.12em;color:var(--hy-deep);font-weight:700}
.hybrid-controls h3{font-size:1.55rem;letter-spacing:-.025em;margin:12px 0 14px;color:var(--navy)}
.hybrid-controls>p{color:var(--muted);font-size:.9rem;line-height:1.7}
.hybrid-controls>p strong{font-weight:600;color:var(--text)}
.hybrid-presets{display:flex;gap:6px;flex-wrap:wrap;margin:23px 0}
.hybrid-presets button{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:600 .73rem ui-sans-serif,system-ui,sans-serif;background:#ffffff;color:var(--muted);cursor:pointer;min-height:38px}
.hybrid-presets button:hover{border-color:var(--blue);color:var(--navy);background:#eaf6fb}
.hybrid-presets button[aria-pressed=true]{background:#0a6a8e;border-color:#0a6a8e;color:#ffffff}
.hybrid-range-label{display:flex;justify-content:space-between;align-items:center;color:var(--text);font-size:.85rem;font-weight:600}
.hybrid-range-label output{font-size:1.5rem;color:var(--blue-d)}
.hybrid-controls input[type=range]{display:block;width:100%;margin:12px 0 5px;accent-color:#0a6a8e;cursor:pointer;min-height:24px;color-scheme:light}
.hybrid-range-scale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}
.hybrid-outcome{margin-top:22px;padding:17px 18px;border:1px solid #c5dfeb;border-radius:13px;background:#eaf6fb}
.hybrid-outcome strong{display:block;color:#0d3047;font-size:.93rem;line-height:1.5}
.hybrid-outcome p{margin-top:7px;font-size:.8rem;color:var(--muted);line-height:1.65}
.hybrid-controls .hybrid-example-note{font-size:.7rem;color:var(--muted);line-height:1.65;margin-top:18px}
.hybrid-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:24px 30px;border-top:1px solid var(--line);gap:24px;background:#f3f8fb}
.hybrid-steps li{display:flex;gap:12px;align-items:flex-start}
.hybrid-steps b{font-size:.8rem;color:#0a6a8e;background:#e5f3fa;border:1px solid #c4e1ee;border-radius:8px;padding:5px 8px}
.hybrid-steps strong{display:block;font-size:.83rem;color:var(--navy)}
.hybrid-steps span{display:block;font-size:.75rem;color:var(--muted);line-height:1.6;margin-top:4px}
.hybrid-demo :is(button,input):focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@keyframes hybrid-flow{to{stroke-dashoffset:-42}}
@keyframes hybrid-halo{50%{stroke:#2fb4df;stroke-width:2.5}}
@media(max-width:1000px){.hybrid-demo-body{grid-template-columns:1fr}.hybrid-scene{width:min(100%,780px);margin:0 auto;padding-top:12px}.hybrid-controls{border-left:0;border-top:1px solid var(--line)}.hybrid-presets{margin:18px 0}.hybrid-demo-top{padding:18px 22px}}
@media(max-width:560px){.hybrid-section{padding:54px 0}.hybrid-demo{border-radius:18px}.hybrid-demo-top{padding:16px;align-items:flex-start;flex-direction:column;gap:10px}.hybrid-scene{padding:12px 0 20px}.hybrid-scene-legend{gap:16px;font-size:.7rem}.hybrid-controls{padding:24px 20px}.hybrid-controls h3{font-size:1.4rem}.hybrid-steps{grid-template-columns:1fr;padding:22px 20px;gap:20px}.hybrid-svg-count{font-size:23px}}
@media(prefers-reduced-motion:reduce){.hybrid-flow-path,.hybrid-demo.is-overflow .hybrid-ai-halo{animation:none}.hybrid-ai-platform,.hybrid-overflow-path{transition:none}}

.hybrid-demo-top{background:var(--bg2)}.hybrid-router-caption{fill:#fff}.hybrid-presets button[aria-pressed=true]:hover{background:#0a5f7e;color:#fff}

.hybrid-mode-switch{display:flex;gap:4px;padding:4px;border:1px solid #bfdbe8;border-radius:12px;background:#e5f1f7;margin-bottom:24px}
.hybrid-mode-switch button{flex:1;min-height:42px;border:0;border-radius:8px;background:transparent;color:#0d3047;font:600 .85rem ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.hybrid-mode-switch button[aria-pressed=true]{background:#0a6a8e;color:#fff;box-shadow:0 3px 8px #0d30471a}
.hybrid-escalation{margin-top:20px}.hybrid-escalation[hidden]{display:none}
.hybrid-mode-bullets{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;list-style:none;padding:24px 30px;border-top:1px solid var(--line);margin:0;background:#fff}
.hybrid-mode-bullets li{position:relative;padding-left:22px;font-size:.83rem;line-height:1.65;color:var(--muted)}
.hybrid-mode-bullets li:before{content:'✓';position:absolute;left:0;color:#0a6a8e;font-weight:700}
@media(max-width:560px){.hybrid-mode-bullets{grid-template-columns:1fr;padding:22px 20px;gap:12px}}