:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;background:#07121d;color:#e8f3fc}*{box-sizing:border-box}body{margin:0}header{height:94px;border-bottom:1px solid #1d4b70;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}h1{font-size:22px;margin:0;font-weight:600}header p{margin:4px 0;color:#9fb0c4;font-size:14px}#status{color:#00e8ff;font-size:14px}main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:26px}.monitor{position:relative;align-self:start;background:#000;border:1px solid #1d4b70}canvas{width:100%;display:block;aspect-ratio:1344/704;object-fit:contain}footer{height:48px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid #1d4b70;background:#0d1d2c;font-size:12px;color:#9fb0c4}.empty{position:absolute;inset:0 0 48px;display:grid;place-items:center;color:#9fb0c4}aside{padding:0 2px}h2{font-size:15px;margin:0 0 14px}aside h2:not(:first-child){border-top:1px solid #1d4b70;padding-top:20px;margin-top:24px}label{display:block;font-size:12px;color:#9fb0c4;margin:12px 0}select,input,button{font:inherit}select,input{display:block;width:100%;margin-top:7px;border:1px solid #1d4b70;border-radius:4px;padding:9px;background:#102538;color:#e8f3fc}button{border:1px solid #1d4b70;border-radius:4px;padding:9px 12px;background:#15344b;color:#e8f3fc;cursor:pointer}button:hover{border-color:#00e8ff}button:disabled{opacity:.4;cursor:default}.buttons{display:flex;gap:8px;margin:14px 0}p{color:#9fb0c4;font-size:12px;line-height:1.55}.file input{font-size:12px}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #00e8ff;outline-offset:2px}@media(max-width:800px){main{grid-template-columns:1fr;padding:14px}header{padding:14px;height:88px}aside{max-width:600px}#status{max-width:45%;text-align:right}}

[hidden]{display:none!important}
body.embedded header{height:46px;padding:8px 14px}body.embedded header>div{display:none}body.embedded #status{max-width:100%;text-align:left}body.embedded main{display:block;padding:12px}body.embedded canvas{height:260px;aspect-ratio:auto;object-fit:contain}body.embedded aside{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;max-width:none;padding-top:12px}body.embedded aside h2,body.embedded aside>p{display:none}body.embedded aside label{margin:0}body.embedded .buttons{flex-wrap:wrap;margin:0}body.embedded #hostNote{display:block;grid-column:1/-1;margin:0}body.embedded .fallback{grid-column:1/-1;font-size:12px}body.embedded footer{height:auto;min-height:48px;gap:8px}body.embedded #metrics{overflow-wrap:anywhere}body.embedded .empty{padding:16px;text-align:center}@media(max-width:550px){body.embedded canvas{height:170px}body.embedded aside{grid-template-columns:1fr}body.embedded #hostNote,body.embedded .fallback{grid-column:1}}
body.embedded #stopHost{display:none}
#timingReport{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}body.embedded aside>details:not(.fallback){grid-column:1/-1}
body.observer-only aside>label:has(#source),body.observer-only aside>label:has(#captureMode),body.observer-only aside>.buttons{display:none}