.eq-demo-hero{background:#eaf5f8;border-bottom:1px solid var(--line);padding:24px 0}.eq-demo-hero>.wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.eq-demo-hero h1{font-size:34px;line-height:1.2;margin:5px 0 0}.eq-demo-hero p{max-width:650px;color:var(--muted);margin:0 0 3px}.eq-demo-shell{background:#f7f9fb;padding:24px 0 44px}.eq-demo-shell>.wrap{width:min(1380px,calc(100% - 48px))}.eq-demo-panel{background:#fff;border:1px solid #ccd7df;border-radius:5px;box-shadow:0 4px 16px rgba(16,35,54,.06);padding:14px}.eq-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}.eq-demo-title strong{display:block;font-size:17px}.eq-demo-title small{display:flex;align-items:center;gap:6px;margin-top:3px;color:#607587;font-size:11px}.eq-demo-dot{width:7px;height:7px;border-radius:50%;background:#d2a02b;box-shadow:0 0 0 3px rgba(210,160,43,.13)}.eq-demo-title small.is-connected .eq-demo-dot{background:#27a36a;box-shadow:0 0 0 3px rgba(39,163,106,.13)}.eq-demo-title small.is-error .eq-demo-dot{background:#d34b4b;box-shadow:0 0 0 3px rgba(211,75,75,.13)}.eq-demo-actions{display:flex;align-items:center;gap:7px}.eq-demo-actions label{color:#607587;font-size:12px}.eq-demo-actions select,.eq-demo-actions button{height:31px;border:1px solid #afc0cc;background:#fff;color:#30485b;font:inherit;font-size:12px}.eq-demo-actions select{min-width:130px;padding:0 8px}.eq-demo-actions button{padding:0 11px;cursor:pointer}.eq-demo-actions button:hover{border-color:#1689d3;color:#0877ba}.eq-demo-workbench.pw-root{margin-top:10px}.eq-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:10px;color:#697d8d;font-size:12px}.eq-demo-footer a{color:#0877ba;font-weight:700}.eq-demo-page .pw-chart{height:clamp(290px,38dvh,430px)}

@media(max-width:900px){.eq-demo-hero>.wrap{display:block}.eq-demo-hero p{margin-top:10px}.eq-demo-toolbar{align-items:flex-start;flex-direction:column}.eq-demo-actions{width:100%;flex-wrap:wrap}.eq-demo-shell>.wrap{width:min(1380px,calc(100% - 28px))}}
@media(max-width:640px){.eq-demo-hero{padding:22px 0}.eq-demo-hero h1{font-size:29px}.eq-demo-shell{padding:16px 0 32px}.eq-demo-panel{padding:8px}.eq-demo-actions label{width:100%}.eq-demo-actions select{flex:1}.eq-demo-footer{display:block}.eq-demo-footer a{display:block;margin-top:6px}.eq-demo-page .pw-chart{height:250px}}
