*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:#203147;font:13px system-ui,-apple-system,sans-serif}header{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.mark{background:#263c57;color:white;border-radius:10px;padding:8px 12px;font-weight:700}h1{font-size:18px;letter-spacing:-.5px;margin:0}.badge{color:#7b8797;border-left:1px solid #d4dce5;padding-left:12px}#status{color:#7b8797;font-size:12px}main{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 26px}section{min-width:0;border:1px solid #dde4ec;border-radius:16px;background:white;overflow:hidden;box-shadow:0 5px 22px #1b304607}.panel-head,.panel-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:13px 16px;min-height:58px}h2{font-size:14px;font-weight:600;margin:0}.tabs,.actions{display:flex;gap:4px}.tabs{background:#eef2f6;border-radius:8px;padding:3px}button,select{font:inherit;color:inherit;border:1px solid #dce4ec;background:white;padding:7px 11px;border-radius:7px;cursor:pointer}button:hover{background:#edf2f7}button[aria-pressed=true]{color:#1f5c90;background:#eaf3fc;border-color:#b9d3eb}.tabs button{border:0;background:transparent;color:#7b8797}.tabs button[aria-pressed=true]{background:white;color:#253d59;box-shadow:0 1px 4px #20314712}.viewport{height:58vh;min-height:360px;position:relative;background:#101925;overflow:hidden}#frame-host{display:flex;align-items:center;justify-content:center}#frame-stage{position:relative}#rgb{display:block;width:100%;height:100%;object-fit:contain}#frame-canvas{position:absolute;inset:0}canvas{display:block;width:100%;height:100%}#cloud-canvas{position:absolute;inset:0}.view-label{position:absolute;left:14px;top:13px;color:#edf3fcaa;background:#1019258c;border:1px solid #ffffff15;border-radius:6px;padding:5px 8px;font-size:11px;pointer-events:none}#selection{position:absolute;bottom:16px;left:16px;max-width:85%;background:#f8fbfff2;color:#172f48;border:1px solid #fff;padding:10px 15px;border-radius:9px;box-shadow:0 4px 20px #0003}.panel-foot{justify-content:flex-start;gap:10px;font-size:12px;border-top:1px solid #edf1f5}.panel-foot label{display:flex;align-items:center;gap:8px;color:#6a7a8c}.panel-foot input{width:85px}.panel-foot select{margin-left:auto;min-width:120px;max-width:200px}input[type=range]{accent-color:#3977ab;cursor:pointer}.timeline{display:flex;align-items:center;gap:12px;padding:22px 28px 14px}.timeline #seek{flex:1}.timeline output{font-variant-numeric:tabular-nums;min-width:76px;text-align:center;color:#5d7085}#frames{display:flex;gap:8px;overflow:auto;padding:0 28px 22px}#frames button{flex:none;width:100px;padding:4px;border-radius:8px;font-size:10px;color:#78889a}#frames img{display:block;width:90px;height:51px;object-fit:cover;border-radius:4px;margin-bottom:3px}#frames button.active{border-color:#4885b5;background:#e9f3fd;color:#235981}[hidden]{display:none!important}button:focus-visible,select:focus-visible{outline:2px solid #508ab9;outline-offset:2px}

.source-control{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:22px;color:#687b90;font-size:12px}.source-control select{min-width:140px}button:disabled{opacity:.4;cursor:default}