.rumi-preview { --rp-ink:#283f3b; --rp-purple:#6c587e; --rp-paper:#fffdf8; color:var(--rp-ink); background:#f7f3e9; }
.rumi-preview [hidden] { display:none !important; }
.rumi-preview button,.rumi-preview select,.rumi-preview summary { min-height:44px; }
.rumi-preview button,.rumi-preview select { font:inherit; }
.rumi-preview :focus-visible { outline:3px solid #775124; outline-offset:4px; }
.rp-header { border-bottom:1px solid #dcded1; background:var(--rp-paper); }
.rp-header-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:18px; padding-bottom:18px; }
.rp-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--rp-ink); font-size:1.15rem; font-weight:800; }
.rp-brand small { display:block; font-size:.72rem; font-weight:500; letter-spacing:.02em; }
.rp-status { border:1px solid #d5c39a; border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:700; background:#faf1da; text-align:center; }
.rp-main { max-width:1120px; }
.rp-intro { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:center; gap:50px; padding:48px 0 28px; }
.rp-intro h1 { font-size:clamp(2rem,4.6vw,3.45rem); line-height:1.1; letter-spacing:-.045em; margin:10px 0 18px; color:var(--rp-ink); }
.rp-lead { max-width:650px; font-size:1.08rem; line-height:1.65; }
.rp-meta { list-style:none; display:flex; gap:9px 18px; flex-wrap:wrap; padding:0; margin:22px 0 0; font-size:.81rem; font-weight:600; }
.rp-meta li::before { content:'·'; margin-right:9px; color:var(--rp-purple); }
.rp-art { padding:22px 12px 8px; text-align:center; background:#eeecdf; border:1px solid #dce0d2; border-radius:50% 50% 20px 20px; }
.rp-art-label { font-size:.62rem; font-weight:800; letter-spacing:.18em; }
.rp-art svg { display:block; width:100%; height:auto; }
.rp-art p { font-weight:700; color:var(--rp-purple); margin:0 0 12px; }
.rp-review-notice { padding:15px 19px; background:#f7efd9; border:1px solid #dfd0a7; border-radius:12px; line-height:1.6; font-size:.88rem; }
.rp-details { margin:18px 0; border:1px solid #dcded1; border-radius:12px; background:var(--rp-paper); }
.rp-details summary { padding:15px 19px; cursor:pointer; font-weight:700; }
.rp-details-body { padding:0 22px 18px; max-width:900px; line-height:1.7; }
.rp-details-body p { margin:12px 0; }
.rp-workspace { background:var(--rp-paper); border:1px solid #d6dcca; border-radius:20px; margin:26px 0; overflow:hidden; box-shadow:0 12px 36px #2e433308; }
.rp-controls { display:flex; justify-content:space-between; align-items:center; gap:22px; background:#eef1e8; padding:19px 24px; }
.rp-controls label { display:block; font-weight:750; font-size:.9rem; }
.rp-controls p { margin:4px 0 0; font-size:.79rem; max-width:460px; }
.rp-controls select { max-width:100%; width:290px; padding:9px 34px 9px 12px; border:1px solid #899984; border-radius:8px; background:#fffdf8; color:var(--rp-ink); }
.rp-story-switch { display:flex; gap:8px; padding:22px 24px 0; }
.rp-story-switch button { flex:1; border:1px solid #d5dbcd; border-radius:10px; padding:10px 15px; background:transparent; color:var(--rp-ink); cursor:pointer; text-align:left; font-size:.9rem; }
.rp-story-switch button[aria-current='true'] { border-color:#6c587e; background:#f0eaf3; color:#493458; font-weight:750; }
.rp-story-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:23px 28px 15px; }
.rp-story-heading h2 { margin:5px 0 8px; font-size:1.65rem; line-height:1.2; }
.rp-story-heading .eyebrow { font-size:.7rem; margin:0; color:#685276; }
.rp-source-label { font-size:.83rem; line-height:1.6; margin:0; max-width:680px; }
.rp-form-label { white-space:nowrap; font-size:.7rem; padding:6px 9px; border:1px solid #d9ddcd; border-radius:6px; }
.rp-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #dfe3d5; border-bottom:1px solid #dfe3d5; padding:0 20px; }
.rp-steps button { border:0; border-bottom:3px solid transparent; padding:13px 7px; background:transparent; color:#53624f; font-size:.88rem; cursor:pointer; }
.rp-steps button[aria-current='step'] { border-bottom-color:var(--rp-purple); color:#493458; font-weight:800; }
.rp-completed { display:block; font-size:.64rem; min-height:1em; color:#446340; font-weight:600; }
.rp-stage { padding:26px 28px; }
.rp-stage h3 { margin:0 0 20px; font-size:1.3rem; line-height:1.35; }
.rp-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rp-panel { padding:19px 20px; border:1px solid #e0dfd2; border-radius:12px; background:#faf8f1; }
.rp-panel h4 { margin:0 0 11px; font-size:1rem; color:#564069; }
.rp-panel p { margin:0; line-height:1.85; font-size:1rem; }
.rp-word-list { padding:13px 15px; background:#eeecf2; border-radius:8px; font-size:.88rem; }
.rp-prompt { max-width:730px; font-size:1.1rem; line-height:1.85; }
.rp-prompt-label { font-size:.77rem; text-transform:uppercase; letter-spacing:.08em; font-weight:750; color:#685276; }
.rp-choices { display:grid; gap:11px; max-width:740px; margin:20px 0; }
.rp-choice { border:1px solid #b5bba8; border-radius:10px; background:#fffdf8; padding:14px 18px; text-align:left; color:var(--rp-ink); cursor:pointer; line-height:1.5; }
.rp-choice:hover { background:#f1efe7; }
.rp-choice[aria-pressed='true'] { background:#f0eaf3; border:2px solid #6c587e; padding:13px 17px; }
.rp-feedback { padding:16px 18px; background:#edf2e8; border-left:4px solid #698560; border-radius:0 8px 8px 0; line-height:1.75; max-width:790px; }
.rp-discussion { margin-top:20px; }
.rp-discussion h4 { font-size:1rem; margin:18px 0 7px; }
.rp-discussion p { line-height:1.75; max-width:790px; }
.rp-stage-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:25px; border-top:1px solid #e3e4d8; padding-top:22px; }
.rp-stage-actions .btn { min-height:46px; background:#3e5b4d; border-color:#3e5b4d; color:#fff; }
.rp-stage-actions .btn:disabled { opacity:.55; cursor:not-allowed; }
.rp-small { font-size:.8rem; max-width:470px; margin:0; line-height:1.6; }
.rp-announcement { margin:0; padding:0 28px 15px; font-size:.85rem; }
.rp-announcement:empty { padding:0; }
.rp-couplet { border:0; border-radius:10px; background:#f3f0e7; padding:15px 20px; text-align:right; font-size:1.35rem; line-height:2; }
.rp-source-links { padding-left:23px; }
.rp-source-links li { margin:6px 0; }
.rp-storage { display:flex; align-items:center; gap:30px; justify-content:space-between; padding:22px 0; }
.rp-storage h2 { font-size:1rem; margin:0 0 7px; }
.rp-storage p { max-width:690px; font-size:.8rem; line-height:1.65; margin:0; }
.rp-storage button { flex-shrink:0; font-size:.8rem; white-space:normal; max-width:230px; }
.rp-footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0; border-top:1px solid #dcded1; font-size:.76rem; }
@media(max-width:760px) {
  .rp-intro { grid-template-columns:minmax(0,1fr) 150px; gap:18px; padding-top:32px; }
  .rp-art-label { font-size:.48rem; }
  .rp-art p { font-size:.8rem; }
  .rp-controls { align-items:flex-start; flex-direction:column; gap:10px; }
  .rp-controls select { width:100%; }
  .rp-form-label { display:none; }
  .rp-storage { align-items:flex-start; flex-direction:column; gap:15px; }
}
@media(max-width:520px) {
  .rp-header-inner { gap:8px; }
  .rp-brand { font-size:.97rem; gap:7px; }
  .rp-brand small { font-size:.6rem; }
  .rp-status { font-size:.64rem; max-width:94px; padding:6px 8px; }
  .rp-intro { grid-template-columns:1fr; gap:16px; }
  .rp-art { display:none; }
  .rp-intro h1 { font-size:2.2rem; }
  .rp-meta { gap:8px; font-size:.74rem; }
  .rp-review-notice { padding:13px 14px; }
  .rp-details summary { padding:13px 14px; }
  .rp-details-body { padding:0 16px 15px; }
  .rp-controls { padding:17px; }
  .rp-story-switch { padding:17px 15px 0; }
  .rp-story-switch button { font-size:.77rem; padding:9px; }
  .rp-story-heading { padding:20px 18px 14px; }
  .rp-story-heading h2 { font-size:1.45rem; }
  .rp-steps { padding:0 6px; }
  .rp-steps button { font-size:.72rem; padding:12px 2px; }
  .rp-completed { font-size:.57rem; }
  .rp-stage { padding:22px 18px; }
  .rp-panels { grid-template-columns:1fr; gap:12px; }
  .rp-panel { padding:17px; }
  .rp-prompt { font-size:1rem; }
  .rp-stage-actions .btn { width:100%; }
  .rp-footer { flex-direction:column; gap:7px; }
}
@media(prefers-reduced-motion:reduce) { .rumi-preview * { scroll-behavior:auto !important; transition:none !important; } }