/* Full-screen stories: one image plane, controls on a consistent grid. */
body.stories-open{overflow:hidden}
#story-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;border-radius:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;background:#141516;color:#fff;overflow:hidden}
#story-dialog::backdrop{background:#141516;backdrop-filter:none}
#story-dialog[open]{display:grid;place-items:center}
.story-ambient{position:absolute;inset:-70px;background-position:center;background-size:cover;filter:blur(48px);opacity:.48;pointer-events:none;transition:background-image .3s ease}
#story-dialog:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#14151630,#111214a6);pointer-events:none}
.viewer-layout{position:relative;z-index:1;display:grid;grid-template-columns:48px auto 48px;align-items:center;gap:clamp(18px,3vw,64px)}
.viewer-frame{position:relative;isolation:isolate;overflow:hidden;width:min(calc((100dvh - 64px)*.5625),calc(100vw - 176px));aspect-ratio:9/16;border-radius:16px;background:#202327;box-shadow:0 24px 90px #0003;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.viewer-slides,.viewer-slide{position:absolute;inset:0}
.viewer-slide{background-size:cover;background-position:center;will-change:transform,opacity}
.viewer-slide.is-cafe{background-size:auto 100%;background-position:right}
.viewer-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0007,transparent 24%,transparent 48%,#000b)}
.viewer-caption{position:absolute;z-index:1;inset:auto 8% 7%;text-align:left;text-wrap:balance}
.viewer-caption h2{margin:0 0 12px;font-size:clamp(28px,4.4dvh,72px);line-height:1.06;font-weight:650;letter-spacing:-.035em;color:#fff}
.viewer-caption p{margin:0;font-size:clamp(15px,2.1dvh,34px);line-height:1.4;color:#ffffffe0}
.viewer-progress{position:absolute;z-index:3;top:8px;left:12px;right:12px;display:flex;gap:5px}
.viewer-progress button{flex:1;min-width:0;border:0;background:none;padding:8px 0;cursor:pointer}
.viewer-progress-track{display:block;overflow:hidden;height:3px;border-radius:3px;background:#ffffff55}
.viewer-progress-fill{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.viewer-topline{position:absolute;z-index:3;top:32px;left:8%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.viewer-brand{font-size:clamp(10px,1.3dvh,19px);font-weight:600;letter-spacing:.16em;color:#ffffffe0}
#story-dialog .viewer-control{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;padding:12px;border:0;border-radius:50%;background:#ffffff12;color:#fff;cursor:pointer;transition:background .18s,opacity .18s}
#story-dialog .viewer-control:hover{background:#ffffff26}
#story-dialog .viewer-control:disabled{opacity:.22;cursor:default}
#story-dialog .viewer-control svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#story-dialog .viewer-close{position:absolute;z-index:4;right:max(20px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));background:transparent}
#story-dialog .viewer-pause{width:40px;height:40px;padding:9px;background:#0002}
.viewer-pause .play-symbol{display:none}
.viewer-pause[aria-label="Продолжить историю"] .pause-symbol{display:none}
.viewer-pause[aria-label="Продолжить историю"] .play-symbol{display:block}
#story-dialog button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:600px){
 .viewer-layout{display:block;width:100%;padding:64px 12px 18px}
 .viewer-frame{width:min(calc((100dvh - 82px)*.5625),100%);margin:auto;border-radius:12px}
 #story-dialog .viewer-close{top:max(8px,env(safe-area-inset-top));right:10px;width:40px;height:40px;padding:10px}
 #story-dialog .viewer-prev,#story-dialog .viewer-next{position:absolute;z-index:4;top:calc(50% + 23px);width:36px;height:44px;padding:8px;background:#0004;transform:translateY(-50%)}
 #story-dialog .viewer-prev{left:16px}#story-dialog .viewer-next{right:16px}
 .viewer-topline{top:28px}.viewer-caption h2{font-size:clamp(26px,7vw,38px)}.viewer-caption p{font-size:clamp(14px,3.8vw,18px)}
}
@media(prefers-reduced-motion:reduce){.story-ambient,#story-dialog .viewer-control{transition:none}}