.sharing-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.ask-demo { width:min(100%,25rem); margin:0 auto; color:var(--ink); }
.ask-stage { width:min(100%,20rem); margin:0 auto 1rem; padding:7px; border:1px solid var(--line-2); border-radius:30px; background:var(--card); box-shadow:0 20px 45px -24px var(--quiet-shadow); overflow:hidden; }
/* Keep the native capture intact; crop only the measured Android system bars. */
.ask-crop { width:100%; aspect-ratio:1080/2274; border-radius:23px; overflow:hidden; background:var(--paper); }
.ask-crop img { display:block; width:100%; height:auto; margin-top:-5.833333333%; }
.ask-crop [data-theme="dark"] { display:none; }
:root[data-theme="dark"] .ask-crop [data-theme="light"] { display:none; }
:root[data-theme="dark"] .ask-crop [data-theme="dark"] { display:block; }
.ask-crop img:not([src]) { display:none; }
.ask-frame[hidden] { display:none; }
.ask-demo figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; color:var(--ink-2); font-size:.7rem; line-height:1.5; text-align:center; }
.ask-demo figcaption strong { font-weight:500; color:var(--accent); }
.ask-stage:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.ask-stage[data-playing="true"] .ask-frame:not([hidden]) { animation:ask-appear .2s ease-out; }
@keyframes ask-appear { from { opacity:.5; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .ask-frame { animation:none !important; } }
@media (max-width:47.99rem) { .sharing-intro { grid-template-columns:minmax(0,1fr); gap:2rem; } }