:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --accent:#3b82f6;
  --muted:#555;
}
*{box-sizing:border-box}
body{font-family:Segoe UI,system-ui,Arial,sans-serif;background:var(--bg);color:#222;margin:0;padding:24px}
.container{max-width:900px;margin:0 auto}
header{margin-bottom:18px}
.tagline{color:var(--muted);margin-top:6px}
.card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(20,20,40,0.04);margin-bottom:16px}
.note{margin-top:12px;padding:10px;background:linear-gradient(90deg,#fff9e6,#fffef8);border-left:4px solid #ffd166;border-radius:8px;color:#2b2b2b}
.controls{display:grid;gap:10px}

/* Single-line auto-rotating ticker */
.ticker{overflow:hidden;padding:12px}
.ticker-single{height:32px;display:flex;align-items:center;justify-content:center}
#tickerText{font-weight:700;color:#0b2545;display:inline-block;transition:opacity .5s ease,transform .5s ease}
.ticker-hidden{opacity:0;transform:translateY(6px)}

@media (prefers-reduced-motion: reduce){
  #tickerText{transition:none}
}
label{font-weight:600;display:flex;justify-content:space-between;align-items:center}
input[type=range]{width:100%}
.results{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.score{font-size:1.2rem;font-weight:700;color:var(--accent)}
.advice{flex:1;color:#0b1220;background:#f1f5ff;padding:10px;border-radius:8px}
footer{color:var(--muted);font-size:.9rem;text-align:center;padding-top:8px}
@media (min-width:700px){.controls{grid-template-columns:1fr;max-width:560px}}