/* Local CSS 3D fallback for Pipa Motion Studio. Real app captures stay on the device screens. */
.motion-page { --motion-ink: #eef5ff; --motion-muted: #98a8bf; --motion-blue: #5ab8ff; background: #05070b; color: var(--motion-ink); overflow: hidden; }
.motion-page .wrap { max-width: 1152px; }
.motion-hero { min-height: 950px; padding: 150px 0 100px; position: relative; isolation: isolate; background: radial-gradient(70% 55% at 50% 0%, #10284b 0%, #05070b 72%); }
.motion-hero::before { content: ""; position: absolute; inset: 0; opacity: .3; z-index: -1; background-image: linear-gradient(rgba(114,174,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(114,174,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.motion-hero-copy { text-align: center; max-width: 800px; position: relative; z-index: 2; }
.motion-hero-copy .kicker, .motion-page .kicker { color: #9ebbe0; background: rgba(116,174,255,.1); border: 1px solid rgba(148,195,255,.18); }
.motion-hero h1 { color: var(--motion-ink); font-size: clamp(48px, 8vw, 92px); line-height: .95; letter-spacing: -.06em; margin: 24px 0; }
.motion-gradient { background: linear-gradient(105deg, #c9edff, #5ab8ff 52%, #357eff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion-hero-copy p { max-width: 620px; margin: 0 auto 32px; color: var(--motion-muted); font-size: 19px; }
.motion-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.motion-page .btn-ghost { color: var(--motion-ink); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.motion-stage { height: 620px; max-width: 1080px !important; margin-top: 54px; position: relative; perspective: 1800px; transform-style: preserve-3d; }
.motion-orb { position: absolute; width: 620px; height: 620px; border-radius: 50%; left: 50%; top: 22px; transform: translateX(-50%); background: radial-gradient(circle at 44% 35%, rgba(111,201,255,.28), rgba(35,91,168,.1) 35%, transparent 68%); filter: blur(9px); }
.motion-webgl { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .95; }
.motion-webgl canvas { display: block; width: 100%; height: 100%; }
.motion-device { position: absolute; transform-style: preserve-3d; transition: transform .18s cubic-bezier(.2,.75,.25,1); will-change: transform; }
.motion-macbook { width: min(720px, 70vw); left: 7%; top: 76px; transform: rotateX(9deg) rotateY(-13deg) rotateZ(-2deg) translateZ(0); }
.motion-mac-lid { padding: 15px 15px 18px; border-radius: 24px 24px 8px 8px; background: linear-gradient(145deg, #303a48, #0f141c 58%, #39485b); box-shadow: 0 46px 70px -32px rgba(0,0,0,.95), inset 0 1px 1px rgba(255,255,255,.35); }
.motion-mac-screen { position: relative; overflow: hidden; border: 5px solid #07090d; border-radius: 12px; background: #030406; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.motion-mac-screen img { width: 100%; height: 390px; object-fit: cover; object-position: center; filter: saturate(.95) contrast(1.02); }
.motion-mac-base { height: 26px; margin: -2px -48px 0; border-radius: 4px 4px 20px 20px; background: linear-gradient(#9ba7b7, #4b5768 55%, #27303b); box-shadow: 0 30px 45px -22px #000, inset 0 1px rgba(255,255,255,.55); }
.motion-mac-base span { display: block; width: 24%; height: 4px; margin: auto; border-radius: 0 0 8px 8px; background: rgba(20,28,39,.65); }
.motion-iphone { width: 220px; right: 9%; top: 136px; z-index: 3; transform: rotateX(8deg) rotateY(-20deg) rotateZ(8deg) translateZ(90px); }
.motion-has-webgl .motion-iphone { opacity: 0; visibility: hidden; }
.motion-phone-frame { padding: 9px; border-radius: 38px; background: linear-gradient(145deg, #56677d, #0b1119 45%, #36475c); box-shadow: 0 55px 75px -26px #000, inset 0 1px 1px rgba(255,255,255,.48); }
.motion-phone-screen { position: relative; overflow: hidden; height: 450px; border: 4px solid #030507; border-radius: 30px; background: #030507; }
.motion-phone-screen::before { content: ""; position: absolute; z-index: 1; width: 28%; height: 19px; left: 36%; top: 5px; border-radius: 0 0 14px 14px; background: #020306; }
.motion-phone-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .42s ease, transform .42s cubic-bezier(.2,.75,.25,1); transform: scale(1.035); }
.motion-phone-scene[data-phone-scene="home"] { opacity: 1; transform: scale(1); }
.motion-phone-scene img, .motion-phone-scene video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.motion-phone-touch { position: absolute; z-index: 3; left: 52%; top: 49%; width: 42px; height: 42px; border: 2px solid #77d4ff; border-radius: 50%; background: rgba(79,171,255,.16); box-shadow: 0 0 0 9px rgba(79,171,255,.1), 0 0 24px rgba(68,174,255,.65); opacity: 0; transform: translate(-50%, -50%) scale(.72); pointer-events: none; }
.motion-phone-touch.is-active { opacity: 1; animation: motion-touch 1.65s ease-out infinite; }
.motion-recording-badge { position: absolute; z-index: 4; left: 13px; bottom: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(3,8,14,.65); color: rgba(237,247,255,.78); font: 700 8px/1 var(--mono); letter-spacing: .05em; opacity: .75; pointer-events: none; }
.motion-recording-badge i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #ff5d68; box-shadow: 0 0 0 3px rgba(255,93,104,.14); }
@keyframes motion-touch { 0% { transform: translate(-50%, -50%) scale(.7); opacity: .1; } 25% { opacity: .95; } 70% { transform: translate(-50%, -50%) scale(1.16); opacity: .35; } 100% { transform: translate(-50%, -50%) scale(1.34); opacity: 0; } }
.motion-caption { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: #b7c6db; font: 600 13px var(--body); letter-spacing: .04em; white-space: nowrap; }
.motion-react-engine { padding: 112px 0 124px; background: #f5f8fc; color: #0d1117; }
.motion-react-engine-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 68px; align-items: center; }
.motion-react-engine h2 { max-width: 500px; margin: 18px 0 18px; font: 700 clamp(42px, 5vw, 68px)/.95 var(--display); letter-spacing: -.055em; }
.motion-react-engine p { max-width: 440px; color: #637086; line-height: 1.6; }
.motion-react-video { margin: 0; padding: 14px; border-radius: 28px; background: #0b111b; box-shadow: 0 34px 80px -30px rgba(7,24,52,.52); }
.motion-react-video video { display: block; width: 100%; border-radius: 19px; background: #05070b; }
.motion-react-video figcaption { padding: 14px 8px 2px; color: #9fb6ce; font: 600 12px var(--mono); letter-spacing: .04em; }
.motion-react-video [data-pipa-live-root] { overflow: hidden; border-radius: 19px; background: #05070b; }
.pipa-live-app { position: relative; min-height: 620px; padding: 34px 22px 24px; overflow: hidden; color: #f4f7fb; background: radial-gradient(circle at 50% 0%, #1b355a 0%, #0b1422 47%, #05070b 100%); font: 500 12px/1.35 Arial, sans-serif; }
.pipa-live-recording { position: absolute; top: 14px; left: 18px; z-index: 4; color: #a4bbd6; font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.pipa-live-recording i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ff625f; box-shadow: 0 0 10px #ff625f; }
.pipa-live-devices { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 510px; padding-top: 18px; }
.pipa-live-device { position: relative; flex: 0 0 auto; background: #15191f; box-shadow: 0 28px 44px rgba(0,0,0,.42), 0 2px 1px rgba(255,255,255,.17) inset; }
.pipa-live-device-screen { position: absolute; overflow: hidden; background: #07101d; }
.pipa-live-laptop { width: 320px; height: 214px; border-radius: 10px 10px 4px 4px; transform: perspective(900px) rotateX(2deg) rotateY(-7deg); }
.pipa-live-laptop:after { content: ''; position: absolute; left: -28px; right: -28px; bottom: -12px; height: 12px; border-radius: 0 0 14px 14px; background: linear-gradient(#b9c2ce, #636d79); box-shadow: 0 8px 14px rgba(0,0,0,.35); }
.pipa-live-laptop .pipa-live-device-screen { inset: 8px 9px 9px; border-radius: 5px; }
.pipa-live-laptop-screen { position: relative; height: 100%; }
.pipa-live-laptop-topbar { position: absolute; z-index: 2; inset: 0 0 auto; height: 19px; padding: 4px 8px; color: #f7fbff; background: rgba(12,20,32,.76); font-size: 8px; }
.pipa-live-laptop-topbar span { float: right; color: #42d58b; }
.pipa-live-phone { width: 168px; height: 344px; border: 5px solid #20262d; border-radius: 26px; transform: perspective(900px) rotateY(8deg) rotateZ(1deg); }
.pipa-live-phone .pipa-live-device-screen { inset: 4px; border-radius: 20px; }
.pipa-live-dynamic-island { position: absolute; z-index: 5; top: 10px; left: 50%; width: 56px; height: 15px; transform: translateX(-50%); border-radius: 11px; background: #000; }
.pipa-live-screen { position: relative; height: 100%; overflow: hidden; background: linear-gradient(145deg, #11284c, #07101d 75%); color: #f4f7fb; }
.pipa-live-status { display: flex; justify-content: space-between; padding: 14px 14px 7px; font-size: 9px; font-weight: 700; }
.pipa-live-status-icons { letter-spacing: 1px; }
.pipa-live-home-actions { display: flex; gap: 5px; justify-content: flex-end; padding: 0 11px 3px; }
.pipa-live-home-actions button, .pipa-live-session-bar button { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #62a0ff; background: rgba(36,61,96,.75); font-size: 13px; cursor: pointer; }
.pipa-live-home-actions .pipa-live-plus { font-size: 18px; }
.pipa-live-home { padding: 0 10px; }
.pipa-live-eyebrow { margin: 0 4px; color: #9eb1c9; font-size: 10px; }
.pipa-live-home h3 { margin: 3px 4px 15px; font-size: 20px; letter-spacing: -.04em; }
.pipa-live-section-label { margin: 0 4px 8px; color: #cad4e1; font-size: 12px; font-weight: 700; }
.pipa-live-mac-card { display: flex; align-items: center; width: 100%; padding: 11px 9px; border: 1px solid rgba(148,190,235,.23); border-radius: 14px; color: #f4f7fb; background: rgba(28,48,75,.85); text-align: left; cursor: pointer; }
.pipa-live-mac-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-right: 8px; border-radius: 10px; color: white; background: linear-gradient(145deg, #5da6ff, #1f60ce); font-size: 23px; }
.pipa-live-mac-copy { display: grid; gap: 2px; min-width: 0; }
.pipa-live-mac-copy strong { font-size: 12px; }
.pipa-live-available { color: #42d58b; font-size: 9px; }
.pipa-live-paired { color: #42d58b; font-size: 9px; }
.pipa-live-play { display: grid; place-items: center; width: 25px; height: 25px; margin-left: auto; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 10px; }
.pipa-live-note { margin: 15px 4px 0; color: #a4b1c3; font-size: 8px; line-height: 1.45; }
.pipa-live-session { background: #0c111a; }
.pipa-live-session-bar { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 14px 9px 8px; font-size: 9px; }
.pipa-live-session-bar strong { margin-right: auto; }
.pipa-live-quality { color: #42d58b; font-size: 8px; }
.pipa-live-session-body { position: relative; height: calc(100% - 76px); margin: 0 7px; border-radius: 10px; overflow: hidden; background: #111; }
.pipa-live-mac-surface { position: absolute; inset: 0; overflow: hidden; }
.pipa-live-mac-surface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pipa-live-cursor { position: absolute; width: 8px; height: 11px; transform: translate(-2px,-2px) rotate(-18deg); border: 1px solid #07101d; border-radius: 2px 7px 3px 2px; background: white; box-shadow: 0 0 0 2px rgba(0,0,0,.25); pointer-events: none; transition: left .18s ease, top .18s ease; }
.pipa-live-ripple { position: absolute; width: 26px; height: 26px; transform: translate(-50%,-50%); border: 2px solid #56a0ff; border-radius: 50%; animation: pipa-live-ripple .42s ease-out forwards; pointer-events: none; }
@keyframes pipa-live-ripple { from { opacity: .9; transform: translate(-50%,-50%) scale(.2); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } }
.pipa-live-touch-guide { position: absolute; left: 7px; bottom: 7px; padding: 3px 5px; border-radius: 5px; color: #dce8f8; background: rgba(7,16,29,.66); font-size: 7px; }
.pipa-live-keybar { position: absolute; inset: auto 8px 7px; padding: 5px; border-radius: 8px; color: #c7d6ea; background: #172335; text-align: center; font-size: 9px; }
.pipa-live-caption { display: flex; justify-content: space-between; gap: 10px; margin: -2px 6px 10px; color: #b9c9dc; font-size: 9px; }
.pipa-live-caption strong { color: white; }
.pipa-live-actions { display: flex; gap: 7px; justify-content: center; }
.pipa-live-actions button { padding: 6px 9px; border: 1px solid rgba(130,170,220,.24); border-radius: 999px; color: #a9bdd6; background: rgba(27,50,82,.72); font: 700 9px var(--mono); cursor: pointer; }
.pipa-live-actions button.is-active { color: #fff; border-color: #4c91ff; background: #235fd1; }
@media (max-width: 780px) { .pipa-live-app { min-height: 550px; padding-left: 10px; padding-right: 10px; } .pipa-live-devices { gap: 8px; transform: scale(.84); transform-origin: center top; margin-bottom: -64px; } .pipa-live-caption { margin-top: -18px; } }
.pipa-live-lab { min-height: calc(100vh - 90px); overflow: hidden; color: #eef5ff; background: radial-gradient(70% 42% at 50% 0%, #183a69 0%, #081321 58%, #05070b 100%); }
.pipa-live-lab-hero { padding: 138px 24px 56px; text-align: center; }
.pipa-live-lab-copy { max-width: 760px; margin: 0 auto; }
.pipa-live-lab .kicker { color: #a8c9f1; background: rgba(90,184,255,.1); border: 1px solid rgba(148,195,255,.2); }
.pipa-live-lab h1 { margin: 24px 0 20px; color: #f3f8ff; font: 700 clamp(52px, 8vw, 94px)/.93 var(--display); letter-spacing: -.07em; }
.pipa-live-lab h1 span { background: linear-gradient(105deg, #d6f3ff, #64baff 55%, #4b7dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pipa-live-lab-copy > p { max-width: 620px; margin: 0 auto; color: #9bb0ca; font-size: 18px; line-height: 1.55; }
.pipa-live-lab-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.pipa-live-lab-meta span { padding: 8px 11px; border: 1px solid rgba(148,195,255,.17); border-radius: 999px; color: #abc4df; background: rgba(255,255,255,.045); font: 600 11px var(--mono); }
.pipa-live-lab-demo-wrap { padding-bottom: 30px; }
.pipa-live-lab-demo { max-width: 1100px; margin: 0 auto; padding: 16px; border: 1px solid rgba(148,195,255,.18); border-radius: 32px; background: rgba(6,15,27,.68); box-shadow: 0 48px 100px -45px rgba(47,123,255,.75), inset 0 1px rgba(255,255,255,.13); }
.pipa-live-lab-demo video { width: 100%; border-radius: 20px; }
.pipa-live-lab-instructions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding-bottom: 100px; }
.pipa-live-lab-instructions > div { padding: 24px; border-top: 1px solid rgba(148,195,255,.16); }
.pipa-live-step { display: block; margin-bottom: 18px; color: #66b8ff; font: 700 12px var(--mono); letter-spacing: .1em; }
.pipa-live-lab-instructions strong { display: block; color: #f2f7ff; font: 600 21px var(--display); }
.pipa-live-lab-instructions p { margin: 8px 0 0; color: #8fa7c3; font-size: 14px; line-height: 1.5; }
@media (max-width: 780px) { .pipa-live-lab-hero { padding-top: 112px; } .pipa-live-lab h1 { font-size: 54px; } .pipa-live-lab-copy > p { font-size: 16px; } .pipa-live-lab-instructions { grid-template-columns: 1fr; padding-bottom: 64px; } }
.pipa-live-lab-demo .pipa-live-app { min-height: 720px; padding: 44px 34px 28px; font-family: var(--body); background: radial-gradient(55% 72% at 50% 20%, #173966 0%, #0b1728 42%, #05070b 100%); }
.pipa-live-lab-demo .pipa-live-devices { min-height: 585px; gap: 0; padding-top: 30px; }
.pipa-live-lab-demo .pipa-live-laptop { width: min(540px, 58vw); height: min(350px, 38vw); border-radius: 14px 14px 5px 5px; transform: perspective(1200px) rotateX(3deg) rotateY(-8deg) rotateZ(-1deg); }
.pipa-live-lab-demo .pipa-live-laptop .pipa-live-device-screen { inset: 11px 12px 12px; border-radius: 7px; }
.pipa-live-lab-demo .pipa-live-laptop:after { left: -44px; right: -44px; bottom: -16px; height: 16px; }
.pipa-live-lab-demo .pipa-live-phone { width: 242px; height: 496px; margin-left: -56px; border-width: 7px; border-radius: 34px; transform: perspective(1200px) rotateY(9deg) rotateZ(1.5deg); z-index: 3; }
.pipa-live-lab-demo .pipa-live-phone .pipa-live-device-screen { inset: 5px; border-radius: 26px; }
.pipa-live-lab-demo .pipa-live-dynamic-island { top: 14px; width: 80px; height: 21px; border-radius: 14px; }
.pipa-live-lab-demo .pipa-live-screen h3 { color: #f4f7fb; }
.pipa-live-lab-demo .pipa-live-screen button { font-family: var(--body); }
.pipa-live-lab-demo .pipa-live-laptop-screen:after, .pipa-live-lab-demo .pipa-live-phone:after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 22%, transparent 72%, rgba(105,181,255,.07)); mix-blend-mode: screen; }
.pipa-live-mac-desktop { background: #081323; }
.pipa-mac-wallpaper { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 58% 62%, #2469c6 0%, #102d60 30%, #071323 72%); transition: transform .2s ease; }
.pipa-mac-wallpaper::before, .pipa-mac-wallpaper::after { content: ''; position: absolute; width: 150%; height: 36%; left: -22%; border-radius: 50%; border: 2px solid rgba(93,187,255,.25); filter: blur(.3px); transform: rotate(-14deg); }
.pipa-mac-wallpaper::before { top: 28%; box-shadow: 0 0 45px rgba(64,154,255,.28); }
.pipa-mac-wallpaper::after { top: 45%; left: -12%; border-color: rgba(90,130,255,.17); transform: rotate(17deg); }
.pipa-mac-menu { position: absolute; z-index: 6; inset: 0 0 auto; height: 20px; display: flex; align-items: center; gap: 9px; padding: 0 8px; color: rgba(247,251,255,.92); background: rgba(7,12,22,.72); backdrop-filter: blur(14px); font-size: 8px; }
.pipa-mac-menu strong { color: #f4f7fb; font-size: 10px; }
.pipa-mac-menu-right { margin-left: auto; color: #bfd3ed; }
.pipa-mac-desktop-grid { position: absolute; z-index: 1; top: 32px; right: 12px; display: grid; gap: 9px; color: rgba(242,248,255,.9); text-align: center; font-size: 8px; }
.pipa-mac-desktop-grid > span { display: grid; gap: 3px; width: 52px; padding: 5px 3px; border-radius: 6px; background: rgba(9,18,34,.42); }
.pipa-mac-desktop-grid small { color: #a8bedb; font-size: 6px; }
.pipa-mac-window { position: absolute; z-index: 4; top: 42px; left: 13%; width: 61%; min-height: 54%; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.23); border-radius: 8px; color: #e8f1fb; background: rgba(16,25,39,.94); box-shadow: 0 22px 38px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.18) inset; backdrop-filter: blur(18px); }
.pipa-mac-window header { display: flex; align-items: center; gap: 4px; height: 23px; padding: 0 7px; background: rgba(255,255,255,.08); font-size: 7px; }
.pipa-mac-window header strong { margin: 0 auto; color: #d4e0ee; font-weight: 600; }
.pipa-mac-window header i { width: 6px; height: 6px; border-radius: 50%; background: #ffd45c; }
.pipa-mac-window header i:nth-of-type(2) { background: #5bdd84; }
.pipa-mac-window header i:nth-of-type(3) { background: #ff6b6b; }
.pipa-mac-window .pipa-mac-close { order: -1; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; color: transparent; background: #ff625f; cursor: pointer; }
.pipa-mac-window > div { height: calc(100% - 23px); padding: 12px; font-size: 8px; }
.pipa-mac-code { display: grid; align-content: center; gap: 5px; color: #a8c7e8; font-family: var(--mono); line-height: 1.25; }
.pipa-mac-code span:nth-child(2), .pipa-mac-code span:nth-child(4) { color: #d783ff; }
.pipa-mac-code span:nth-child(5) { color: #7fe0b1; }
.pipa-mac-finder { display: grid; grid-template-columns: 32% 1fr; gap: 10px; color: #b7c8da; }
.pipa-mac-finder aside { display: grid; align-content: start; gap: 7px; color: #8fa8c5; }
.pipa-mac-finder aside span { padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.05); }
.pipa-mac-finder main strong { display: block; margin-bottom: 9px; color: #f2f7ff; }
.pipa-mac-file-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.pipa-mac-file-grid span { display: grid; justify-items: center; gap: 2px; padding: 9px 3px; border-radius: 5px; background: rgba(104,166,255,.12); color: #83b8f0; font-size: 17px; }
.pipa-mac-file-grid small { color: #b8cbe0; font-size: 6px; }
.pipa-mac-notes { color: #dce7f3; }
.pipa-mac-notes strong { display: block; margin-bottom: 10px; color: #fff; font-size: 11px; }
.pipa-mac-notes p { margin: 7px 0; color: #b7c9dc; }
.pipa-mac-safari .pipa-mac-address { padding: 5px 7px; border-radius: 5px; color: #9dc8f4; background: rgba(255,255,255,.08); font-size: 7px; }
.pipa-mac-safari h4 { margin: 19px 0 6px; color: #fff; font-size: 13px; }
.pipa-mac-safari p { color: #a9bed5; }
.pipa-mac-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pipa-mac-photos span { min-height: 32px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.pipa-mac-dock { position: absolute; z-index: 6; left: 50%; bottom: 8px; display: flex; gap: 4px; padding: 4px 5px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(24,35,52,.72); box-shadow: 0 8px 18px rgba(0,0,0,.32); backdrop-filter: blur(16px); }
.pipa-mac-dock button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; color: #fff; font: 700 10px var(--mono); box-shadow: inset 0 1px rgba(255,255,255,.45); cursor: pointer; transition: transform .18s ease; }
.pipa-mac-dock button:hover { transform: translateY(-4px) scale(1.08); }
.pipa-live-mac-desktop .pipa-live-cursor { width: 18px; height: 24px; border: 0; border-radius: 0; color: #fff; background: transparent; box-shadow: 0 2px 5px rgba(0,0,0,.55); font-size: 22px; line-height: 1; transform: translate(-2px,-2px); text-shadow: 0 1px 2px #06101d; }
.pipa-live-mac-desktop .pipa-live-ripple { z-index: 7; }
.pipa-live-lab-demo .pipa-live-caption { margin: 0 8px 14px; font-size: 11px; }
.pipa-live-lab-demo .pipa-live-actions button { padding: 8px 13px; font-size: 10px; }
.pipa-live-lab-demo .pipa-live-recording { font-size: 10px; }
.pipa-live-lab-demo .pipa-live-laptop-topbar { height: 24px; padding: 6px 10px; font-size: 10px; }
.pipa-live-lab-demo .pipa-live-status { padding: 16px 16px 9px; font-size: 11px; }
.pipa-live-lab-demo .pipa-live-eyebrow { font-size: 12px; }
.pipa-live-lab-demo .pipa-live-home h3 { margin-top: 5px; font-size: 24px; }
.pipa-live-lab-demo .pipa-live-section-label { font-size: 14px; }
.pipa-live-lab-demo .pipa-live-mac-copy strong { font-size: 14px; }
.pipa-live-lab-demo .pipa-live-available, .pipa-live-lab-demo .pipa-live-paired { font-size: 11px; }
.pipa-live-lab-demo .pipa-live-note { font-size: 10px; }
.pipa-live-lab-demo .pipa-live-session-bar { padding: 16px 11px 10px; font-size: 11px; }
.pipa-live-lab-demo .pipa-live-quality { font-size: 10px; }
.pipa-live-lab-demo .pipa-live-touch-guide { font-size: 9px; }
.pipa-live-lab-demo .pipa-live-keybar { font-size: 11px; }
@media (max-width: 780px) {
  body:has(.pipa-live-lab) .nav { position: relative; top: 0; padding: 14px 12px 0; }
  body:has(.pipa-live-lab) .nav .wrap { max-width: none; }
  body:has(.pipa-live-lab) .pipa-live-lab-hero { padding-top: 84px; }
  .pipa-live-lab-demo .pipa-live-app { min-height: 720px; padding: 42px 14px 24px; }
  .pipa-live-lab-demo .pipa-live-devices { flex-direction: column; min-height: 586px; gap: 0; padding-top: 20px; }
  .pipa-live-lab-demo .pipa-live-laptop { width: 300px; height: 195px; transform: perspective(900px) rotateX(3deg) rotateY(-6deg); }
  .pipa-live-lab-demo .pipa-live-laptop:after { left: -24px; right: -24px; bottom: -11px; height: 11px; }
  .pipa-live-lab-demo .pipa-live-phone { width: 184px; height: 378px; margin: -34px 0 0 80px; border-width: 6px; border-radius: 28px; transform: perspective(900px) rotateY(7deg) rotateZ(1deg); }
  .pipa-live-lab-demo .pipa-live-phone .pipa-live-device-screen { border-radius: 22px; }
  .pipa-live-lab-demo .pipa-live-dynamic-island { top: 11px; width: 61px; height: 16px; }
  .pipa-live-lab-demo .pipa-live-caption { margin-top: 0; }
}
.motion-status-dot, .motion-legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #4de38a; box-shadow: 0 0 0 4px rgba(77,227,138,.12); }
.motion-cursor, .motion-trackpad-cursor { position: absolute; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 3px 7px 7px 7px; transform: rotate(-24deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.75)); left: 52%; top: 42%; z-index: 2; pointer-events: none; transition: left .2s ease, top .2s ease; }
.motion-cursor-ring { position: absolute; width: 38px; height: 38px; border: 1px solid rgba(90,184,255,.8); border-radius: 50%; left: calc(52% - 10px); top: calc(42% - 10px); z-index: 2; pointer-events: none; animation: motion-pulse 2.2s ease-out infinite; }
@keyframes motion-pulse { 0%, 100% { opacity: .15; transform: scale(.82); } 45% { opacity: .8; transform: scale(1); } }
.motion-native-states { padding: 118px 0 132px; background: #08101c; color: #edf6ff; }
.motion-native-heading { display: flex; align-items: end; justify-content: space-between; gap: 44px; margin-bottom: 34px; }
.motion-native-heading h2 { max-width: 620px; margin: 18px 0 0; font: 700 clamp(38px, 5vw, 64px)/.96 var(--display); letter-spacing: -.05em; }
.motion-native-heading p { max-width: 390px; margin: 0; color: #94a8c1; font-size: 15px; line-height: 1.55; }
.motion-state-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; }
.motion-state-tabs button { flex: 0 0 auto; border: 1px solid rgba(148,195,255,.16); border-radius: 999px; padding: 11px 15px; background: rgba(255,255,255,.045); color: #9eb5d0; font: 600 13px var(--mono); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.motion-state-tabs button[aria-selected="true"], .motion-state-tabs button:hover, .motion-state-tabs button:focus-visible { border-color: rgba(90,184,255,.72); background: rgba(56,130,222,.2); color: #eff8ff; }
.motion-state-view { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 490px; margin-top: 28px; padding: 28px; border: 1px solid rgba(148,195,255,.15); border-radius: 30px; background: linear-gradient(135deg, rgba(23,50,83,.65), rgba(8,16,28,.9)); box-shadow: 0 38px 90px -50px rgba(45,120,220,.75); }
.motion-state-visual { display: flex; justify-content: center; align-items: center; min-height: 425px; }
.motion-state-phone { width: min(220px, 100%); padding: 8px; border-radius: 34px; background: linear-gradient(145deg, #657894, #111923 48%, #344359); box-shadow: 0 36px 48px -28px #000, inset 0 1px 1px rgba(255,255,255,.42); }
.motion-state-phone img { display: block; width: 100%; height: 425px; object-fit: cover; object-position: top; border: 3px solid #030507; border-radius: 27px; }
.motion-native-form { min-height: 425px; padding: 26px; border-radius: 22px; background: rgba(3,8,15,.46); border: 1px solid rgba(148,195,255,.16); }
.motion-native-form h3, .motion-state-meta h3 { margin: 10px 0 20px; font: 700 32px/1 var(--display); letter-spacing: -.04em; }
.motion-state-source { color: #77bdfb; font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.motion-native-section { display: grid; gap: 9px; padding: 15px 0; border-top: 1px solid rgba(148,195,255,.13); }
.motion-native-section b { color: #8fa9c7; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.motion-native-section span { display: flex; justify-content: space-between; gap: 20px; color: #eff6ff; font-size: 14px; line-height: 1.35; }
.motion-native-section small { display: block; max-width: 290px; color: #97a9be; font-size: 12px; line-height: 1.35; text-align: right; }
.motion-native-section strong { font-weight: 600; }
.motion-switch { flex: 0 0 auto; width: 32px; height: 19px; border-radius: 999px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.motion-switch::after { content: ""; display: block; width: 15px; height: 15px; margin: 2px; border-radius: 50%; background: #eef5ff; transition: transform .2s ease; }
.motion-switch.is-on { background: #2f7bff; }
.motion-switch.is-on::after { transform: translateX(13px); }
.motion-state-meta { align-self: end; grid-column: 2; padding: 2px 4px 0; }
.motion-state-meta h3 { margin-bottom: 10px; }
.motion-state-meta p { max-width: 540px; margin: 0; color: #9aacc1; line-height: 1.55; }
.motion-state-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.motion-state-chip-row span { border: 1px solid rgba(148,195,255,.16); border-radius: 999px; padding: 7px 10px; color: #aac4df; font: 600 11px var(--mono); }
[data-native-visual][hidden] { display: none; }
.motion-interaction { padding: 150px 0; background: #f5f8fc; color: #0d1117; }
.motion-interaction-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 72px; }
.motion-interaction h2 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.05em; line-height: .98; }
.motion-interaction p { color: #637086; max-width: 34em; }
.motion-muted { color: #7b8ca5; }
.motion-legend { margin-top: 28px; color: #3d75b9; font: 600 14px var(--mono); }
.motion-trackpad-card { padding: 18px; border-radius: 32px; background: #101722; box-shadow: 0 35px 80px -28px rgba(8,24,50,.48); }
.motion-trackpad { position: relative; height: 330px; overflow: hidden; border: 1px solid rgba(151,198,255,.2); border-radius: 22px; background: radial-gradient(circle at 50% 35%, rgba(45,93,148,.5), transparent 65%), #101e31; cursor: crosshair; touch-action: none; }
.motion-trackpad-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(170,212,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(170,212,255,.12) 1px, transparent 1px); background-size: 28px 28px; }
.motion-trackpad-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: rgba(222,239,255,.6); font: 600 12px var(--body); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.motion-finger { position: absolute; width: 66px; height: 66px; border: 2px solid rgba(137,208,255,.8); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%,-50%); }
.motion-trackpad.is-dragging .motion-finger { opacity: 1; }
.motion-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 14px 0 0; }
.motion-controls button { min-width: 42px; height: 38px; border: 1px solid rgba(160,200,240,.22); border-radius: 12px; background: rgba(160,200,240,.1); color: #e9f5ff; font: 700 16px var(--body); cursor: pointer; }
.motion-controls button:hover, .motion-controls button:focus-visible { background: rgba(90,184,255,.3); }
.motion-controls .motion-click { padding: 0 14px; font-size: 13px; }
.motion-proof { padding: 110px 0; background: #05070b; }
.motion-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.motion-proof-card { min-height: 210px; padding: 28px; border: 1px solid rgba(148,195,255,.13); border-radius: 24px; background: rgba(255,255,255,.04); }
.motion-proof-card strong { display: block; margin: 12px 0 8px; color: #edf6ff; font: 700 24px/1.05 var(--display); }
.motion-proof-card p { margin: 0; color: #8da1ba; }
@media (max-width: 780px) { .motion-hero { min-height: 820px; padding-top: 120px; } .motion-stage { height: 450px; margin-top: 38px; transform: scale(.82); transform-origin: top center; width: 125%; margin-left: -12.5%; } .motion-macbook { left: 2%; top: 45px; width: 74vw; } .motion-iphone { right: 5%; top: 110px; width: 160px; } .motion-mac-screen img { height: 270px; } .motion-phone-screen { height: 330px; } .motion-react-engine-grid { grid-template-columns: 1fr; gap: 36px; } .motion-react-engine { padding: 88px 0 96px; } .motion-native-heading { display: block; } .motion-native-heading p { margin-top: 22px; } .motion-state-view { grid-template-columns: 1fr; gap: 26px; padding: 20px; } .motion-state-visual { min-height: 360px; } .motion-state-phone img { height: 355px; } .motion-native-form { min-height: 0; padding: 20px 16px; } .motion-state-meta { grid-column: auto; } .motion-interaction-grid, .motion-proof-grid { grid-template-columns: 1fr; gap: 36px; } .motion-interaction { padding: 96px 0; } }
@media (prefers-reduced-motion: reduce) { .motion-device, .motion-cursor, .motion-cursor-ring, .motion-state-tabs button, .motion-switch::after, .motion-phone-scene, .motion-phone-touch { transition: none; animation: none; } .motion-phone-touch.is-active { opacity: .7; transform: translate(-50%, -50%) scale(1); } .motion-page * { scroll-behavior: auto !important; } }