/* The first step out (step-out-pages-v840): three painted pages to swipe
   through while Alderwing loads, then Enter Alderwing. */
dialog.sop{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);border:0;
  display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;color:#fff3d1;font-family:'Inter',sans-serif;
  background:radial-gradient(120% 70% at 50% 38%,#2c4234 0%,#1b2b21 55%,#121c16 100%);opacity:0;transition:opacity .35s ease}
dialog.sop:not([open]),dialog.sop [hidden]{display:none!important}
dialog.sop::backdrop{background:#121c16}
dialog.sop.sop-in{opacity:1}
dialog.sop.sop-out{opacity:0;pointer-events:none}
/* Each page is as big as the screen allows: the painting is 1080 × 1610. */
.sop{--sop-w:min(88vw,calc((100vh - 150px) * .6708),640px)}
@supports (height:100dvh){.sop{--sop-w:min(88vw,calc((100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .6708),640px)}}
.sop-track{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-x;
  padding:14px calc(50vw - var(--sop-w) / 2) 6px;outline:none;-webkit-overflow-scrolling:touch}
.sop-track::-webkit-scrollbar{display:none}
.sop-track:focus-visible{outline:2px solid #e8c56c;outline-offset:-4px}
.sop-page{flex:0 0 var(--sop-w);margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.sop-page img{display:block;width:100%;height:auto;aspect-ratio:1080/1610;border-radius:6px;background:#efe6d1;
  box-shadow:0 18px 40px #0008,0 2px 6px #0006;user-select:none;-webkit-user-drag:none;pointer-events:none}
.sop-foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 16px 16px}
.sop-dots{display:flex;gap:4px}
.sop-dot{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.sop-dot::before{content:'';width:9px;height:9px;border-radius:50%;background:#fff3d155;transition:background .2s,transform .2s}
.sop-dot[aria-current=true]::before{background:#e8c56c;transform:scale(1.25)}
.sop-hint{margin:-6px 0 0;font-size:12px;color:#fff3d1aa;transition:opacity .3s}
.sop.sop-swiped .sop-hint{opacity:0}
.sop-act{min-height:52px;display:flex;align-items:center;justify-content:center}
.sop-status{margin:0;display:flex;align-items:center;gap:10px;font-size:14px;color:#fff3d1cc}
.sop-spin{width:16px;height:16px;border-radius:50%;border:2px solid #fff3d133;border-top-color:#e8c56c;animation:sop-spin 1s linear infinite}
@keyframes sop-spin{to{transform:rotate(360deg)}}
.sop-enter{min-width:min(280px,80vw);min-height:52px;padding:12px 26px;border-radius:14px;border:1px solid #f6dd94;cursor:pointer;
  background:linear-gradient(#f3d27a,#d9a943);color:#2b1d08;font:800 18px/1 'Rajdhani',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 6px 18px #0007,inset 0 1px 0 #fff6;animation:sop-pop .45s cubic-bezier(.2,1.4,.4,1)}
.sop-enter:focus-visible{outline:3px solid #fff3d1;outline-offset:3px}
.sop-enter:active{transform:translateY(1px)}
@keyframes sop-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
/* Arrows help a mouse; thumbs swipe. */
.sop-arrow{position:absolute;top:calc(50% - 60px);width:44px;height:44px;border-radius:50%;border:1px solid #fff3d144;background:#121c16cc;color:#fff3d1;
  font:700 26px/1 'Rajdhani',sans-serif;cursor:pointer;display:none;place-items:center}
.sop-prev{left:max(12px,calc(50vw - var(--sop-w) / 2 - 60px))}
.sop-next{right:max(12px,calc(50vw - var(--sop-w) / 2 - 60px))}
.sop-arrow:disabled{opacity:.25;cursor:default}
@media (hover:hover) and (pointer:fine){.sop-arrow{display:grid}}
/* A phone on its side: the page takes the full height, the buttons sit beside it. */
@media (orientation:landscape) and (max-height:560px){
  dialog.sop{flex-direction:row;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .sop{--sop-w:calc((100vh - 24px) * .6708)}
  @supports (height:100dvh){.sop{--sop-w:calc((100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .6708)}}
  .sop-track{padding:12px calc((100vw - min(240px,34vw)) / 2 - var(--sop-w) / 2)}
  .sop-foot{width:min(240px,34vw);justify-content:center;padding:12px}
  .sop-enter{min-width:0;width:100%;padding:12px 10px;font-size:16px}
  .sop-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){dialog.sop,.sop-dot::before{transition:none}.sop-spin{animation-duration:2.5s}.sop-enter{animation:none}}