:root{
  --bg:#0b0d12; --fg:#eaf2ff; --muted:#9fb3d9; --accent:#6ae3ff; --accent-2:#ff7ac8; --warn:#ffda6b; --ok:#9aff9a; --danger:#ff5e5e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
img{max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:9999}

.site-header{padding:24px 16px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));border-bottom:1px solid rgba(255,255,255,0.06)}
.site-header .brand{display:flex;gap:12px;align-items:center;justify-content:center}
.site-header .logo{font-size:28px}
.site-header .title{font-size:28px;margin:0}
.site-header .tagline{margin:8px 0 0;color:var(--muted)}

.container{max-width:720px;margin:0 auto;padding:16px}
.panel{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;margin:16px 0}
.panel h2{margin-top:0}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 20px;border:none;border-radius:999px;font-weight:800;cursor:pointer;transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn.small{padding:12px 16px}
.btn:active{transform:translateY(1px)}
.btn .btn-emoji{font-size:22px}

.btn-sync{background:linear-gradient(135deg,#3bd0ff,#6ae3ff);color:#031824;box-shadow:0 10px 25px rgba(58,208,255,.25)}
.btn-sync:hover{box-shadow:0 12px 28px rgba(58,208,255,.35)}

.btn-inject{background:linear-gradient(135deg,#ff5e5e,#ff7ac8);color:#2b0415;box-shadow:0 10px 25px rgba(255,90,150,.25)}
.btn-inject[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.2)}
.btn-inject:hover:not([disabled]){box-shadow:0 12px 30px rgba(255,90,150,.35)}

.btn-secondary{background:rgba(255,255,255,.08);color:var(--fg)}

.status{min-height:24px;margin-top:10px;color:var(--muted)}
.status.ok{color:var(--ok)}
.status.warn{color:var(--warn)}
.status.err{color:var(--danger)}

.preview{margin:24px 0}
.car-scene{position:relative;height:220px;border-radius:16px;background:linear-gradient(180deg,#101521,#0b0d12);overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.car{position:absolute;left:12px;bottom:16px;width:200px;height:80px;background:linear-gradient(135deg,#1a2030,#131a27);border-radius:16px 20px 16px 16px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.wheel{position:absolute;bottom:-12px;width:44px;height:44px;background:#0c0f17;border-radius:50%;border:4px solid #1f2738;box-shadow:inset 0 0 0 4px #2d3a57}
.wheel.front{left:140px}
.wheel.back{left:20px}
.passenger{position:absolute;left:120px;bottom:32px;font-size:28px;transition:transform 1s cubic-bezier(.2,.9,.2,1), opacity .6s ease}

.sky{position:absolute;inset:0;overflow:hidden}
.cloud{position:absolute;width:180px;height:60px;background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.25), rgba(255,255,255,0));top:16px;filter:blur(2px);opacity:.6}
.cloud.c1{left:20px;animation:cloud 18s linear infinite}
.cloud.c2{left:140px;top:34px;animation:cloud 22s linear infinite reverse}
.cloud.c3{left:260px;top:24px;animation:cloud 26s linear infinite}
@keyframes cloud{0%{transform:translateX(-40px)}100%{transform:translateX(340px)}}

/* Injection visuals */
.injecting .passenger{transform:translate(40px,-40px) scale(1.1);opacity:.95}
.synced .car{box-shadow:0 0 0 4px rgba(106,227,255,.3),0 8px 20px rgba(0,0,0,.4)}

.hearts-layer{position:absolute;inset:0;pointer-events:none}
.heart{position:absolute;font-size:18px;opacity:.9;transform:translate(-50%,-50%);will-change:transform,opacity}
@keyframes floatHeart{0%{transform:translate(var(--x,0), var(--y,0)) scale(.9);opacity:.95}100%{transform:translate(calc(var(--x,0) + 0px), calc(var(--y,0) - 140px)) scale(1.2) rotate(12deg);opacity:0}}

.love-copy{margin:24px 0}
.love-message{font-size:18px}
.love-message.flash{animation:loveFlash 600ms ease}
@keyframes loveFlash{0%{opacity:.2;filter:blur(1px)}30%{opacity:1;filter:none}100%{opacity:1;filter:none}}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:999}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);background:#121827;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.modal-dialog h2{margin:0 0 8px 0}
.modal-dialog input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#0b0d12;color:var(--fg);outline:none}
.modal-dialog input:focus{border-color:#6ae3ff;box-shadow:0 0 0 3px rgba(106,227,255,.2)}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:12px}

.disclaimer, .faq{margin:24px 0}
.faq article{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px;margin:12px 0}
.site-footer{padding:24px 16px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
.site-footer nav{display:flex;gap:12px;justify-content:center;margin-bottom:8px}
.site-footer a{color:var(--accent)}
.geo{margin:8px 0 0}

@media (min-width: 720px){
  .site-header .title{font-size:34px}
  .car-scene{height:260px}
  .car{left:24px;width:240px;height:92px}
  .passenger{left:150px}
}