:root {
  --mustard: #F1C338;
  --mustard-deep: #DDA916;
  --cream: #FFF8E7;
  --sage: #9CAE7C;
  --sage-deep: #5F7247;
  --sage-tint: #E7EDDD;
  --blush: #F1B8B0;
  --blush-tint: #FBE3DF;
  --ink: #453923;
  --ink-soft: #6B5A3A;
  --shadow: rgba(69, 57, 35, 0.22);
  --error: #B3453B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(69,57,35,0.06) 1.5px, transparent 0) 0 0/24px 24px,
    radial-gradient(ellipse at top, var(--mustard) 0%, var(--mustard-deep) 100%);
  font-family: 'Nunito Sans', sans-serif;
  color: var(--ink);
  padding: 24px;
}

.card {
  background: var(--cream);
  border: 1px solid rgba(69,57,35,0.12);
  /* slightly asymmetric corners -- like a folded blanket */
  border-radius: 32px 32px 44px 44px / 40px 40px 30px 30px;
  box-shadow: 0 20px 48px var(--shadow);
  width: 100%;
}

[hidden] { display: none !important; }