*{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}#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}