/* A real ascending step rhythm at every viewport, not a flat mobile row.
   State remains controlled by the existing accessible preview buttons. */
html[data-site="alsaeed"] .ae-story-journey-preview{grid-template-columns:minmax(0,1fr) 242px}
html[data-site="alsaeed"] .ae-story-progress{height:164px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:0;padding:52px 20px 17px;isolation:isolate}
html[data-site="alsaeed"] .ae-story-progress>button{width:100%;min-width:0;height:44px;transform:translateY(calc(var(--dot)*-20px));gap:5px;z-index:1}
html[data-site="alsaeed"] .ae-story-progress>button>span{width:16px;height:16px;flex:none;border-color:#d6b86f;background:#244c55;transition:background .45s,box-shadow .45s}
html[data-site="alsaeed"] .ae-story-progress>button:not(:last-child)>span::after{inset-inline-start:13px;bottom:6px;width:40px;height:21px;border-inline-end:2px solid #bfa15e;border-bottom:2px solid #bfa15e;opacity:.8}
html[data-site="alsaeed"] .ae-story-progress>button[aria-pressed="true"]::before{content:'';position:absolute;width:20px;height:27px;bottom:50px;left:calc(50% - 10px);background:#ffe4a9;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Ccircle cx='13' cy='4' r='3'/%3E%3Cpath d='M10 9h5l2 7 5 3-2 3-6-4-1-4-2 7 6 6-3 3-7-8 1-8-4 5-3-2 6-8z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 6px #f4cd7877);animation:aeStepArrival .45s ease-out}
html[data-site="alsaeed"] .ae-story-progress>button[aria-pressed="true"]>span{box-shadow:0 0 0 7px #edc36a26,0 0 23px #fbd48390}
@keyframes aeStepArrival{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){html[data-site="alsaeed"] .ae-story-journey-preview{grid-template-columns:minmax(0,1fr) 210px}html[data-site="alsaeed"] .ae-story-progress{padding-inline:10px}}
@media(max-width:600px){html[data-site="alsaeed"] .ae-story-journey-preview{grid-template-columns:1fr}html[data-site="alsaeed"] .ae-story-progress{height:132px;padding:46px 34px 11px;gap:0;max-width:390px;width:100%;margin:auto}html[data-site="alsaeed"] .ae-story-progress>button{height:44px;transform:translateY(calc(var(--dot)*-18px))}html[data-site="alsaeed"] .ae-story-progress>button:not(:last-child)>span::after{height:19px;width:calc((100vw - 158px)/4);min-width:35px;max-width:54px}html[data-site="alsaeed"] .ae-story-progress>button[aria-pressed="true"]::before{bottom:48px}}
@media(prefers-reduced-motion:reduce){html[data-site="alsaeed"] .ae-story-progress>button::before{animation:none!important}html[data-site="alsaeed"] .ae-story-progress>button>span{transition:none!important}}
html[data-site="alsaeed"] .ae-illustration-note{font-size:11px;line-height:1.6;color:var(--ae-muted,#62777a);margin:8px 0 16px;text-align:start}
html[data-site="alsaeed"] .ae-page-art{position:relative}
html[data-site="alsaeed"] .ae-page-art .ae-illustration-note{position:absolute;inset-inline:10px;bottom:6px;width:max-content;max-width:calc(100% - 20px);border-radius:5px;padding:3px 7px;background:#0d3038dd;color:#fff;margin:0;font-size:10px}
html[data-site="alsaeed"] .ae-story-scenes img{object-position:center;object-fit:contain}
html[data-site="alsaeed"][data-ae-theme="dark"] .ae-illustration-note{color:#bfd0d2}
html[data-site="alsaeed"][data-ae-theme="dark"] .ae-page-art .ae-illustration-note{color:#fff}
