.single-div-demo{width:100%;max-width:100%;overflow:hidden}.article-page .columns__left,.article-page .columns__content,.article-page .article-segments,.article-page .segment{box-sizing:border-box;min-width:0;max-width:100%}.article-segments pre{box-sizing:border-box;color:#e8edf7;tab-size:4;white-space:pre;background:#171b26;border:1px solid #30384a;border-radius:12px;max-width:100%;margin:28px 0;padding:48px 22px 22px;font-size:14px;line-height:1.65;position:relative;overflow-x:auto;box-shadow:0 10px 28px #171b2624}.article-segments pre:before{content:"CODE";color:#9ca9c3;letter-spacing:.12em;border-bottom:1px solid #30384a;padding:9px 16px;font:600 11px/1.4 Montserrat,sans-serif;position:absolute;top:0;left:0;right:0}.article-segments pre:has(code.language-less):before{content:"LESS"}.article-segments pre:has(code.language-css):before{content:"CSS"}.article-segments pre code{color:inherit;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:inherit;background:0 0;border:0;padding:0}.article-segments pre::-webkit-scrollbar{height:10px}.article-segments pre::-webkit-scrollbar-track{background:#202635;border-radius:0 0 12px 12px}.article-segments pre::-webkit-scrollbar-thumb{background:#66738f;border:2px solid #202635;border-radius:10px}.single-div-demo .melody{background:linear-gradient(#0000 0% 16.5%,#c9c9c9 16.5%,#0000 16.5% 28%,#c9c9c9 28% 29%,#0000 29% 40.5%,#c9c9c9 40.5% 41.5%,#0000 41.5% 53%,#c9c9c9 53% 54%,#0000 54% 65.5%,#c9c9c9 65.5% 66.5%,#0000 66.5% 78%,#c9c9c9 78% 79%,#0000 79% 100%);width:570px;height:450px;margin:0 auto;position:relative}.single-div-demo .melody:before{content:"";background:#000;border-radius:50%;width:16%;height:60px;position:absolute;top:360px;left:20.3%;transform:rotate(-29deg);box-shadow:12.3rem 2.2rem #000}.single-div-demo .melody:after{content:"";border:1rem solid #000;border-bottom:0;width:30.1%;height:288px;display:block;position:absolute;top:42px;left:33%;transform:skewY(-20deg)}.insta-size-control{margin:30px 0 8px;font-weight:600;display:block}.insta-size-slider{accent-color:#efac32;width:100%}.insta_wrapper{justify-content:center;align-items:center;min-height:350px;display:flex;overflow:hidden}.insta_wrapper .insta{width:var(--insta-size,200px);aspect-ratio:1;background:radial-gradient(circle,#fff 19%,#000 19% 26%,#fff 26% 33%,#0000 33% 100%),linear-gradient(#000 0% 34%,#fff 34% 38%,#000 38% 100%);border-radius:20%;flex:none;max-width:100%;height:auto;position:relative;overflow:hidden}.insta_wrapper .insta:before{content:"";background:#fff;border-radius:20%;width:20%;height:20%;position:absolute;top:7%;right:8%}.insta_wrapper .insta:after{content:"";background:linear-gradient(90deg,#fff 0% 25%,#000 25% 37.5%,#fff 37.5% 62.5%,#000 62.5% 75%,#fff 75% 100%);width:18%;height:25%;position:absolute;top:0;left:10%}.eyeball_wrapper{background:#c2c2c2;margin:20px 0;padding:20px 0 40px;overflow:hidden}.eyeball_wrapper .eyeball{background-image:radial-gradient(circle at 287px 111px,#fff 0% 40%,#eee 70%,#919191 100%);border-radius:50%;width:400px;height:400px;margin:20px auto 80px;display:block;position:relative}.eyeball_wrapper .eyeball:before{content:"";background-color:#0000;background-image:radial-gradient(circle at 168px 125px,#fff 0% 6%,#0000 6% 100%),radial-gradient(circle at 163px 129px,#ffffff4d 0% 10%,#0000 10% 100%),radial-gradient(at 123px 99px,#ffffff4d 0% 30%,#0000 30% 100%),radial-gradient(at 118px 99px,#242424 0%,#000 30%,#0000 30% 100%),radial-gradient(at 115px 99px,#fff 0% 30%,#0000 30% 100%),radial-gradient(at 109px 114px,#0000 58%,#87b6b8 71%),linear-gradient(48deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(75deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(102deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(134deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(166deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(198deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(230deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(262deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(294deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(326deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),linear-gradient(368deg,#0000 41%,#ffffff4d 43% 43%,#0000 44%),radial-gradient(at 115px 99px,#fff 0%,#a9e0ff 20%,#0000 60% 100%),radial-gradient(circle at 127px 102px,#ffffff63 30%,#0691e03d 88%),radial-gradient(circle at 220px -23px,#fff 18%,#00a3ff 108%);background-position:-23px -52px,14px -31px,14px -31px,12px 2px,8px 3px,0 0,-8px 0,24px 0,56px 0,88px 0,137px 26px,130px 85px,40px 85px,20px 115px,-40px 135px,-60px 75px,0 35px,0 0,0 0,0 0;background-repeat:no-repeat;background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,103% 102.5%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,100% 100%,100% 100%;background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;border-radius:48% 53% 47%;width:53%;height:57%;display:block;position:absolute;top:50px;left:156px;box-shadow:-3px 8px 8px #c2c2c270}.eyeball_wrapper .eyeball:after{content:"";border-radius:50%;width:330px;height:31px;display:block;position:absolute;top:390px;left:30px;box-shadow:0 50px 20px #00000057}.pizza_wrapper{background:#83543a;margin:20px 0;padding:20px 0;overflow:hidden}.pizza_wrapper .pizza{background:#fff;border:10px solid #c58a53;border-radius:50%;width:300px;height:300px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 0 9px 6px #00000017}.pizza_wrapper .pizza:before{content:"";background-color:#0000;background-image:radial-gradient(circle at 233px 92px,#ffad62 0%,#f34e00 7%,#0000 7%),radial-gradient(circle at 275px 112px,#c9c6c6 4%,#0000 4%),radial-gradient(at 207px 126px,#9fb30e 3%,#0000 3%),radial-gradient(at 245px 57px,#9fb30e 3%,#0000 3%),radial-gradient(circle at 187px 100px,#fff 3%,#0000 3%),radial-gradient(circle at 279px 80px,#fff 3%,#0000 2%),radial-gradient(circle at 230px 132px,#dd0505 4%,#0000 3%),radial-gradient(circle at 268px 43px,#fc0000 4%,#0000 3%),linear-gradient(90deg,#c9c6c6 0% 100%),radial-gradient(circle at 293px 142px,#ffd770 39%,#ebb816 39%);background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,270px 104px,0 0;background-repeat:no-repeat;background-size:100% 100%,100% 75%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,3% 15%,100% 100%;background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;width:100%;height:50%;position:absolute;top:-29%;transform:rotate(62deg);box-shadow:0 0 9px 6px #00000017}.pizza_wrapper .pizza:after{content:"pizza";text-align:center;width:100%;font-family:Montserrat,sans-serif;font-size:66px;position:absolute;top:50%}@media (width<=650px){.article-segments pre{border-radius:8px;margin-left:-10px;margin-right:-10px;padding:44px 16px 18px;font-size:12px}.single-div-demo_melody{height:338px}.single-div-demo .melody{transform-origin:top;margin-left:-285px;left:50%;transform:scale(.75)}.eyeball_wrapper .eyeball{transform-origin:top;margin-bottom:-20px;margin-left:-200px;left:50%;transform:scale(.75)}.pizza_wrapper{box-sizing:border-box;height:255px}.pizza_wrapper .pizza{transform-origin:top;margin-left:-160px;left:50%;transform:scale(.75)}}@media (width<=550px){.single-div-demo_melody{height:293px}.single-div-demo .melody,.eyeball_wrapper .eyeball,.pizza_wrapper .pizza{transform:scale(.65)}.eyeball_wrapper{box-sizing:border-box;height:320px}.eyeball_wrapper .eyeball{margin-top:0}.pizza_wrapper{height:226px}}@media (width<=450px){.single-div-demo_melody{height:248px}.single-div-demo .melody,.eyeball_wrapper .eyeball,.pizza_wrapper .pizza{transform:scale(.55)}}@media (width<=400px){.single-div-demo_melody{height:203px}.single-div-demo .melody,.eyeball_wrapper .eyeball,.pizza_wrapper .pizza{transform:scale(.45)}.eyeball_wrapper{height:240px}.pizza_wrapper{height:162px}}