body { min-height: 100svh; }
.wrap { max-width: 520px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px 32px;
  display: flex; flex-direction: column; gap: 24px; min-height: 100svh; }
.logo { width: 56px; height: 56px; }
.prompt { font-size: clamp(44px, 13vw, 64px); }
.field { display: flex; gap: 6px; align-items: flex-start; border-bottom: 3px solid var(--accent); padding-bottom: 8px; }
.dots { font-size: 36px; line-height: 1.1; }
textarea { flex: 1; resize: none; background: transparent; border: 0; outline: 0; color: var(--paper);
  font: 500 26px/1.25 "WL Text", system-ui, sans-serif; padding-top: 4px; }
textarea::placeholder { color: #55555e; }
.meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 15px; min-height: 20px; }
.err { color: #ff8a8a; }
.btn { width: 100%; min-height: 60px; border: 0; border-radius: 16px; background: var(--accent); color: var(--ink);
  font-size: 28px; margin-top: 8px; }
.btn:disabled { opacity: .45; }
.btn-ghost { background: transparent; color: var(--paper); border: 2px solid var(--line); }
.done-title { font-size: 56px; color: var(--accent); }
.done-text { font-size: 20px; line-height: 1.35; margin: 12px 0 20px; }