*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;background:#111;color:#eee}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.video-wrap{width:100%;max-width:480px;aspect-ratio:3/4;background:#000;border-radius:8px;overflow:hidden;position:relative}#visitor-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-indicator{position:absolute;top:50%;left:50%;width:88%;height:88%;margin:-44% 0 0 -44%;border-radius:50%;border:4px solid;box-shadow:0 0 0 2px #0000004d;pointer-events:none;opacity:0;transform:scale(.9);transition:border-color .35s ease,opacity .3s ease,transform .3s ease,box-shadow .35s ease}.face-indicator:not(.face-indicator--hidden){opacity:1;transform:scale(1)}.face-indicator--detecting{border-color:#e53935;animation:facePulseRed 1.2s ease-in-out infinite}.face-indicator--detected{border-color:#43a047;box-shadow:0 0 20px #43a04780;animation:none}.face-indicator--hidden{opacity:0!important;visibility:hidden}@keyframes facePulseRed{0%,to{opacity:1;box-shadow:0 0 0 2px #0000004d,0 0 16px #e5393566}50%{opacity:.85;box-shadow:0 0 0 2px #0000004d,0 0 24px #e5393599}}.camera-status{position:absolute;bottom:1rem;left:1rem;right:1rem;margin:0;text-align:center;color:#f88;font-size:.9rem}.message{text-align:center;padding:2rem}.message.error{color:#f88}.toast{position:fixed;top:1rem;right:1rem;max-width:min(320px,calc(100vw - 2rem));padding:1rem 1.25rem;background:#2d3a4f;color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000004d;z-index:1000;font-size:1rem}.toast[hidden]{display:none!important}.toast-fade{animation:toastFade .5s ease-out forwards}@keyframes toastFade{to{opacity:0}}