:root {
  --read-bg: #000;
  --read-text: #f5f5f7;
  --read-mute: rgba(245,245,247,.56);
  --read-line: rgba(255,255,255,.12);
  --read-go: #7CE3B0;
  --read-go-ink: #04110a;
  --read-orp: #ff453a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.read-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 22px 14px;
}
.read-back {
  color: var(--read-mute); text-decoration: none; font: 500 13px/1 'Space Grotesk', system-ui, sans-serif;
}
.read-label {
  font: 500 11px/1 'Space Grotesk'; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,245,247,.38);
}
.read-page, .read-widget {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.read-page {
  display: flex; flex-direction: column; min-height: calc(100vh - 52px);
  background: var(--read-bg); color: var(--read-text);
  padding: 0 22px calc(22px + env(safe-area-inset-bottom));
}
.read-widget {
  padding: 20px 0; border-top: 1px solid var(--read-line);
}
.read-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 140px; padding: 12px 0;
}
.read-compact .read-stage { min-height: 100px; }
.read-rsvp {
  width: min(100%, 420px); text-align: center;
  font: 600 clamp(28px, 9vw, 48px)/1.1 'Space Grotesk';
  letter-spacing: -.02em; color: #fff;
}
.read-compact .read-rsvp { font-size: clamp(24px, 8vw, 36px); }
.read-pre, .read-post { color: #fff; }
.read-orp { color: var(--read-orp); }
.read-text {
  width: 100%; min-height: 100px; resize: vertical;
  background: transparent; border: 0; border-bottom: 1px solid var(--read-line);
  color: var(--read-text); font: 400 16px/1.45 'Space Grotesk';
  padding: 10px 0; outline: none;
}
.read-text::placeholder { color: rgba(245,245,247,.32); }
.read-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px;
}
.read-wpm {
  flex: 1; min-width: 130px;
  display: flex; align-items: center; gap: 8px;
  font: 400 13px 'Space Grotesk'; color: var(--read-mute);
}
.read-wpm input[type=range] { flex: 1; accent-color: var(--read-go); }
.read-btn-go, .read-btn-ghost {
  border: 0; border-radius: 980px; cursor: pointer;
  font: 600 14px/1 'Space Grotesk'; min-height: 40px; padding: 0 18px;
}
.read-btn-go { background: var(--read-go); color: var(--read-go-ink); }
.read-btn-ghost { background: #fff; color: #000; }
.read-is-playing .read-text { display: none; }