.op{position:relative;view-timeline-name:--op;view-timeline-axis:block;color:#fff}.op-sticky{padding:0 var(--site-gutter)}.op-box{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:40px;max-width:var(--site-w);margin:0 auto;padding:100px 24px;border-radius:40px;box-shadow:0 40px 80px -50px rgb(23 19 41/.6)}.op-bg{z-index:-2;background:radial-gradient(55% 60% at 12% 62%,var(--color-lavender) 0,transparent 70%),radial-gradient(50% 55% at 90% 42%,color-mix(in oklab,var(--color-plum) 45%,#3b0f3a) 0,transparent 72%),radial-gradient(40% 40% at 50% 18%,color-mix(in oklab,var(--color-lavender) 60%,#fff) 0,transparent 70%),linear-gradient(100deg,var(--color-brand) 0,color-mix(in oklab,var(--color-brand) 55%,#7a2f72) 60%,color-mix(in oklab,var(--color-plum) 60%,#3b0f3a) 100%)}.op-bg,.op-grain{border-radius:inherit;position:absolute;inset:0}.op-grain{z-index:-1;opacity:.22;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.op--night .op-bg{background:radial-gradient(45% 50% at 14% 30%,rgb(66 133 244/.45) 0,transparent 70%),radial-gradient(40% 45% at 88% 70%,rgb(251 188 4/.3) 0,transparent 70%),radial-gradient(35% 40% at 70% 12%,color-mix(in oklab,var(--color-brand) 60%,transparent) 0,transparent 70%),radial-gradient(40% 40% at 20% 92%,rgb(52 168 83/.25) 0,transparent 70%),var(--color-night)}.op--night .op-phone{box-shadow:0 0 0 1px rgb(255 255 255/.18),0 50px 90px -40px rgb(0 0 0/.9)}.op--night .op-grad{background-image:linear-gradient(90deg,#8ab4f8,#fff 50%,#fde293)}.op-title{max-width:52rem;text-align:center;font-size:clamp(2rem,5vw,4.4rem);font-weight:800;line-height:1.03;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 30px rgb(23 19 41/.18)}.op-grad{display:block;background:linear-gradient(90deg,var(--color-lavender) 0,#fff 45%,var(--color-brand-light) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.op-orbit{display:none}.op-pill{position:absolute;left:50%;top:50%;--rx:min(30vw,380px);--ry:min(28vh,250px)}.op-pill-in{display:inline-flex;align-items:center;gap:10px;translate:-50% -50%;white-space:nowrap;padding:7px 16px 7px 7px;border-radius:999px;background:rgb(255 255 255/.16);border:1px solid rgb(255 255 255/.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -22px rgb(23 19 41/.6);font-size:15px;font-weight:600}.op-chip{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;color:#fff;object-fit:cover}.op-card{width:150px;rotate:-10deg;filter:drop-shadow(0 24px 30px rgb(23 19 41/.45))}.op-card,.op-node{translate:-50% -50%}.op-node{white-space:nowrap}.op-node,.op-phone{color:var(--color-night)}.op-phone{width:300px;height:620px;padding:10px;border-radius:46px;background:var(--color-night);box-shadow:0 50px 90px -40px rgb(23 19 41/.8)}.op-screen{height:100%;overflow:hidden;border-radius:36px;background:#fff}.op-end{max-width:380px;text-align:center}.op-end-title{margin-top:8px;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;line-height:1.05;letter-spacing:-.04em}.op-end-text{margin-top:10px;line-height:1.55;color:rgb(255 255 255/.85)}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op{height:340svh}.op-sticky{position:sticky;top:0;display:flex;height:100svh;padding:92px var(--site-gutter) 20px;perspective:1600px}.op-box{display:block;width:100%;height:100%;padding:0;transform-origin:50% 0;animation:op-land linear both;animation-timeline:--op;animation-range:entry 0 entry 95%}.op-box:after{content:"";position:absolute;inset:-34px 6% auto;z-index:-3;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgb(23 19 41/.3),transparent);pointer-events:none;animation:op-ground linear both;animation-timeline:--op;animation-range:entry 0 entry 95%}.op-title{position:absolute;left:50%;top:50%;width:calc(100% - 48px);translate:-50% -50%;animation:op-title linear both;animation-timeline:--op;animation-range:contain 10% contain 28%}.op-orbit{display:block;position:absolute;inset:0;z-index:7;pointer-events:none}.op-pill{animation:op-pill linear both;animation-timeline:--op}.op-pill>*{animation:op-pill-fade linear both;animation-timeline:--op;animation-range:inherit}.op-pill--flash>*{animation-name:op-flash-fade}.op-reveal{animation:op-reveal linear both;animation-timeline:--op}.op-phone{left:50%;margin:-310px 0 0 -150px;animation:op-phone linear both;animation-timeline:--op;animation-range:contain 16% contain 36%}.op-end,.op-phone{position:absolute;top:50%}.op-end{left:48px;max-width:min(380px,calc(50% - 48px - 180px));translate:0 -50%;text-align:left;animation:op-end linear both;animation-timeline:--op;animation-range:contain 80% contain 92%}@media (max-width:1100px){.op-end{left:50%;top:auto;bottom:28px;translate:-50% 0;text-align:center}.op-end>:not(a){display:none}}@media (max-height:860px){.op-phone{zoom:.82}}@media (max-height:700px){.op-phone{zoom:.68}}@media (max-width:640px){.op-sticky{padding:84px var(--site-gutter) 12px}.op-box{border-radius:28px}.op-pill{--rx:22vw}.op-pill-in{gap:7px;max-width:44vw;padding:5px 12px 5px 5px;font-size:12px;line-height:1.2;white-space:normal}.op-chip{width:26px;height:26px}.op-card{width:110px}}}}@keyframes op-land{0%{transform:rotateX(-14deg) scale(1.08);box-shadow:0 -70px 110px -50px rgb(23 19 41/.2)}70%{transform:rotateX(-3deg) scale(1.015);box-shadow:0 -30px 70px -45px rgb(23 19 41/.18)}to{transform:none;box-shadow:0 20px 50px -40px rgb(23 19 41/.2)}}@keyframes op-ground{0%{opacity:.45;transform:translateY(-110px) scale(1.15,1.8);filter:blur(30px)}55%{opacity:.6;transform:translateY(-45px) scale(1.06,1.25);filter:blur(20px)}85%{opacity:.75;transform:translateY(0) scaleY(.75);filter:blur(12px)}to{opacity:0;transform:translateY(4px) scale(.98,.6);filter:blur(10px)}}@keyframes op-title{to{opacity:0;translate:-50% -70%;filter:blur(8px)}}@keyframes op-pill{0%{transform:translate(calc(var(--ax) * var(--rx) * 1.6),calc(var(--ay) * var(--ry) * 1.6)) scale(1.1)}42%,62%{transform:translate(calc(var(--ax) * var(--rx)),calc(var(--ay) * var(--ry))) scale(1)}92%,to{transform:translate(0) scale(.2)}}@keyframes op-pill-fade{0%{opacity:0}12%,62%{opacity:1}92%,to{opacity:0}}@keyframes op-reveal{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes op-phone{0%{opacity:0;scale:.6}to{opacity:1;scale:1}}@keyframes op-end{0%{opacity:0;margin-top:24px}to{opacity:1;margin-top:0}}.op-endcard,.op-maps,.op-scan,.op-status,.op-steps,.op-tap,.op-total,.op-waves{display:none}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op--night{height:428svh}.op--night .op-end{animation-range:contain 74.4% contain 89.8%}.op-pill--flash{animation-name:op-flash}.op--night .op-phone{transform-origin:50% 0;animation-name:op-phone-land;animation-range:entry 45% entry 100%}@media (min-width:1101px){.op--night .op-phone{animation-name:op-phone-land,op-phone-aside;animation-range:entry 45% entry 100%,contain 74.4% contain 85.9%}.op--night .op-end{left:6%;max-width:min(460px,calc(50% + 110px - 150px - 6% - 32px))}.op--night .op-end-title{font-size:clamp(2.4rem,3.6vw,3.4rem)}.op--night .op-end-text{font-size:18px}.op--night .op-phone{z-index:3}.op-endcard{display:flex;position:absolute;z-index:5;left:calc(50% + 250px);top:60%;opacity:0;box-shadow:0 30px 50px -22px rgb(0 0 0/.65);animation:op-endcard linear both;animation-timeline:--op;animation-range:contain 85.3% contain 91.1%}}.op--night .op-phone:after{content:"";position:absolute;inset:-30px 4% auto;z-index:-1;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0/.45),transparent);pointer-events:none;animation:op-phone-ground linear both;animation-timeline:--op;animation-range:entry 45% entry 100%}.op--night .op-phone{box-shadow:0 0 0 1.5px rgb(255 255 255/.28),0 50px 90px -40px rgb(0 0 0/.9)}.op-tap{display:flex;position:absolute;z-index:40;top:40px;left:-36px;opacity:0;box-shadow:0 0 0 1px rgb(0 0 0/.06),0 30px 50px -20px rgb(0 0 0/.65);animation:op-tap linear both;animation-timeline:--op;animation-range:contain 21.9% contain 34.7%}.op-waves{display:block;position:absolute;z-index:39;top:155px;left:50%;pointer-events:none}.op-waves i{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:999px;border:2px solid #9c86ff;opacity:0;animation:op-wave linear both;animation-timeline:--op}.op-waves i:first-child{animation-range:contain 28.3% contain 31.5%}.op-waves i:nth-child(2){animation-range:contain 29.4% contain 32.6%}.op-waves i:nth-child(3){animation-range:contain 30.3% contain 33.5%}.op-scan{display:block;animation:op-scan linear both;animation-timeline:--op;animation-range:contain 49.5% contain 52%}.op-scan-notif{animation:op-scan-notif linear both;animation-timeline:--op;animation-range:contain 29.9% contain 32.4%}.op-scan-touch{opacity:0;animation:op-scan-touch linear both;animation-timeline:--op;animation-range:contain 34.1% contain 36.7%}.op-scan-lock{animation:op-scan-lock linear both;animation-timeline:--op;animation-range:contain 37.3% contain 39.2%}.op-scan-page{transform-origin:50% 85%;animation:op-scan-open linear both;animation-timeline:--op;animation-range:contain 36.7% contain 39.2%}.op-scan-star{color:#dadce0;animation:op-scan-star linear both;animation-timeline:--op}.op-scan-publish{animation:op-scan-publish linear both;animation-timeline:--op;animation-range:contain 46.9% contain 48.8%}.op-maps{display:flex;animation:op-maps-in linear both;animation-timeline:--op;animation-range:contain 75.1% contain 78.3%}.op-rank{animation:op-rank linear both;animation-timeline:--op;animation-range:contain 79.6% contain 84.6%}.op-rank-before{animation:op-fade-out linear both;animation-timeline:--op;animation-range:contain 80.1% contain 82%}.op-rank-after,.op-rank-first{animation:op-fade-in linear both;animation-timeline:--op;animation-range:contain 81.4% contain 84%}.op-maps-pin{animation:op-pin linear both;animation-timeline:--op;animation-range:contain 82% contain 85.3%}.op-status{display:flex;position:absolute;z-index:36;top:25px;left:34px;right:30px;align-items:center;justify-content:space-between;font-size:13px;color:#fff;pointer-events:none;animation:op-status-dark linear both;animation-timeline:--op;animation-range:contain 37.3% contain 38.1%}.op-total{display:block;animation:op-reveal linear both;animation-timeline:--op;animation-range:contain 74.4% contain 78.3%}.op-steps{display:block;position:absolute;z-index:6;left:50%;top:22px;width:min(92%,560px);height:46px;translate:-50% 0}.op-step{position:absolute;inset:0;gap:10px;background:#fff;color:#1a1a19;font-size:15px;font-weight:600;opacity:0;animation:op-step linear both;animation-timeline:--op}.op-step,.op-step-n{display:flex;align-items:center;justify-content:center;border-radius:999px}.op-step-n{width:26px;height:26px;background:#6d4aff;color:#fff;font-size:13px;font-weight:700}}}@keyframes op-tap{0%{opacity:0;transform:translate(320px,-180px) rotate(28deg) scale(1.08)}20%{opacity:1}45%{transform:translate(40px,-20px) rotate(14deg) scale(1.04)}55%{transform:translate(0) rotate(10deg) scale(1)}60%{transform:translate(4px,6px) rotate(10deg) scale(.95)}66%,78%{opacity:1;transform:translate(0) rotate(10deg) scale(1)}to{opacity:0;transform:translate(300px,-140px) rotate(24deg) scale(1.06)}}@keyframes op-wave{0%{opacity:0;scale:.4}10%{opacity:.9;scale:.5}to{opacity:0;scale:2}}@keyframes op-flash{0%{transform:translate(calc(var(--ax) * var(--rx) * 1.35),calc(var(--ay) * var(--ry) * 1.35)) scale(.9)}18%,80%{transform:translate(calc(var(--ax) * var(--rx)),calc(var(--ay) * var(--ry))) scale(1)}to{transform:translate(calc(var(--ax) * var(--rx)),calc(var(--ay) * var(--ry))) scale(.95)}}@keyframes op-flash-fade{0%{opacity:0}18%,80%{opacity:1}to{opacity:0}}@keyframes op-step{0%{opacity:0;translate:0 10px}12%,88%{opacity:1;translate:0 0}to{opacity:0;translate:0 -10px}}@keyframes op-scan{to{opacity:0;visibility:hidden}}@keyframes op-scan-lock{to{opacity:0;visibility:hidden}}@keyframes op-scan-notif{0%{opacity:0;translate:0 60px;scale:.96}to{opacity:1;translate:0 0;scale:1}}@keyframes op-scan-star{to{color:#fbbc04;scale:1.15}}@keyframes op-scan-publish{50%{scale:.94}to{scale:1;background:#188038}}@keyframes op-scan-open{0%{opacity:0;scale:.82 .14;border-radius:18px}to{opacity:1;scale:1;border-radius:0}}@keyframes op-scan-touch{0%{opacity:0;scale:1.4}40%,70%{opacity:1;scale:.8}to{opacity:0;scale:.8}}.op-island{display:none}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op-island{display:block;position:absolute;z-index:35;top:20px;left:50%;width:96px;height:28px;translate:-50% 0;border-radius:999px;background:#000}}}@keyframes op-phone-land{0%{opacity:0;transform:translateY(70svh) rotateX(-16deg) scale(1.08);box-shadow:0 0 0 1.5px rgb(255 255 255/.28),0 -70px 110px -50px rgb(0 0 0/.5)}20%{opacity:1}70%{transform:translateY(6svh) rotateX(-4deg) scale(1.015);box-shadow:0 0 0 1.5px rgb(255 255 255/.28),0 -30px 70px -40px rgb(0 0 0/.5)}to{opacity:1;transform:none;box-shadow:0 0 0 1.5px rgb(255 255 255/.28),0 50px 90px -40px rgb(0 0 0/.9)}}@keyframes op-phone-ground{0%{opacity:.45;transform:translateY(-110px) scale(1.15,1.8);filter:blur(30px)}55%{opacity:.6;transform:translateY(-45px) scale(1.06,1.25);filter:blur(20px)}85%{opacity:.75;transform:translateY(0) scaleY(.75);filter:blur(12px)}to{opacity:0;transform:translateY(4px) scale(.98,.6);filter:blur(10px)}}@keyframes op-phone-aside{0%{translate:0 0}to{translate:110px 0}}@keyframes op-endcard{0%{opacity:0;transform:translate(-50%,-50%) translate(120px,60px) rotate(22deg) scale(1)}to{opacity:1;transform:translate(-50%,-50%) rotate(9deg) scale(1)}}@keyframes op-maps-in{0%{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}@keyframes op-rank{0%{translate:0 var(--from)}to{translate:0 var(--to)}}@keyframes op-fade-out{to{opacity:0}}@keyframes op-fade-in{0%{opacity:0}to{opacity:1}}@keyframes op-pin{50%{scale:1.8}to{scale:1.4}}@keyframes op-status-dark{to{color:#1d1d22}}.op-sheet{padding-bottom:120px}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op--violet{height:391svh}.op--violet .op-end{animation-range:contain 80.2% contain 93.4%}.op--violet .op-phone{transform-origin:50% 0;animation-name:op-phone-land;animation-range:entry 45% entry 100%;box-shadow:0 0 0 1.5px rgb(255 255 255/.28),0 50px 90px -40px rgb(0 0 0/.9)}.op--violet .op-phone:after{content:"";position:absolute;inset:-30px 4% auto;z-index:-1;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0/.45),transparent);pointer-events:none;animation:op-phone-ground linear both;animation-timeline:--op;animation-range:entry 45% entry 100%}.op--violet .op-status{animation:none}.op-sheet{animation:op-sheet-up linear both;animation-timeline:--op;animation-range:contain 53% contain 86%}}}@keyframes op-sheet-up{0%{translate:0 0}13.6%,75.8%{translate:0 -268px}to{translate:0 0}}.op-wrap{position:relative}.op-head{padding-bottom:48px}.op-wrap>.op{z-index:1}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op-head{position:sticky;top:0;height:100svh;padding:120px 0 0}.op-wrap>.op{margin-top:calc(8px - 22svh)}.op--violet .op-tap{top:-24px;left:-110px;scale:1.24;transform-origin:0 0;animation-range:contain 2% contain 16%}.op--violet .op-tap--nfc{box-shadow:0 30px 50px -20px rgb(0 0 0/.7)}.op--violet .op-waves{top:170px}.op--violet .op-waves i:first-child{animation-range:contain 9% contain 12%}.op--violet .op-waves i:nth-child(2){animation-range:contain 10% contain 13%}.op--violet .op-waves i:nth-child(3){animation-range:contain 11% contain 14%}.op--night .op-tap{top:-24px;left:-110px;scale:1.24;transform-origin:0 0}}}.op-lock{display:none}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.op-lock{display:flex;animation:op-scan-lock linear both;animation-timeline:--op;animation-range:contain 12.5% contain 14.5%}.op-lock-notif{animation:op-scan-notif linear both;animation-timeline:--op;animation-range:contain 9% contain 11%}}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (min-width:1101px){.op--violet .op-endcard{display:flex;position:absolute;z-index:5;left:calc(50% + 250px);top:60%;opacity:0;animation:op-endcard linear both;animation-timeline:--op;animation-range:contain 84% contain 91%}.op--violet .op-phone{z-index:3;animation-name:op-phone-land,op-phone-aside;animation-range:entry 45% entry 100%,contain 79% contain 88%}.op--violet .op-end{left:6%;max-width:min(460px,calc(50% + 110px - 150px - 6% - 32px))}.op--violet .op-end-title{font-size:clamp(2.4rem,3.6vw,3.4rem)}.op--violet .op-end-text{font-size:18px}}}