*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f7fb;font-family:Arial,Helvetica,sans-serif}.app{justify-content:center;align-items:center;min-height:100vh;display:flex}.hero{text-align:center;width:700px}.hero h1{margin-bottom:20px;font-size:3rem}.tagline{color:#666;margin-bottom:35px;font-size:1.2rem}.record-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:15px 35px;font-size:18px}.record-btn:hover{background:#1d4ed8}.privacy-box{background:#fff;border-radius:12px;margin-top:40px;padding:25px;box-shadow:0 5px 20px #00000014}.privacy-box ul{margin-top:15px;list-style:none}.privacy-box li{margin:10px 0}.btn{cursor:pointer;border:none;border-radius:10px;padding:14px 28px;font-size:18px;font-weight:600;transition:all .3s}.btn:hover{transform:translateY(-2px)}.preview-container{background:#111827;border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:900px;height:500px;margin:25px auto;display:flex;overflow:hidden}.preview-video{object-fit:contain;width:100%;height:100%}.preview-placeholder{color:#fff;opacity:.6;font-size:24px}body{background:#f4f6f9;margin:0;font-family:Arial,Helvetica,sans-serif}.app{justify-content:center;padding:40px;display:flex}.recorder-card{background:#fff;border-radius:16px;width:100%;max-width:1000px;overflow:hidden;box-shadow:0 8px 30px #0000001f}.card-header{border-bottom:1px solid #eee;padding:20px}.card-header h2{margin:0;font-size:36px;font-weight:700}.card-header p{color:#6b7280;margin-top:8px;font-size:16px}.preview-container{background:#0f172a;border:2px solid #1f2937;border-radius:12px;margin:20px;overflow:hidden}.controls{justify-content:center;padding:20px;display:flex}.btn{border-radius:10px;width:260px;height:54px;font-size:18px;font-weight:600}.btn-primary{color:#fff;background:#2563eb}.btn-primary:hover{background:#1d4ed8}.btn-danger{color:#fff;background:#dc2626}.btn-danger:hover{background:#b91c1c}.recording-indicator{text-align:center;color:#dc2626;padding-bottom:20px;font-size:18px;font-weight:700}.error{color:red;text-align:center;padding-bottom:20px}.status-bar{color:#fff;background:#111827;justify-content:space-between;padding:12px 20px;font-weight:700;display:flex}.preview-placeholder{color:#fff;opacity:.6;justify-content:center;align-items:center;font-size:32px;display:flex;position:absolute;inset:0}.preview-container{position:relative}.countdown-overlay{pointer-events:none;background:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-number{color:#fff;font-size:clamp(5rem,15vw,10rem);font-weight:700;line-height:1;animation:1s ease-in-out countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.recording-indicator{animation:1s infinite pulse}.footer{text-align:center;color:#9ca3af;padding:20px;font-size:14px}.settings-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;margin:20px;padding:20px}.settings-card h3{color:#111827;margin:0 0 20px;font-size:20px}.setting-item{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:12px 0;display:flex}.setting-item:last-child{border-bottom:none}.setting-item label{color:#374151;font-size:15px;font-weight:500}.setting-item input[type=checkbox]{cursor:pointer;width:18px;height:18px}.setting-item select{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:14px}.settings-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.settings-title h3{margin:0;font-size:22px}.settings-subtitle{color:#6b7280;margin-top:6px;margin-bottom:0;font-size:14px}.arrow{font-size:18px;transition:transform .25s}.arrow.open{transform:rotate(90deg)}.btn-warning{color:#fff;background:#f59e0b}.btn-warning:hover{background:#d97706}.controls{justify-content:center;align-items:center;gap:24px;margin-top:24px;display:flex}.btn{min-width:180px}.preview-wrapper{width:100%;position:relative}.webcam-container{z-index:10;position:absolute}.webcam-overlay{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none;border:3px solid #fff;border-radius:50%;width:100%;height:100%;transition:transform .2s;box-shadow:0 10px 30px #00000059}.webcam-overlay:hover{cursor:move;cursor:move;transform:scale(1.03)}.resize-handle{cursor:nwse-resize;background:#fff;border:2px solid #2563eb;border-radius:50%;width:16px;height:16px;position:absolute;bottom:-4px;right:-4px}