/* Short chapter transitions, using the existing light blue and dark green. */
.sj-transition-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:clamp(24px,4vw,44px); overflow:auto; border:1px solid #87b2c9; border-radius:24px; color:var(--chrome-navy); background:linear-gradient(125deg,#c4e0f6,#dbefe8); box-shadow:0 28px 90px #082a5a55; }
.sj-transition-dialog::backdrop { background:#082a5a80; backdrop-filter:blur(5px); }
.sj-transition-dialog[open] { animation:sj-popup-enter 240ms ease-out both; }
.sj-transition-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sj-transition-top .kicker { margin:0; color:#234f70; }
.sj-transition-close { flex:none; width:44px; height:44px; border:1px solid #8caebf; border-radius:50%; color:#082a5a; background:#e8f3f8; font-size:22px; cursor:pointer; }
.sj-transition-flow { display:flex; align-items:center; width:120px; margin:28px 0; }
.sj-transition-flow span { width:19px; height:19px; border:2px solid #286a53; border-radius:50%; background:#edf6fc; }
.sj-transition-flow span:last-child { background:#286a53; }
.sj-transition-flow i { height:2px; flex:1; background:#397fa1; }
.sj-transition-dialog h3 { margin:0 0 20px; font-size:clamp(27px,3vw,39px); line-height:1.2; letter-spacing:-.04em; }
.sj-transition-dialog > p { margin:0 0 30px; font-size:15px; line-height:1.8; color:#264b68; }
.sj-transition-continue { min-height:48px; max-width:100%; padding:14px 22px; border:1px solid #20553f; border-radius:25px; background:var(--chrome-green-surface); color:#fff; font:600 13px/1.5 OpenSans,Arial,sans-serif; cursor:pointer; }
.sj-transition-continue:hover,.sj-transition-close:hover { background:#20553f; color:#fff; }
.sj-transition-dialog button:focus-visible { outline:3px solid #075f96; outline-offset:4px; }
.story-scroll.sj-transition-paused { overflow-y:hidden; scroll-behavior:auto; }
@keyframes sj-popup-enter { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .sj-transition-dialog[open] { animation:none; } }
@media(forced-colors:active) { .sj-transition-dialog { color:CanvasText; background:Canvas; border-color:CanvasText; } .sj-transition-dialog > p,.sj-transition-top .kicker { color:CanvasText; } .sj-transition-continue,.sj-transition-close { color:ButtonText; background:ButtonFace; border-color:ButtonText; } .sj-transition-dialog button:focus-visible { outline-color:Highlight; } }