* { margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
body { background:#f5f7fa; color:#333; line-height:1.6; display:flex; flex-direction:column; min-height:100vh; }
header { background:#0f62fe; color:#fff; padding:1rem; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
header h1 { font-size:1.5rem; margin-bottom:0.25rem; }
header p { font-size:0.9rem; opacity:0.9; }
main { flex:1; padding:1.5rem; display:flex; flex-direction:column; align-items:center; }
video#preview { width:100%; max-width:400px; border:3px solid #0f62fe; border-radius:8px; margin-bottom:1rem; background:#000; }
button { background:#0f62fe; color:#fff; border:none; padding:0.75rem 1.25rem; margin:0.5rem; border-radius:6px; font-size:1rem; cursor:pointer; transition:background 0.3s ease; }
button:hover { background:#0043ce; }
button:active { transform:scale(0.97); }
#result { margin-top:1.5rem; width:100%; max-width:400px; background:#fff; border:1px solid #ddd; border-radius:8px; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
#result h3 { margin-bottom:0.5rem; color:#0f62fe; }
#result p { margin-bottom:0.25rem; font-size:0.95rem; }
@media (max-width:480px) { header h1{font-size:1.2rem;} button{width:100%;} }