.rr-door { display: grid; gap: var(--s4); max-width: var(--stage-max); width: 100%; margin: 0 auto; }
.rr-door :where(p, h1, h2, h3) { overflow-wrap: anywhere; }
.rr-door [hidden] { display: none !important; }

.rr-door-top { display: flex; flex-direction: column; gap: var(--s3); }
.rr-door-head { min-width: 0; }
.rr-door-kicker { margin: 0 0 4px; display: flex; align-items: center; gap: var(--s1); color: var(--accent); font-size: var(--t-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rr-door-icon { display: inline-flex; width: 28px; height: 28px; flex: none; }
.rr-door-icon svg { width: 100%; height: 100%; }
.rr-door-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.rr-door-line { margin: var(--s1) 0 0; font-size: var(--t-lead); color: var(--ink-soft); }

.rr-door-act { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.rr-door-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.rr-input { width: 100%; box-sizing: border-box; min-height: 132px; resize: vertical; }
.rr-submit { width: 100%; }
.rr-door-sub { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.rr-error { margin: 0; }

.rr-you { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1); font-size: var(--t-small); color: var(--ink-soft); }
.rr-you-line { font-weight: 600; color: var(--ink); }
.rr-you-panel { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius); }

.rr-gen-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.rr-gen { display: flex; align-items: center; gap: var(--s2); }
.rr-gen-range { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); min-height: 44px; }
.rr-gen-out { flex: none; min-width: 7.5em; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: color 120ms ease; }
.rr-gen-out.is-year { color: var(--accent); }
.rr-gen-note { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }

.rr-result { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.rr-read { display: grid; gap: var(--s3); }
.rr-pair { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-pair-label { margin: 0; font-size: var(--t-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.rr-word { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 7vw, 72px); line-height: 1; color: var(--ink); }
.rr-word--meant { color: var(--ink-soft); }
.rr-pair--main .rr-word { color: var(--accent); }
.rr-why { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.rr-reader { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.rr-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.rr-safety { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--panel); border: var(--border-w) solid var(--line-strong); border-radius: var(--radius-lg); }
.rr-safety-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-title); color: var(--ink); }
.rr-safety p { margin: 0; color: var(--ink); max-width: 60ch; }
.rr-safety .rr-again { align-self: flex-start; }

.rr-door-more { display: flex; flex-direction: column; gap: var(--s4); }

.rr-strip { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.rr-strip-h { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.rr-strip-msg { margin: 0; font-size: var(--t-lead); color: var(--ink); }
.rr-strip-pairs { display: grid; gap: var(--s3); }
.rr-strip-pair { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-word--strip { font-size: clamp(36px, 5vw, 52px); }
.rr-strip-pair:last-child .rr-word--strip { color: var(--accent); }
.rr-strip-try { align-self: flex-start; }

.rr-door-cards { display: flex; flex-direction: column; gap: var(--s3); }
.rr-door-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.rr-door-cardh { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-title); line-height: 1.15; color: var(--ink); }
.rr-door-cardp { margin: 0; color: var(--ink-soft); }

.rr-door-faq { display: flex; flex-direction: column; gap: var(--s2); }
.rr-door-faqh { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-title); line-height: 1.15; color: var(--ink); }
.rr-door-qs { display: flex; flex-direction: column; gap: var(--s3); }
.rr-door-q { display: flex; flex-direction: column; gap: var(--s1); max-width: 70ch; min-width: 0; }
.rr-door-qh { margin: 0; font-size: var(--t-lead); font-weight: 600; line-height: 1.3; color: var(--ink); }
.rr-door-qa { margin: 0; color: var(--ink-soft); }

.rr-privacy .bench-privacy-panel p { margin: 0 0 var(--s1); font-size: var(--t-small); color: var(--ink-soft); }
.rr-privacy .bench-privacy-panel p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .rr-gen-out { transition: none; }
}

@media (min-width: 640px) {
  .rr-read, .rr-strip-pairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rr-read:has(#rr-pair-meant[hidden]) { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .rr-door { max-width: calc(var(--stage-max) * 1.4); }
  .rr-door-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
  .rr-door-head { flex: 1 1 0; padding-top: var(--s4); }
  .rr-door-act { flex: 0 0 400px; }
  .rr-door-cards { flex-direction: row; align-items: stretch; }
  .rr-door-card { flex: 1 1 0; }
  .rr-door-qs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); align-items: start; }
}