:root{
  --bg:#0f1720; --panel:#0b1220; --accent:#00d1b2; --muted:#9aa4b2;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:linear-gradient(180deg,#071528 0%, #0b1220 100%);color:#e6eef6;padding:12px}
main{max-width:900px;margin:0 auto}
h1{font-size:1.1rem;margin:0 0 8px}
.video-wrap{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:12px;overflow:hidden}
video{width:100%;height:100%;object-fit:cover}
canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.controls{display:flex;gap:8px;align-items:center;margin-top:10px}
.controls label{font-size:0.9rem;color:var(--muted)}
input[type=number]{width:80px;padding:6px;border-radius:6px;border:1px solid #173445;background:#071827;color:#ddf}
button{background:var(--panel);border:1px solid #173445;color:var(--accent);padding:8px 10px;border-radius:8px}
#status{margin-left:8px;color:var(--muted);font-size:0.9rem}
.notes{margin-top:12px;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;color:var(--muted)}

.cv-controls{display:flex;gap:8px;align-items:center;margin-top:10px}
.cv-controls input[type=url]{width:320px;padding:6px;border-radius:6px;border:1px solid #173445;background:#071827;color:#ddf}


@media (min-width:700px){
  .video-wrap{aspect-ratio:16/9}
}