:root{
  --bg:#0f0f14;
  --text:#eaeaf0;
  --card:#171722;
  --primary:#8b5cf6;
  --accent:#22d3ee;
}
[data-theme="light"]{
  --bg:#f7f7fb;
  --text:#111827;
  --card:#ffffff;
  --primary:#6366f1;
  --accent:#06b6d4;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #222 0, transparent 60%),
    linear-gradient(135deg, rgba(139,92,246,.2), rgba(34,211,238,.15)),
    var(--bg);
  min-height:100%;
  background-color:var(--bg);
}

.site-header, .site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  max-width:960px;
  margin:0 auto;
}
.site-header h1{ margin:0; font-size:clamp(1.25rem, 2vw + 1rem, 2rem); }

main{ display:grid; place-items:center; padding:2rem 1.25rem; }
.card{
  background:var(--card);
  border-radius:16px;
  padding:1.25rem;
  max-width:720px;
  width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);
}
.card h2{ margin-top:0; }

.actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0; }
button{ cursor:pointer; border:0; border-radius:12px; padding:.8rem 1rem; font-weight:600; }
button.primary{ background:linear-gradient(90deg, var(--primary), var(--accent)); color:white; }
button.primary:active{ transform:translateY(1px); }
button.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15); }
.icon-btn{ font-size:1.25rem; background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); padding:.5rem .7rem; border-radius:999px; }

.fact{
  font-size:1.1rem; padding:.75rem 1rem;
  border-left:4px solid var(--primary);
  background:rgba(255,255,255,.04);
  border-radius:8px;
}

.noscript{
  max-width:960px; margin:1rem auto; padding:1rem;
  background:#fff3cd; color:#7a5d00; border-radius:8px;
}

#confetti{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:0; }
.site-header, .card, .site-footer{ position:relative; z-index:1; }

button:focus-visible{ outline:2px dashed var(--accent); outline-offset:4px; }