/* Owner-selected original framing, with Ava's credit and optional reaction.
   Scoped so the separate immersive option retains its own art direction. */
.framed-option .home-stories{--stories-paper:#F5F5F7}
.framed-option .scene-instruction strong{font-weight:600;color:var(--ink)}
.framed-option .scene-instruction span{white-space:nowrap}
.framed-option .scene-instruction p{max-width:none}
.framed-option .story-reveal{display:flex;flex-direction:column;align-items:center;gap:8px}
.framed-option .story-card-holder{width:calc(296px*var(--card-fit,1));height:calc(424px*var(--card-fit,1))}
.framed-option .story-card{transform-origin:top left}
.framed-option .reaction-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;flex:none;color:var(--ink);font-size:14px;line-height:20px;text-underline-offset:4px;white-space:nowrap}
.framed-option .reaction-link:hover{text-decoration:underline}
.framed-option .reaction-dialog{padding:24px 32px;border:0;max-width:none;max-height:none;width:100%;height:100dvh;background:var(--paper);color:var(--ink)}
.framed-option .reaction-dialog::backdrop{background:var(--paper)}
.framed-option .reaction-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:24px}
.framed-option .reaction-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.framed-option .reaction-dialog h2{font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
.framed-option .reaction-dialog header p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.framed-option .close-reaction{display:grid;place-items:center;width:44px;height:44px;flex:none;background:none;color:inherit;border:0}
.framed-option .close-reaction svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.framed-option #ava-reaction{width:min(100%,calc((100dvh - 140px)*9/16));height:auto;max-width:100%;max-height:100%;aspect-ratio:9/16;object-fit:contain;justify-self:center;align-self:center;border-radius:8px;background:var(--ink)}
.framed-option .reaction-error{text-align:center;font-size:14px}
.framed-option .reaction-error a{text-decoration:underline}
@media(max-width:700px){
 .framed-option .stage{height:clamp(220px,calc(75vw + (476px - 75vw)*var(--reveal)),var(--stage-available,calc(100svh - 300px)))}
 .framed-option .reaction-link{font-size:13px}
 .framed-option .reaction-dialog{padding:16px}
 .framed-option .reaction-dialog[open]{gap:16px}
 .framed-option .reaction-dialog h2{font-size:16px}
 .framed-option .reaction-dialog header p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .js .framed-option .scene-pin{grid-template-rows:auto 476px 52px}
 .framed-option .stage{height:476px}
}