.card{position:relative;container-type:inline-size;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 50% 30%,#273a32,#14231d 80%);box-shadow:0 4px 20px #16271e0d}
.card video{display:block;width:100%;height:100%;object-fit:cover}
.freeze-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(4px) brightness(.82);transform:scale(1.035);transition:opacity .25s ease;pointer-events:none}
.card[data-has-frame="true"]:not([data-state="playing"]) .freeze-frame{opacity:1;transition:none}
.camera-location{position:absolute;left:34%;top:4%;display:none;color:#ddd;font:500 1.85cqw/1 ui-monospace,Consolas,monospace;white-space:nowrap;text-shadow:0 1px 2px #0009;pointer-events:none;user-select:none}
.card[data-state="playing"] .camera-location{display:block}
.camera-signature{position:absolute;right:10px;bottom:9px;color:#ffffff40;font-size:7px;letter-spacing:1px;line-height:1;text-shadow:0 1px 3px #000a;pointer-events:none;user-select:none}
.toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;display:grid;place-items:center;padding:0;border:1px solid #ffffff50;border-radius:50%;background:#ffffff12;color:#fff;box-shadow:0 8px 32px #0003;backdrop-filter:blur(12px);cursor:pointer;transition:background .2s,box-shadow .2s,width .2s,height .2s}
.toggle:hover{background:#ffffff26;box-shadow:0 8px 32px #0005}
.toggle:focus-visible{outline:3px solid #dfc9a2;outline-offset:5px}
.toggle svg{width:24px;height:24px;fill:currentColor;pointer-events:none}
.play-icon{margin-left:3px}.pause-icon{display:none}
.card[data-requested="true"] .toggle{left:18px;top:auto;bottom:18px;transform:none;width:44px;height:44px;background:#14231d90}
.card[data-requested="true"] .play-icon{display:none}.card[data-requested="true"] .pause-icon{display:block}
.card[data-state="connecting"] .toggle::after{content:"";position:absolute;inset:-4px;border:2px solid transparent;border-top-color:#dfc9a2;border-radius:50%;animation:connect-spin 1.2s linear infinite;pointer-events:none}
.card[data-requested="false"][data-stop-reason="idle"] .toggle{border-color:#dfc9a2a0;box-shadow:0 0 0 2px #dfc9a215,0 0 24px 9px #dfc9a22e;animation:idle-glow 2.8s ease-in-out infinite}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes connect-spin{to{transform:rotate(360deg)}}
@keyframes idle-glow{50%{box-shadow:0 0 0 5px #dfc9a20a,0 0 35px 13px #dfc9a24a}}
@media(prefers-reduced-motion:reduce){.toggle,.freeze-frame{transition:none}.card[data-state="connecting"] .toggle::after,.card[data-stop-reason="idle"] .toggle{animation:none}}