*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0f;justify-content:center;min-height:100vh;padding:2rem;font-family:SF Mono,Fira Code,monospace;display:flex}#app{flex-direction:column;align-items:center;gap:1rem;max-width:700px;display:flex}h1{color:#888;letter-spacing:.05em;font-size:1.2rem;font-weight:400}#viewport{background:#111;border:1px solid #222;border-radius:4px;display:inline-block;position:relative;overflow:hidden}#video{width:640px;max-width:100%;transition:opacity .3s;display:block;transform:scaleX(-1)}#canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}#toolbar{gap:.75rem;display:flex}button{color:#00ffc8;cursor:pointer;background:#1a1a2e;border:1px solid #00ffc844;border-radius:4px;padding:.5rem 1.2rem;font-family:inherit;font-size:.85rem;transition:background .2s,border-color .2s}button:hover:not(:disabled){background:#1e2a3a;border-color:#00ffc8}button:disabled{color:#444;cursor:default;border-color:#222}#controls{align-items:center;gap:1.5rem;display:flex}.control-group{flex-direction:column;gap:.4rem;display:flex}.control-group label{color:#666;font-size:.75rem}.toggle-row{gap:0;display:flex}.toggle-btn{border-right-width:0;border-radius:0;padding:.35rem .8rem;font-size:.75rem}.toggle-btn:first-child{border-radius:4px 0 0 4px}.toggle-btn:last-child{border-right-width:1px;border-radius:0 4px 4px 0}.toggle-btn.active{background:#00ffc833;border-color:#00ffc8}input[type=range]{appearance:none;background:#333;border-radius:2px;outline:none;width:120px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#00ffc8;border-radius:50%;width:14px;height:14px}#hint{color:#555;font-size:.8rem}kbd{color:#00ffc8;background:#222;border:1px solid #444;border-radius:3px;padding:.1rem .4rem;font-family:inherit;font-size:.8rem}#snapshotCount{color:#00ffc8}#status{color:#666;font-size:.8rem}