:root{--ink:#1c3047;--muted:#53697f;--blue:#1764c0;--line:#dbe5ef;--paper:#f3f7fb}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 'Rubik',sans-serif}a{color:var(--blue);text-underline-offset:4px}button,select{font:inherit}button,a,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #1764c0;outline-offset:3px}.rail{position:fixed;inset:0 auto 0 0;width:76px;background:white;border-right:1px solid var(--line);padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:35px}.rail img{width:58px;object-fit:contain}.rail a{font-size:12px;font-weight:600;text-decoration:none}main{margin-left:76px;padding:0 24px;max-width:1800px}header{display:flex;align-items:center;gap:25px;min-height:65px;border-bottom:1px solid var(--line);font-size:13px}header strong{margin-left:auto;color:#78540d;background:#fff3d7;padding:6px 10px;border-radius:6px;font-size:12px}header>div span{color:var(--muted)}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0 20px}h1,h2,h3,p{margin:0}h1{font-size:29px;font-weight:600;letter-spacing:-.02em}.page-heading p{color:var(--muted);margin-top:5px}.filters{display:flex;align-items:center;gap:22px}.filters label{font-size:12px;color:var(--muted)}select{display:block;max-width:100%;padding:9px 12px;background:white;border:1px solid #b7cadc;border-radius:6px;color:var(--ink)}.date{font-size:12px;color:var(--muted)}nav{display:flex;gap:8px;margin-bottom:22px}nav button{padding:9px 16px;border:1px solid var(--line);background:white;border-radius:6px;color:var(--muted);cursor:pointer}nav button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}#data-error{font-size:14px;margin:15px 0;color:var(--muted)}#data-error:empty{display:none}.top-grid{display:grid;grid-template-columns:4fr 1.1fr;gap:16px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric,.profiles,.panel{background:white;border:1px solid var(--line);border-radius:9px;padding:17px}.metric{min-height:115px}.metric h2{font-size:14px;font-weight:600;color:#465d72;line-height:1.25}.metric strong{display:block;font-size:31px;line-height:1.2;margin-top:13px;font-weight:600;letter-spacing:-.02em}.metric p{font-size:12px;color:var(--muted);margin-top:8px}.metric:nth-child(2) strong,.metric:nth-child(3) strong,.metric:nth-child(6) strong{color:#23834d}.metric:nth-child(4) strong{color:#c33a43}.metric:nth-child(7) strong{color:#8645bc}.metric:nth-child(8) strong{font-size:25px;color:#a4591b}.profiles h2,.panel h2{font-size:17px;font-weight:600}.profiles{padding:17px 14px}.donut{width:130px;height:130px;margin:14px auto;border-radius:50%;display:grid;place-items:center}.donut>div{width:88px;height:88px;background:white;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut strong{font-size:28px;line-height:1}.donut span{font-size:11px;color:var(--muted)}.legend{font-size:12px;display:grid;gap:5px}.legend>div{display:flex;align-items:center;gap:7px}.legend i{width:8px;height:8px;display:inline-block;border-radius:50%}.legend b{margin-left:auto}.profiles>p{font-size:11px;color:var(--muted);margin-top:12px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.panel-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:15px}.panel-heading>span{font-size:12px;color:var(--muted)}.feeds{display:grid;grid-template-columns:1fr 1fr;gap:10px}.feed{position:relative;aspect-ratio:16/9;background:#e6eef4;overflow:hidden;border-radius:6px}.feed img{width:100%;height:100%;object-fit:cover}.feed .cam-name{position:absolute;left:7px;top:7px;font-size:11px;color:white;background:#132d43e6;padding:3px 7px;border-radius:4px}.feed .state{position:absolute;right:7px;top:7px;font-size:10px;background:#e6f8ee;color:#19613b;padding:3px 5px;border-radius:4px}.feed.offline img{filter:grayscale(1);opacity:.3}.feed.offline .state{background:#fff0ee;color:#963e37}.feed.offline:after{content:'OFFLINE · SYNTHETIC';position:absolute;top:45%;left:10%;right:10%;font-size:12px;font-weight:600;text-align:center;color:#30485c}.footnote{font-size:11px;color:var(--muted);margin-top:12px}.floor{position:relative;aspect-ratio:600/390;background:#f7faff;border-radius:8px;overflow:hidden}.floor svg,.floor canvas,#zone-labels{position:absolute;inset:0;width:100%;height:100%}.zone-label{position:absolute;transform:translate(-50%,-50%);background:#fffffff0;border:1px solid #d5e2ec;border-radius:6px;min-width:98px;padding:7px 10px;text-align:center;font-size:11px;color:var(--muted)}.zone-label strong{display:block;font-size:17px;color:var(--ink)}.zone-label b{font-size:11px;color:#167046}.heat-legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);margin-top:10px}.heat-legend i{width:140px;height:7px;background:linear-gradient(90deg,#526cff,#36c4d6,#6ce85c,#f6e645,#f65440);border-radius:5px}.hourly{margin-top:16px}.hourly-bars{height:140px;display:flex;align-items:end;gap:12px;padding-top:25px}.hour{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px;min-width:0}.hour i{display:block;width:65%;max-width:40px;background:#69a1e7;border-radius:4px 4px 0 0;min-height:2px}.hour.peak i{background:#1764c0}.hour b{font-size:11px;font-weight:600}.hour span{font-size:10px;color:var(--muted)}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:650px;margin-top:25px}td,th{text-align:left;padding:15px 12px;border-bottom:1px solid var(--line);font-size:14px}dt{font-weight:600;margin-top:20px}dd{margin:5px 0 0;color:var(--muted);max-width:85ch}#definitions h3{margin-top:30px}#definitions li{margin:12px 0;color:var(--muted)}footer{display:flex;gap:25px;justify-content:space-between;padding:25px 0;font-size:12px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:1100px){.rail{width:65px}main{margin-left:65px;padding:0 18px}.top-grid{grid-template-columns:3fr 1fr}.metrics{grid-template-columns:repeat(3,1fr)}.metric{padding:14px}.metric strong{font-size:28px}.metric:nth-child(8) strong{font-size:23px}.bottom-grid{grid-template-columns:1fr 1fr}.zone-label{min-width:80px;padding:5px}.zone-label strong{font-size:15px}}@media(max-width:750px){.rail{position:static;width:100%;height:auto;flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:12px 5%;gap:25px}.rail img{width:80px}main{margin:0;padding:0 5%}header{flex-wrap:wrap;gap:10px;padding:15px 0}header strong{margin-left:0}header>a{margin-left:auto}.page-heading{display:block}h1{font-size:27px}.filters{margin-top:20px;justify-content:space-between;gap:10px}.filters label{max-width:70%}.top-grid{display:block}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric h2{font-size:13px}.metric strong{font-size:29px}.profiles{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.profiles h2,.profiles>p{grid-column:1/-1}.donut{margin:0 auto}.legend{align-content:center;font-size:13px}.bottom-grid{display:block}.bottom-grid>.panel{margin-top:14px}.panel{padding:14px}.feed .cam-name{font-size:10px;max-width:65%;top:5px;left:5px}.feed .state{font-size:9px;top:5px;right:4px}.zone-label{min-width:76px;font-size:10px;padding:5px}.zone-label strong{font-size:15px}.zone-label b{font-size:10px}.panel-heading{align-items:start}.panel-heading>span{text-align:right}.hourly-bars{gap:5px;overflow:auto}.hour span{font-size:9px}.hour b{font-size:10px}footer{display:block}footer span{display:block;margin-top:10px}nav{gap:6px}nav button{font-size:13px;padding:9px 11px}}
@media(min-width:751px) and (max-width:1100px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{padding:12px;min-height:120px}.metric h2{font-size:12px}.metric strong{font-size:26px}.metric:nth-child(8) strong{font-size:20px}.metric p{font-size:11px}.profiles{min-width:0}.profiles h2{font-size:15px}.legend{font-size:11px}}
/* Retain the reference grid; simplify its content for the CEO view. */
.period-controls{margin-left:auto;display:flex;gap:4px}.period-controls button{padding:9px 14px}.profiles .legend>div{font-size:12px}.profiles .legend b{font-weight:600}.panel-heading #sample-pulse{border:1px solid #b7cadc;background:#f2f7fc;border-radius:5px;color:#235278;padding:6px 9px;font:600 12px 'Rubik';cursor:pointer;white-space:nowrap;margin-left:auto}.feed .frame-time{position:absolute;bottom:6px;left:7px;background:#102638d9;color:white;padding:2px 5px;border-radius:3px;font-size:10px}.feed.is-fresh{animation:frame-refresh .65s ease-out}.hourly-bars{gap:8px}.hour{min-width:11px}@keyframes frame-refresh{from{outline:3px solid #2e82d3;outline-offset:-3px}to{outline:3px solid transparent;outline-offset:-3px}}@media(max-width:750px){nav{flex-wrap:wrap}.period-controls{flex-basis:100%;margin:7px 0 0}.period-controls button{flex:1}.panel-heading{flex-wrap:wrap}.panel-heading #sample-pulse{margin-left:auto}.panel-heading #feed-count{width:100%;text-align:left}.hourly-bars{gap:4px}.hour span{font-size:9px}.profiles .legend>div{font-size:11px}}
@media(prefers-reduced-motion:reduce){.feed.is-fresh{animation:none}}
/* Reference alignment: compact KPI rows, gender donut, tight central seam. */
.top-grid{gap:10px;grid-template-columns:minmax(0,4fr) minmax(190px,1.05fr)}.metrics{gap:10px;grid-template-rows:1fr 1fr}.metric{min-height:100px;padding:14px}.metric strong{margin-top:8px;font-size:30px}.metric p{margin-top:5px;font-size:11px}.profiles{padding:13px 15px}.profiles h2{font-size:14px}.donut{width:106px;height:106px;margin:8px auto;position:relative}.donut>div{width:72px;height:72px}.donut strong{font-size:25px}.donut span{font-size:10px}.legend{gap:3px}.profiles>p{font-size:10px;margin-top:7px}.bottom-grid{gap:10px;margin-top:10px}.bottom-grid>.panel{padding:13px}.panel-heading{margin-bottom:10px}.panel-heading>span{font-size:11px}.feeds{gap:8px}.person-icon{position:absolute;width:31px;height:36px;top:37px;background:white;border-radius:50%;display:grid;place-items:center;border:1px solid #c7d8ec;z-index:1}.person-icon.male{left:-16px;color:#2d7df4}.person-icon.female{right:-16px;color:#ed55af}.person-icon svg{width:19px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.operator{display:flex;align-items:center;gap:7px;font-size:12px;color:#23405c}.operator small{font-size:10px;color:#64798d}.operator-avatar{width:29px;height:29px;border-radius:50%;background:#dceafa;overflow:hidden;display:grid;place-items:center}.operator-avatar svg{width:25px;height:25px;fill:#467296;stroke:#467296;stroke-width:1}.panel-heading #sample-pulse{font-size:11px;padding:5px 7px}.feed .state{background:#e84555;color:white;font-size:10px}.feed .frame-time{font-size:10px}.hourly{display:none}.footnote{font-size:10px;margin-top:8px}.floor{aspect-ratio:600/395}.page-heading{padding:21px 0 16px}nav{margin-bottom:15px}.profiles .legend>div{font-size:11px}.feed img{transition:transform 5s linear}.feed.demo-active img{animation:demo-view 16s ease-in-out infinite alternate;transform-origin:center}@keyframes demo-view{from{transform:scale(1.01)}to{transform:scale(1.035)}}
@media(min-width:751px) and (max-width:1100px){.top-grid{grid-template-columns:minmax(0,4fr) minmax(170px,1.05fr)}.metric{min-height:98px;padding:11px}.metric h2{font-size:12px}.metric strong{font-size:27px}.metric p{font-size:10px}.profiles{padding:12px}.donut{width:100px;height:100px;margin:8px auto}.donut>div{width:68px;height:68px}.legend{font-size:10px}.profiles>p{font-size:10px;line-height:1.25}.operator{display:none}}
@media(max-width:750px){.top-grid{display:block}.profiles{display:grid;grid-template-columns:1fr 1fr;align-items:center}.profiles h2,.profiles>p{grid-column:1/-1}.donut{margin:8px auto}.metric{min-height:115px;padding:13px}.metric h2{font-size:13px}.metric p{font-size:11px}.metric strong{font-size:28px}.operator{display:none}.bottom-grid>.panel{margin-top:10px}.panel-heading{gap:8px}.panel-heading #feed-count{width:auto}.footnote{font-size:11px}}
@media(prefers-reduced-motion:reduce){.feed.demo-active img{animation:none}}

/* Equal-height feed and heatmap regions, as in the reference. */
.floor{aspect-ratio:1.88}.feed{aspect-ratio:16/10}.bottom-grid{align-items:start}.operator{display:flex}header>a{font-size:11px}header{gap:15px}.person-icon.male{color:#2d7df4}.person-icon.female{color:#ed55af}@media(max-width:750px){.operator{display:none}.floor{aspect-ratio:1.5}}