/* "What stays, what leaves": devices with a scroll-driven light, right side drawn as real text.
   Positions are percent of the 2560 x 1100 composition (assets/layout.json). */
.yo{--yo-bg:#111314;--yo-text:#e6d8b5;--yo-muted:#b5aa92;--yo-red:#c8423a;--yo-doc-glow:#c8423a;color:var(--yo-text);background:var(--yo-bg)}
:root[data-theme=light] .yo{--yo-bg:#f4efe3;--yo-text:#302c26;--yo-muted:#6c6254;--yo-red:#923b32;--yo-doc-glow:#b69362}
.yo-light{display:none!important}:root[data-theme=light] .yo-light{display:block!important}:root[data-theme=light] .yo-dark{display:none!important}
/* Without JavaScript the page has no data-theme; follow the system light preference, as the page does. */
@media(prefers-color-scheme:light){:root:not([data-theme]) .yo{--yo-bg:#f4efe3;--yo-text:#302c26;--yo-muted:#6c6254;--yo-red:#923b32;--yo-doc-glow:#b69362}:root:not([data-theme]) .yo-light{display:block!important}:root:not([data-theme]) .yo-dark{display:none!important}}
.yo-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.yo-wrap{position:relative;container-type:inline-size;max-width:1180px;margin-inline:auto;aspect-ratio:2560/1100}
.yo-stage{position:absolute;inset:0}
.yo-stage img,.yo-glow{position:absolute;display:block}
/* The phone screen at full resolution over the picture, so it stays sharp when zoomed. Same glass and
   capture rectangles as the screens layer (tools/devices-picture/replace_phone_screen.py). */
.yo-phone-screen{position:absolute;z-index:1;overflow:hidden;left:40.2089%;top:42.7237%;width:7.306%;height:38.5283%;border-radius:13.47%/5.95%}
.yo-stage .yo-phone-screen img{left:0;top:2.2%;width:100%;height:95.6%}
.yo-phone-screen.yo-light{left:40.248%;top:42.7577%;width:7.2172%;height:38.4845%;border-radius:13.79%/6.02%}
.yo-stage .yo-phone-screen.yo-light img{top:2.86%;height:94.28%}
/* Live orbs over the perspective captures, at the app's own orb spot (phone: the
   Ask orb; laptop: the sidebar orb, which Mac captures leave blank). Each disc is
   the screen's colour there, so it also hides any orb flattened into a capture.
   tools/devices-picture/replace_*_screen.py print the spots. */
.yo-screen-orb{position:absolute;z-index:2;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#17191a;isolation:isolate}
.yo-screen-orb canvas,.yo-screen-orb noscript img{display:block;width:100%;height:100%;touch-action:pan-y}
.yo-screen-orb noscript img{inset:0}
.yo-screen-orb-laptop{left:11.363%;top:46.501%;width:3.907%;background:#090909}
.yo-screen-orb-phone{left:46.824%;top:49.64%;width:.73%;background:#060506}
:root[data-theme=light] .yo-screen-orb{background:#f7f2e8}
:root[data-theme=light] .yo-screen-orb-laptop{left:10.865%;top:47.917%;width:4.121%}
:root[data-theme=light] .yo-screen-orb-phone{left:46.783%;top:49.836%;background:#e3d8c7}
@media(prefers-color-scheme:light){
 :root:not([data-theme]) .yo-screen-orb{background:#f7f2e8}
 :root:not([data-theme]) .yo-screen-orb-laptop{left:10.865%;top:47.917%;width:4.121%}
 :root:not([data-theme]) .yo-screen-orb-phone{left:46.783%;top:49.836%;background:#e3d8c7}
}
.yo-plate,.yo-screens{inset:0;width:100%;height:100%}
.yo-glow{left:3.906%;top:12.727%;width:46.094%;height:78.182%;mix-blend-mode:screen;mix-blend-mode:plus-lighter;opacity:var(--yo-strength,1);pointer-events:none}
.yo-device{position:absolute;left:20.117%;top:86.2%;width:14.805%;margin:0;text-align:center;white-space:nowrap;font:650 clamp(10px,1.06cqw,17px)/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.yo-side{position:absolute;inset:0;pointer-events:none}
.yo-side h3{margin:0;font:650 clamp(12px,1.14cqw,18px)/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.yo-side p{margin:.55em 0 0;font:400 clamp(12px,1.17cqw,18px)/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--yo-muted)}
.yo-ai,.yo-export{position:absolute;left:72.1%;width:26%}
.yo-ai{top:18.6%;left:69.4%;width:29.3%;display:flex;align-items:center;gap:3%}.yo-export{top:62.3%}
.yo-ai h3,.yo-ai p{margin-left:35%}
.yo-export h3,.yo-export p{margin-left:50%}
.yo-ai h3{padding-top:1.8cqw}.yo-export h3{padding-top:2.4cqw}
/* The 1.5x orb and its text share a centerline, so the visible sphere meets the copy at its apex. */
.yo-ai-copy{flex:1;min-width:0}
.yo-ai-copy h3,.yo-ai-copy p{margin-left:0;padding-top:0}
.yo-orb{position:relative;flex:0 0 45%;width:45%;left:auto;top:auto;margin:0}
.yo-orb noscript img{position:absolute;inset:0;width:100%;height:100%}
.yo-docs{position:absolute;left:-10%;top:-10px;width:50%;aspect-ratio:400/439;display:block}
.yo-docs img{position:absolute;left:0;top:0;width:100%;height:auto}
/* The light file has more transparent padding. These frames give both objects
   the same visible footprint while keeping their own proportions intact. */
:root[data-theme=light] .yo-docs{left:-16%;top:-15px;width:60%;aspect-ratio:1}
@media(prefers-color-scheme:light){:root:not([data-theme]) .yo-docs{left:-16%;top:-15px;width:60%;aspect-ratio:1}}
/* These two objects accept input while the rest of the overlay lets scroll/pointer input through.
   The orb uses the same bounded pointer influence and click ripples as the hero. */
.yo-orb,.yo-docs{pointer-events:auto}
/* A soft edge light belongs to the document silhouette, and appears only under the pointer.
   It is independent of the devices' scroll sweep; touch and Motion off keep the plain still. */
@media(any-hover:hover) and (any-pointer:fine) and (prefers-reduced-motion:no-preference){
 :root:not([data-motion=off]) .yo-sheet{transition:filter 180ms ease-out}
 :root:not([data-motion=off]) .yo-docs:hover .yo-sheet{filter:drop-shadow(0 0 5px var(--yo-doc-glow)) drop-shadow(0 0 5px color-mix(in srgb,var(--yo-doc-glow) 14%,transparent)) drop-shadow(0 0 13px color-mix(in srgb,var(--yo-doc-glow) 60%,transparent))}
 :root[data-theme=light]:not([data-motion=off]) .yo-docs:hover .yo-sheet-porcelain{filter:drop-shadow(0 0 5px #a9794eaa) drop-shadow(0 0 12px #c1976777)}
}

/* Only the light follows scroll. The labels, the live orb and the documents simply show (owner, 26 Oct). */

/* Spacing on the page (owner, 26 Oct): from the "You choose" bar down to the laptop matches the space above that bar
   (the bar's 56 px margin; 34 px on phones). The bar's lower rule is the divider, and the stage's empty top is trimmed:
   the laptop starts 196/2560 of the stage's width down, and the light starts 8 above it, so nothing lit is cut. */
.story:has(+ .interlude-yours){padding-bottom:0}
.interlude-yours{border-top:0;padding-top:0}
.interlude-yours .yo-wrap{margin-top:calc(56px - min(1180px,100%) * .0766)}

/* Phones: show the devices large, and stack the right side below them. */
@media (max-width:760px){
 .yo-wrap{aspect-ratio:auto;max-width:none;overflow:hidden}
 .yo-stage{position:relative;width:212%;margin-left:-7.5%;aspect-ratio:2560/1100}
 .yo-device{font-size:2.4cqw}
 .yo-side{position:static;display:grid;gap:22px;padding:8px 20px 42px;pointer-events:auto}
 .yo-ai,.yo-export{position:relative;left:auto;top:auto;width:auto;text-align:left;min-height:64px}
 .yo-side h3{font-size:12px}
 .yo-side p{font-size:15px}
 .yo-ai{display:flex;gap:14px;align-items:center;min-height:116px}
 .yo-ai h3,.yo-ai p{margin-left:0}
 .yo-export h3,.yo-export p{margin-left:126px}
 .yo-ai h3{padding-top:0}.yo-export h3{padding-top:8px}
 .yo-export{min-height:170px}
 .yo-docs{left:-11px;top:-10px;width:130px}
 :root[data-theme=light] .yo-docs{left:-28px;top:-10px;width:150px}
 @media(prefers-color-scheme:light){:root:not([data-theme]) .yo-docs{left:-28px;top:-10px;width:150px}}
 .interlude-yours .yo-wrap{margin-top:calc(34px - 100% * 2.12 * .0766)}
 .yo-orb{flex:0 0 116px;width:116px;left:auto;margin-top:0}
}
/* Keep the device story at the same visual scale as the rest of the expanded page. */
@media (min-width:1600px){
 .yo-wrap{max-width:1440px}
 .interlude-yours .yo-wrap{margin-top:calc(56px - min(1440px,100%) * .0766)}
}