/* Minimal, variable-free, no :root — avoids your RBRACE issue */
html,body { height:100%; margin:0; background:#fff; color:#111; }
#app { min-height:100%; display:flex; align-items:center; justify-content:center; }

.slide {
  width: 90vw; max-width: 1280px;
  margin: 0 auto; padding: 3rem 2rem;
  font-family: "Georgia","Times New Roman",Times,serif;
}

/* Yellow highlight bar applied by adding class="hl" */
.hl      { box-shadow: inset 0 -0.38em 0 #f6e6a6; }
.hl-red  { box-shadow: inset 0 -0.32em 0 #e56b6b; }

.hero { font-size: clamp(48px, 10vw, 110px); display:inline-block; line-height:1.05; }
.h1   { font-size: clamp(60px, 12vw, 112px); margin: 0 0 -0.1em 0; }
.h2   { font-size: clamp(36px, 7vw, 72px); margin: 0.4em 0 0.2em; display:inline-block; }
.p    { font-size: clamp(16px, 2.2vw, 20px); max-width: 1100px; line-height: 1.45; }

.prompt { margin-top: 1.1rem; }
.label  { font-size: clamp(20px, 2.6vw, 36px); display:inline-block; }

.editor {
  margin-top: .35rem;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid #cfcfd3;
  border-radius: 10px;
  outline: none;
  background: #fff;
  font-family: "Georgia","Times New Roman",Times,serif;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.35;
  letter-spacing: 0px;         /* dynamic via JS */
  white-space: pre-wrap;
}
.editor:empty:before { content: "your text here"; color: #aaa; }

.controls { display:flex; justify-content:flex-end; margin-top: 1.8rem; }
.done {
  background:none; border:none; padding:0; cursor:pointer;
  font-family: "Georgia","Times New Roman",Times,serif;
  font-size: clamp(36px, 6vw, 56px);
}

#fsBtn {
  position: fixed; bottom: 12px; left: 12px;
  border: 1px solid #bbb; border-radius: 10px; background:#fff;
  padding: 6px 10px; font-size: 18px; cursor:pointer; opacity:.8;
}
#fsBtn:hover { opacity:1; }

.red { color: #cc1e1e; }