:root{color:#152033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#edf1f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;height:100vh;margin:0;overflow:hidden}button,input,textarea{font:inherit}.shell{grid-template-columns:minmax(320px,420px) minmax(0,1fr);height:100vh;display:grid;overflow:hidden}.panel{background:#fff;border-right:1px solid #d9e0ea;flex-direction:column;gap:22px;padding:28px;display:flex;overflow:auto}.brand{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.kicker{color:#5f6f86;text-transform:uppercase;margin:0 0 8px;font-size:.78rem;font-weight:700}h1{color:#101827;margin:0;font-size:1.7rem;line-height:1.1}.status{color:#12683b;text-align:center;background:#e9f7ef;border-radius:999px;min-width:76px;padding:7px 10px;font-size:.78rem;font-weight:700}.controls{grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;display:grid}.python-runtime{color:#52647d;background:#eef4fb;border-radius:7px;grid-column:1/-1;min-height:30px;padding:7px 10px;font-size:.78rem;font-weight:800}.python-runtime[data-status=loading]{color:#7a4a06;background:#fff4d6}.python-runtime[data-status=ready]{color:#12683b;background:#e9f7ef}.python-runtime[data-status=error]{color:#9a1b1b;background:#ffe7e7}button{color:#fff;cursor:pointer;background:#1f6feb;border:0;border-radius:7px;min-height:42px;font-weight:700}button:hover{background:#195fc9}button.secondary{color:#1b2738;background:#edf2f7}button.secondary:hover{background:#dfe7f0}.joint-list{gap:15px;display:grid}.joint{background:#fbfcfe;border:1px solid #dde5ef;border-radius:8px;grid-template-columns:44px minmax(0,1fr) 76px;align-items:center;gap:12px;padding:12px;display:grid}.joint span{color:#30415a;font-size:.8rem;font-weight:800}.joint output{color:#52647d;text-align:right;font-size:.82rem}input[type=range]{accent-color:#1f6feb;width:100%}.code-panel{gap:10px;display:grid}.code-panel span{color:#30415a;font-size:.82rem;font-weight:800}.code-panel textarea{resize:vertical;color:#dbeafe;background:#0f1724;border:1px solid #d8e1ed;border-radius:8px;width:100%;min-height:210px;padding:12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.82rem;line-height:1.45}.code-panel textarea:focus{outline-offset:2px;outline:2px solid #8bbcff}.metrics{grid-template-columns:1fr 1fr;gap:10px;display:grid}.metrics div{background:#f4f7fb;border:1px solid #dfe7f0;border-radius:8px;min-height:68px;padding:12px}.metrics span,.spec span{color:#63758d;font-size:.78rem;display:block}.metrics strong{color:#142033;margin-top:8px;font-size:1.08rem;display:block}.spec{grid-template-columns:1fr 1fr;gap:8px;display:grid}.spec span{color:#17456f;background:#edf6ff;border-radius:7px;padding:8px 10px;font-weight:700}.log{color:#d7e7ff;white-space:pre-wrap;background:#101827;border-radius:8px;min-height:150px;margin:0;padding:14px;font-size:.83rem;line-height:1.55;overflow:auto}.viewport{background:#edf1f7;height:100vh;position:relative;overflow:hidden}.viewport>canvas{width:100%;height:100%;display:block}.camera-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #a0aec08c;border-radius:8px;width:min(560px,100% - 36px);padding:12px;position:absolute;bottom:18px;right:18px;box-shadow:0 18px 45px #0f172424}.camera-panel__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.camera-panel__header span{color:#24344b;font-size:.86rem;font-weight:800}.camera-panel__header strong{color:#51657f;font-size:.78rem}.camera-frames{grid-template-columns:1fr 1fr;gap:10px;display:grid}.camera-frames figure{margin:0}.camera-frames canvas{aspect-ratio:4/3;background:#101827;border:1px solid #d6dfeb;border-radius:6px;width:100%;height:auto;display:block}.camera-frames figcaption{color:#5f7088;margin-top:5px;font-size:.74rem;font-weight:700}.detection-list{gap:6px;margin-top:10px;display:grid}.detection-item{color:#4d6078;background:#f4f7fb;border-radius:6px;grid-template-columns:12px minmax(92px,1fr) auto auto;align-items:center;gap:8px;min-height:28px;padding:6px 8px;font-size:.74rem;display:grid}.detection-item strong{color:#1d2c40}.swatch{border-radius:999px;width:10px;height:10px}.empty-detections{color:#63758d;font-size:.78rem}@media (width<=820px){.shell{grid-template-columns:1fr}.panel{border-bottom:1px solid #d9e0ea;border-right:0}.viewport,.viewport>canvas{height:58vh}.camera-panel{width:auto;margin:12px;position:static}}@media (width<=460px){.panel{padding:18px}.controls,.metrics,.spec,.camera-frames{grid-template-columns:1fr}.detection-item{grid-template-columns:12px 1fr}}