*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(138,35,52,0.35), transparent 60%),
    var(--bg);
  color:var(--cream);
  font-family:'Work Sans', -apple-system, sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
#app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding:28px 20px 60px;
  display:flex;
  flex-direction:column;
}
.wide #app{ max-width:760px; }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0; color:var(--cream); }
p{ line-height:1.5; color:var(--cream-dim); margin:0; }
.tagline{ text-align:center; color:var(--gold); font-size:14px; margin-bottom:36px; font-style:italic; }
.stack{ display:flex; flex-direction:column; gap:14px; }
.center{ text-align:center; }
.hr{ height:1px; background:var(--hairline); border:none; margin:18px 0; }
.row{ display:flex; gap:10px; }
.row > *{ flex:1; }
.muted{ color:var(--cream-dim); font-size:14px; }
.gold-text{ color:var(--gold); }
.big-num{ font-family:'Fraunces', serif; font-weight:700; font-size:32px; }
.spacer{ flex:1; }
.footnote{ text-align:center; font-size:12px; color:var(--cream-dim); opacity:0.65; margin-top:auto; padding-top:34px; font-style:italic; }
.error-msg{ color:var(--danger); font-size:14px; min-height:18px; }
.fade-in{ animation:fadeIn 0.35s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }