/* The phone layouts' shared parts. Tokens are in DESIGN.md. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The window */
.pwin{position:relative;border-radius:14px;background:#F1F4FA;box-shadow:0 0 0 1px color-mix(in srgb,var(--h) 46%,transparent),0 22px 56px rgba(0,0,0,.55);transition:box-shadow 300ms ease}
.pbar{position:absolute;left:0;right:0;top:0;height:30px;z-index:3;display:flex;align-items:center;gap:8px;padding:0 4px 0 12px;border-radius:14px 14px 0 0;background:#E7EBF2;color:#334155;font:500 12.5px/1 var(--display);transition:background-color 300ms ease,color 300ms ease}
.pbar-t{white-space:nowrap}
.pbar-tag{margin-left:auto;font:400 10px/1 var(--mono);color:#475569;white-space:nowrap;transition:color 300ms ease}
.pbar-btn{position:relative;flex:none;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;transition:transform 140ms var(--ease)}
.pbar-btn::after{content:"";position:absolute;inset:-8px}
.pbar-btn:active{transform:scale(.92)}
.pbar-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbar-theme{position:relative;flex:none;display:block;padding:0;border:0;background:none;cursor:pointer;transition:transform 140ms var(--ease)}
.pbar-theme::after{content:"";position:absolute;inset:-10px -4px}
.pbar-theme:active{transform:scale(.95)}
.pbar-theme[hidden]{display:none}
.pbar-theme i{display:block;overflow:hidden;border-radius:999px}
.pbar-theme b{display:block;will-change:transform}
.pwin.dark .pbar{background:#141D30;color:#CBD5E1}
.pwin.dark .pbar-tag{color:#94A3B8}

/* The camera */
.cam{position:absolute;left:0;right:0;top:30px;bottom:0;overflow:hidden;border-radius:0 0 14px 14px;background:#F1F4FA;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:background-color 300ms ease}
.cam.dark{background:#0B1220}
.cam-layer{position:absolute;inset:0;overflow:hidden;background:inherit;will-change:transform}
.cam-world{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;will-change:transform}
.cam-world img,.cam-world video{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;pointer-events:none;-webkit-user-drag:none}
.cam-dark{opacity:0;transition:opacity 420ms ease}
.cam-dark.on{opacity:1}
.cam-ico{position:absolute;display:block;overflow:hidden;visibility:hidden}
.cam-ico b{display:block;will-change:transform}
.cam-notes{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.cam-notes path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cam-notes .halo{stroke:rgba(8,11,17,.46);stroke-width:4.2}
.cam-notes .ink{stroke:var(--amber);stroke-width:1.9}

/* One scene: window, steps, caption */
.pscene{position:relative}
.pscene .pwin{height:clamp(226px,calc(100svh - var(--scene-rest,300px)),640px);max-width:760px;margin:0 auto}
.prail{list-style:none;display:flex;gap:4px;max-width:760px;margin:6px auto 0;padding:0}
.prail li{flex:1;min-width:0}
.prail button{position:relative;display:block;width:100%;height:30px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.prail button::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(237,241,246,.2)}
.prail button::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.prail i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--h);transform:scaleX(0);transform-origin:0 50%}
.pcap{max-width:760px;margin:2px auto 0;min-height:6.4em}
.pcap h3{margin:0 0 3px;font-size:clamp(19px,5.2vw,23px);font-weight:800;font-stretch:112%;line-height:1.15}
.pcap p{margin:0;color:#DDE3EC;font-size:15px;line-height:1.42;text-wrap:pretty}
.pgo{display:inline-flex;align-items:center;min-height:32px;margin-top:2px;color:var(--h);font-size:15px;font-weight:600;text-underline-offset:3px}
.pgo[hidden]{display:none}
.ptabs{display:flex;gap:6px;max-width:760px;margin:0 auto 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:none;padding:9px 13px;border:0;border-radius:999px;background:rgba(237,241,246,.08);box-shadow:inset 0 0 0 1px var(--line);color:#E4E8EE;font:500 14.5px/1.2 var(--display);cursor:pointer;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease,transform 140ms var(--ease)}
.ptabs button:active{transform:scale(.97)}
.ptabs button[aria-pressed=true]{background:var(--h);box-shadow:none;color:#0B1018}

@media (min-width:700px){
 .pcap p{font-size:16px}
 .pcap{min-height:6em}
}