:root {
  color-scheme: dark;
  --ink: #0d0d0f;
  --paper: #f4f1e9;
  --muted: rgba(244, 241, 233, 0.64);
  --orange: #f97316;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--ink); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#app { position: fixed; inset: 0; }
.preview-frame { width: 100%; height: 100%; border: 0; background: var(--ink); }
.message { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: start; padding: 2rem; background: radial-gradient(circle at 70% 20%, rgba(249,115,22,.12), transparent 30%), var(--ink); }
.message[hidden] { display: none; }
.mark { width: .9rem; height: .9rem; margin-bottom: 3rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .5rem rgba(249,115,22,.13); }
.eyebrow { color: var(--orange); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 12ch; margin: .7rem 0 1rem; font-size: clamp(2.5rem, 8vw, 6rem); line-height: .94; letter-spacing: -.07em; }
#message-body { color: var(--muted); }