html { scroll-padding-top: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Lora, Georgia, serif; min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(233,184,114,.25), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(200,100,60,.15), transparent 40%);
}
h1, h2, .script { font-family: Caveat, "Brush Script MT", cursive; font-weight: 600; margin: 0; }
#app { max-width: 560px; margin: 0 auto; padding: 28px 18px 60px; transition: opacity .25s ease, transform .25s ease; }
.center { text-align: center; }
.big { font-size: 3.2rem; color: var(--accent); line-height: 1.1; }
.sub { color: var(--soft); margin: 6px 0 24px; }
.note { color: var(--soft); font-size: .85rem; }
.err { color: var(--accent); height: 22px; margin-top: 10px; }
.empty { text-align: center; color: var(--soft); padding: 40px 0; }