:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#666;
  --border:#e6e6e6;
  --card:#fafafa;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--fg);
  padding:16px;
}
.header{max-width:720px;margin:0 auto 12px auto}
h1{margin:0 0 6px 0;font-size:24px}
.sub{margin:0;color:var(--muted);line-height:1.35}
.card{
  max-width:720px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--fg);
  color:white;
  padding:10px 14px;
  border-radius:12px;
  font-size:16px;
}
.btn:disabled{opacity:.5}
.btn-secondary{
  background:white;
  color:var(--fg);
}
.metrics{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media (min-width:640px){ .metrics{grid-template-columns:1fr 1fr} }
.metric{
  background:white;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}
.label{color:var(--muted);font-size:13px;margin-bottom:4px}
.value{font-size:22px;font-weight:700}
.unit{font-size:14px;color:var(--muted);font-weight:600}
.hint{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.35}
.bar{margin-top:10px;height:14px;background:#f0f0f0;border-radius:999px;overflow:hidden}
.fill{height:100%;width:0%;}
.responses{margin-top:14px}
.responses h2{margin:0 0 10px 0;font-size:16px}
.footer{max-width:720px;margin:12px auto 0 auto;color:var(--muted)}

/* --- Visualization orb --- */
.viz { margin-top: 14px; }
.orb{
  width: 120px; height: 120px;
  border-radius: 999px;
  margin: 10px auto 0 auto;
  background: #111;
  transform: translateY(0) scale(1);
  transition: transform 80ms linear;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}
.orb.pulse{
  animation: pulse 240ms ease-out;
}
@keyframes pulse{
  0%{ transform: translateY(var(--orbY, 0px)) scale(var(--orbS, 1)); }
  50%{ transform: translateY(var(--orbY, 0px)) scale(calc(var(--orbS, 1) * 1.05)); }
  100%{ transform: translateY(var(--orbY, 0px)) scale(var(--orbS, 1)); }
}

/* --- Modal / popup --- */
.hidden{ display:none; }

.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
}

.modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 30px 120px rgba(0,0,0,0.25);
  animation: pop 140ms ease-out;
}
@keyframes pop{
  from{ transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
  to{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
}