@media (pointer: coarse){
    .content--demo4{
        display:none !important
    }
}
.demo-4{
    --color-text: #fff;
    --color-bg: #fff;
    --color-line: #fff;
    --color-link: #fff;
    --color-link-hover: #fff;
    --color-info: #fff
}
.demo-4,.demo-4 a{
    cursor:none
}
.demo-4 .circle-cursor{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none
}
.demo-4 .circle-cursor--outer{
    width:100vw;
    height:100vh;
    z-index:12000
}
.demo-4 .circle-cursor--inner{
    width:0.75em;
    height:0.75em;
    z-index:11000;
    background:var(--color-text)
}
.demo-4 .grid{
    position:absolute;
    padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;
    padding:calc(1.5em + 42px + 1.5em) 1.5em;
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.demo-4 .grid__inner{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100%
}
.demo-4 .browser-window{
    width:-webkit-calc(100% - 100px);
    width:calc(100% - 100px);
    max-width:960px;
    position:relative
}
.demo-4 .browser-window__bar{
    height:25px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    border:1px solid var(--color-line);
    border-bottom:0;
    border-radius:10px 10px 0 0
}
.demo-4 .browser-window__bar .dot{
    width:11px;
    height:11px;
    border-radius:5px;
    background:var(--color-line);
    margin-left:8px
}
.demo-4 .browser-window__bar .dot:first-child{
    margin-left:12px
}
.demo-4 .browser-window__content{
    border:1px solid var(--color-line);
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:300px;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding:20px;
    position:relative;
    -o-border-image:-o-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);
    border-image:-webkit-gradient(linear, left top, left bottom, from(var(--color-line)), color-stop(50%, var(--color-line)), to(var(--color-bg)));
    border-image:-webkit-linear-gradient(top, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);
    border-image:linear-gradient(to bottom, var(--color-line) 0%, var(--color-line) 50%, var(--color-bg) 100%);
    border-image-slice:1
}
.demo-4 .browser-window__content-right{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex
}
.demo-4 .browser-window__content-right .browser-window__link{
    margin-left:10px
}
.demo-4 .browser-window__link{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:75px;
    height:75px;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.demo-4 .browser-window__link .hamburger{
    display:block;
    width:26px;
    height:18px;
    position:relative
}
.demo-4 .browser-window__link .hamburger span{
    display:block;
    position:absolute;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    width:100%;
    height:2px;
    background:var(--color-text);
    z-index:0
}
.demo-4 .browser-window__link .hamburger span:nth-child(1){
    top:0px
}
.demo-4 .browser-window__link .hamburger span:nth-child(2){
    top:8px
}
.demo-4 .browser-window__link .hamburger span:nth-child(3){
    top:16px
}
.demo-4 .browser-window__link .hamburger span:before,.demo-4 .browser-window__link .hamburger span:after{
    position:absolute;
    content:"";
    display:block;
    top:0;
    height:100%;
    width:0;
    right:0;
    left:auto
}
.demo-4 .browser-window__link .hamburger span:before{
    z-index:1;
    background:var(--color-link);
    -webkit-transition:all 0.15s linear 0s;
    -o-transition:all 0.15s linear 0s;
    transition:all 0.15s linear 0s
}
.demo-4 .browser-window__link .hamburger span:after{
    z-index:2;
    background:var(--color-bg);
    -webkit-transition:all 0.15s linear 0.3s;
    -o-transition:all 0.15s linear 0.3s;
    transition:all 0.15s linear 0.3s
}
.demo-4 .browser-window__link .hamburger span:nth-child(2):before{
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s
}
.demo-4 .browser-window__link .hamburger span:nth-child(3):before{
    -webkit-transition-delay:0.3s;
    -o-transition-delay:0.3s;
    transition-delay:0.3s
}
.demo-4 .browser-window__link .hamburger span:nth-child(2):after{
    -webkit-transition-delay:0.45s;
    -o-transition-delay:0.45s;
    transition-delay:0.45s
}
.demo-4 .browser-window__link .hamburger span:nth-child(3):after{
    -webkit-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    transition-delay:0.6s
}
.demo-4 .browser-window__link .settings-icon{
    width:34px;
    height:34px
}
.demo-4 .browser-window__link .settings-icon__line{
    stroke:var(--color-text);
    stroke-width:5px;
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.demo-4 .browser-window__link .settings-icon__rect{
    stroke:var(--color-text);
    fill:var(--color-bg);
    stroke-width:5px;
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.demo-4 .browser-window__link svg{
    width:30px;
    height:30px
}
.demo-4 .browser-window__link svg path{
    fill:var(--color-text);
    -webkit-transition:all 0.2s ease 0s;
    -o-transition:all 0.2s ease 0s;
    transition:all 0.2s ease 0s
}
.demo-4 .browser-window__link .magnifyer{
    -webkit-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease
}
.demo-4 .browser-window__link:hover svg path{
    fill:var(--color-link);
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.demo-4 .browser-window__link:hover .hamburger span:after,.demo-4 .browser-window__link:hover .hamburger span:before{
    width:100%;
    left:0;
    right:auto
}
.demo-4 .browser-window__link:hover .hamburger span:after{
    z-index:1;
    -webkit-transition:all 0.15s linear 0s;
    -o-transition:all 0.15s linear 0s;
    transition:all 0.15s linear 0s
}
.demo-4 .browser-window__link:hover .hamburger span:before{
    z-index:2;
    -webkit-transition:all 0.15s linear 0.3s;
    -o-transition:all 0.15s linear 0.3s;
    transition:all 0.15s linear 0.3s
}
.demo-4 .browser-window__link:hover .hamburger span:nth-child(2):after{
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s
}
.demo-4 .browser-window__link:hover .hamburger span:nth-child(3):after{
    -webkit-transition-delay:0.3s;
    -o-transition-delay:0.3s;
    transition-delay:0.3s
}
.demo-4 .browser-window__link:hover .hamburger span:nth-child(2):before{
    -webkit-transition-delay:0.45s;
    -o-transition-delay:0.45s;
    transition-delay:0.45s
}
.demo-4 .browser-window__link:hover .hamburger span:nth-child(3):before{
    -webkit-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    transition-delay:0.6s
}
.demo-4 .browser-window__link:hover .settings-icon__line,.demo-4 .browser-window__link:hover .settings-icon__rect{
    stroke:var(--color-link);
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.demo-4 .browser-window__link:hover .settings-icon__group--1 .settings-icon__rect{
    -webkit-transform:translateY(20px);
    -ms-transform:translateY(20px);
    transform:translateY(20px)
}
.demo-4 .browser-window__link:hover .settings-icon__group--2 .settings-icon__rect{
    -webkit-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    transform:translateY(-20px)
}
.demo-4 .browser-window__link:hover .settings-icon__group--3 .settings-icon__rect{
    -webkit-transform:translateY(25px);
    -ms-transform:translateY(25px);
    transform:translateY(25px)
}
.demo-4 .browser-window__link:hover .avatar__head{
    -webkit-transform:translateY(-3px);
    -ms-transform:translateY(-3px);
    transform:translateY(-3px)
}
.demo-4 .browser-window__link:hover .magnifyer{
    -webkit-transform:rotate(88deg);
    -ms-transform:rotate(88deg);
    transform:rotate(88deg);
    -webkit-transform-origin:45% 43%;
    -ms-transform-origin:45% 43%;
    transform-origin:45% 43%
}
body.tutorial{
    --color-text: #fff;
    --color-bg: #fff;
    --color-line: #fff;
    --color-link: #fff;
    --color-link-hover: #fff;
    --color-info: #fff;
    opacity:1 !important;
    background-color:var(--color-bg)
}
.tutorial .page{
    position:absolute;
    padding:-webkit-calc(1.5em + 42px + 1.5em) 1.5em;
    padding:calc(1.5em + 42px + 1.5em) 1.5em;
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.tutorial .page__inner{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100%
}
.tutorial .page,.tutorial .page a{
    cursor:none
}
.tutorial .cursor{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none
}
.tutorial .cursor--small{
    width:5px;
    height:5px;
    left:-2.5px;
    top:-2.5px;
    z-index:11000;
    background:var(--color-text)
}
.tutorial .cursor--canvas{
    width:100vw;
    height:100vh;
    z-index:12000
}
.tutorial .nav{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%)
}
.tutorial .link{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:75px;
    height:75px;
    margin:0 5px;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.tutorial .settings-icon{
    display:block;
    width:40px;
    height:40px
}
.tutorial .settings-icon__line{
    stroke:var(--color-text);
    stroke-width:5px;
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.tutorial .settings-icon__rect{
    stroke:var(--color-text);
    fill:var(--color-bg);
    stroke-width:5px;
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.tutorial .link:hover .settings-icon__line,.tutorial .link:hover .settings-icon__rect{
    stroke:var(--color-link);
    -webkit-transition:all 0.2s ease 0.05s;
    -o-transition:all 0.2s ease 0.05s;
    transition:all 0.2s ease 0.05s
}
.tutorial .link:hover .settings-icon__group--1 .settings-icon__rect{
    -webkit-transform:translateY(20px);
    -ms-transform:translateY(20px);
    transform:translateY(20px)
}
.tutorial .link:hover .settings-icon__group--2 .settings-icon__rect{
    -webkit-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    transform:translateY(-20px)
}
.tutorial .link:hover .settings-icon__group--3 .settings-icon__rect{
    -webkit-transform:translateY(25px);
    -ms-transform:translateY(25px);
    transform:translateY(25px)
}