:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #0d0d0d;
  color: #f1f0ed;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.center { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4rem 1rem 0; text-align: center; }
h1 { margin: 0; font-size: clamp(.95rem, 2.1vw, 1.45rem); font-weight: 750; letter-spacing: .19em; line-height: 1.35; }
.answer { margin: .06em 0 0; color: #ff4848; font-size: clamp(10rem, 37vw, 24rem); font-weight: 900; letter-spacing: -.09em; line-height: 1.15; padding-right: .09em; }
.is-yes .answer { color: #b8f778; }
.reveal { margin: -.3rem 0 0; color: #b8f778; font-size: clamp(.9rem, 2.2vw, 1.3rem); font-weight: 800; letter-spacing: .13em; }
footer { padding: 1.5rem 1rem 2.35rem; text-align: center; }
nav { display: flex; justify-content: center; gap: 1.1rem; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .11em; }
nav a { color: #dedbd8; text-decoration: none; border-bottom: 1px solid #5a5a5a; padding-bottom: .23rem; }
nav a:hover, nav a:focus-visible { color: white; border-color: white; }
nav span { color: #595959; }
small { display: block; margin-top: 1.4rem; font-size: .62rem; letter-spacing: .13em; color: #686868; }
@media (max-width: 430px) { .center { padding-top: 2rem; } .answer { font-size: 47vw; } footer { padding-bottom: 1.7rem; } nav { font-size: .66rem; gap: .85rem; } small { font-size: .52rem; } }