/* Screen coordinates follow the photographed laptop's inner bezel. */
.laptop-stage {position:relative;overflow:hidden;background:#343328}
.laptop-stage .laptop-photo {display:block;width:100%;height:auto;aspect-ratio:3/2}
.laptop-screen {position:absolute;left:18.25%;top:10.2%;width:65.25%;height:66.25%;overflow:hidden;border-radius:1.1% 1.1% .35% .35%;background:#fff;clip-path:polygon(.7% 0,99.6% 0,100% 100%,0 100%)}
.laptop-screen img {display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
.demo-billing-view,.demo-dashboard-view {position:absolute;inset:0}
.demo-dashboard-view {animation:dashboard-view 24s infinite}
.demo-dashboard-scroll {height:200%;animation:dashboard-scroll 24s infinite}
.laptop-screen .demo-dashboard-scroll img {height:50%}
.demo-fixed-sidebar {position:absolute;inset:0;clip-path:inset(0 86.2% 0 0)}
.demo-row-highlight {position:absolute;left:16%;right:2%;top:59.4%;height:5.5%;border:1px solid #b89b59;background:rgb(197 160 89 / 12%);border-radius:3px;opacity:0;animation:billing-row 24s infinite}
.demo-cursor {position:absolute;width:2.4%;height:auto;overflow:visible;filter:drop-shadow(0 1px 2px #0006);left:57%;top:45%;animation:demo-cursor 24s infinite}
.demo-click {position:absolute;width:4%;aspect-ratio:1;border:2px solid #c5a059;border-radius:50%;transform:translate(-35%,-35%);opacity:0;animation:demo-click 24s infinite}
.demo-caption {display:flex;align-items:center;justify-content:space-between;gap:24px}
.demo-caption>span {max-width:720px}
.demo-toggle {flex:none}
.laptop-demo.is-paused .laptop-screen *,.laptop-demo.is-offscreen .laptop-screen * {animation-play-state:paused}
@keyframes dashboard-view {0%,59% {opacity:1} 61%,87% {opacity:0} 89%,100% {opacity:1}}
@keyframes dashboard-scroll {0%,10% {transform:translateY(0)} 25%,44% {transform:translateY(-50%)} 54%,100% {transform:translateY(0)}}
@keyframes billing-row {0%,71% {opacity:0} 73%,81% {opacity:1} 84%,100% {opacity:0}}
@keyframes demo-cursor {
  0%,5% {left:57%;top:45%;opacity:1}
  10%,50% {left:91%;top:63%}
  59%,62% {left:6%;top:34%}
  71%,81% {left:39%;top:61%}
  87%,90% {left:6%;top:18%}
  96%,100% {left:57%;top:45%}
}
@keyframes demo-click {
  0%,58% {left:6%;top:34%;opacity:0;scale:.5}
  60% {opacity:.9;scale:1}
  62%,70% {left:6%;top:34%;opacity:0;scale:1.5}
  71% {left:39%;top:61%;opacity:0;scale:.5}
  73% {opacity:.9;scale:1}
  75%,85% {left:39%;top:61%;opacity:0;scale:1.5}
  86% {left:6%;top:18%;opacity:0;scale:.5}
  88% {opacity:.9;scale:1}
  90%,100% {left:6%;top:18%;opacity:0;scale:1.5}
}
@media(max-width:700px) {.demo-caption {align-items:flex-start;flex-direction:column;gap:14px}}
@media(prefers-reduced-motion:reduce) {
  .laptop-screen * {animation:none!important}
  .demo-dashboard-view,.demo-cursor,.demo-click,.demo-row-highlight {display:none}
}