:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh;background-color:#f5f5f5}#interactive.viewport{position:relative;width:100%;height:100%}#interactive.viewport>video{width:100%;height:100%;object-fit:cover}#interactive.viewport>canvas{position:absolute;left:0;top:0;width:100%;height:100%}.viewport:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:80px;border:2px solid rgba(255,255,255,.5);border-radius:4px;box-shadow:0 0 0 9999px #00000080;z-index:2}.viewport:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:210px;height:90px;background:transparent;border:2px solid #1976d2;border-radius:6px;z-index:1;animation:scanning 2s linear infinite}@keyframes scanning{0%{border-color:#1976d233}50%{border-color:#1976d2}to{border-color:#1976d233}}.viewport .scan-line{position:absolute;width:200px;height:2px;background:#1976d2;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;animation:scan 2s linear infinite}@keyframes scan{0%{transform:translate(-50%,-40px)}50%{transform:translate(-50%,40px)}to{transform:translate(-50%,-40px)}}