body{color:#222;background:#f4f4f4;margin:0;padding:0;font-family:system-ui,sans-serif}.main{text-align:center;padding:6rem 1rem}h1{margin-bottom:1.5rem;font-size:1.8rem}.primary-btn{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:6px;padding:.6rem 1.2rem;font-size:1rem;transition:background .2s}.primary-btn:hover{background:#005fcc}.close-btn{cursor:pointer;color:#444;background:0 0;border:none;font-size:1.6rem;position:absolute;top:12px;right:15px}#modal{z-index:1000;background:#0009;justify-content:center;align-items:flex-start;padding:2rem 1rem;display:flex;position:fixed;inset:0;overflow-y:auto}#modal.hidden{display:none}.modal-content{text-align:center;background:#fff;border-radius:12px;width:100%;max-width:900px;margin:auto;padding:2rem 1.5rem;position:relative;box-shadow:0 4px 30px #0003}.modal-content h2{color:#007bff;margin-top:0;font-size:1.4rem}.matcher-layout{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:1rem;display:flex}.camera-box,.preview-box{background:#f9f9f9;border-radius:10px;flex-direction:column;flex:320px;align-items:center;gap:.75rem;padding:1rem;display:flex}#camera{object-fit:contain;background:#000;border-radius:8px;width:100%;max-height:300px}#preview{object-fit:contain;border:1px solid #ddd;border-radius:8px;width:100%;max-height:300px}.camera-controls{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.camera-controls button{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:6px;padding:.4rem .8rem;font-size:.9rem}.camera-controls button:hover{background:#005fcc}.results-box{text-align:center;margin-top:1.5rem}.results-box h3{margin-bottom:1rem}.results-box img{border-radius:8px;transition:transform .2s}.results-box img:hover{transform:scale(1.05)}@media (max-width:600px){.modal-content{padding:1.5rem 1rem}h1{font-size:1.5rem}.matcher-layout{flex-direction:column}.camera-box,.preview-box{flex:auto;width:100%}}