.plate.story-plate{position:relative;isolation:isolate;overflow:hidden;padding:0;background:#fff!important;aspect-ratio:539/614}
.story-art{position:absolute;left:50%;top:50%;width:539px;height:614px;transform-origin:center;pointer-events:none}
.story-art iframe{display:block;width:539px;height:614px;border:0;background:transparent;pointer-events:none}
.story-motion-toggle{position:absolute;right:18px;bottom:18px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:linear-gradient(145deg,#ffffffed,#ffffff8c 48%,#f0f0f0b3);color:#687078;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 3px #00000009,0 5px 18px #00000009;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:15px Selecta,Arial,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.story-motion-toggle::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(140deg,#fff 4%,#afb3b6 20%,#ffffffeb 38%,#fff 57%,#a9adb0 79%,#ffffffb8 96%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.8}
.story-motion-toggle:active{transform:scale(.97)}
.story-motion-toggle:focus-visible{outline:2px solid #718898;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.story-motion-toggle:hover{background:linear-gradient(145deg,#fff,#ffffffb8 48%,#edededc9)}}
@media(prefers-reduced-motion:reduce){.story-motion-toggle{transition:none}}

/* The first block is the actual swipeable use-case deck, including its apps. */
.story-interactive .story-art,.story-interactive .story-art iframe{pointer-events:auto}

/* The stacked chapter puts the actual phones directly on the page. The wider
   transparent artboard reserves room for the deck's rear phones and shadows. */
html[data-layout="stack"] .show .sec > .plate{margin-top:calc(clamp(8px,1.5vh,20px) * .7)}
/* The artboard's negative top margin must not paint over the subhead. */
html[data-layout="stack"] .show .sec > .wrap{position:relative;z-index:1}
html[data-layout="stack"] .show .sec > .plate.story-plate{
 --pw:min(700px,116vw);width:var(--pw);max-width:none;
 margin-inline:calc((100% - var(--pw))/2);
 /* The source phone begins 49px into its 539px artboard. Include that
    transparent inset when reducing the visible subhead-to-phone gap by 30%. */
 margin-top:calc(clamp(8px,1.5vh,20px) * .7 - var(--pw) * 49 / 539 * .3);
 background:transparent!important;box-shadow:none;border:0;border-radius:0;
}
/* Keep the 44px playback control 12px outside the phone's faint right edge. */
html[data-layout="stack"] .story-motion-toggle{
 right:calc((100% - var(--section-phone-width)) / 2 - 44px - 12px);
 top:calc(var(--section-phone-top) + var(--section-phone-height) * var(--story-control-height,.88) - 22px);
 bottom:auto;
}
html[data-layout="stack"] .story-ios{--story-control-height:.78}

/* The use-case artboard is 539 × 614 with a 252px-wide centered phone.
   Match the hero's actual phone width, then remove the artboard's empty top
   inset so the glass starts 16px below the marquee's scrollport. */
html[data-layout="stack"] .show .has-case-marquee > .plate.story-plate{
 --pw:calc(var(--hero-phone-width) * 539 / 252);
 margin-top:calc(var(--case-phone-gap,16px) - (var(--pw) * 614 / 539 - var(--hero-phone-width) * 1562 / 760) / 2);
}
/* The transparent iframe now overlaps the rail's padding, not its hit targets. */
html[data-layout="stack"] .has-case-marquee .block-case-marquee{
 z-index:2;
 /* Increase the settled 28px copy-to-rail gap by 50%, including its top inset. */
 margin-top:calc((26px + 14px) * .7 * 1.5 - 14px);
}

/* Match the hero relative to the physical phone, excluding artboard padding.
   Its deck adds 15px above/below the phone; the fade spans its bottom 40%. */
html[data-layout="stack"] .show .sec > .plate:is(.story-ribbon-fade,.story-handle){--pw:calc(var(--hero-phone-width) * 539 / 251.16)}
html[data-layout="stack"] .plate.story-plate{
 --section-phone-width:calc(100% * 251.16 / 539);
 --section-phone-top:calc(100% * 49 / 614);
 --section-phone-height:calc(100% * 516.36 / 614);
}
html[data-layout="stack"] .plate:is(.story-build,.story-multiplayer,.story-personal){
 --section-phone-width:calc(100% * 252 / 539);
 --section-phone-top:calc(100% * 48.037 / 614);
 --section-phone-height:calc(100% * 517.926 / 614);
}
html[data-layout="stack"] .plate.story-plate::after{
 content:"";position:absolute;inset:auto 0 auto;
 top:calc(var(--section-phone-top) + var(--section-phone-height) * .6 + 4px);
 height:calc(var(--section-phone-height) * .4 + 12px);z-index:3;
 box-sizing:content-box;border-bottom:120px solid #fff;
 background:var(--phone-bottom-fade,linear-gradient(to bottom,#fff0 0%,#ffffff8c 43%,#fffffff2 79%,#fff 98%));
 background-clip:padding-box;pointer-events:none;
}
@media(prefers-contrast:more){html[data-layout="stack"] .plate.story-plate::after{
 top:calc(var(--section-phone-top) + var(--section-phone-height) * .76 + 8.8px);
 height:calc(var(--section-phone-height) * .24 + 7.2px);
}}

/* Finish the iOS fade above the dock while keeping both app rows visible. */
html[data-layout="stack"] .plate.story-ios::after{
 top:calc(var(--section-phone-top) + var(--section-phone-height) * .56);
 height:calc(var(--section-phone-height) * .44 + 12px);
 background:linear-gradient(to bottom,#fff0 0%,#ffffff8c 29%,#fffffff2 54%,#fff 67%);
}

/* A single widget ribbon crosses the iOS screen. Its rim mask is measured from
   the real phone, never an approximate second phone illustration. */
html[data-layout=stack] #sec-ios{position:relative}
.ios-widget-ribbon{position:absolute;z-index:4;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ios-widget-ribbon[hidden]{display:none}
.ios-widget-ribbon.is-dragging{cursor:grabbing}
.ios-ribbon-belt{position:absolute;inset:0;pointer-events:none}
.ios-ribbon-widget{position:absolute;left:0;top:0;display:block;border:0;padding:0;background:none;color:inherit;cursor:inherit;pointer-events:auto;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.ios-ribbon-artwork{display:block;position:relative;width:100%;aspect-ratio:1;pointer-events:none}
.ios-ribbon-surface{display:block;position:absolute;left:0;top:0;width:170px;height:170px;transform-origin:0 0}
.ios-ribbon-face{display:block;position:relative;width:170px;height:170px;overflow:hidden}
.ios-ribbon-face>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ios-ribbon-rim{position:absolute;inset:0;pointer-events:none}
.ios-ribbon-shadow{position:absolute;inset:0;border-radius:22%;pointer-events:none}
.ios-widget-ribbon:focus-visible{outline:0}
.ios-widget-ribbon:focus-visible::after{content:"";position:absolute;inset:8px max(12px,calc(50% - 160px));border-radius:24px;border:2px solid #246BFE;pointer-events:none}
.ios-ribbon-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* Loading is a content state, including on the clean sharing site. */
.story-loading{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.story-loading[hidden]{display:none}

/* Native-size skeleton geometry, ready before any image, font or iframe. */
.story-skeleton{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity 180ms ease-out,visibility 0s 180ms}
[data-art-ready=true]>.story-skeleton{opacity:0;visibility:hidden}
.story-skeleton-phone{position:absolute;left:26.7%;top:8%;width:46.6%;height:84%;box-sizing:border-box;border:1px solid #dedede;border-radius:17.3% / 8.4%;background:linear-gradient(155deg,#fafafa,#f5f5f5);box-shadow:inset 0 0 0 5px #fff,0 12px 24px -18px #0002;overflow:hidden}
@media(prefers-reduced-motion:reduce){.story-skeleton{transition:none}}
@media(forced-colors:active){.story-skeleton-phone{border-color:GrayText}}

/* Preserve the artboard-aware spacing and add 100px above the iOS section. */
html[data-layout="stack"] .show #sec-ios{
 padding-top:calc(clamp(96px,12vh,168px) * .84 + (var(--hero-phone-width) * 614 / 252 - var(--hero-phone-width) * 1562 / 760) * .1 + 100px);
}

/* Mobile art direction: show the upper-left of a larger phone, with its right
   side outside the viewport. The iframe and ribbon share measured geometry;
   this scales the existing render without allocating a larger glass canvas. */
@media(max-width:640px){
 html[data-layout="stack"] .show .sec > .plate.story-ios-closeup{
  --pw:calc(100vw * 539 / 251.16);
  margin-left:calc(50% - 22vw - (var(--pw) - 100vw) / 2);
  margin-right:0;
 }
 html[data-layout="stack"] .story-ios-closeup .story-motion-toggle{
  right:calc((var(--pw) - 100vw) / 2 + 28vw + 16px);
 }
}

/* Playback time is supplied by the story clock, with no independent timer. */
.story-progress{position:absolute;inset:-1px;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none;overflow:visible}
.story-progress circle{fill:none;stroke:#a4afb7;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.story-restart{margin-top:-54px;display:grid;place-items:center}
.story-restart[hidden]{display:none}
html:not([data-layout="stack"]) .story-restart{bottom:72px;margin-top:0}

html[data-layout="stack"] .show .sec > .plate:is(.story-multiplayer,.story-personal){--pw:calc(var(--hero-phone-width) * 539 / 252)}