.mbbr-demo { margin-top: 48px; color: #163653; }
.mbbr-demo button { font: inherit; cursor: pointer; }
.mbbr-demo [hidden] { display: none !important; }
.mbbr-demo-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: #edf8f6; border: 1px solid #c5e7df; padding: 28px; border-radius: 18px; }
.mbbr-demo-intro h4 { font-size: 22px; font-weight: 800; margin: 4px 0 8px; }
.mbbr-demo-intro p { font-size: 14px; max-width: 580px; line-height: 1.6; }
.mbbr-demo small { font-size: 10px; font-weight: 800; letter-spacing: .15em; color: #007866; }
.mbbr-demo .demo-open { border-radius: 8px; padding: 15px 22px; background: #00385b; color: white; font-size: 13px; font-weight: 700; }
.demo-workspace { border: 1px solid #cbdde5; border-radius: 18px; overflow: hidden; margin-top: 20px; background: white; }
.demo-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #dce7ec; background: #f7fafc; }
.demo-topbar h5 { font-size: 16px; font-weight: 800; }
.demo-topbar button { padding: 9px 14px; border: 1px solid #abc5d1; border-radius: 7px; font-size: 12px; font-weight: 700; }
.demo-topbar button[aria-pressed="true"] { background: #00385b; color: white; }
.demo-stage { background: radial-gradient(ellipse at 50% 10%,#effcff,#e3edf3); }
.demo-stage svg { display: block; width: 100%; height: auto; }
.demo-stage svg text { font-family: Inter,system-ui,sans-serif; }
.demo-stepper { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; padding: 18px 24px 0; }
.demo-stepper button { font-size: 12px; text-align: left; border-bottom: 3px solid #e0e9ed; padding: 8px 0 12px; color: #526977; }
.demo-stepper button span { display: block; font-size: 10px; margin-bottom: 5px; }
.demo-stepper button[aria-current="step"] { border-color: #009e82; color: #005f50; font-weight: 800; }
.demo-description { padding: 22px 24px 12px; min-height: 116px; }
.demo-description h5 { font-size: 20px; font-weight: 800; margin-bottom: 7px; }
.demo-description p { font-size: 14px; color: #526977; line-height: 1.7; max-width: 850px; }
.demo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 24px 22px; }
.demo-controls button { border: 1px solid #bccfd7; border-radius: 7px; padding: 10px 16px; font-size: 12px; font-weight: 700; }
.demo-controls .demo-play { background: #007e69; color: white; border-color: #007e69; min-width: 120px; }
.demo-controls button:disabled { opacity: .4; cursor: default; }
.demo-controls .demo-progress { margin-left: auto; font-size: 12px; color: #526977; }
.demo-disclaimer { font-size: 11px; line-height: 1.7; padding: 14px 24px; background: #f7fafc; color: #526977; border-top: 1px solid #dce7ec; }
.demo-part { transition: transform .8s ease, opacity .6s ease; }
.demo-wall { transition: opacity .7s ease, transform .8s ease; }
.demo-exploded .demo-wall { opacity: .15; transform: translateY(35px); }
.demo-exploded .demo-carriers { transform: translateY(-92px); }
.demo-exploded .demo-diffusers { transform: translateY(70px); }
.demo-exploded .demo-retainer { transform: translate(38px,-45px); }
.demo-exploded .demo-blower { transform: translate(-28px,35px); }
.demo-exploded .tour-blower { transform: translate(-25px,24px); }
.demo-exploded .tour-diffusers { transform: translateY(62px); }
.demo-exploded .tour-decanter { transform: translate(30px,-63px); }
.demo-exploded .tour-cassette { transform: translateY(-132px); }
.demo-exploded .tour-membrane-heading { opacity: 0; }
.sbr-water { transition: y 1.2s ease, height 1.2s ease; }
.sbr-floc { transition: transform 1.5s ease; }
.sbr-tour[data-phase="0"] .sbr-flocs { opacity: 0; }
.sbr-tour[data-phase="4"] .tour-decanter, .sbr-tour[data-phase="5"] .tour-decanter { transform: translateY(32px); }
.sbr-tour.demo-exploded .tour-decanter { transform: translate(30px,-63px); }
.sbr-sludge { opacity: .1; transition: opacity 1.5s ease; }
.sbr-aeration { opacity: 0; }
.sbr-tour[data-phase="2"] .sbr-aeration { opacity: 1; }
.sbr-tour .sbr-inlet, .sbr-tour .sbr-outlet { opacity: .15; animation: none; }
.sbr-tour[data-phase="1"] .sbr-inlet, .sbr-tour[data-phase="4"] .sbr-outlet { opacity: 1; }
.sbr-tour.demo-running[data-phase="1"] .sbr-inlet, .sbr-tour.demo-running[data-phase="4"] .sbr-outlet { animation: demo-flow 1s linear infinite; }
.sbr-tour[data-phase="3"] .sbr-floc, .sbr-tour[data-phase="4"] .sbr-floc, .sbr-tour[data-phase="5"] .sbr-floc { transform: translateY(var(--settle)); }
.sbr-tour[data-phase="3"] .sbr-sludge, .sbr-tour[data-phase="4"] .sbr-sludge, .sbr-tour[data-phase="5"] .sbr-sludge { opacity: 1; }
.demo-detail-label { opacity: 0; transition: opacity .4s ease; }
.demo-exploded .demo-detail-label { opacity: 1; }
.demo-focus { opacity: .4; transition: opacity .5s; }
.demo-focus.is-active { opacity: 1; }
.demo-flow { stroke-dasharray: 9 9; }
.demo-running .demo-flow { animation: demo-flow 1s linear infinite; }
.demo-bubble { opacity: .6; }
.demo-running .demo-bubble { animation: demo-bubbles 2.4s ease-in infinite; }
.demo-running .demo-carrier { animation: demo-bob 3s ease-in-out infinite alternate; }
.demo-paused *, .demo-paused *::before { animation-play-state: paused !important; }
@keyframes demo-flow { to { stroke-dashoffset: -36; } }
@keyframes demo-bubbles { from { transform: translateY(0); opacity: 0; } 25% { opacity: .8; } to { transform: translateY(-80px); opacity: 0; } }
@keyframes demo-bob { to { transform: translate(5px,-9px); } }
@media(max-width: 640px) {
 .mbbr-demo-intro { padding: 22px; } .demo-open { width: 100%; }
 .demo-topbar { padding: 15px; flex-wrap: wrap; }
 .demo-stepper { grid-template-columns: repeat(3,1fr); padding: 12px 16px 0; }
 .demo-description { padding: 18px 16px 10px; min-height: 155px; }
 .demo-controls { padding: 8px 16px 20px; }
 .demo-stage { overflow-x: auto; } .demo-stage svg { min-width: 700px; }
 .demo-disclaimer { padding: 12px 16px; }
 .demo-mobile-hint { display: block; padding: 8px 16px; font-size: 11px; background: #e3edf3; }
}
@media(min-width: 641px) { .demo-mobile-hint { display: none; } }
@media(prefers-reduced-motion: reduce) {
 .mbbr-demo *, .mbbr-demo *::before { animation: none !important; transition: none !important; }
}