*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#0d0d10}.app{color:#e0e0eb;background:#0d0d10;flex-direction:column;min-height:100svh;font-family:Segoe UI,system-ui,sans-serif;display:flex}.header{background:#111116;border-bottom:1px solid #1e1e2a;align-items:center;gap:16px;padding:16px 24px;display:flex}.header h1{letter-spacing:-.3px;color:#f0f0ff;margin:0;font-size:20px;font-weight:600}.badge{letter-spacing:.5px;text-transform:uppercase;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600}.badge.ready{color:#0f8;background:#00ff8826;border:1px solid #00ff884d}.badge.loading{color:#ffc800;background:#ffc8001f;border:1px solid #ffc8004d;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main{flex-direction:column;flex:1;align-items:center;gap:20px;width:100%;max-width:900px;margin:0 auto;padding:24px 16px;display:flex}.error{color:#f68;background:#ff33551f;border:1px solid #ff335559;border-radius:8px;width:100%;padding:12px 16px;font-size:14px}.viewport{aspect-ratio:16/9;background:#111116;border:1px solid #1e1e2a;border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:800px;display:flex;position:relative;overflow:hidden}.video-hidden{display:none}.canvas{object-fit:contain;width:100%;height:100%;display:block}.canvas.hidden{display:none}.placeholder{color:#444460;text-align:center;flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex}.placeholder svg{opacity:.5}.placeholder p{margin:0;font-size:15px}.placeholder .hint{color:#333348;font-family:monospace;font-size:12px}.controls{gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 32px;font-size:15px;font-weight:600;transition:opacity .15s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-start{color:#000;background:#0f8}.btn-start:hover:not(:disabled){opacity:.88}.btn-stop{color:#fff;background:#f35}.btn-stop:hover{opacity:.88}.marker-panel{background:#111116;border:1px solid #1e1e2a;border-radius:12px;width:100%;max-width:800px;padding:16px 20px}.marker-panel h2{letter-spacing:.8px;text-transform:uppercase;color:#555570;margin:0 0 12px;font-size:13px;font-weight:600}.no-markers{color:#333348;margin:0;font-size:14px}.marker-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.marker-item{background:#0d0d10;border:1px solid #1a1a24;border-radius:6px;align-items:baseline;gap:12px;padding:8px 12px;display:flex}.marker-id{color:#0f8;min-width:56px;font-family:monospace;font-size:16px;font-weight:700}.marker-corners{color:#44445a;word-break:break-all;font-family:monospace;font-size:11px}