.software-demo{border:1px solid #dce2d7;border-radius:8px;overflow:hidden;background:#fff;scroll-margin-top:110px}
.demo-shell{display:grid;grid-template-columns:182px minmax(0,1fr)}
.demo-sidebar{background:#080b08;color:white;padding:26px 16px;display:flex;flex-direction:column;gap:35px}
.demo-brand{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;line-height:1.25}
.demo-brand img{flex:0 0 30px;width:30px;height:30px;object-fit:contain}
.demo-tablist{display:flex;flex-direction:column;gap:7px}
.demo-tab{border:0;border-left:3px solid transparent;border-radius:5px;background:transparent;color:#c6cec1;text-align:left;cursor:pointer;font:inherit;font-size:15px;padding:13px 10px;min-height:46px}
.demo-tab:hover{background:#172015;color:white}
.demo-tab[aria-selected=true]{border-left-color:#76a856;background:#192216;color:white}
.demo-tab:focus-visible{outline:2px solid #a3cf86;outline-offset:2px}
.demo-sidebar-note{font-size:12px;line-height:1.5;color:#aab4a4;margin:auto 8px 0}
.demo-workspace{min-width:0;background:#fbfcfa}
.demo-topbar{padding:17px 23px;border-bottom:1px solid #e0e4dc;background:white;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;color:#5b6556}
.demo-badge{border:1px solid #dde3d8;border-radius:3px;padding:5px 8px;color:#4d5a44;font-size:12px;white-space:nowrap}
.demo-panels{display:grid;padding:26px 23px 25px}
.demo-panel{grid-area:1/1;visibility:hidden;pointer-events:none;min-width:0;display:flex;flex-direction:column}
.demo-panel.is-active{visibility:visible;pointer-events:auto}
.demo-panel-heading{margin-bottom:22px;min-height:66px}
.demo-panel-heading h3{font-size:26px;line-height:1.2;letter-spacing:-.035em;margin:0 0 8px;font-weight:600;color:#131713}
.demo-panel-heading p{font-size:14px;line-height:1.5;color:#626b5d;margin:0}
.demo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:20px}
.demo-metric{padding:17px 14px;border:1px solid #dfe4da;border-radius:7px;background:white;min-width:0}
.demo-metric>span{display:block;font-size:12px;line-height:1.3;color:#56604f;min-height:31px}
.demo-metric>strong{display:block;font-size:clamp(24px,2.4vw,31px);line-height:1.2;font-weight:600;letter-spacing:-.035em;margin:2px 0 10px;color:#11170e}
.demo-metric small{display:block;font-size:12px;line-height:1.4;color:#697261;min-height:34px}
.demo-detail-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:18px;flex:1}
.demo-card{background:white;border:1px solid #dfe4da;border-radius:7px;padding:20px;min-width:0}
.demo-card h4{font-size:17px;line-height:1.3;font-weight:600;margin:0 0 6px;color:#192215;letter-spacing:-.015em}
.demo-card-note{font-size:12px;color:#6b7661;margin:0 0 17px;line-height:1.5}
.demo-bars{height:218px;display:flex;gap:12px;align-items:stretch}
.demo-bar-column{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;text-align:center}
.demo-bar-value,.demo-bar-label{font-size:12px;color:#5b6652;line-height:1.4}
.demo-bar-space{height:175px;display:flex;align-items:flex-end;justify-content:center;margin:6px 0 9px;border-bottom:1px solid #e3e8df}
.demo-bar-space i{display:block;width:80%;max-width:35px;border-radius:3px 3px 0 0;background:#38761d}
.demo-rows{margin-top:13px}
.demo-rows>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #e9ede4;font-size:14px;line-height:1.4}
.demo-rows>div:last-child{border-bottom:0}
.demo-rows small{display:block;font-size:12px;color:#6b7661;margin-top:4px}
.demo-rows strong{font-size:13px;color:#38761d;font-weight:500;white-space:nowrap}
.demo-team-bars{display:flex;flex-direction:column;gap:28px;margin-top:28px}
.demo-team-bars span{display:flex;justify-content:space-between;font-size:14px;margin-bottom:12px}
.demo-team-bars strong{font-weight:500;color:#38761d}
.demo-team-bars i{display:block;width:var(--bar-width);height:16px;border-radius:2px;background:#38761d}
.demo-system-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:19px}
.demo-system-grid>div{border:1px solid #e5eade;border-radius:5px;padding:17px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.demo-system-grid img{height:26px;width:26px}
.demo-system-grid strong{font-size:14px;font-weight:500}
.demo-system-grid span{font-size:12px;color:#66715c}
.demo-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;border-top:1px solid #e0e5db;padding:20px 24px;background:#fff}
.demo-footer strong{font-size:16px;font-weight:500;line-height:1.4}
.demo-footer p{font-size:13px;color:#626d58;line-height:1.5;margin:6px 0 0}
.demo-playback{display:flex;align-items:center;gap:18px;flex-shrink:0;font-size:13px;color:#65705b}
.demo-playback button{font:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:11px 15px;min-height:44px;border:1px solid #bfcbb6;border-radius:3px;color:#2c551a;background:white;min-width:116px}
.demo-playback button:hover{background:#f1f5ed}
.demo-playback button:focus-visible{outline:2px solid #38761d;outline-offset:3px}
.demo-playback button[hidden]{display:none}
.demo-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1000px){.demo-shell{grid-template-columns:155px minmax(0,1fr)}.demo-sidebar{padding:22px 12px}.demo-brand{font-size:13px;gap:8px}.demo-brand img{width:25px;height:25px;flex-basis:25px}.demo-panels{padding:22px 18px}.demo-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-metric>span,.demo-metric small{min-height:0}.demo-detail-grid{grid-template-columns:1fr}.demo-rows>div{padding:11px 0}.demo-card{padding:18px}.demo-bars{height:195px}.demo-bar-space{height:155px}.demo-team-bars{margin:22px 0 26px}.demo-system-grid>div{padding:20px 15px}}
@media(max-width:640px){.demo-shell{grid-template-columns:1fr}.demo-sidebar{padding:18px 15px 12px;gap:18px}.demo-brand{font-size:15px}.demo-brand img{width:28px;height:28px;flex-basis:28px}.demo-brand br{display:none}.demo-brand span{max-width:220px}.demo-tablist{flex-direction:row;gap:3px;overflow:auto}.demo-tab{flex:1 0 auto;text-align:center;min-height:44px;padding:11px 7px;font-size:14px;border-left:0;border-bottom:2px solid transparent;border-radius:2px}.demo-tab[aria-selected=true]{border-bottom-color:#76a856}.demo-sidebar-note{display:none}.demo-topbar{padding:13px 15px;font-size:12px;gap:8px;flex-wrap:wrap}.demo-badge{font-size:12px}.demo-panels{padding:23px 15px}.demo-panel-heading{min-height:87px;margin-bottom:18px}.demo-panel-heading h3{font-size:24px}.demo-panel-heading p{font-size:14px}.demo-metrics{gap:9px;margin-bottom:15px}.demo-metric{padding:15px 12px}.demo-metric>strong{font-size:28px}.demo-metric>span{min-height:31px}.demo-metric small{min-height:34px}.demo-detail-grid{gap:15px}.demo-card{padding:17px 14px}.demo-bars{gap:8px}.demo-footer{align-items:flex-start;padding:18px 16px;flex-direction:column;gap:15px}.demo-playback{width:100%;justify-content:space-between}.demo-footer strong{font-size:15px}}