:root {color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#08111b;color:#ecf5ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 70% -20%,#17334a 0%,#08111b 58%);min-height:100vh}
.app{max-width:1360px;margin:0 auto;padding:14px 22px 10px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.eyebrow{color:#45d7ce;font-size:10px;letter-spacing:1.8px;font-weight:800;margin:0 0 3px}
h1{font-size:clamp(23px,2.6vw,32px);line-height:1.15;margin:0 0 3px}
.subhead{color:#a4b5c8;margin:0;font-size:12px}
.privacy{border:1px solid #215e5c;background:#102b30;color:#70e5db;border-radius:20px;padding:7px 11px;font-size:11px;white-space:nowrap}
.layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:12px;align-items:start}
.panel{background:#132231;border:1px solid #294053;border-radius:15px;overflow:hidden}
.video-panel{padding:12px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.section-heading h2{font-size:14px;margin:0}.section-heading span{font-size:11px;color:#88a5b8}
.video-shell{position:relative;aspect-ratio:16/9;max-height:min(39vh,360px);background:#060b12;border-radius:10px;overflow:hidden}
.video-shell video,.video-shell canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.video-shell canvas{pointer-events:none}
.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c9d8e7;text-align:center;padding:12px}
.camera-placeholder .face-icon{font-size:40px;color:#3db6b3;margin-bottom:3px}.camera-placeholder strong{font-size:16px}.camera-placeholder p{font-size:11px;color:#91a5ba;margin:6px 0 0}
.roi-selector{border:1px solid #29495a;border-radius:10px;padding:9px;margin:9px 0 6px;background:#0d1d2a}
.roi-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}.roi-heading span{color:#58ddd4;font-size:11px}
.roi-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.roi-buttons button{border:1px solid #376073;background:#203446;color:#d6e7f4;font-size:10px;line-height:1.15;text-align:center;border-radius:7px;padding:7px 4px;min-height:30px;min-width:0;font-weight:600;cursor:pointer}
.roi-buttons button.selected{background:#21adab;color:#061b22;border-color:#54ede2}.roi-buttons button:disabled{opacity:.5;cursor:default}
.roi-hint{color:#a3b9cb;font-size:10px;margin:6px 0 0;line-height:1.3}
.instructions{min-height:28px;display:flex;align-items:center;color:#c8d9e9;font-size:11px;line-height:1.35;padding:3px 0}
.actions{display:flex;gap:7px;flex-wrap:nowrap}
.actions button{font:inherit;font-size:12px;font-weight:700;border:0;border-radius:9px;padding:10px 9px;cursor:pointer;flex:1;min-height:39px}
.actions #previewBtn{background:#273b4c;color:#e2eef8}.actions #startBtn{background:#35d4c6;color:#071a24}.actions #stopBtn{flex:0 0 65px;background:#273b4c;color:#e2eef8}
button:disabled{opacity:.45;cursor:default}
.metrics{display:flex;flex-direction:column;gap:12px}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metric{padding:14px 16px;min-height:115px}.metric p{font-size:10px;color:#a5bbcf;letter-spacing:.8px;font-weight:800;margin:0}
.number{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px}.number span{font-size:clamp(31px,3vw,43px);line-height:1;font-weight:750;letter-spacing:-2px}.number small{font-size:12px;color:#94a9bc}
.metric-footer{color:#69cdc6;font-size:11px}.wave-panel{padding:14px;min-height:176px}.wave-panel canvas{width:100%;height:82px;display:block}
.progress{height:6px;border-radius:10px;background:#253b4a;margin-top:12px;overflow:hidden}.progress>div{height:100%;width:0;background:#40d2c4;transition:width .3s}
.tiny{font-size:11px;color:#a9bed0;margin:9px 0 0}footer{margin-top:12px;color:#9db0c0;font-size:10px;line-height:1.4}footer p{margin:4px 0}footer strong{color:#dce9f1}
[hidden]{display:none!important}
@media(min-width:1000px) and (max-height:740px){.app{padding-top:8px}.header{margin-bottom:9px}.video-shell{max-height:32vh}.metric{min-height:101px;padding:11px 14px}.wave-panel{min-height:155px}.wave-panel canvas{height:68px}}
@media(max-width:850px){.app{padding:12px}.layout{grid-template-columns:1fr}.video-shell{max-height:none;aspect-ratio:16/9}.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:10px;min-height:100px}.metric p{font-size:9px}.number span{font-size:30px}.number small{font-size:10px}.metric-footer{font-size:10px}.wave-panel{min-height:150px}.wave-panel canvas{height:70px}}
@media(max-width:600px){.header{flex-wrap:wrap;gap:7px}.privacy{font-size:10px;padding:5px 9px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roi-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.video-shell{aspect-ratio:4/3}.actions{flex-wrap:wrap}.actions #previewBtn,.actions #startBtn{flex:1 1 42%}.actions #stopBtn{flex:1 1 100%}}
@media(max-width:360px){.app{padding:8px}.video-panel{padding:9px}.roi-buttons button{font-size:10px}.metric{padding:10px}}

/* Version 2.2: visible and compact at 100% zoom */
.app{max-width:1500px;padding:9px 16px 8px}
.header{margin-bottom:8px}
.video-shell{aspect-ratio:16/8.2;max-height:min(33vh,280px)}
.roi-selector{margin:7px 0 4px;padding:7px}
.roi-buttons button{min-height:32px}
.metric{min-height:100px;padding:11px 13px}
.metrics{gap:8px}.metrics-grid{gap:8px}
.wave-panel{min-height:153px;padding:11px}.wave-panel canvas{height:67px}
.build-label{color:#54ede2;font-weight:700;letter-spacing:.3px}
.camera-placeholder{background:#060b12}
@media(max-width:850px){.video-shell{aspect-ratio:16/9;max-height:none}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.layout-switch{margin:9px 0 0;font-size:12px}
.layout-switch a{color:#71e8db;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:4px 0}