@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Poppins,Arial,sans-serif;color:#000;background:#eef2ff}
button{font:inherit;cursor:pointer}
.viewport{width:100vw;height:100dvh;overflow:hidden;position:relative}
.canvas{position:absolute;width:1440px;height:900px;transform-origin:top left;background:#eef2ff;overflow:hidden}
.dashboard{position:absolute;inset:0}
.sidebar{position:absolute;left:0;top:0;width:234px;height:900px;background:#fff}
.brand{position:absolute;left:28px;top:28px;width:176px;height:45px;overflow:hidden}
.brand::before{content:"";position:absolute;left:-8px;top:-41px;width:184px;height:123px;background:url('../assets/gabriel-tutorial/1c6f9.png') 0 0/184px 123px no-repeat}
.brand strong{display:none}
.nav-item{position:absolute;left:22px;width:190px;height:44px;display:flex;align-items:center;gap:12px;padding:10px;font-size:14px;font-weight:500;border-radius:6px;white-space:nowrap}
.nav-item img{width:24px;height:24px;flex:none}
.nav-item.active{background:#d3dff5;color:#2c3d92;font-weight:600;padding-left:12px}
#dashboard-nav{top:111px}#analytics-nav{top:167px}#voice-nav{top:223px}
.sidebar>.nav-item:nth-of-type(5){top:279px}.sidebar>.nav-item:nth-of-type(6){top:335px}
.sidebar-bottom{position:absolute;left:6px;top:766px}.sidebar-bottom .nav-item{position:relative;left:22px;width:184px}.sidebar-bottom .nav-item+.nav-item{margin-top:12px}
.search{position:absolute;left:270px;top:35px;width:461px;height:50px;border-radius:30px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;font-size:14px;font-weight:300}
.search img{width:23px;height:21px}
.campaign-top{position:absolute;left:1201px;top:36px;width:176px;height:48px;background:#2c3d92;color:#fff;border-radius:6px;display:grid;place-items:center;font-size:16px;font-weight:500}
.dashboard h1{position:absolute;left:280px;top:124px;margin:0;font-size:24px;line-height:36px;font-weight:600}
.card{position:absolute;background:#fff;border-radius:10px}
.card h2{position:absolute;top:19px;left:21px;margin:0;font-size:22px;line-height:33px;font-weight:500}
.card i{position:absolute;font-size:14px;font-weight:400;white-space:nowrap}
.recent{left:270px;top:173px;width:1146px;height:158px}.recent i{left:480px;top:69px}
.billing{left:270px;top:356px;width:362px;height:230px}.billing i{left:116px;top:115px}
.calls{left:662px;top:356px;width:362px;height:230px}.calls h2{left:24px}.calls i{left:132px;top:105px}
.engagement{left:270px;top:614px;width:754px;height:230px}.engagement h2{left:22px}.engagement img{position:absolute;left:32px;top:80px;width:694px;height:114px}
.info{left:1054px;top:356px;width:362px;height:488px}.info h2{left:23px}
.pill{position:absolute;left:23px;width:238px;min-height:39px;border-radius:20px;display:flex;align-items:center;gap:12px;padding:6px 16px;font-size:18px;line-height:25px;white-space:nowrap}
.pill img{width:27px;height:26px;object-fit:contain;flex:none}
.pill.peach{top:82px;background:rgba(243,208,187,.5)}.pill.blue{top:139px;width:283px;min-height:64px;background:#b2c2eb;color:#f6f6f6;white-space:normal}.pill.blue img{width:26px}.pill.grey{top:220px;background:#e7e8eb}.pill.grey img{width:26px;height:20px}.pill.plain{background:#f6f6f6}.pill.plain:nth-of-type(4){top:277px}.pill.plain:nth-of-type(5){top:334px}.pill.plain:nth-of-type(6){top:391px}
.mask{position:absolute;left:0;top:0;width:1440px;height:902px;pointer-events:none;transition:opacity .28s ease}
.pointer{position:absolute;pointer-events:none;transition:left .46s cubic-bezier(.2,.8,.2,1),top .46s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.tour-card{position:absolute;background:#fff;border-radius:12px;box-shadow:0 2px 2px rgba(0,0,0,.25);transition:left .46s cubic-bezier(.2,.8,.2,1),top .46s cubic-bezier(.2,.8,.2,1),width .46s cubic-bezier(.2,.8,.2,1),height .46s cubic-bezier(.2,.8,.2,1),opacity .25s ease,transform .46s cubic-bezier(.2,.8,.2,1);transform-origin:center center}
.tour-card h2{position:absolute;left:20px;top:20px;width:calc(100% - 40px);margin:0;text-align:center;font-size:18px;line-height:27px;font-weight:500}
.tour-card p{position:absolute;left:20px;top:55px;width:calc(100% - 40px);margin:0;font-size:14px;line-height:18px;font-weight:400;text-align:justify}
.tour-card button{position:absolute;border:0}
.tour-card .skip{left:28px;bottom:16px;background:none;color:#000;font-size:14px;padding:0}
.tour-card .next{right:16px;bottom:16px;width:111px;height:32px;border-radius:6px;background:#2c3d92;color:#fff;font-size:14px;font-weight:500}
.tour-card .next:hover,.campaign-top:hover{background:#344aaa}
.tour-card .next:focus-visible,.tour-card .skip:focus-visible,.replay:focus-visible{outline:3px solid #a5b8f5;outline-offset:2px}
.tour-card.welcome{left:442px;top:222px;width:557px;height:455px}
.tour-card.welcome h2{left:61px;top:193px;width:435px;font-size:32px;line-height:48px;font-weight:400}
.tour-card.welcome h2 strong{font-weight:600}
.tour-card.welcome p{left:61px;top:261px;width:435px;height:56px;text-align:center}
.tour-card.welcome .next{right:190px;bottom:41px;width:176px;height:48px;font-size:16px}
.tour-card.welcome .skip{display:none}
.welcome-mark{display:none;position:absolute;left:219.5px;top:41.5px;width:118px;height:104px;background:url('../assets/gabriel-tutorial/1c6f9.png') 0 -70px/376px 250px no-repeat}
.tour-card.welcome .welcome-mark{display:block}
.tour-card.final .skip{display:none}.tour-card.final .next{left:115px;right:auto;bottom:21px;width:160px;height:33px}
.replay{position:absolute;right:35px;bottom:35px;background:#2c3d92;color:#fff;border:0;border-radius:6px;padding:12px 20px;font-size:14px}
.replay[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.mask,.pointer,.tour-card{transition:none!important}}