.gps{overflow:hidden}
.gps__head{text-align:center;max-width:760px;margin:0 auto}
.gps__head .eyebrow{margin:0 0 14px}
.gps__title{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.03em}
.gps.bg-black .gps__title{color:var(--w)}
.gps__lead{margin:18px auto 0;max-width:54ch;font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--g)}
.gps.bg-black .gps__lead{color:#bdbdbd}
.gps__viewport{margin-top:clamp(36px,4.4vw,60px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gps__track{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;animation:gpsRun var(--dur,70s) linear infinite}
.gps__viewport:hover .gps__track{animation-play-state:paused}
@keyframes gpsRun{to{transform:translateX(calc(-50% - clamp(14px,1.6vw,22px)/2))}}
.gps__it{flex:none;margin:0}
.gps__card{position:relative;height:clamp(300px,30vw,440px);border-radius:var(--r);background:#ECECEC;overflow:hidden}
.gps.bg-cloud .gps__card{background:#E3E3E3}
.gps.bg-black .gps__card{background:#1c1c1c}
.gps__it--desktop .gps__card{width:clamp(400px,42vw,620px)}
.gps__it--phone .gps__card{width:clamp(230px,22vw,320px)}
.gps__dev{position:absolute;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.gps__it--desktop .gps__dev{left:8%;right:8%;top:10%;bottom:-1px;border-radius:12px 12px 0 0}
.gps__chrome{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#F3F3F3;border-bottom:1px solid #E4E4E4}
.gps__chrome i{width:8px;height:8px;border-radius:50%;background:#D5D5D5}
.gps__it--phone .gps__chrome{display:none}
.gps__it--phone .gps__dev{left:50%;top:9%;height:112%;aspect-ratio:9/19.2;transform:translateX(-50%);border-radius:34px;border:8px solid #111;background:#111}
.gps__vp,.gps__fx{position:absolute;left:0;right:0;bottom:0;top:26px;overflow:hidden}
.gps__vp{background:#fff}
.gps__fx{z-index:2;pointer-events:none}
.gps__it--phone .gps__vp,.gps__it--phone .gps__fx{top:0;border-radius:26px}
.gps__shot{position:relative;transform:translateY(0) scale(1);transform-origin:var(--ox,50%) var(--oy,30%);transition:transform 1.6s cubic-bezier(.3,0,.2,1)}
.gps__shot img{display:block;width:100%;max-width:none;height:auto}
.gps__vid{position:absolute;display:block;max-width:none;object-fit:cover;opacity:0;transition:opacity .6s}
.gps__vid.is-on{opacity:1}
.gps__it.is-pan .gps__shot{transition:none;animation:gpsPan var(--pd,18s) ease-in-out infinite alternate;animation-delay:var(--pdl,0s)}
@keyframes gpsPan{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(var(--pan,0))}}
.gps__it.is-zoom .gps__shot{transform:scale(1.035)}
.gps__it.is-kb .gps__shot{transition:none;animation:gpsKb 14s ease-in-out infinite alternate}
@keyframes gpsKb{from{transform:scale(1)}to{transform:scale(1.05)}}
.gps__cur{position:absolute;left:70%;top:70%;width:22px;height:22px;opacity:0;transition:left 1.3s cubic-bezier(.45,0,.2,1),top 1.3s cubic-bezier(.45,0,.2,1),opacity .5s}
.gps__cur.is-vis{opacity:1}
.gps__cur svg{position:relative;z-index:1;display:block;width:22px;height:22px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transition:transform .15s}
.gps__cur svg path{fill:var(--k);stroke:var(--w);stroke-width:1.6;stroke-linejoin:round}
.gps__cur i{position:absolute;left:-12px;top:-12px;width:26px;height:26px;border-radius:50%;background:rgba(255,218,3,.8);opacity:0;transform:scale(.2)}
.gps__cur.is-click svg{transform:scale(.86)}
.gps__cur.is-click i{animation:gpsRip .65s ease-out}
@keyframes gpsRip{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
.gps__search{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-width:min(220px,76%);background:var(--w);border-radius:999px;padding:9px 15px;font-size:13px;color:var(--k);box-shadow:0 12px 26px -14px rgba(0,0,0,.4)}
.gps__search svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round}
.gps__q{white-space:nowrap}
.gps__caret{display:inline-block;width:2px;height:15px;background:var(--k);margin-left:-5px;animation:gpsCaret 1s steps(1) infinite}
@keyframes gpsCaret{50%{opacity:0}}
.gps__toast{position:absolute;left:12px;right:12px;bottom:14px;margin:0 auto;max-width:280px;display:flex;align-items:center;gap:9px;background:rgba(14,14,14,.86);color:#fff;border-radius:14px;padding:9px 14px 9px 9px;font-size:13px;font-weight:700;box-shadow:0 16px 30px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.gps__toast.is-on{opacity:1;transform:none}
.gps__toast b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--y);display:grid;place-items:center}
.gps__toast b::after{content:"";width:5px;height:9px;border:solid var(--k);border-width:0 2.2px 2.2px 0;transform:translateY(-1px) rotate(45deg)}
.gps__it--mockup .gps__card{width:clamp(230px,22vw,320px)}
.gps__it--mockup-wide .gps__card{width:clamp(400px,42vw,620px)}
.gps__it--mockup .gps__chrome,.gps__it--mockup-wide .gps__chrome{display:none}
.gps__it--mockup .gps__dev,.gps__it--mockup-wide .gps__dev{left:5%;right:5%;top:5%;bottom:5%;background:transparent;box-shadow:none;border-radius:0}
.gps__it--mockup .gps__vp,.gps__it--mockup-wide .gps__vp,.gps__it--mockup .gps__fx,.gps__it--mockup-wide .gps__fx{top:0}
.gps__it--mockup .gps__vp,.gps__it--mockup-wide .gps__vp{background:transparent}
.gps__it--mockup .gps__shot,.gps__it--mockup-wide .gps__shot{height:100%;background:#ECECEC}
.gps.bg-cloud .gps__it--mockup .gps__shot,.gps.bg-cloud .gps__it--mockup-wide .gps__shot{background:#E3E3E3}
.gps.bg-black .gps__it--mockup .gps__shot,.gps.bg-black .gps__it--mockup-wide .gps__shot{background:transparent}
.gps__it--mockup .gps__shot img,.gps__it--mockup-wide .gps__shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gps.bg-black .gps__it--mockup .gps__shot img,.gps.bg-black .gps__it--mockup-wide .gps__shot img{mix-blend-mode:normal}
.gps__it.is-float .gps__shot{transition:none;animation:gpsFloat 6s ease-in-out infinite alternate;animation-delay:var(--fdl,0s)}
@keyframes gpsFloat{from{transform:translateY(5px)}to{transform:translateY(-7px)}}
.gps__cap{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--g)}
.gps__cap b{color:var(--k);font-weight:700}
.gps.bg-black .gps__cap b{color:var(--w)}
.gps__note{margin:clamp(24px,3vw,36px) 0 0;text-align:center;font-size:13px;color:var(--g)}
@media (max-width:640px){.gps__it--desktop .gps__card{width:300px}.gps__it--phone .gps__card{width:190px}.gps__it--mockup .gps__card{width:190px}.gps__it--mockup-wide .gps__card{width:300px}.gps__card{height:280px}.gps__chrome{height:20px}.gps__it--desktop .gps__vp,.gps__it--desktop .gps__fx{top:20px}.gps__cap{font-size:13px}.gps__search{font-size:12px;padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.gps__track{animation:none}.gps__viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.gps__it.is-pan .gps__shot,.gps__it.is-kb .gps__shot,.gps__it.is-float .gps__shot{animation:none}.gps__caret{animation:none}.gps__vid{display:none}}