/* Shared controls from Claude's Motion + Mobile handoff. */
[data-fullscreen-slot]{display:contents}
.cpx-frame-host body{margin:0;overflow:hidden}
.cpx-frame-host body>:not(.cpx-fullscreen-shell){display:none!important}
.cpx-fullscreen-shell{position:fixed;inset:0;z-index:10000;display:flex;background:#0b0908;overflow:hidden;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cpx-section-frame{display:block;width:100%;height:100%;flex:1;min-width:0;min-height:0;border:0;background:#0b0908}
.cpx-fullscreen{cursor:pointer;flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);color:var(--ink);padding:0}
.cpx-fullscreen:hover{border-color:var(--acc);color:var(--acc)}
.cpx-fullscreen[hidden],.cpx-rotate[hidden],.cpx-ios-scrim[hidden],.cpx-ios-sheet[hidden]{display:none!important}
.cpx-rotate{display:flex;align-items:center;gap:12px;padding:4px 4px 4px 12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:color-mix(in srgb,var(--acc) 9%,var(--bg))}
.cpx-rotate-phone{flex:none;width:12px;height:20px;border:1.5px solid var(--acc);border-radius:3px;transform:rotate(-90deg)}
.cpx-rotate-copy{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.cpx-rotate button{cursor:pointer;flex:none;width:40px;height:40px;background:transparent;border:0;color:color-mix(in srgb,var(--ink) 60%,transparent);font-size:18px}
.cpx-rotate button:hover,.cpx-ios-close:hover{color:var(--acc)}
.cpx-ios-scrim{position:fixed;inset:0;z-index:190;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.cpx-ios-sheet{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:191;max-width:440px;max-height:calc(100dvh - 24px);overflow-y:auto;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--s1);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.6);box-sizing:border-box}
.cpx-ios-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cpx-ios-heading span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.cpx-ios-close{cursor:pointer;width:40px;height:40px;margin:-10px -10px -10px 0;background:transparent;border:0;color:color-mix(in srgb,var(--ink) 60%,transparent);font-size:20px}
.cpx-ios-sheet b{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:28px;line-height:.95;text-transform:uppercase;text-wrap:balance}
.cpx-ios-sheet p{margin:0;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--ink) 70%,transparent);text-wrap:pretty}
.cpx-ios-steps{display:flex;flex-direction:column;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.cpx-ios-step{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.cpx-ios-step span:first-child{flex:none;width:24px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc)}
.cpx-ios-step span:last-child{font-size:14px;line-height:1.35}
.cpx-ios-done{cursor:pointer;flex:none;height:46px;background:var(--acc);border:0;color:var(--bg);font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.cpx-ios-done:hover{filter:brightness(1.12)}
