/* THE LIVE SAMPLE, ON ITS OWN (owner, 07/10/2026: "standalone pages … contained
   … nothing else in the page"). One device per page, the demo inside it, and
   the "Live sample" label — the way the live phone sat on the old home page.
   The phone and the laptop are site.css's own; this only centres them and
   lets them shrink to fit the window. */
html,body{height:100%}
body{margin:0;min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px 16px;box-sizing:border-box;overflow-x:hidden}
.viewer{display:flex;flex-direction:column;align-items:center;margin:0;transform-origin:top center}
.viewer .phone.live .screen{background:#141619}
/* The laptop: a 1440×900 window on the demo, scaled into the lid. */
.laptop.live{margin:0;width:min(1180px,calc(100vw - 32px));max-width:none}
.laptop.live .scr{aspect-ratio:16/10}
.laptop.live .frame-clip{position:absolute;left:0;top:0;display:block;width:1440px;height:900px;overflow:hidden;transform-origin:top left}
.laptop.live iframe{border:0;display:block;width:1440px;height:900px;background:#141619;opacity:0;transition:opacity .35s}
.laptop.live iframe.in{opacity:1}
.laptop.live .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:1}
.viewer .tapme{text-align:center;font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:14px 0 0}
/* Back (owner, 07/10/2026): the samples open in the same tab, and this takes
   you back to where you were — or home, if you came straight here. */
body{padding-top:64px}
.vback{position:absolute;top:calc(14px + env(safe-area-inset-top, 0px));left:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  font:600 15px/1 var(--sans, inherit);color:var(--ink);text-decoration:none;border:1px solid var(--btn-bd, #3a3f45);border-radius:999px;padding:10px 16px;background:rgb(20 22 25 / .7)}
.vback:hover{border-color:var(--ink)}
.vback:focus-visible{outline:2px solid var(--accent);outline-offset:3px}