:root{--yellow: #ffc600;--blue: rgba(25, 53, 73, 1);--pink: #ff0088}html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}*,*:before,*:after{box-sizing:inherit}body{padding:0;margin:0;background:var(--blue)}.wrap{display:grid;justify-content:center;align-items:center;align-content:center;text-align:center;grid-template-columns:1fr;grid-template-rows:1fr auto;padding:3%}.wrap>*{grid-column:1 / -1;grid-row:1 / -1}.text{font-size:20px;color:#ffc600;font-size:40px}video{width:100%;display:block;border-radius:0;max-height:100vh;transition:transform .3s ease}.video-area{position:relative;overflow:hidden}.video-area[data-mirrored=true]~.controls .btn-mirror,.video-area[data-rotation]:not([data-rotation="0"])~.controls .btn-rotate{color:var(--yellow)}.audio-meter{position:absolute;right:6px;top:6px;bottom:6px;width:6px;background:#0006;border-radius:3px;overflow:hidden;display:none;flex-direction:column;justify-content:flex-end;pointer-events:none}.audio-meter.active{display:flex}.audio-meter-fill{width:100%;border-radius:3px;background:linear-gradient(to top,#4caf50 0% 60%,#ffeb3b 60% 80%,#f44336 80%);height:0%}.video{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:16px;padding:16px;align-items:center}@media(max-width:500px){.video{grid-template-columns:1fr}}.camera{color:#fff;font-size:10px;position:relative;background:#0000004d;border-radius:16px;overflow:hidden;border:2px solid transparent;cursor:grab}.camera:active{cursor:grabbing}.camera-inactive .video-area{cursor:pointer}.camera-inactive .video-area:after{content:"▶";position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff9;font-size:28px}.camera-ignored{opacity:.4;cursor:default}.camera-ignored:hover{opacity:.6}.ignored-placeholder{aspect-ratio:16 / 9;background:#ffffff08}.camera-ignored .btn-unignore{background:none;color:#ffffff80}.camera-ignored .btn-unignore:hover{color:#fff}.camera.recording{border-color:#f33;animation:recording-pulse 2s ease-in-out infinite}.btn-record .lucide-square,.camera.recording .btn-record .lucide-circle{display:none}.camera.recording .btn-record .lucide-square{display:inline}.camera.recording .btn-record{color:#f33}@keyframes recording-pulse{0%,to{box-shadow:0 0 #f000}50%{box-shadow:0 0 16px 4px #ff00004d}}.camera.dragging{opacity:.4}.camera.drag-over{border-color:var(--yellow);box-shadow:0 0 24px #ffc60040}.controls{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}.camera-label{margin:0;flex:1;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.resolution-picker{font-size:11px;color:#ffffff80;font-variant-numeric:tabular-nums;background:none;border:none;padding:2px 4px;cursor:pointer;flex-shrink:0}.resolution-picker:hover{color:#fff}.resolution-picker option{background:var(--blue);color:#fff}.actions{display:flex;gap:4px;flex-shrink:0}.actions button{background:none;border:none;padding:5px;border-radius:6px;color:#fff6;display:flex;align-items:center;justify-content:center;cursor:pointer}.actions button:hover{background:#ffffff1a;color:#fff;transform:none}.actions button svg{width:15px;height:15px}.actions .ignore{color:#ffffff40}.actions .ignore:hover{color:var(--pink)}.camera.widescreen .btn-widescreen{color:var(--yellow)}.camera-meta{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 8px}.camera-meta:empty{display:none}.meta-tag{background:#ffffff0f;border-radius:4px;padding:2px 6px;font-size:10px;color:#fff6;white-space:nowrap}.camera.widescreen{grid-column:1 / -1}.camera:fullscreen{background:#000;display:flex;flex-direction:column}.camera:fullscreen video{flex:1;object-fit:contain}.camera-error{border-color:var(--pink);cursor:default}.camera-error-message{padding:30px 20px;margin:0;text-align:center;font-size:14px;color:#ffffffb3;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}::view-transition-group(*){animation-duration:.25s}button{background:var(--pink);border:2px solid transparent;padding:10px;border-radius:10px;color:#fff;font-size:15px;text-transform:uppercase;cursor:pointer}button:focus{outline:0}button:hover{transform:scale(1.1)}.cred{color:#fff;grid-row:2;font-size:10px;text-align:center}a{color:var(--yellow)}
