/* A single workspace rearranges as its device changes shape. */
.responsive-motion{--rm-ease:cubic-bezier(.65,0,.2,1);position:relative;isolation:isolate;min-width:0;width:100%;margin:0;border:1px solid #34556d;border-radius:22px;background:radial-gradient(ellipse at 50% 42%,#12435a 0%,#0b243e 48%,#091e35 80%);overflow:hidden;box-shadow:0 25px 70px #0002}
.rm-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 24px 0;font-size:12px;color:#b9dae5}
.rm-heading>span:first-child{display:flex;align-items:center;gap:8px}.rm-heading i{width:6px;height:6px;border-radius:50%;background:#72e5da;box-shadow:0 0 12px #35c9d6}
.rm-heading>span:last-child{font-size:9px;letter-spacing:1.4px;color:#88a7bd}
.rm-viewport{position:relative;width:100%;aspect-ratio:620/490;overflow:hidden}
.rm-art{position:absolute;top:0;left:50%;width:620px;height:490px;direction:rtl;transform:translateX(-50%) scale(var(--rm-scale,1));transform-origin:top center}
.rm-art *{box-sizing:border-box}.rm-orbit{position:absolute;left:50%;top:46%;border:1px solid #60cbd51a;border-radius:50%;transform:translate(-50%,-50%)}
.rm-orbit-one{width:400px;height:400px}.rm-orbit-two{width:510px;height:510px;border-style:dashed;animation:rm-orbit 65s linear infinite}.rm-orbit-three{width:290px;height:290px}
.rm-spark{position:absolute;width:7px;height:7px;background:#7be5e6;border-radius:50%;box-shadow:0 0 20px #35c9d6;animation:rm-spark 4s ease-in-out infinite}.rm-spark-one{left:62px;top:159px}.rm-spark-two{right:73px;top:363px;background:#ff944a;animation-delay:-2s}
.rm-device{position:absolute;top:76px;left:50%;width:514px;height:304px;padding:9px;border:1px solid #789ba8;border-radius:15px;background:linear-gradient(140deg,#5a7f8e,#183b54 40%,#527381);box-shadow:0 24px 50px #0005,0 0 45px #35c9d609;transform:translateX(-50%);transition:width 1.3s var(--rm-ease),height 1.3s var(--rm-ease),top 1.3s var(--rm-ease),border-radius 1.3s,padding 1.3s}
.rm-screen{position:relative;height:100%;border-radius:7px;overflow:hidden;background:#f0f5f8;color:#14354f;transition:border-radius 1.3s}
.rm-camera{position:absolute;top:2px;left:50%;width:3px;height:3px;border-radius:10px;background:#0a192c;transform:translateX(-50%);z-index:2;transition:all 1.3s var(--rm-ease)}
.rm-appbar{height:45px;display:flex;align-items:center;gap:14px;padding:0 13px;border-bottom:1px solid #d6e3eb;background:#fff}.rm-appbar>b{font-size:22px;white-space:nowrap}.rm-appbar>b>span{color:#ee853e}.rm-appbar-label{font-size:10px;color:#658093;white-space:nowrap;transition:opacity .4s}.rm-avatar{margin-right:auto;background:#e3f2f4;border-radius:50%;font-size:12px;width:25px;height:25px;display:grid;place-items:center}
.rm-sidebar{position:absolute;right:0;top:45px;bottom:0;width:90px;background:#fff;border-left:1px solid #d6e3eb;display:flex;flex-direction:column;gap:13px;padding:16px 8px;transition:width 1.3s var(--rm-ease),top 1.3s var(--rm-ease),height 1.3s var(--rm-ease),padding 1.3s}
.rm-sidebar>span{font-size:19px;display:flex;align-items:center;gap:6px;line-height:1.5;color:#7090a1;white-space:nowrap}.rm-sidebar small{font-size:10px;font-weight:400;transition:opacity .3s}.rm-sidebar .rm-nav-active{color:#087f91}
.rm-workspace{position:absolute;top:45px;right:90px;left:0;bottom:0;transition:right 1.3s var(--rm-ease),bottom 1.3s var(--rm-ease)}
.rm-greeting{position:absolute;right:14px;left:14px;top:10px;display:flex;justify-content:space-between;align-items:center;white-space:nowrap}.rm-greeting strong{font-size:14px}.rm-greeting>span{font-size:9px;color:#698392;transition:opacity .3s}
.rm-stat{position:absolute;top:42px;width:calc(50% - 21px);height:73px;padding:9px 12px;border:1px solid #d9e6ec;border-radius:9px;background:#fff;transition:width 1.3s var(--rm-ease),height 1.3s var(--rm-ease),top 1.3s var(--rm-ease),right 1.3s var(--rm-ease),padding 1.3s}
.rm-stat-one{right:14px;background:#103e55;color:white;border-color:#103e55}.rm-stat-two{right:calc(50% + 7px)}.rm-stat>span{display:block;font-size:10px}.rm-stat>strong{font-size:25px;line-height:1.5}.rm-stat small{font-size:10px;font-weight:400}.rm-stat i{position:absolute;left:10px;bottom:13px;font-size:9px;font-style:normal;color:#178575}.rm-stat-one i{color:#86e6df}
.rm-chart{position:absolute;right:14px;top:127px;width:calc(59% - 21px);height:97px;padding:10px 13px;border:1px solid #d9e6ec;border-radius:9px;background:#fff;transition:width 1.3s var(--rm-ease),height 1.3s var(--rm-ease),top 1.3s var(--rm-ease)}
.rm-chart>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:10px}.rm-chart>div>span{font-size:9px;color:#087f91}.rm-bars{display:flex;align-items:end;gap:12px;direction:ltr;height:calc(100% - 22px);margin-top:7px;border-bottom:1px solid #dce9ec}
.rm-bars i{height:var(--h);flex:1;border-radius:3px 3px 0 0;background:#21536c;animation:rm-bars 4.8s ease-in-out infinite;transform-origin:bottom}.rm-bars i:nth-child(2n){animation-delay:-1s}.rm-bars i:last-child{background:#35c9d6}
.rm-task{position:absolute;right:calc(59% + 7px);top:127px;width:calc(41% - 21px);height:97px;padding:10px;display:flex;align-content:center;align-items:center;flex-wrap:wrap;gap:6px;background:#e1f2f1;border:1px solid #c7e5e2;border-radius:9px;transition:right 1.3s var(--rm-ease),width 1.3s var(--rm-ease),height 1.3s var(--rm-ease),top 1.3s var(--rm-ease)}
.rm-check{width:22px;height:22px;background:#168580;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:12px}.rm-task strong{display:block;font-size:10px;white-space:nowrap}.rm-task div>span{display:block;color:#4d7e84;font-size:9px}.rm-task>b{margin-right:auto;font-size:16px;color:#168580}
.rm-homebar{position:absolute;bottom:5px;left:50%;width:60px;height:3px;border-radius:4px;background:#294759;transform:translateX(-50%);opacity:0;transition:opacity .5s}
.rm-stand{position:absolute;top:379px;left:50%;width:68px;height:34px;transform:translateX(-50%);background:linear-gradient(#1d3d54,#52798a);clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);transition:opacity .5s,transform .8s}
.rm-base{position:absolute;top:411px;left:50%;width:170px;height:7px;border-radius:50% 50% 4px 4px;background:#648794;transform:translateX(-50%);box-shadow:0 10px 20px #0005;transition:opacity .5s,transform .8s}
.rm-continuity{position:absolute;top:444px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px;color:#b8dbe3}.rm-continuity>span{color:#67dfd6;border:1px solid #359d9d;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:11px}
.responsive-motion[data-device="tablet"] .rm-device{width:356px;height:374px;top:40px;border-radius:23px;padding:12px}
.responsive-motion[data-device="tablet"] .rm-screen{border-radius:12px}.responsive-motion[data-device="tablet"] .rm-sidebar{width:42px;padding-inline:11px}.responsive-motion[data-device="tablet"] .rm-sidebar small{opacity:0;width:0;overflow:hidden}.responsive-motion[data-device="tablet"] .rm-workspace{right:42px;bottom:10px}
.responsive-motion[data-device="tablet"] .rm-chart{width:calc(100% - 28px);height:106px}.responsive-motion[data-device="tablet"] .rm-task{top:244px;right:14px;width:calc(100% - 28px);height:43px;flex-wrap:nowrap}
.responsive-motion:not([data-device="desktop"]) .rm-stand,.responsive-motion:not([data-device="desktop"]) .rm-base{opacity:0;transform:translateX(-50%) translateY(-20px)}
.responsive-motion:not([data-device="desktop"]) .rm-homebar{opacity:1}.responsive-motion:not([data-device="desktop"]) .rm-stat i{opacity:0}
.responsive-motion[data-device="mobile"] .rm-device{width:238px;height:406px;top:20px;border-radius:33px;padding:10px}
.responsive-motion[data-device="mobile"] .rm-screen{border-radius:23px}.responsive-motion[data-device="mobile"] .rm-camera{width:51px;height:12px;top:15px}
.responsive-motion[data-device="mobile"] .rm-appbar{padding-top:13px;height:58px}.responsive-motion[data-device="mobile"] .rm-appbar-label{opacity:0;width:0;overflow:hidden}
.responsive-motion[data-device="mobile"] .rm-sidebar{top:calc(100% - 45px);height:35px;bottom:auto;width:100%;flex-direction:row;justify-content:space-around;gap:0;padding:5px 10px;border:0;border-top:1px solid #d6e3eb}
.responsive-motion[data-device="mobile"] .rm-sidebar small{opacity:0;width:0;overflow:hidden}.responsive-motion[data-device="mobile"] .rm-sidebar>span{gap:0}
.responsive-motion[data-device="mobile"] .rm-workspace{top:58px;right:0;bottom:45px}.responsive-motion[data-device="mobile"] .rm-greeting>span{opacity:0;width:0;overflow:hidden}
.responsive-motion[data-device="mobile"] .rm-stat{width:calc(50% - 20px);padding:8px;height:68px}.responsive-motion[data-device="mobile"] .rm-stat strong{font-size:24px}.responsive-motion[data-device="mobile"] .rm-stat small{display:none}
.responsive-motion[data-device="mobile"] .rm-chart{top:120px;width:calc(100% - 28px);height:101px}.responsive-motion[data-device="mobile"] .rm-task{top:231px;right:14px;width:calc(100% - 28px);height:44px;flex-wrap:nowrap;padding:7px}
.responsive-motion figcaption{text-align:center;padding:4px 16px 18px;min-height:72px}.responsive-motion figcaption strong{display:block;font-size:18px;font-weight:500;color:#eefcff}.responsive-motion figcaption>span{display:block;font-size:11px;color:#8daabd;margin-top:6px}
.rm-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 22px 20px;padding-top:16px;border-top:1px solid #29475c}.rm-controls[hidden]{display:none}.rm-devices{display:flex;gap:4px;padding:4px;background:#061a2c;border:1px solid #28465c;border-radius:9px}
.rm-controls button{min-height:40px;border:1px solid transparent;border-radius:6px;padding:7px 12px;background:transparent;color:#a6c2d2;font-size:12px;transition:background .2s,color .2s}.rm-controls button:hover{background:#1a4359;color:white}.rm-controls button[aria-pressed="true"]{background:#35c9d6;color:#052438}.rm-controls .rm-play{border-color:#345a70;color:#c6e7ee;white-space:nowrap}.rm-controls button:focus-visible{outline:2px solid #89e4eb;outline-offset:3px}
.rm-progress{height:2px;background:#18394e;direction:ltr}.rm-progress>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#237d93,#78e6e1);transform:scaleX(0);transform-origin:left}
.responsive-motion[data-playing="false"] .rm-art *{animation-play-state:paused}
@keyframes rm-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rm-spark{50%{opacity:.35;transform:translateY(-15px)}}
@keyframes rm-bars{50%{transform:scaleY(.86)}}
@media(max-width:1000px){.responsive-motion{max-width:680px;margin-inline:auto}}
@media(max-width:420px){.rm-heading{padding:18px 15px 0;font-size:10px}.rm-heading>span:last-child{font-size:7px;letter-spacing:.7px}.rm-controls{margin:0 12px 16px;gap:5px}.rm-controls button{padding:7px 9px;font-size:11px}.responsive-motion figcaption strong{font-size:16px}}
/* Supplied product screenshots retain their full image and native proportions. */
.rm-screen{background:#172e45}
.rm-screenshot{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .65s ease;pointer-events:none}
.responsive-motion[data-device="desktop"] .rm-shot-desktop,.responsive-motion[data-device="tablet"] .rm-shot-tablet,.responsive-motion[data-device="mobile"] .rm-shot-mobile{opacity:1}
.responsive-motion[data-device="desktop"] .rm-device{width:540px;height:266px;top:114px}
.responsive-motion[data-device="tablet"] .rm-device{width:480px;height:320px;top:77px;padding:12px;border-radius:23px}
.responsive-motion[data-device="tablet"] .rm-camera{top:50%;left:5px;width:4px;height:4px;transform:translateY(-50%)}
.responsive-motion[data-device="mobile"] .rm-device{width:208px;height:432px;top:0;border-radius:27px;padding:10px}
.responsive-motion[data-device="mobile"] .rm-screen{border-radius:16px}
.responsive-motion[data-device="mobile"] .rm-camera{top:3px;left:50%;width:32px;height:4px;transform:translateX(-50%)}
.rm-viewport{isolation:isolate}
.rm-background-video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.8;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 82%,transparent)}
.rm-viewport::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#081b3320,#081b3308,#081b3320)}
.rm-art{z-index:2}
@media(prefers-reduced-motion:reduce){.responsive-motion *{animation:none!important;transition:none!important}}