.rp-story{--device:#252222;--white:#fff;--shade:rgba(46,39,36,.13);--photo-ink:#fff;--scrim:rgba(0,0,0,.35)}
.rp-story{background:var(--bg)}
.rp-story button{font:inherit;cursor:pointer}
.rp-story button:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px}
.rp-story header{max-width:1120px;margin:auto;padding:24px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.rp-story header img{width:143px;height:30px}
.rp-story header span{font-size:12px;color:var(--dim)}
.rp-story main{max-width:1120px;margin:auto;padding:24px}
.rp-story .tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.rp-story .transport[hidden]{display:none}
.rp-story .tools button,.rp-story .control{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;background:transparent;border:1px solid var(--line);border-radius:99px;padding:10px 16px;min-height:44px;color:var(--ink);font-size:13px}
.rp-story .tools button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rp-story .intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.rp-story .intro h1{font-size:42px;margin:0 0 10px}
.rp-story .intro p{color:var(--dim);margin:0;max-width:52ch}
.rp-story .eyebrow{color:var(--accent-text)!important;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;margin-bottom:10px!important}
.rp-story .transport{display:flex;gap:6px;flex-shrink:0}
.rp-story .study{background:var(--panel-2);border-radius:24px;overflow:hidden}
.rp-story .scene{height:530px;position:relative;isolation:isolate;overflow:hidden}
.rp-story .scene::before{content:'';position:absolute;inset:45% 0 0;background:var(--bg-tint);z-index:-1}
.rp-story .scene-label{position:absolute;top:26px;left:32px;font-size:12px;color:var(--dim)}
.rp-story .phone{position:absolute;left:24%;top:51%;transform:translate(-50%,-50%);width:236px;height:438px;padding:7px;border-radius:35px;background:var(--device);box-shadow:0 18px 40px var(--shade);transition:left .7s ease;z-index:3}
.rp-story .screen{width:100%;height:100%;background:var(--bg);border-radius:28px;position:relative;overflow:hidden}
.rp-story .island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:66px;height:17px;border-radius:20px;background:var(--device);z-index:10}
.rp-story .view{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s ease;pointer-events:none}
.rp-story .camera{opacity:1;transform:none;background:var(--device);color:var(--photo-ink)}
.rp-story .camera>img:not(.captured){width:100%;height:100%;object-fit:cover}
.rp-story .cam-top{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:12px;text-shadow:0 2px 4px var(--scrim)}
.rp-story .cam-bottom{position:absolute;bottom:0;left:0;right:0;padding:16px;background:var(--scrim);text-align:center}
.rp-story .cam-bottom small{display:block;letter-spacing:.15em;font-size:10px;margin-bottom:10px}
.rp-story .shutter{width:49px;height:49px;border:3px solid var(--white);border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 3px var(--device);margin:auto}
.rp-story .rp-story-flash{position:absolute;inset:0;background:var(--white);opacity:0;pointer-events:none}
.rp-story .captured{position:absolute;bottom:20px;left:15px;width:36px;height:45px;object-fit:cover;border:2px solid var(--white);border-radius:5px;opacity:0;transition:opacity .3s}
.rp-story .scan{background:var(--panel-2);padding:45px 20px;text-align:center}
.rp-story .scan .code{width:150px;height:150px;padding:9px;background:var(--qr-bg);border:2px solid var(--accent);border-radius:12px;margin:35px auto 24px}
.rp-story .scan .code img{width:100%;height:100%}
.rp-story .scan p{font-size:13px}
.rp-story .link-pill{background:var(--panel);padding:12px;border-radius:10px;color:var(--ink);font-size:11px;box-shadow:var(--shadow)}
.rp-story .guest{padding:34px 12px 12px}
.rp-story .url{font-size:9px;color:var(--dim);text-align:center;margin-bottom:12px}
.rp-story .cover{height:94px;overflow:hidden;border-radius:10px;position:relative;background:var(--panel-2)}
.rp-story .cover img{object-position:center 40%;width:100%;height:100%;object-fit:cover}
.rp-story .cover::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,var(--scrim))}
.rp-story .cover p{position:absolute;bottom:8px;left:10px;margin:0;color:var(--photo-ink);font:21px/1.1 var(--font-display);z-index:1}
.rp-story .guest-actions{display:flex;gap:5px;margin:12px 0}
.rp-story .add{flex:1;background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:9px 4px;text-align:center;font-size:11px;font-weight:650;position:relative}
.rp-story .browse{background:var(--panel);border:1px solid var(--line);font-size:10px;padding:9px 7px;border-radius:8px}
.rp-story .gal-title{font-size:11px;margin:15px 0 8px;font-weight:650}
.rp-story .tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rp-story .tiles img{object-position:center 35%;display:block;object-fit:cover;width:100%;height:77px;border-radius:5px}
.rp-story .new-slot{height:77px;border:1px dashed var(--line);border-radius:5px;overflow:hidden;position:relative}
.rp-story .new-slot img{opacity:0;transform:scale(.85);transition:opacity .4s,transform .5s}
.rp-story .new-slot::after{content:'Your photo';position:absolute;bottom:5px;left:5px;background:var(--panel);color:var(--ink);font-size:8px;padding:2px 5px;border-radius:4px;opacity:0}
.rp-story .picker{background:var(--panel);padding:45px 14px 14px}
.rp-story .picker-head{font-size:13px;font-weight:650;display:flex;justify-content:space-between;margin-bottom:24px}
.rp-story .picker-head span{color:var(--accent-text);font-size:11px}
.rp-story .picker .tiles img{height:93px}
.rp-story .chosen{position:relative;border-radius:7px;outline:3px solid var(--accent);outline-offset:1px}
.rp-story .chosen::after{content:'✓';position:absolute;right:5px;top:5px;background:var(--accent);color:var(--accent-ink);width:21px;height:21px;text-align:center;font-size:12px;border-radius:50%}
.rp-story .picker .add{margin-top:22px}
.rp-story .picker p{font-size:11px;color:var(--dim);margin:18px 0}
.rp-story .upload-note{height:24px;font-size:10px;color:var(--ok);margin:6px 0 0;opacity:0}
.rp-story .pulse{position:absolute;bottom:130px;left:50%;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);opacity:0;z-index:12;pointer-events:none}
.rp-story .sign{position:absolute;left:44%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);width:146px;transition:opacity .5s,transform .7s;opacity:.6;z-index:1}
.rp-story .sign-paper{background:var(--panel);padding:19px 14px;text-align:center;box-shadow:0 9px 20px var(--shade);border:1px solid var(--line)}
.rp-story .sign-paper .wm{width:95px;height:auto}
.rp-story .sign-paper .qr{width:104px;height:104px;margin:15px 0 8px}
.rp-story .sign-paper p{font-size:11px;line-height:1.4;margin:0}
.rp-story .stand{height:13px;background:var(--ink);width:110%;margin:0 -5%;border-radius:3px;box-shadow:0 6px 10px var(--shade)}
.rp-story .album{position:absolute;right:5%;top:86px;width:320px;background:var(--panel);padding:18px;border-radius:14px;box-shadow:0 18px 40px var(--shade);transition:opacity .5s,transform .7s}
.rp-story .album-label{font-size:10px;color:var(--accent-text);letter-spacing:.12em;text-transform:uppercase}
.rp-story .album h3{font:28px/1.2 var(--font-display);margin:8px 0 16px}
.rp-story .album .tiles img,.rp-story .album .new-slot{height:130px}
.rp-story .album-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:14px}
.rp-story .album-foot .saved{color:var(--ok);opacity:0;transition:opacity .4s}
.rp-story .story{padding:0 32px 26px}
.rp-story .caption{min-height:58px}
.rp-story .caption h3{font:26px/1.2 var(--font-display);margin:0 0 7px}
.rp-story .caption p{font-size:14px;color:var(--dim);margin:0}
.rp-story .steps-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:23px}
.rp-story .steps-nav button{text-align:left;border:0;border-top:2px solid var(--line);background:transparent;color:var(--dim);padding:12px 0 0;min-height:44px;font-size:13px;position:relative}
.rp-story .steps-nav button[aria-current=true]{color:var(--accent-text);border-color:var(--accent)}
.rp-story .steps-nav b{font-size:11px;margin-right:8px}
.rp-story .note{font-size:12px;color:var(--dim);margin:16px 0}
.rp-story .old{width:100%;height:780px;border:0;display:none;background:var(--bg)}
.rp-story [data-phase=capture] .captured{opacity:1}
.rp-story [data-phase=capture] .rp-story-flash{animation:rp-story-flash .35s ease-out}
.rp-story [data-phase=scan] .camera,.rp-story [data-phase=open] .camera,.rp-story [data-phase=choose] .camera,.rp-story [data-phase=upload] .camera,.rp-story [data-phase=done] .camera{opacity:0}
.rp-story [data-phase=scan] .scan{opacity:1;transform:none}
.rp-story [data-phase=scan] .sign{opacity:1;transform:translate(-50%,-50%) rotate(0)}
.rp-story [data-phase=open] .guest,.rp-story [data-phase=upload] .guest,.rp-story [data-phase=done] .guest{opacity:1;transform:none}
.rp-story [data-phase=choose] .picker{opacity:1;transform:none}
.rp-story [data-phase=open] .pulse{animation:rp-story-tap 1.7s ease both}
.rp-story [data-phase=choose] .pulse{animation:rp-story-tap 1.7s ease both;bottom:101px}
.rp-story [data-phase=upload] .new-slot img,.rp-story [data-phase=done] .new-slot img{opacity:1;transform:scale(1)}
.rp-story [data-phase=upload] .new-slot,.rp-story [data-phase=done] .new-slot{border:1px solid var(--accent)}
.rp-story [data-phase=done] .new-slot::after,.rp-story [data-phase=done] .saved,.rp-story [data-phase=done] .upload-note{opacity:1}
.rp-story [data-phase=upload] .album .new-slot img{opacity:0}
.rp-story [data-phase=upload] .upload-note{opacity:1;color:var(--dim)}
.rp-story [data-phase=done] .sign{opacity:.3}
@keyframes rp-story-flash{0%{opacity:0}20%{opacity:.8}100%{opacity:0}}
@keyframes rp-story-tap{0%,30%{opacity:0;transform:scale(1.8)}50%,70%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
.rp-story [data-layout=focus] .album{opacity:0;transform:translateX(60px);pointer-events:none}
.rp-story [data-layout=focus] .phone{left:50%}
.rp-story [data-layout=focus] .sign{left:72%}
.rp-story [data-layout=focus] .scene-label{left:32px}
.rp-story [data-layout=current] .study{display:none}
.rp-story [data-layout=current] .old{display:block}
@media(max-width:950px){.rp-story .album{width:265px;right:3%}
.rp-story .album .tiles img,.rp-story .album .new-slot{height:110px}
.rp-story .sign{left:46%;width:125px}
.rp-story .sign-paper .qr{width:85px;height:85px}
.rp-story .sign-paper .wm{width:84px}
.rp-story .phone{left:22%}
}
@media(max-width:700px){.rp-story header{padding:18px 18px 0}
.rp-story header span{font-size:10px}
.rp-story main{padding:20px 16px}
.rp-story .intro{display:block}
.rp-story .intro h1{font-size:32px}
.rp-story .intro p{font-size:14px}
.rp-story .transport{margin-top:15px}
.rp-story .tools{margin-bottom:22px}
.rp-story .tools button{font-size:11px;padding:9px 12px}
.rp-story .scene{height:465px}
.rp-story .scene-label{top:16px;left:20px;font-size:10px}
.rp-story .phone,.rp-story [data-layout=focus] .phone{left:46%;top:54%;width:218px;height:408px}
.rp-story .album{display:none}
.rp-story .sign,.rp-story [data-layout=focus] .sign{left:80%;top:51%;width:96px;opacity:.65}
.rp-story .sign-paper{padding:12px 8px}
.rp-story .sign-paper .qr{width:78px;height:78px;margin:10px 0}
.rp-story .sign-paper .wm{width:76px}
.rp-story .sign-paper p{font-size:8px}
.rp-story .story{padding:0 20px 20px}
.rp-story .caption{min-height:92px}
.rp-story .caption h3{font-size:25px}
.rp-story .caption p{font-size:13px}
.rp-story .steps-nav{gap:14px;margin-top:8px}
.rp-story .steps-nav button{font-size:12px}
.rp-story .steps-nav b{display:block;margin-bottom:3px}
.rp-story .guest{padding-top:32px}
.rp-story .tiles img,.rp-story .new-slot{height:70px}
.rp-story .cover{height:85px}
.rp-story .guest .pulse{bottom:125px}
.rp-story .note{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.rp-story *,.rp-story *::before,.rp-story *::after{animation:none!important;transition:none!important}
}


.rp-story{max-width:1120px;margin:32px auto 0;padding:24px 16px;background:transparent;font-family:var(--font-body)}
.rp-story .intro h2{font-family:var(--font-display);font-size:42px;font-weight:400;line-height:1.15;text-transform:none;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px}
.rp-story .steps-nav button{display:block;width:auto;margin:0;border-radius:0;box-shadow:none;font-weight:400}
.rp-story .control{font-weight:400;box-shadow:none}
@media(max-width:700px){.rp-story{padding:20px 16px;margin-top:16px}.rp-story .intro h2{font-size:32px}}